---
title: พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ตู่, ปลา
subtitle: 
date: วันอังคารที่ 2 พฤษภาคม 2566  เวลา 13.02 น.
---

								(ข้อความสดจากระบบถอดความเสียงพูดทางไกล)


(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะเด็ก ๆ วันนี้จะพาทำหน้า Login ทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะ แล้วเราก็ล็อกอินเข้าที่เราสร้างไว้นะ ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่  ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อนSign Out เข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือ โอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่Create new app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไป มันก็จะเป็น Category นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของ Login ที่เขาสร้างไว้นะเป็นตัวอย่างว่านี่ ถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ  นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ เหมือน Username ใช่ไหมลูก ล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มัน... นี่เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่เรียงแล้วโย้ไปโย้มาเคลื่อนที่ไปมานะคะ วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" พิมพ์ค่ะ ขี้เกียจ Search c-o-l-u-m-n   mel C-o-l-u-m-eu-m-e c-oไม่มี Column หรือ ทำไมล่ะ ทำไมล่ะ  มี Component ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ สมมติเราจะใส่รูปเหมือนตัวอย่างแบบนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูปเหมือนคนเลยใช่ไหม จะมีให้ไหมนะ รูปคน Thunkable กับ... เราหานะคะ หาโลโก้รูปแบบนี้ ไอ้อะไรน ะอะไรนะ เอาแบบไหน นี้แบก็ได้ Search คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหา Icon นี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ฟรีหรือเปล่านี่ ดูด้วยนะ ฟรี ฟรี ฟรี  Download Image Standard Free ฟรีนะ เราเลือกว่าฟรี Standrad ใช่ไหม ไหนบอกว่าฟรี อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ 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-o-g-i-n สัญญาณล่ามโอเคได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง Label นะคะ เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ  อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้ เดี๋ยวเราจะขอฟอนต์ เนื่องจาก 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 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า 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 รูปเป็นรูปคนกับรูปลูกกุญแจนะเราจะให้มันเห็น icon นี้ทำอย่างไร ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ใส่เข้าไปในนี้ ใส่ได้ไหมให้ใส่เข้าไปไหมนี่ เดี๋ยวให้ใส่เข้าไป Text ไหมล่ะไม่ให้ใส่เข้าไปข้างในไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็จะมี image เล็ก ๆ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะเด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจนะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไปก็คือก็คือรูปกุญแจหาต่อ ๆ หาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะเจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจหาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า "Lock" เอาตัวนี้แล้วกันเจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะ อันที่ 1 ฃ รูปแรก Image1 Image1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้วปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยายย่อขยายเอานะคะ เราก็ไไปที่ตำแหน่งของวัตถุชิ้นนั้นคลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะรูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่ อีก 2 ส่วนสิมีส่วนของเดี๋ยวนะเปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้ กับ forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กเห็นไหมคะ ชื่อว่า Check box  เด็ก ๆ เห็น ฉเห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง ให้เราได้ chck box แล้วแล้วมีอะไรต่อจาก Check box ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Labelเขียนคำว่า "remember me" ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember me b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font สี font ก่อนจะได้เห็น เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีก กดผิด แล้วก็มี for got Password For got Password มันเป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า... เดี๋ยวพื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me มีความรู้สึกว่ามันใหญ่ไปมันจะใส่ for got Password ไม่ได้  18 ใหญ่ไป ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็ For got Password นะเด็ก ๆ อีก Label หนึ่ง เราจะใช้คำว่า "For got" นะคะ  F-o-r For gotg-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 นี่ล่ะ Remember me ก็คือ 14 ทำ ไซซืแล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่ง color เอาสีอะไร เอาสี...สีเหลือง สีเขียว สีฟ้าโอเคโอเคแล้วนะนะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม  Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยมดูนะคะ เราไปเลือก botton คลิก button แล้วลากมาวางด้านล่างสุดใช่ไหม Button นี้ พิมพ์ข้างในว่าคำว่า "Login" นะคะ พิมพ์คำว่าเข้าไป L-O ตัวใหญ่เลย L-O-G--n Loginสีเอาสีอะไรไปที่ Background นะ เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะคะ Color Color Color Text Colorสีน้ำเงินไหม นะคะ สี...สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้ อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย บอกให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radian น่ะ ตรง Radian ot ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรทำให้ตัว 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 มันตรงส่วนการเชื่อมน่ะ มันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ 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- ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้อง เราจะต้องกด get sGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase หรือยัง Get Start นี่นะคะ เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Login เข้าบัญชี Google ตั้งแต่ตอนที่เราใช้ตัวนััน ให้ไปเลือกอะไร เลือก Create a New projects ค่ะ เห็นไหมคะ สร้าง project ตรงช่องนี้นะเด็ก ๆ นะ Enter your project name เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebase อะไรนะ Log in นะ ทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมรับก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งาน แล้วก็กด Continue มันก็จะขึ้นมาบอกว่านี่คือ Google Analytic นะคะ for your Firebase projectเ สร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเขาก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับI Accept เลือก Analytic Location แล้วก็ติ๊ก Accept นะ แล้วก็คลิก Accept Pfoโอเคได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะมันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่ มันจะหมุนจนครบ บางคนอยู่หน้า your new project is ready แล้ว คลิก Continue ค่ะ Login หรือยัง บางทีต้อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้าซ้ายมือนะเด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มี Monitor มี Analytic มี endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนสามเหลี่ยมลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All tintication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก Get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ Anonymous นะ การไม่ระบุตัวตนน่ะ ที่เปิด Enable  แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพิท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้ว แล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ Login ด้วยตัวไหนถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Allten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไรนะ Username ใช่ไหม ชื่อ Username ชื่อ Anonymous เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่ออันนี้พอเราย้อนกลับมานะคะ มาดูตรง Build มันจะขึ้นว่า "สถานะตรงนี้ Enable" ใช้งานได้แล้วเสร็จแล้วให้มาที่ตรงนี้ Project  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 มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ ไปใส่ในแอปเรานั่นเองนะคะ ก๊อบฯ ไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือ ที่ชื่อว่า...ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าเวอร์ชันนี้ Component Sign in ไม่เจอมันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data Viewer data Viewer Data Assend setting หาก่อนนะคะ Component allten sing in ต้องการหา Sign in loading locatไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อตัวหนึ่งนะก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี่  Update อย่างไร เดี๋ยว ๆ อาจจะต้อง Update Thunkable เราสักหน่อยมันจะใช้เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรือเดี๋ยวขอเทสต์ตัวนี้ แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ อยากรู้ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ  Integration dox resourch เราจะต้อง Using Thunkable likก็ไม่ใช่มันเป็น Test เพราะเขาบอกว่าเราจะก๊อบไอ้ตัวนี้แล้วเอามาวางแต่ทีนี้ Tools หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable Tools ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้  ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้อะไรได้ แต่จะไม่เก็บ เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ก็จะให้ไปเก็บ... back Tool Editing เดี๋ยวเรามาลองที่ Block ของเราตัวแรกเลย ก็คือ Text Input1 ไปที่ Text Input1 Username ใช่ไหม ไปที่ Text input1เมื่อ Text input username คลิกไม่ใช่ มันจะต้องเป็นนะ set text input text to Username Text Keyboard Type Border มันจะต้องเป็นพิมพ์ เพราะฉะนั้น Change แสรแา เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ เลือกอันนี้ออกไปก่อน เลือกออกมาวาง เมื่อคลิกเข้าไปที่ Text InputUsername ใช่ไหมคะ ให้มันทำอะไรมันจะต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิแล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหมขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความ แล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username นะ  เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 Scene 1 ตอนนี้ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหมเรากลับไปที่ Box แล้วตัวแรกที่เราเริ่ม ก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ est พอพิมพ์ปุ๊บ เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึกถึงเหมือนมาพิมพ์ช่องนี้นี่โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเราจะกำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง Edit Undo อีกอันมันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะ สิ่งแรกก็คือเมื่อ Text Input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Inputก็คือมันจะต้องให้ set ค่าของ Text Input น่ะจะซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหม text Input จะต้องทำงานนะคะ ตั้งเงื่อนไขให้มันอะไรต่อเสร็จแล้วทำอย่างไรต่อมันมีอีกตัวหนึ่งใช่ไหม คือตัวที่ 2 ของเรา Password ก็เหมือนกัน เมื่อคลิกที่ Password มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input Password when... คลิกโดนคลิกนี่ ทำอะไรเหมือนกัน ก็คือให้... เซต Text นี้เป็นซ่อนซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดงแล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ...รูแล้วความจริงเราต้องเลือกอันนี้ Set Text Password นะคะ กำหนดให้ Text Input Password นี่รับค่าจากการพิมพ์นะ KEYBOARD เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหม set Default เราไม่ได้ set defule ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์เมื่อคลิกเข้าไปปุ๊บสิ่งจะต้องเกิดผล ก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in Password ก็เป็น Set มันต้องซ่อนสิ Password ไม่ให้โชว์นะ ต้องซ้อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ Password ตาต้องไม่แสดง User น่ะไม่แสดง User แสดงอย่างนี้ได้ แต่ password นี่มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนเดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ซ่อนอะไรนะ To Default บ่ Password น่าจะเป็น to Default น่าจะเป็น Too หรือ Tools อะไร มีหลายตัวเลือกเป็น... เมื่อคลิก Password  แล้วพิมพ์ Password ลงไป ปุ๊บ เมื่อพิมพ์ Password ลงนะคะ Set Text Input Passwordเป็นซ่อนแล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิถูกไหม แก้เงื่อนไขมันก่อนจาก Text ให้มันซ่อนได้ไหม ขอลองอันล่างเลยไม่ซ่อนนะ นี่เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนน่ะ ลเราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text In... เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Type Keyboard ให้มันให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรไหมละนี่ น่าจะใช่ กำหนดตัวแปลให้เก็บค่าของ Text Password Text username Text Password ใน Block ที่ 1 ไอ้ Block ที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable Variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ Text ไปที่ List ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริง ปุ๊บ สิ่งที่จะต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign in มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Block หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App FeatureSign inSign inSing in EmailSign in helloReset PasswordDelete User Sign Upเขาให้กำหนดเป็นแบบนี้หรอเป็นแบบนี้หรือ ดู Sign upSign Up DoSign In doไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกันน่ะ ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี  ต้องเอาใส่ไว้ในไหน ไม่เหมือนกันนะ ใช้ไม่เหมือนเดี๋ยวนะคะ Sign Upอันนี้หรอให้ทำอะไรให้ลงทะเบียนให้ลงทะเบียนโดยใช้ Email หรือ Passeordไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป

(ปี้)ทำไมเราใช้ Thunkable x ไม่ได้ล่ะThunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in ได้ นี่ไงเขาบอก แต่ของเรามันไม่เป็น X  อ๋อถ้า Thunkable X ก็คือใช้ IOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ rereaseใช้ไม่ได้ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable น่ะ  X น่ะ มันจะเป็น...ก็คือเราก็จะมาก็อบฯ  Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่า เราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป้น Thunkได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้ คือ เชื่อมด้วย Firebase จThunkable เรามันเป็น Thunkable ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkablเนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมัน น่าจะมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ... แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยแล้วนะคะ เดี๋ยวปล่อยแล้ว โอเคค่ะ Thunkable X ทำไมไม่อัปให้เรานะ 

[สิ้นสุดการถอดความ]  -