(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเราแล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะ แล้วเราก็ Login เข้าที่เราสร้างไว้นะ ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ นะ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อน Sign Out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัว จำไม่ได้ เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้ โพรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติ ส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไป มันก็จะเป็น Category นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของ Login ที่เขาสร้างไว้นะ เป็นตัวอย่าง ว่า นี่ ถ้าเขาทำให้ให้มีลักษณะแบบนี้ นี่ มีช่องกรอก ๆ นี่ เราจะทำอย่างไร จัดวางอย่างไรนะคะ มันก็จะมีส่วนของ Username ใช่ไหมลูก Password Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร นี่ ให้มัน นี่ เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่เรียงแล้ว โย้ไปโย้มา เคลื่อนที่ไปมา วิธีการนี้ใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Colum" พิมพ์ค่ะ ขี้เกียจ Search C-o-l ขี้เกียดเลื่อนไอ้นี่หา ก็จะพิมพ์นะคะ พิมพ์ Column ลงไป c-o ทำไมช้าจัง C-o-l-u-m-e u-m-e c-oไม่มี Column หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่ง นึกออกนะ จัดตำแหน่ง ตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูป รูปเหมือนคนอย่างนี้ใช่ไหม จะมีให้ไหม รูปคนน่ะ Thunkable กับ... เราหานะ หาโลโก้ รูปแบบนี้ไอ้ อะไรนะ อะไรนะ เอาแบบไหน เอาแบบนี้ก็ได้ หรือเอาอย่างนี้ นึกออกนะ เขาเรียกว่าอะไร Icon Login Login Search คำว่า "Icon" แล้วก็ Login นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหน หาเอา สมมติจะเอาตัวนี้ ฟรีหริือเปล่านี่ ดูด้วยนะ Free Free Download Image Standard Free Free นะ เราเลือกว่า Free นะนี่ ใช่ไหมไหนบอกว่า Free อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Free download ด้วย เดี๋ยวติดลิขสิทธิ์อีก free download โอเค หาใหม่ ไม่ได้ ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิม ก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging โอเค ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไป สิ่งที่เราจะต้องมีใน Login ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ Login เข้าไป จะใช้ Login หรือใช้คำว่าอะไรดี User Login แล้วกันนะ นะคะ เมื่อเราได้รูปแล้ว สิ่งที่เราจะมีในบรรทัดต่อมา ก็คือ lable ค่ะ ใช่ไหม เป็น Label นะคะ เด็ก ๆ นี่ ในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้าง ลาก label มาวาง อยู่ใต้รูปใช่ไหม แล้วตรง text  นะ เราก็แก้เป็นอะไรUser พิมพ์คำว่า "User" แล้วก็คำว่า Login เข้าไป l-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้ว ให้วาง Label นะคะ เพื่อจะให้พิมพ?ข้อความคำว่า "Login" ลงไปนะ รูปแบบ ด็ก ๆ ลองเลือกนะคะ รูปแบบ font เด็ก ๆ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Text Align นะคะ คือ จัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ นะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไร 30 โอเคไหม โอเคนะ นะคะ ได้ส่วนของ User login แล้ว ก็คือส่วนของ Label แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อันนี้อย่าลืมใส่ชื่อ จะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเวลาเราไปแก้ code น่ะค่ะ เราก็จะได้รู้ Image Image ก็เหมือนกัน Image Icon Image ของเรา ก็คือ Icon login icon login l-o-g-i-n นะคะ ปุ๊บ 1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Text Field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่ เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้นะคะ กรอบขาว ๆ 2 อันนี้เราจะใส่ส่วนที่เรียกว่าText Field นะลูก เห็นไหมคะ  เห็นหรือยัง ใครหา Text Field ไม่เจอ ไม่ดตรง Component เราน่ะ ไปที่...ถ้าหาไม่เจอพิมพ์ text feelหรือ Text inputของ Thunkable มันใช้ Text Inputนะคะ เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมาทั้ง 2 อันนะคะเด็ก ๆ อันที่ 1 อันที่ 2 ต่อกัน เรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไร ให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Test Input text input อันแรก Input1 นี่ เป็นอะไรเอ่ย ตัวบนนะคะ Text Input1 มันจะเป็นใส่ Username TextInput 1 นี่คือ User Name นะ Text Input Username นะคะ อันที่ 2 เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไรนะคะ เวลา Coding เราจะได้รู้ นะ เราไปแก้ถูกอันหรือเปล่า Text Input อันที่ 2 ชื่อว่า password บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้ง นะคะ เราได้ 2 ส่วนแล้วนะ ทีนี้ ใน Username นะคะ ใน Username นี่ มันมีอะไรอยู่ด้วย เห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ในตัวอย่าง กดผิด ขอโทษ ในตัวอย่าง เห็นไหมคะ มันมีไอคอน รูปเป็นรูปคนกับรูปกุญแจนะ เราจะให้มันเห็น icon นี้ ทำอย่างไร ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ใส่เข้าไปในนี้ ใส่ได้ไหม ให้ใส่เข้าไปนี่ เดี๋ยวให้ใส่เข้าไป Text ไหมล่ะ ไม่ให้ใส่เข้าไปข้างใน ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็มี image เล็ก ๆ นี่ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะ เด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจนะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจหาต่อ หาต่อ แม่กุญแจ แม่กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจ ไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า Lock เอาตัวนี้แล้วกัน โอเค เจอตัวไหน เอาก่อนล่ะ โอเคนะคะ ได้รูปแล้ว ได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูป หาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image1 Image 1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่า ก็ขยาย ย่อ ขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา  โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สี ใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของ เดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้ เห็นไหมคะ กับ forget password มี Button 1 อันนะคะ ปุ่มกด และก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊ก เห็นไหมคะ ชื่อว่า Check box เห็นไหมคะ เด็ก ๆ เห็น CheckBox ไหม นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง อันนี้เราได้ chack box แล้ว 1 อัน แล้วมีอะไรต่อจาก Checkbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า "remember me" ไว้ ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember m-e-m-b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font สี Font ก่อน จะได้เห็น เห็นไหมคะ เห็นหรือเปล่า อะไรอีกนะ มีอะไรอีก กดผิดอยู่เรื่อยเลย แล้วก็มี forgot password Forgot Password นี่ มันเป็นเขาเรียกว่าอะไรล่ะ เป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... label นั่นล่ะ แล้วตอน เขาเรียกอะไรนะ ตอนเชื่อมนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า พื้นที่ ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me ก่อนนะคะ มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ forgot password ไม่ได้ไง 18 ใหญ่ไป ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่ง เราจะใช้คำว่า "Forgot" นะคะ f-o-r for got g-o-t got จำไม่ได้ ช่วงนี้สมงสมองไม่ค่อยจำ forgot แล้วก็ F-o-r-g-o-t แล้วก็ Password Forgot แล้วก็ P P-a-s-s Pass W-o-r-d แล้วก้ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กับไอ้นี่ล่ะนะ ไอ้ Remember me นี่ล่ะ ก็คือ 14 นะคะ ทำไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยม หรือเป็นโค้ง ดูนะคะ เราไปเลือก botton ค่ะ คลิก button แล้วลากมาวางด้านล่างสุดใช่ไหม Button นี้ พิมพ์ข้างในว่า "Login" นะคะเด็ก ๆ พิมพ์คำว่า Login เข้าไป L-O ตัวใหญ่เลย L-O-G-i-n Login สี เอาสีอะไร ไปที่ Background นะ Background เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพู อยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้ อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย จำได้นะ บอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radiance  น่ะ แก้ตรง Radiance นะ ความโค้งมนของวัตถุนะคะ ขึ้นอยู่กับค่า Radiance เลย โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรใช่ไหม ทำให้ตัว Login นี่ มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไป แล้วกด login เข้าไปนี่ มันจะเอาไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ตอนเราไปใน Block ไง ในโค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ label คำว่า user login น่ะ ใช้ Login ทำ นะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4ช่องที่ 3 กับ 4 ใช้ text input เห็นไหม ลาก Text Input ไปวาง 2 อัน 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มาเอา Label วางเป็นอันที่ 2 ข้างใน ก็เปลี่ยนเป็น User Login เหมือนตัวอย่างนะ มันตรงส่วนการเชื่อมน่ะ มันมีหลายตัวนะคะ เขาบอก บางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้ mt อะไรนะ จำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อน ทำองค์ประกอบให้เสร็จ อันต่อมา อันนี้ เลือกอันนี้ลูก text input นี่ อันที่3 กับ 4 นี่ 3 กับ 4 นี่ เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ ตรง 2 อันนี้ นะคะ 3 กับ 4 อันที่3 กับ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้ว ทีนี้ สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช่นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ คำว่า "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ F-i-n-d B-a-s-e Firebase อยู่ไหนนะ นี่ ๆ Firebase.google.com นะคะ ให้เราหา Firebase.google.com นะเด็ก ๆ เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้อง กด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase  หรือยังให้เรากดตัวนี้นะคะ GetStart นะคะ เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เรา ด้วยบัญชี Google เพราะเรา Login เข้าบัญชี Google ไปแล้ว ตั้งแต่ตอนที่เราใช้ตัวนัั้น ให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง project ใหม่ คลิก 1 ครั้ง ตรงช่องนี้นะเด็ก ๆ นะ นี่ 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 แล้ว คลิก Continue ค่ะ Login หรือยัง บางทีต่อง Login ก่อน มันขึ้น อย่างนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือ นี่ ๆ มันจะมี Build มี Release มี Monitor มี ีมี endgrade เราไปคลิกที่ไอ้รูป...รูป ไอ้เหมือนสามเหลี่ยม ลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่  Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้ สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่า ไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ aonymous การระบุตัวตนน่ะ ที่เปิด Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์ อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้า ก็จะคลิกที่โทรศัพท์ เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน หรือ ถ้าสมมติเมื่อกี้นี้ Login ผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่เราใช้ในการ Login เราใช้ 2 สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช้ไหม ชื่อ Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดู ตรง Build มันจะขึ้นว่า สถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้วให้เรามาที่ตรงนี้  Project Overview overvieแล้วเลือก Project SettingNo No Noมันจะเข้ามาที่หน้าที่ Project setting นะ ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วมาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณ มันเพราะตอนนี้มันบอกว่าเรา ยังไม่มีแอปในโพรเจกต์นี้ เราก็ต้องไปที่แอปของเรา คลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี ids แล้วก็มีรูปเหมือน Printer แล้วก็เหมือนลูกศรเครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web app นี่ คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ E-Book ถูกไหมคะ มันจะใช้ว่าอะไร เดี๋ยวอันไหนไม่ใช้จะปิดแล้วนะ ลองพิมพ์ชื่อ ชื่อ app เราลงไปนะคะ E-book นะคะ เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะ เข้าใจนะ พิมพ์ลงไปนะคะ E เดี๋ยว เพื่อความชัวร์ เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-book เดี๋ยวว่าไม่รู้จักชื่อนี้นะคะ  ให้ดูชื่อที่ตัวเองพิมพ์นะ พิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะ แล้วก็พิมพ์ลงไป โอเค เช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ E-book ตามแม่นะ ดูว่าชื่อตัวเองพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะ เสร็จแล้วกด Register App ได้เลย ไหนนะ ไม่ใช่สิ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้าง นี่ ๆ อยู่ข้างบนนี่ มันจะมี code มา เห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อบไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า ไม่แน่ใจ จะเห็นไหมนี่ มันใช้ว่าอะไรนะ เวอร์ชันนี้ Component Sign in Sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer List ไม่ใช่ Data Viewer Rating data  Accent setting นะคะ หาก่อนนะ Components Authen Sign in ต้องการหา Sign in Loading Location ไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 ThunkableX ขอ Search ตัวนี้อีก 1 ตัวก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ update อย่างไร เดี๋ยว ๆ แป๊บหนึ่งนะ อาจจะต้อง Update Thunkable เราสักหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอ Test ตัวนี้ก่อนนะ แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ อยากรู้ มันก็ขึ้น Thunkable เหมือนกันนี่นะ เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration Commodity Doc Resource Login Logout ไม่ใช่น่ะ เราจะต้อง Using Taskable Live App ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่า เราจะกอบ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา ก็คือ Tool ที่ Signin มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ต้องใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือ ตอนนี้ เรากรอกข้อมูลได้ อะไรได้ แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะเก็บในฐานข้อมูลนะ ก็จะให้ไปเก็บ... Back Tool Editing เดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ Text Input 1 username ใช่ไหม เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นพิมพ์นะ set text input text to Text Input Username Text Keyboard Type Border มันจะต้องเป็นพิมพ์ เพราะฉะนั้นCheangคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ ให้ทำอะไร เลือกอันนี้ออกไปก่อน เลือกออกมาวาง เมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไป test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเค ถูก นะ เห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene  Scene 1 ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหม เรากลับไปที่ Block แล้วตัวแรกที่เราเลือก ก็คือ เดี๋ยวลบก่อนนะ บางคนน่าจะไม่ทัน เมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้ แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บ มัน มื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึกถึง เหมือนตอนมาพิมพ์ตรงช่องนี้ นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเราจะกำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้ง Edit Undo เดี๋ยวนะ มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก 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 Text Input คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้... ให้ Set Text นี้เป็นซ่อน ซ่อน แล้วก็ ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้ว ความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์ นะ Keyboard Type พิมพ์ เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่ม เห็นไหม Set Default ไม่ใช่แล้ว Default เราไม่ได้ Set Default ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะต้องเกิดผล ก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ ทำเหมือนกัน Text In Password ก็เป็น Set มันต้องซ่อนสิ password ไม่ให้โชว์นะ ต้องซ้อนใช่ไหม เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง test ดูนะคะ เพราะตอนพิมพ์ password ตามหลัก ก็คือต้องไม่แสดงนะ User น่ะไม่แสดงUser แสดงอย่างนี้ได้นะ เหมือนแสดงชื่อ แต่ password นี่ มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนนี่ กลับไปแก้ ซ่อนอะไรนะ Tool อะไน Tool Default บ่ Password Hint น่าจะเป็น to Default หรือ Tool อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงนะคะ Set Text Input Password เป็นซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่ เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนน่ะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text In... เมื่อกำหนดค่า เมื่อ Text Input ลงไป เมื่อเราคลิกเข้าไปเสร็จ เ set เมื่อเราพิมพ์นะ Keyboard Typekeybrod มีการพิมพ์ปุ๊บนี่ ให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วงของ Text  Password ไม่ซ่อน ขาดค่าอะไรไปค่าหนึ่ง ต้องกำหนดตัวแปรเปล่านะนี่ น่าจะใช่ กำหนดตัวแปล ให้เก็บค่าของ Text Password text username Text Password ไหน Block ที่ 2 BLock 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา whyriablVariable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ List ไปที่ Color เป็นจริง เมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ สิ่งที่จะต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Signin มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Block หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in hello @gmail Signin Email Sign iEmail password Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ เป็นแบบนี้ Sign up Sign Up Do Sign In do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ Features นี้น่ะ ใช้ไม่เหมือนกัน น่ะ ทำไม Faeture น ี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะ ใช้ไม่เหมือนกันน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไร ให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อบ ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in ได้ นี่ไง เขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้า Thunkable X ก็คือใช้ IOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ Release ใช้ไม่ได้ ต้องเป็น ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น มันไม่ได้เป็น Thunkable X น่ะ แล้วมันไม่ให้ใช้ Featureนี้ sign in น่ะ ถ้า Thunkable x น่ะ มันจะเป็น...ก็คือเราก็จะมาก็อป Firebase น่ะค่ะ ก๊อบ Firebase แล้วเอาไปวางใน Signin เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkableเดิมเรานี่ ให้เป้น ThunkableX ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งาน เพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้ อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้ คือ เชื่อมด้วย Firebase ก็ต่อเมื่อ Thunkable เรามันเป็น ThunkableX ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้ เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้ แก้อัปเวอร์ชันมันแค่นั้นเอง มันน่าจะใช้ได้ มันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ... แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยเลยนะคะ (นักศึกษา) นักศึกษาทั้งหมดทำความเคารพ ขอบคุณครับ (อาจารย์สุธิรา)  ThunkableX ทำไมไม่อัปให้เราล่ะ