(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเราแล้วก็ให้ Login เข้า จำได้นะ Password ตัวเองอะไรน่ะ แล้วเราก็ Login เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ นะ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อน Sign out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้ Project ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อ App นี้ว่าอย่างไร ส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Catagory นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของ Login ที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ นี่มีช่องกรอก ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไร จัดวางอย่างไรนะคะ มันก็จะมีส่วนของเหมือน... Username Password ใช่ไหมลูก มีปุ่มล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มัน... เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่ โย้ไป โย้มา เคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" ขี้เกียจ Search  ขี้เกียจเลื่อน ไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไม C-o-l-u-m-e  c-oไม่มี Coolumn หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูปใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไงใช่ไหม จะมีให้ไหมรูปคนน่ะ Thunkable กับ..เราหานะคะ เราหาโลโก้รูปแบบนไอ้อะไรนะอะไรนะ เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหา icon นี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ free หรือเปล่านี่ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free ฟรีนะ เราเลือกว่าฟรี ให้ไหม ไหนบอกว่าฟรี อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก free download โอเค หาใหม่ ไม่ได้ตัวนี้ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ .png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo login โอเค ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีใน Login ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความ ว่าให้ login เข้าไป จะใช้คำว่าล็อกอินหรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ lable ค่ะ ใช่ไหมเป็น Label นะคะ เด็ก ๆ ในตัวอย่างนี่ เห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้าง ลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า Login ลงไป l-o-g-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้ว ให้ว่าคำว่า Label เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ รูปแบบ font เด็ก ๆ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้ เดี๋ยวเราจะขอ Font  เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อน ถ้าสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Test 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 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า "Tex 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 นี่ มันมีอะไรอยู่ด้วยเห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ๆ กดผิด ขอโทษ ในตัวอย่างเห็นไหมคะ มันมี icon รูปเป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเห็น icon นี้ไทำอย่างไร ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ ใส่เข้าไปในนี้ ใส่ได้ไหม ใส่เขาไปไหมนี่ เดี๋ยวให้ใส่เข้าไปใน Text ไหมล่ะ ไม่ให้ใส่เข้าไปข้างใน ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็มี image เล็ก ๆ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะเด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจน่ะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจ หาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Log ใช้คำว่า "Lock" เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้ว ได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image 1 image 1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่อีก 2 ส่วนสิ มีส่วนของ...เดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนเห็นไหมคะ กับ forget password แล้วก็ Login มี Button 1 อันนะคะ ปุ่มกดนะ และก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กเห็นไหมคะ ชื่อว่า "Check box" เห็นไหมคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง เราได้ chack box แล้ว 1 อัน แล้วมีอะไรต่อจาก Check box ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า " remember me" ไว้ ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember m-e-b-e-r member แล้ว me m-e นะคะ เดี๋ยวเปลี่ยน font ก่อนจะได้เห็น เห็นไหมคะ เห็นหรือเปล่า อะไรอีกนะ มีอะไรอีก กดผิด แล้วก็มี forgot password Forgot Password มันเป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... label นั่นล่ะ แล้วตอน เขาเรียกอะไรนะ ตอนเชื่อมน่ะนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า... พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลด size  Remember me มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ forgot password ไม่ได้ ลดลง 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 แล้วก็ password Forgot แล้วก็ P P-a-s-s Pass W-o-r-d แล้วก้ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กับไอ้นี่ล่ะนะ ไอ้ Remember me ก็คือ 14 นะคะ ทำไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อยให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน นะ นะ นะ  ตำแหน่งไม่ค่อยได้เดี๋ยวเลื่อนอีกนิดหนึ่ง color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยม หรือปุ่มโค้ง ดูนะคะ เราไปเลือก botton คลิก button แล้วลงด้านล่างสุดใช่ไหม Button นี้ พิมพ์ข้างในว่า "Login" เข้าไป พิมพ์คำว่า L-O ตัวใหญ่เลย L-O-G-i-n Login สีเอาสีอะไร ไปที่ Background นะ Backgruond เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ งตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยจำได้นะ บอกว่าแก้ตรง Border ใช่ไหมคะ lad น่ะความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุขึ้นอยู่กับ โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรใช่ไหม ทำให้ตัว Login มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไปแล้วกด login เข้าไปมันจะไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ตอนใน box ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดูอันที่ 2 ใบเตยต้องใส่ label คำว่า user login น่ะ เห็นหรือเปล่าเห็น 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-r-e 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 เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebese หรือยังเพราะ Get satart เราเพิ่งใช้งานครั้งแรกเราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี 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 ลูก TH แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก Analytics location แล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลย มันก็จะหมุน ๆ ๆ ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า your new project is ready แล้ว Login หรือยัง บางทีต่อง Login ก่อน มันขึ้นอย่างนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มีมอนิเตอร์มีอนารีเกต ีมี endgrade เราไปคลิกที่ build คลิกไอ้รูป...รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่า ไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ การระบุตัวตนน่ะ ที่เปิด Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ  สมมติถ้าไปทำของตัวเองแล้ว แล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้า ก็จะคลิกที่โทรศัพท์ แล้วก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไรนะ Username ใช้ไหม ชื่อ Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้พอเราย้อนกลับมานะคะ ตรง Build มันจะขึ้น ว่าสถานะตรงนี้ 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 มาเห็นไหมคะ เขาบอก ว่าเราจะต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า... ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่า Versions นี้ Component Sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer list ไม่ใช่ Data viewer grid data assen ssetting หาก่อนนะ componant Authentication sign in ต้องการหา Sign in loading location ไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ search ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ update อย่างไร เดี๋ยว ๆ อาจจะต้อง Update Thunkable เราหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอ Test ตัวนี้แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Component มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration community ใช่ไม่ เราจะต้อง Using Thunkable ก็ไม่ใช่ มันเป็น Test เพราะเขาบอก ว่าเราจะก๊อบไอ้ตัวนี้ แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา Tool ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้แต่จะไม่เก็บ เขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... แบบ Tool Editing นะคะ เดี๋ยวเรามาลองที่ Box ของเราก็แล้วกัน ไปที่ Box นะเด็ก ๆ ตัวแรกเลย ก็คือ Text Input 1 ไปที่ input 1 username ใช่ไห ม ไปที่ Text input1 เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นพิมพ์นะ set text input text to Username Text Keyboard Type ฺBorder มันจะต้องเป็นพิมพ์ เพระาฉะนั้น Change คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ ให้ทำอะไร เลือกอันนี้ออกไปก่อน เลือกออกมาวาง เมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้ทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเค ถูกนะ เห็นไหมคะ มันต้องให้พิมพ์ข้อความ แล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editing ตอนนี้เด็ก ๆ ได้ อยู่ที่ซีน 1 หรือยัง ตอนนี้ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหม เรากลับไปที่ Box แล้ว ตัวแรกที่เราเริ่ม ก็คือเมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บเมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ตรงช่องนี้ นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือกำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง 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... คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้... ให้ Set Text นี้เป็นซ่อน ซ่อนแล้วก็... ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์นะ เสร็จแล้วตรงนี้เป็น Defult Defult กำหนดเป็นค่าเริ่มเห็นไหม set defult เราไม่ได้ set defilt นี่ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะต้องเกิดผล ก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in Password ก็เป็น Set มันต้องซ่อนสิ password ไม่ให้ Show นะ ต้องซ่อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง Test ดูนะคะ เพราะตอนพิมพN password ต้องไม่แสดง User น่ะ ให้แสดง User แสดงอย่างนี้ได้ เหมือนแสดงชื่อ แต่ passwor นี่ มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ Tool To Default Password น่าจะเป็น to Default หน้าจะเป็น Tool หรือ Tool อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงนะคะ Set text input password เป็นซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text in... เมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Input Password ลงไป เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type เให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่านะนี่ น่าจะใช่ กำหนดตัวแปลให้เก็บค่าของ Text Password text username Text Password ไหน Box ที่ 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา variable  ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ list เป็นจริงเมื่อคลิกแล้วจริง ปุ๊บ เป็นจริงปุ๊บ ถึงที่จะต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ sign in มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Box หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in sing in hello Sing in Email Sign in hello Reset Password for Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ Do sign up do sign iเป็นแบบนี้หรือ ดู Sign upSign Up Do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ฟีเจอร์นี้ ใช้ไม่เหมือนกันน่ะ ทำไม 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 นะคะ ถ้าแก้ไม่ได้ อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้ คือเ ชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkable x ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้ เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะ เสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ สัปดาห์หน้าไม่อยู่ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ (นักศึกษาชาย) นักศึกษาทั้งหมดทำความเคาThunkable Xทำไมไม่อัปให้เรา