(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะเด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไร พิมพ์ Thunkable Thunkable ของเราThunkable แล้วก็ให้ล็อกอินเข้า จำได้นะ Password ตัวเองอะไรนะ แล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google จะใช้ตัวนี้ เข้าผิดอันเสียบ่ สงสัยจะไม่ใช่ตัวนี ้งง ๆ นะ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย แต่ผมจะออกก่อน Sign Out เข้าไม่ถูกอันน่ะเข้าใหม่ มีหลายตัวจำไม่ได้ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเองล็อกอิน Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create New App เลือก New Appตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไร ส่วนใหญ่ ถ้าแอปพวกมีล็อกอินเข้าไป มันก็จะเป็น Category ก่อนนะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของล็อกอินที่เขาสร้างไว้นะ เป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไร จัดวางอย่างไรนะคะ มันก็จะมีส่วนของUsername ใช่ไหมลูก แล้วก็ปุ่มล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไรให้มัน... เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้ คือ ใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column"ขี้เกียจ พิมพ์ -lขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไทl C-o-l-u-m-eu-m-e c-oไม่มี Column หรือ ทำไมล่ะ ๆ มี Component ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไง ใช่ไหม จะมีให้ไหมล่ะ รูปคนน่ะ Thunkable กับ... เราหานะคะ เราหาโลโก้รูปแบบแบบนี้ ไอ้อะไรนะ เอาแบบนี้ก็ได้ Icon Login  Search คำว่า "Icon" แล้วก็ "Login"นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free นะ เราเลือกว่าฟรีนี่ใช่ไหม ไหนบอกว่าฟรี อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Free Download ด้วย เดี๋ยวติดลิขสิทธิ์อีก Free Download โอเค หาใหม่ ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิม ก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo login ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอิน ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไป จะใช้ล็อกอิน หรือใช้คำว่าอะไรดี User Login แล้วกันนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ Label คะ เป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก Label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า "Login" ล็อกอินเข้าไป l-og-i-n สัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์ เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้ เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข้ม-อ่อน สีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Text Align นะคะ คือ จัดกึ่งกลาง โอเค ขนาดตัวอักษร นะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไหร่ 30 โอเคไหม โอเคนะ นะคะ ได้ส่วนของ User login แล้ว ได้ส่วนของ Label แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืมLabel Label อันนี้ ิออันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ  บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเราไปแก้โค้่ดน่ะค่ะ เราก็จะได้รู้ Image Image ก็เหมือนกัน Image Icon Image ของเราก็คือ Icon login Icon login l-o-g-i-n นะคะ ปุ๊บ1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Text Field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่า "Text Field" นะลูก เห็นหรือยัง ใครหาไม่เจอ ตรง Component เราน่ะ ไปที่... ถ้าหาไม่เจอพิมพ์ Text Field หรือ Text input ของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะคะเด็ก ๆ อันที่ 1 อันที่ 2 ต่อกัน เรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไรให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะเว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Test Input Text Input อันแรก Input 1 นี่เป็นอะไร Text input 1 ตัวบนนะคะ ใส่ Username Text Input 1 นี่คือ User Name นะ Text Input Username นะคะ อันที่ 2 เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไร นะคะ เวลา Coding เราจะได้รู้นะ เราไปแก้ถูกอันหรือเปล่า Text Input อันที่ 2 ชื่อว่าPassword บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งนะคะ เราได้ 2 ส่วนแล้วนะ ทีนี้ใน Username นะคะ ใน Username มันมีอะไรอยู่ด้วย เห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ในตัวอย่าง กดผิด ขอโทษ ในตัวอย่างเห็นไหมคะ มันมีไอคอนรูป... เป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเห็นไอคอนนี้ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ใส่เข้าไปในนี้ใส่ได้ไหม เดี๋ยวให้ใส่เข้าไปใน Text ไหมล่ะ ไม่ให้ใส่เข้าไปข้างในหรือไม่ให้ใส่ก็วางข้าง ๆ ได้ ก็คือเราก็มี Image เล็ก ๆ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะ เด็ก ๆ อย่าลืม มีรูปอะไร รูปคนกับรูปกุญแจน่ะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจ หาต่อ ๆ  แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจ ไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า "Lock" เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูป หาใส่ด้วยนะครับ อันที่ 1 รูปแรก Image1 Picture เลือกอัปโหลดไฟล์ Login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส ่ก็เพิ่มอัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้ แล้วก็Forget Passwordมี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีปิ๊ก ชื่อว่า Check box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวางให้เราได้ Check box แล้ว แล้วมีอะไรต่อจาก Check box ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า "Remember me" ไว้ ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember m-e-b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยนluสีฟอนต์ก่อน เห็นไหมคะ  เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีก มีอะไรอีก กดผิด แล้วก็มี Forgot password Forgot Password มันเป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... Label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมน่ะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า... พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember meมีความรู้สึกว่ามันใหญ่ไป มันจะใส่ Forgot password ไม่ได้ ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot" นะคะ F-o-r For got g-o-t gotจำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ Forgot แล้วก็ Password Forgot แล้วก็ PP-a-s-s Pass w-o-r-d แล้วก็ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กันไอ้นี่ล่ะนะ ไอ้ Remember me ก็คือ 14 นะคะ ทำไซซ์ให้เท่า ๆ กัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่างตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ Color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่มButton Login เด็ก ๆ อยากได้ปุ่มแบบไหน เป็นสี่เหลี่ยม หรือเป็นโค้ง ดูนะคะ เราไปเลือก Button คลิก Button แล้วลง ด้านล่างสุดใช่ไหม Button นี้ พิมพ์ข้างใน พิมพ์คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N สีเอาสีอะไร ไปที่ Background นะ เลือกสีค่ะ สีปุ่ม ปุ่ม ๆ ๆ มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบฟอนต์ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยแก้ตรงไหนคะ Border ใช่ไหมคะ Radian น่ะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับค่า Radion เลย โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไป แล้วกด login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ในบล็อกไง ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำ ตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่ Label คำว่า "User Login" นะลูกนะ เห็นหรือเปล่า เห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ Text Input ลาก Text Input ไปวาง 2 อัน 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มา Label ข้างในก็เปลี่ยนเป็น User Login มันตรงส่วนเชื่อน่ะ มันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้ mt อะไรหว่า จำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกText Input นี่ อันที่3 กับ 4 นี่ เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ตรง 2 อันนี้นะคะ 3 กับ 4 อันที่3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบ ตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อม เชื่อมฐานข้อมูลน่ะ ที่เข้าใช่นะมันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์"Firebase" นะคะ มันจะเป็นตระกูลของ Google นี่ล่ะ F-i-r-e-b-a-s-e Firebase อยู่ไหน นี่ ๆ Firebase.google.com ให้เราหา Firebase เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebase หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Login ด้วยบัญชี Google ตั้งแต่ตอนที่เราใช้ตัวนััน ให้ไปเลือกอะไร เลือก Create a New project ค่ะ เห็นไหมคะ สร้าง project ตรงช่องนี้นะเด็ก ๆ นะ enter your project name นี่ เราก็พิมพ์ชื่อ Project เข้าไปอะไรนะ Firebase อะไรนะ Login นะ ทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งาน แล้วก็กด Continue มันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ For your firebase project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถามว่าเราอยู่ไหน เราก็ต้องเลือกนะ หา Thailand นะลูก T-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก Analytic Location แล้วก็ติ๊ก Accept นะ แล้วก็ Create Project ได้เลย มันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า your new project is ready แล้ว Login หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ คลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มี Analytic มี Monitor มี Aีมี endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authen คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก Get Start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ anonymous การระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์ อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้ว แล้วใช้เบอร์โทรศัพท์ เป็นตัวให้เข้าก็ไปคลิกที่ เราก็เลือก Enable เหมือนกัน นึกออกนะคะ  ให้นึกถึงหลักว่าเราใช้การ Login ด้วยตัวไหน ถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen  ที่ เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช่ไหม ตรงAnonymous เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาด  ตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้วให้เรามาตรงนี้ Project overview แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project setting นะใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างYour App เห็นไหมคะ แอปของคุณ มันเพราะตอนนี้มันบอกว่าเรา... เอ้ย ยังไม่มีแอปในโปรเจกต์นี้ เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี IBS แล้วก็มีรู้ Printer เครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web App นี่คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไร อันไหนไม่ใช้เดี๋ยวจะปิดแล้วนะ ลองพิมพ์ชื่อแอปเราลงไปนะคะ E-Book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะ เข้าใจนะ พิมพ์ลงไปนะคะ E...  เดี๋ยวเพื่อความชัวร์ เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-Book นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะ พิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะ แล้วก็พิมพ์ลงไป ดูชื่อของตัวเองเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนี่นะคะ เสร็จแล้วกด Register App ได้เลย ไหนนะ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่ มันจะมีโค้ดมา เห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปฯ ไปวางในแอปเรา จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า... ไม่แน่ใจจะเห็นไหมนี่มันใช้ว่าอะไรหว่าอันนี้ Component Sign In ไม่เจอมันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data Viewer List data Viewer data assent setting นะคะ หาก่อนนะ Components all ten singinmต้องการหา Signinไม่ใช่ My data Source หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ update อย่างไร แป๊บหนึ่งนะ อาจจะต้อง Update Thunkable เราเสียหน่อย  มันจะใช้เขาเรียกว่าอย่างไรล่ะใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอเทสต์ตัวนี้ก่อน แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ อยากรู้ มันก็ขึ้น Thunkable เหมือนกันนี่นะ เพราะมัน Components มันมีไม่ครบ Solution Solution เดี๋ยวนะ Integration Community เราจะต้อง... Using Thunkable Lite App ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีในแอปเรา ใน Thunkable Tool ที่ Sign inมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้อะไรได้ แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... Back to Editing เดี๋ยวเรามาลองที่ Box ของเรา ตัวแรกเลย ก็คือ Text Input 1 ไปที่ Text Input 1 Username ใช่ไหม ไปที่ Text input 1เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นพิมพ์นะ Set TextInput Text to Username TextKeyboard Type ฺBorder ันจะต้องเป็นพิมพ์ เพระาฉะนั้น Chenคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ เลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ้อความ ดูสิ แล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเคถูก เห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 หรือยัง ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้ว ตัวแรกที่เราเริ่ม ก็คือ... เดี๋ยวลบก่อนนะ เมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ Test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บ เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ช่องนี้ี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้Text Input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้งไหม อีกอันดู มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะสิ่งแรกก็คือเมื่อ Text Input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือมันจะต้องให้ Set ค่าของ Text Input น่ะ จะซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหมText Inputจะต้องทำงานนะคะ ตั้งเงื่อนไขให้มัน อะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหมคือ ตัวที่ 2 ของเรา Password ก็เหมือนกัน เมื่อคลิกที่ Password มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input Password when click don't click คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...Set Text นี้เป็นซ่อน ซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วควา่มจริงเราต้องเลือกอันนี้ Set Text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์นะ Keyboard Type เสร็จแล้วตรงนี้ เป็น Default Default กำหนดเป็นค่าเริ่ม เห็นไหมSet Default เราไม่ได้ Set efault ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text Input Password ก็เป็น Set มันต้องซ่อนสิ Password ไม่ให้โชว์ ต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ Password ตามหลัก ต้องไม่แสดงนะ User น่ะแสดง User แสดงอย่างนี้ได้ แต่ Password มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไร To Default บ่ Password น่าจะเป็น To Default หน้าจะเป็น To หรือ To อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก Password เดี๋ยวนะ แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงเป็นซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อนจาก Textให้มันซ่อน ได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะ นี่เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text Input เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Type keyboard ให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่านี่ น่าจะใช่ กำหนดตัวแปลให้เก็บค่าของ Text PasswordText Username Text Password ในบล็อกที่ 2 ไอ้บล็อกที่ 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา ไปที่ Text ไปที่ Textทำให้เป็นตัวใหญ่ทำให้ Textไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ สิ่งที่ต้องทำต่อ ขาดไปไหนนะ Sign In ขึ้นมาแล้ว เจอแล้ว เอ๊ะ แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign In มันจะต้อง... เขาบอกว่าให้มันอยู่ที่บล็อกหรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sing in Email Sign in hello Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ Do Sign Up ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกันน่ะ ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ต้องเอาใส่ไว้ในไหน ไม่เหมือนกันนะ ใช้ไม่เหมือนกันน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไร ให้ลงทะเบียนโดยใช้ Email หรือ Passwordไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป(ปี้) ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable Xเอามาจากไหนนะ Thunkable X  มันจะเพิ่ม Sign In ได้ี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้าThunkable X ก็คือใช้ iOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ Release ใช้ไม่ได้ต้องเป็น... ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น... มันไม่ได้เป็น Thunkable X น่ะ มันไม่ให้ใช้ฟีเจอร์นี้ Sign In น่ะ ถ้า Thunkable X น่ะ มันจะเป็น... ก็คือเราก็จะมาก็อป Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป็น Thunkable X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้ อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Firebase Thunkable เรามันเป็น Thunkable ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ตอนนี้มันเป็น Thunkable ธรรมดา เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเอง แค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยแล้วนะคะ (นักศึกษาชาย) นักเรียนทั้งหมดทำความเคารพ (อาจารย์สุธิรา) Thunkable X ทำไมไม่อัปฯ ให้เราล่ะ