--- title: พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ตู่ subtitle: date: วันอังคารที่ 2 พฤษภาคม 2566 เวลา 09.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้า Login ทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ Login เข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเรา Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่ สงสัยจะไม่ใช่ตัวนี้งง ๆGoogle นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อน เข้าไม่ถูกอันน่ะเข้าใหม่มีหลายตัวจำไม่ได้เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติส่วนใหญ่ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Category นะคะ ให้เลือกเป็น Education แล้วกันดูนะ ในรูปที่เปิดให้ดูนี่ คือส่วนของ Login ที่เขาสร้างไว้นะเป็นตัวอย่างว่าถ้าเราจะทำให้มีลักษณะแบบนี้ มีช่องกรอก ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก Password แล้วก็ปุ่ม Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไรให้มันนี่เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงามไม่ใช่เรียงไปโย้ไปโย้มาเคลื่อนที่ไปมาวิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" พิมพ์ค่ะ ขี้เกียจ Search coขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป ทำไท l C-o-l-u-m-e ไม่มี Column หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูปใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหมเลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนน่ะ Thunkable เราหานะคะ หาโลโก้รูปแบบนี้ไอ้อะไรนะอะไรนะ เอาแบบไหนเอาแบบนี้ก็ได้ หรือเอาอย่างนี้นึกออกนะ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหา Icon นี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้แหละ ตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard 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-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 ที่จะต้องใส่เห็นไหมคะ อย่างนี้เขาเรียกว่า Tex Field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่เห็นนะ ไอ้ตัวขาว ๆ 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 อันแรก Input 1 นี่เป็นอะไรตัวบนนะคะ text inpu 1 ใส่ Username Text Input 1 นี่คือ Username นะ 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 Picture เลือกอัปโหลดไฟล์ Login1 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 b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน Font สี Font ก่อนจะได้เห็น เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกมีอะไรอีก กดผิด แล้วก็มีfor got passwordForgot Password มันเป็นเหมือน Text Link น่ะเราต้องใช้ตัว... Label นั่นล่ะแล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมน่ะนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่าเดี๋ยวพื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me ก่อนนะคะ มีความรู้สึกว่ามันใหญ่ไปมันจะใส่ Forgot Password ไม่ได้ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot" นะคะ f-o-r f-o-r Fotgot g-o-t got จำไม่ได้ ช่วงนี้สมงสมองไม่ค่อยจำ forgot แล้วก็ assword Forgot แล้วก็ P P-a-s-s Pass W-o-r-d แล้วก็ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กันไอ้นี่ล่ะนะ ไอ้ Remember me นี่ล่ะ ก็คือ 14 ทำไซซ์ให้เท่ากันแล้วก็สีสีแจ่มว้าวขึ้นมาหน่อยให้เห็นความแตกต่างตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้เดี๋ยวเลื่อนอีกนิดหนึ่ง Color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะนะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Login เด็ก ๆ อยากได้ปุ่มแบบไหนเป็นสีเหลี่ยมหรือเป็นโค้งดูนะคะ เราไปเลือก Botton คลิก Button แล้วลงด้านล่างสุดใช่ไหม Button นี้พิมพ์ข้างในว่า Login นะคะ คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-I- Login สีเอาสีอะไรไปที่ Background นะเลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงิน สีม่วง โอเค ทำตัวหนาด้วยเปลี่ยนรูปแบบ Font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยจำได้นะบอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radiant น่ะความโค้งมนของวัตถุนะคะ ขึ้นอยู่กับค่า Radiant เลย โอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว 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 ก็เปลี่ยนเป็น User Login เหมือนตัวอย่างนะ มันตรงส่วนการเชื่อมน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้อะไรหว่าเดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จอันต่อมาอันนี้เลือกอันนี้ลูก 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 เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase หรือยัง ให้กด Get Start เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Login ด้วยบัญชี Google ตั้งแต่ตอนที่เราใช้ตัวนัันให้ไปเลือกอะไร เลือก Create New Projects ค่ะ เห็นไหมคะ สร้าง roject ตรงช่องนี้นะเด็ก ๆ นะ 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 แล้ว Login หรือยัง บางทีต้อง Login ก่อนมันถึงขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่เห็นไหม มันจะมีแถบเครื่องมือซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release Monitor มี Analytic มี endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนสามเหลี่ยมลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก Get Startทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหมตัวที่เป็นคือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ Anonymousการระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่โทรศัพท์เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ Login ด้วยตัวไหนหรือถ้าสมมติเมื่อกี้นี้ Login ผ่าน Email หรือ Password ใช่ไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authetication ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ เห็นไหมคะ ตัวนี้กับตัวนี้นะตัวนี้คืออะไรนะ Username ใช้ไหม Anonymous เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่ออันนี้พอเราย้อนกลับมานะคะ มาดูตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้วมันจะขึ้นว่าสถานะตรงนี้ Project Overview คลิก 1 ครั้ง แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project Setting นะ ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูกเดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเราเรายังไม่มีแอปใน Project นี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 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 List Data Viewer Getting Data Ascending Setting หาก่อนนะ Componant Authetication ต้องการหา Sign in Loading ไม่ใช่ My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี Update อย่างไร อาจจะต้อง Update Thunkable เราหน่อยมันจะใช้เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหเดี๋ยวแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration Community Source ไม่ใช่ เราจะต้อง Using Thunkable Lite App ก็ไม่ใช่มันเป็น Test เพราะเขาบอกว่าเราจะก๊อบไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tools หนึ่งที่เราไม่มีใน App เราน่ะใน Thunkable Tools ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Testดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะก็จะให้ไปเก็บ... Back Editingเดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input1 ไปที่ Text input1 usernamไปที่ Text input1 เมื่อ Text input username click ไม่ใช่ มันจะต้องเป็นนะ set text input text to 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 1 หรือยังที่ 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 ก็เหมือนกันมี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปใน Text Input Password When...คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้... Set Text นี้เป็นซ่อน ซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วความจริงเราต้องเลือกอันนี้ Set Text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหม Set default เราไม่ได้ Set default ไงม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้อง Set ค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผล ก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in Password ก็เป็น Set มันต้องซ่อนสิ Password ไม่ให้โชว์นะต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง Test ดูนะคะ เพราะตอนพิมพ์ Password ต้องไม่แสดง User นะไม่แสดง User แสดงอย่างนี้ได้นะเหมือนแสดงชื่อแต่ Password มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ To Default บ่ Password in น่าจะเป็น To Default น่าจะเป็น To อะไรหรือ อะไ มีหลายตัวเลือกเป็น... เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงนะคะ Set Text Input Password เป็นซ่อนแล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อนจาก Text จาก Text ให้มันซ่อนขอลองอันล่างเลยไม่ซ่อนนะนี่เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้วตามหลักนะ เมื่อพิมพ์ปุ๊บถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text input เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Type keybod ให้มัน Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่านี่ น่าจะใช่กำหนดตัวแปรให้เก็บค่าของ Text Password Text Username Text Password ไหน Block ที่ 1 ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable Variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ Text ไปที่ List ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บถึงที่จะต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign in มันจะต้องเขาบอกว่าให้มันอยู่ตรง... เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Hello at Gmail Sing in Email Sign in Email Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ DoSign up DSign Up Do Sign In do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ Feature นี้น่ะงใช้ไม่เหมือนกัน ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี ใช้ไม่เหมือนกันน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไรให้ลงทะเบียนโดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อบทำไม เราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Signin ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้า Thunkable X ก็คือใช้ iOS เข้าใจแล้วทดสอบแอปมันยังไม่ Release ใช้ไม่ได้ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่ได้เป็น Thunkable X น่ะ แล้วมันไม่ให้ใช้ฟีเจอร์นี้ Sign in น่ะ ถ้า Thunkable x น่ะ มันจะเป็น...ก็คือเราก็จะมาก๊อบ Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป็น Thunkable x ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้อาจจะต้องเชื่อมไม่ได้อาจจะเปลี่ยเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Firebase Thunkable เรามันเป็น Thunkable ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ตอนนี้มันเป็น Thunk เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเองมันก็ใช้ได้จะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ สัปดาห์หน้าไม่อยู่บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยเลยนะคะ โอเคค่ะ Thunkable X ทำไมไม่อัปให้เราน่ะ Continue