(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้ว เปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้า Login ทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่านะคะ เพราะฉะนั้น เราจะทำหน้า Login นี่ เราจะทำอย่างไร พิมพ์ Thunkable Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้า จำได้นะ Password อะไร ตัวเองอะไรน่ะ แล้วเราก็ให้ Login เข้า ที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร Password ใช้ Google จะใช้ตอนนี้ เข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อน Sign out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัวจำไม่ได้เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้ Project ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไร ส่วนใหญ่ ถ้าแอป พวกมี Login อะไรเข้าไปนี่ มันก็จะเป็น... Category นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของ Login ที่เขาสร้างไว้นะ เป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้นี่ มีช่องกรอก ๆ นี่เราจะทำอย่างไร จัดวางอย่างไรนะคะ มันก็จะมีส่วนของ เหมือน User name ใช่ไหมลูก Password แล้วก็ปุ่ม Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มัน นี่ เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงาม ไม่ใช่ เรียงแล้วโย้ไปโย้มา หรือเคลื่อนที่ไปมานะคะ วิธีการนี้ คือ ใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" ขี้เกียจพิมพ์ค่ะ Search C-o-l -ขี้เกียจเลื่อน ไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไม C-o-l-u-m-e C-o-ไม่มี Column หรือ ทำไมล่ะ ทำไมล่ะ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไงใช่ไหม จะมีให้ไหมล่ะ รูปคนน่ะ Thunkable กับ... เราหานะคะ เราหาโลโก้รูปโลโก้แบบนี้ ไอ้อะไรนะอะไรนะี้ เอาแบบไหน เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหา Icon นี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free ฟรีน่ะ เราเลือกว่าฟรี ใช่ไหม ไหนบอกว่า Free ขี้ตั๊วะเบเบ๊ อย่าลืมหาคำว่า "Free" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะคะ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก free download โอเค หาใหม่ ไม่ได้ตัวนี้ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging โอเค ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไป สิ่งที่เราจะต้องมีใน Login ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความ ว่าให้ล็อกอินเข้าไป จะใช้ Log in หรือ คำว่าล็อกอินหรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัด ต่อมา ก็คือ lable ค่ะ ใช่ไหม เป็น Label นะคะ นี่ เป็นตัวอย่างไรเด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้าง ลาก label มาวาง อยู่ใต้รูปใช่ไหม แล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า Log in ลงไป l-o-g-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง Label เพื่อจะพิมพ์ข้อความคำว่า "Login"ลงไปนะ รูปแบบ font เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้ เดี๋ยวเราจะขอ font  เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ lu9สีตรงข้าม เข็ม-อ่อน ถ้าสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ 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 อันนี้นะคะ กรอบขาว ๆ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่า "Text Field" นะลูก เห็นหรือยัง ใครหาไม่เจอ ตรง Component เราน่ะ ไปที่... ถ้าหาไม่เจอพิมพ์ "text field" หรือ Text input ของ Thunkable มันใช้ Text Input นะคะ เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมาทั้ง 2 อันนะคะเด็ก ๆ อันที่ 1 อันที่ 2 ต่อกัน เรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไรให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text 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 นี่ มันมีอะไรอยู่ด้วย เห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ในตัวอย่าง กดผิด ขอโทษ ในตัวอย่าง เห็นไหมคะ มันมีไอคอน รูปเป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเห็น icon นี้ ทำอย่างไร ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ ใส่เข้าไปในนี้ ใส่ได้ไหม ให้ใส่เข้าไปไหนนี่ เดี๋ยวให้ใส่เข้าไปใน Text ไหนล่ะ ไม่ให้ใส่เข้าไปข้างใน ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็จะมี image เล็ก ๆ นี่ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะ เด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจนะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจ หาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจหาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า "Lock" เอาตัวนี้เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้ว ได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูป หาใส่ด้วยนะครับ อันที่ 1 รูปแรก Image1 Image 1 Picture เลือกอัปโหลดไฟล์ login1 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-b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font สี font ก่อนจะได้เห็น สีเห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีก กดผิดอยู่เรื่อยเลย แล้วก็มี for got password Forgot Password นี่ มันเป็นเขาเรียกว่าอะไรล่ะ เป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... label นั่นล่ะ แล้วตอน เขาเรียกว่าอะไรนะ ตอนเชื่อมน่ะนะ  ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า... พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ for got password ไม่ได้ไง 18 ใหญ่ไป ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่ง เราจะใช้คำว่า "Forgot" นะคะ f-o-r f-o-r  forgot g-o-t got จำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ forgot f-o-r-g-o-t แล้วก็ passwordForgot แล้วก็ P P-a-s-s Pass Word W-o-r-d แล้วก็ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลด size ให้พอ ๆ กับไอ้นี่ล่ะนะ ไอ้ Remember me นี่ล่ะ ก็คือ 14 นะคะ ทำไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยมหรือปุ่มโค้ง ดูนะคะ เราไปเลือก bottonค่ะ คลิก button แล้วลากมาวางด้านล่างสุดใช่ไหม Button นี้ พิมพ์ข้างในว่า "Login" นะคะเด็ก ๆ เข้าไปL-O ตัวใหญ่เลย L-O-G-i-n Login สี เอาสีอะไร ไปที่ Background นะ เBackground ลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย จำได้นะ บอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radiance น่ะ แก้ตรง Radiance นะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุขึ้นอยู่กับค่า Radiant เลย โอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไปแล้วกด login เข้าไปนี่ มันจะเอาไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ตอนเราไปใ์ใน Box ไง ใน Code น่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ label คำว่า user login ใช้ label ทำ นะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ text input เห็นไหม ลาก Text Input ไปวาง 2 อัน เป็นอันที่ 3 กับ 4 ได้รูปแล้ว เสร็จแล้วมาเอา Label วางเป็นอันที่ 2 ข้างในก็เปลี่ยนเป็น User Login เหมือนตัวอย่างนะ มันตรงส่วนการเชื่อมน่ะ มันมีหลายตัวนะคะ เขาบอก บางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้ mt อะไรนะ จำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกอันนี้ลูก text input อันที่ 3 กับ 4 เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ ตรง 2 อันนี้ นะคะ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้ว ทีนี้ สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เขาใช้นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ F-i-n-d B-a-s-e Find Base อยู่ไหนนะ นี่ ๆ Firebase.google.com ให้เราหา Firebase.google.com นะเด็ก ๆ เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้อง กด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebese หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Log in ด้วยบัญชี Google ไปตั้งแต่ตอนที่เราใช้ตัวนัั้นน่ะ ให้ไปเลือกอะไร เลือก Create a 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 นะ แล้วก็โอเคได้เลย มันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา น่ะ เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันจะหมุนจนครบ ทุกคนอยู่หน้า your new project is ready แล้ว คลิก Continue ค่ะ Login หรือยัง บางทีต้อง Login ก่อน มันถึงจะขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มีมอนิเตอร์ มีอนารีติก มี endgrade เราไปคลิกที่ไอ้รูป... รูป... ไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่า... ไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเ ราใช้ Username ก็คือ การระบุตัวตนน่ะ คลิกเปิดที่ Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์ อย่างนี้ นึกออกนะ ถ้าสมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้า ก็จะคลิกที่โทรศัพท์ แล้วก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลัก ว่าเราใช้การ login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่เราใช้ในการ Login เราใช้ 2 สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไร นะ Username ใช้ไหม ชื่อ Anominus และก็ password ใช้ 2 ตัว เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดูตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว มันจะขึ้นว่าสถานะตรงนี Enable ใช่งานได้แล้ว เสร็จแล้วให้เรามาตรงนี้ Project overviewแล้วเลือก Project Setting No 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 มา เห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อบไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรนะ Version นี้ Component Sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer list ไม่ใช่ data viewer gird data assen setting หาก่อนนะคะ component all ten singinm ต้องการหา Signin ไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ก่อนนะคะ 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 ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือ ตอนนี้ เรากรอกข้อมูลได้ อะไรได้ แต่จะไม่เก็บใน... เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... Back to 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 ตอนนี้เด็ก ๆ ได้ อยู่ที่ซีน 1 sinvpy'ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหม เรากลับไปที่ Box แล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้ แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ test ตอนแรกที่ test น่ะ พอพิมพ์ปุ๊บ มัน เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึกถึงเหมือนตอนมาพิมพ์ตรงช่องนี้ นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คื กำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง  Edit undo มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะ สิ่งแรก ก็คือเมื่อ text input โดนคลิกลงไป ก็คือคลิกเข้าไปใน่ Text Input ใช่ไหมคะ เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือมันจะต้องให้Username ก็คือให้ set ค่าของ Text Input น่ะ จากซ่อนเป็นพิมพ์น่ะ นะคะ ดูนะคะ ลอง Test ดูมันขึ้นเหมือนที่บอกไหมtext Input จะต้องทำงานนะคะ ให้มันทำงาน ตั้งเงื่อนไขให้มัน อะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหม คือ ตัวที่ 2 ของเรา password ก็เหมือนกัน เมื่อคลิกที่ มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input password เมื่อคลิกเข้าไป คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...เซต Text นี้เป็นซ่อน ซ่อนแล้วก็... ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้ว ความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์ นะ Keyboard Type พิมพ? เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่ม เห็นไหม set Default ไม่ใช่แล้ว ไม่ใช่ Set Default เราไม่ได้ set Default ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะต้องเกิดผล ก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in password ก็เป็น set มันต้องซ่อนสิ password ไม่ให้ show นะ ต้องซ้อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง test ดูนะคะ เพราะตอนพิมพ์ password ตามหลักก็ต้องไม่แสดงข้อความนะ User น่ะไม่แสดง User แสดงอย่างนี้ได้ นะ เหมือนแสดงชื่อ แต่ password มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อน กลับไปแก้ ซ่อนอะไรคะ To Default บ่ Password hint น่าจะเป็น to Default หรือ Tool อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงนะคะ SetText Input เป็นซ่อน แล้วก็ To...  ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อน เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนน่ะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text Input เมื่อกำหนดค่า เมื่อ Text Input  Passwordเมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ ให้มัน ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรเปล่านะนี่ น่าจะใช่ กำหนดตัวแปรให้เก็บค่าของ Text Password text username Text Password ไหน box ที่ 2 Box ที่ 1 ไม่มีปัญหา ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ List ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ ถึงที่จะต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Signin มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Block หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Sing in hello at Email Reset Password for Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ Do  Sign up do Sign Up Do Sign In do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ Features นี้น่ะ ใช้ไม่เหมือนกันน่ะ ทำไม Faeture นี้ ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะ ใช้ไม่เหมือนน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไร ให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อบ ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Signin ได้นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้า Thunkable X ก็คือต้องใช้ IOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ Release ใช้ไม่ได้ ต้องเป็น... ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน... มันไม่เป็น มันไม่เป็น Thunkable X น่ะ มันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะ ถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก็จะมาก็อบ Firebase น่ะค่ะ ก็อบ Firebase แล้วเอาไปวาง Signin เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ เดิมเรานี่ ให้เป็น Thunkable x ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งาน เพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้ อาจจะเปลี่ยนเป็นถ้าเชื่อมไม่โดยวิธีอื่นตอนนี้ คือ เชื่อมด้วย Firebase จะใช้ได้ ก็ต่อเมื่อ Thunkable เรามันเป็น Thunkable x ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้ เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะ เสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมัน แค่นั้นเอง มันน่าใช้ได้ จะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ สัปดาห์หน้าไม่อยู่ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ... แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ (นักศึกษาชาย) นักศึกษาทั้งหมดทำความเคารพ ขอบคุณครับ (อาจารย์สุธิรา)  Thunkable Xทำไมไม่อัปให้เราล่ะ