---
title: ฝึก PE พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ปลา
subtitle: 
date: วันจันทร์ที่ 22 สิงหาคม 2565  เวลา 09.00 น.
---

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

(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เราแล้วก็เข้าThunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้า login ทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ login เข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเรา Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้า จำได้นะ Password ตัวเองอะไรนะ แล้วเราก็ login เข้า ที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google จะใช้ตัวนี้ เข้าผิดอันสะบ่ สงสัยจะไม่ใช่ตัวนี้ งง ๆ  Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อน sing Out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือ โอเคเข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไร สมมติส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Category นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือส่วนของ login ที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Colum"ขี้เกียจ Searchขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไมC-o-l-u-m-eu-m-e c-oไม่มี Colume  หรือทำไมล่ะ ๆ มี Componantไหนอีกนี่ดูตัวอย่างเขานะดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่อะไรคะImage หรืออะไรลูกเลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนThunkable กับ...เราหานะคะ เราหาโลโก้รูปแบบนี้ไอ้อะไรนะอะไรนะเอาแบบไหน เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ล่ะตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ดูด้วยนะฟรี ฟรี ฟรีDownload ImageStandard Free  Free นะ เราเลือกว่าฟรีใช่ไหมไหนบอกว่าฟรีอย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Free download ด้วย เดี๋ยวติดลิขสิทธิ์อีกfree downloadโอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะตัวนี้ก็สวยอยู่นะเอาตัวนี้ก็ได้ png ก็พอPremium free downloadไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เราแล้วก็ตรงชื่อ Picture นะก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหมLogo loging โอเคได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีใน loginก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไป จะใช้ล็อกอินsinvหรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ lable คะเป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Page นะ เราก็แก้เป็นอะไรUser พิมพ์คำว่า "User"แล้วก็คำว่าล็อกอินเข้าไป l-og-i-nสัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง label นะคะเพื่อจะพิมพ์ข้อความคำว่า "Login"ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ เด็ก ๆ ลองเลือกอยากได้แบบไหนแล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข้มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Loginนะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ยTest Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้เอาเท่าไหร่ 30 โอเคไหมโอเคนะได้ส่วนของ User login แล้วก็คือส่วนของ label แล้ว ทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืมLabel Label อันนี้อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วยจะได้พอเราไปแก้ code น่ะคะเราก็จะได้รู้ ImageImage ก้เหมือนกัน ImageIcon Image ของเราก็คือ Iconloginicon login l-o-g-i-nนะคะ ปุ๊บ1 2 3 ส่วนที่ 3ที่จะต้องใส่เห็นไหมคะ อย่างนี้เขาเรียกว่า Text Fieldเพราะมันจะต้องเป็นให้กรอกข้อความได้2 อันขาว ๆ นี่เห็นนะไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่าText Field นะลูก เห็นหรือยัง ใครหา Text Field ไม่ตรง Component เราน่ะ ไปที่ถ้าหาไม่เจอพิมพ์ text fหรือ 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ใส่ Username TextInput 1 นี่คือ User Name นะText Input Usernameนะคะ อันที่ 2เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไร นะคะ เวลา Codedingเราจะได้รู้นะ เราไปแก้ถูกอันหรือเปล่าText Input อันที่ 2 ชื่อว่าpasswordบอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งนะคะเราได้ 2 ส่วนแล้วนะ ทีนี้ ใน...ใน Usernameใน Username นี่ มันมีอะไรอยู่ด้วยเห็นหรือเปล่า มันใส่อะไรเข้าไปในตัวอย่าง  ในตัวอย่างกดผิด ขอโทษ ในตัวอย่างเห็นไหมคะ มันมีไอคอนรูปเป็นรูปคนกับรูปลูกกุญแจนะเราจะให้มันเห็น icon นี้ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ใส่เข้าไปในนี้ใส่ได้ไหม  ให้ใส่เข้าไปไหมนี่เดี๋ยวให้ใส่เข้าไปใน...Text ไหนล่ะไม่ให้ใส่เข้าไปข้างในหรือไม่ให้ใส่ก็วางข้าง ๆ ได้นะก็คือเราก็มี image เล็ก ๆ นี่2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะ เด็ก ๆ อย่าลืมนะมีรูปอะไร รูปคนกับรูปกุญแจน่ะหาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกันFree download เหมือนเดิมนะคะ รูปต่อไปก็คือรูปกุญแจหาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะเจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า Lockเอาตัวนี้แล้วกันเจอตัวไหนเอาก่อนล่ะโอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้วใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะอันที่ 1 รูปแรกImage1Picture เลือกอัปโหลดไฟล์login 1 openได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยายย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้นคลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขาโอเคนะคะ เขาได้แล้วนะรูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไปขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะนะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อจะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิมีส่วนของ เดี๋ยวนะ  เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ แบบนี้กับ forget passwordมี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กเห็นไหมคะ ชื่อว่าCheck box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางเราได้ chack box แล้ว 1 อันแล้วมีอะไรต่อจาก Checkboxก็คือมี Label ใช่ไหมคะ บอกว่าRemember me มี Labelเขียนคำว่า " Remember "ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า"Remember me" R-e Rememberb-e-r memberแล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font  สี font ก่อนสีเห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกกดผิด แล้วก็มีfor got passwordForgot Password นี่ มันเป็นอะไร มันเป็นเหมือน Text Link น่ะเราต้องใช้ตัว...label นั่นล่ะแล้วตอนเขาเรียกอะไรนะตอนเชื่อมนะตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้Label นี้ ใส่คำว่า "พื้นที่"ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember meมีความรู้สึกว่ามันใหญ่ไปมันจะใส่ for got password ไม่ได้ 18 ใหญ่ไปลดลง 14 พอโอเค Remember me เหลือ 14 พอนะคะ แล้วก็Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot"นะคะ  f-o-rfot gotg-o-t gotจำไม่ได้ ช่วงนี้สมงสมองไม่ค่อยจำforgot f-o-r-g-o-tแล้วก็ passwordForgot แล้วก็ PP-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" เข้าไปL-O ตัวใหญ่เลย L-O-G-i-n Loginสีเอาสีอะไรไปที่ Background นะเลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color ColorText Colorนะคะ สีน้ำเงินไหมสีม่วงโอเคทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วยโอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อย จำได้นะ บอกว่าให้แก้ตรงไหนBorder ใช่ไหมคะ Ladian น่ะความโค้งมนของวัตถุนะคะ ขึ้นอยู่กับค่า Ladian g]pโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้วทีนี้มันจะเชื่อมอย่างไรนะทำให้ตัว Login มันเชื่อมได้ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไปแล้วกด login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะอ๋อ Remember meForget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ใน block โค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่label คำว่า "User login"นะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4ช่องที่ 3 กับ 4 ใช้ text input เห็นไหมลาก Text Inputไปวาง 2 อันเป็นอันที่ 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มา Labelก็เปลี่ยนเป็น Userมัน... ตรงส่วนเชื่อมน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebasemt อะไรหว่าเดี๋ยวดูก่อนนั่นล่ะนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกtext input อันที่3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวางและก็เอารูปมาใส่ตรง 2 อันนี้นะคะ3 กับ 4 อันที่ 3 กับอันที่ 4โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่มนะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะที่เขาใช้นะมันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์"Firebase" นะคะ มันจะเป็นของF-i-n-d B-a-s-e Base อยู่ไหนนี่ ๆ Firebase.google.comให้เราหา Firebaseเจอไหม พิมพ์ F-i-r-e-ให้ไปที่เว็บ Firebase.google.com นะใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรกก็คือเราจะต้องกดGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase  หรือยังเพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Loginให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี Googleตั้งแต่ตอนที่เราใช้ตัวนัั้นให้ไปเลือกอะไร เลือก Createa New project ค่ะ เห็นไหมคะ สร้าง projectตรงช่องนี้นะเด็ก ๆ นะenter your projectเราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebaseอะไรนะ login นะทำไมมันไม่ให้พิมพ์L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมรับก่อนติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานแล้วก็กด Continueมันก็จะขึ้นมา บอกว่านี่คือ Google Analyticนะคะ for your ffile bet projectเสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะแล้วเราก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูกT-hแล้วก็ต้องติ๊กยอมรับนะคะI Acceptเลือก Authentication แล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะมันกำลังจะสร้างให้เรา เขากำลังจะหา...มันเป็นเหมือน Databaseแต่ออนไลน์ นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบบางคนอยู่หน้าyour new project is ready แล้ว คลิก Continue ค่ะLogin หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะเด็ก ๆ คลิกที่คำว่า Buildเห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Releaseมี Moniีมี endgrade เราไปคลิกที่ไอ้รูป...รูปไอ้เหมือนสามเหลี่ยม ลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All tinticationคลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get startทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ Anominus การระบุตัวตนน่ะ ที่เปิด EnableEnableแล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่โทรศัพท์เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การlogin ด้วยตัวไหนถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิกEnableเพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Saveก็คือบอกให้ระบบมันรู้ว่าAllten ที่เราใช้ในการ login สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 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เดี๋ยวเพื่อความชัวร์ เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะEbook เดี๋ยวว่าไม่รู้นะคะ นะคะให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ EBOOK ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register Appได้เลยไม่ใช่สิ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเองจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่มันใช้ว่าอะไรหว่า version อันนี้Component Sing insing in ไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่Data viewerdata weverdata assen settingหาก่อนนะcompronaallten sing inต้องการหา Sign inไม่ใช่My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkableขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี่update อย่างไรอาจจะต้อง Update Thunkable เราสักหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรือ เดี๋ยวขอ Test ตัวนี้ก่อนนแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่เพราะมันComponents มันมีไม่ครบThunkable Solutionเดี๋ยวนะIntegration ไม่ใช่น่ะ เราจะต้องUsing Thunkable ก็ไม่ใช่ มันเป็น Testเพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะใน Thunkable ของเรา ก็คือ Tool ที่ Signinมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Testดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้ อะไรได้ แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะก็จะให้ไปเก็บ...แบบ Tool Editingเดี๋ยวเรามาลองที่ Block ของเราแล้วกัน ไปที่ Blocตัวแรกเลย ก็คือ Text Input 1 ไปที่input 1 usernameไปที่ Text input1เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นนะ set textinput text toUsername Text Keyboard TypeฺBorderมันจะต้องเป็นพิมพ์เพราะฉะนั้นCheangคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บเลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text InputUsername ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะ เพราะตรงนี้ Username นะเหมือนกัน Text Input อันที่ 2กลับไปที่ Back to Edittingตอนนี้เด็ก ๆ ได้อยู่ที่ screem  1 ยังตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่ม ก็คือ บางคนน่าจะไม่ทันเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ testพอพิมพ์ปุ๊บเมื่อกี้มันน่าจะ Save ไว้แล้วพอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ช่องนี้นี่โอเคนะคะ โอเคเพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้งไหม อีกอันดู เดี๋ยวนะมันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะสิ่งแรก ก็คือเมื่อ text inputโดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input ใช่ไหมคะเราเลือกตัวนี้ออกมาสิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือให้ set ค่าของ Text Input น่ะจะซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหมtext Inputจะต้องทำงานนะคะ ให้มันทำงาน ตั้งเงื่อนไขให้มันอะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหมคือตัวที่ 2 ของเราpassword ก็เหมือนกัน เมื่อคลิกที่ Password มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Inputpassword when...คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...เซต Text นี้ เป็นซ่อน ซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วควา่มจริงเราต้องเลือกอันนี้set textPassword นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์ Keyboard typeเสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหมset defaultเราไม่ได้ set defuleไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกันText in Password ก็เป็นเซ็ตมันต้องซ่อนสิ password ไม่ให้โชว์นะต้องซ่อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Passwordจะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ต้องไม่แสดงUser น่ะฬฆ็แสดงUser แสดงอย่างนี้ได้แต่ password นี่มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนเดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ TนTo Default บ่ Password น่าจะเป็น to Defaultหน้าจะเป็น Toหรือ Toอะไร มีหลายตัวเลือกเป็น...เมื่อคลิก passwordแล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงนะคะset text input Password เป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Textแล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อนจาก Textให้มันซ่อน ได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บถ้าใช้อันไหนนะล่ะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนน่ะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะtext input... เมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Inputเมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ ปุ๊บ นี่ให้มันให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรไหมละนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Passwordtext usernameText Password Block ที่ 1 2ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เราwhyriablไปที่ Text ไปที่ Textทำให้เป็นตัวใหญ่ทำให้ textไปที่8 ไปที่ Colorเป็นจริง เมื่อคลิกแล้วจริงปุ๊บเป็นจริง ปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะSign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน...เราจะเอามันไปใส่ใน...ไหนได้sign in มันจะต้องเขาบอกว่าให้มันอยู่ตรง...เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in  Sing in Hello Email Sign in hello Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ ดู Sign up  Sign Up Do Sign In do ไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะใช้ไม่เหมือนกันทำไม Faeture นี้ ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีไม่เหมือนกันนะใช้ไม่เหมือนกันน่ะเดี๋ยวนะคะ Sign Upอันนี้หรือให้ทำอะไร ให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป

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