--- title: ฝึก PE พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ปลา subtitle: date: วันศุกร์ที่ 5 สิงหาคม 2565 เวลา 09.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอิน ทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่ เราจะทำอย่างไร พิมพ์ Thunkable ของเรา Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password อะตัวเอง อะไรนะ แล้วเราก็ เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่สงสัยจะไม่ใช่ตัวนี้งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อนเข้าไม่ถูกอันน่ะเข้าใหม่มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือโอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่Create new app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไร สมมติส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไป มันก็จะเป็น Category นะคะให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือส่วนของล็อกอินที่เขาสร้างไว้นะ เป็นตัวอย่างว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก ล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันนี่ เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงามไม่ใช่โย้ไปโย้มา เคลื่อนที่ไปมา วิธีการนี้คือ ใช้เครื่องมือที่ชื่อว่า... Colum หาคำว่า "Colum" พิมพ์ค่ะขี้เกียจ Suขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไท C-o-l-u-m-eu-m-e c-oไม่มี Coolu ทำไมล่ะ ๆ มี Componantไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรู ปเหมือนคนเลยใช่ไหม จะมีให้ไหมรูปคนน่ะ Thunkable เราหานะคะ เราหาโลโก้รูปแบบนี้ไอ้อะไรนะ อะไรนะ เอาแบบนี้ก็ได้ นึกออกนะ เขาเรียกว่าอะไร Search คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ดูด้วยนะฟรีไหม ฟรี ฟรี Download Image Standard Free เราเลือกว่าฟรีใช่ไหม ไหนบอกว่าฟรีอย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก free downloas โอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging โอเค ได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอิน ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไปจะใช้คำว่าล็อกอินหรือใช้คำว่าอะไรดี User Login แล้วกันนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมา ก็คือ lable ค่ะ เป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก label มาวางอยู่ใต้รูปใช่ไหม แล้วตรง Page นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User"แล้วก็คำว่า "ล็อกอิน" เข้าไป l-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ รูปแบบ font เด็ก ๆ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวครงไหนเอ่ย Text Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ18 เล็กไป เพิ่มขนาดได้เอาเท่าไหร่ 30 โอเคไหม โอเคนะ ได้ส่วนของ User login แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเราไปแก้ code น่ะค่ะ เราก็จะได้รู้ Image Image ImageIcon Image ของเราก็คือ Icon loginicon login l-o-g-i-nนะคะ ปุ๊บ1 2 3 ส่วนที่ 3 ที่จะต้องใส่เห็นไหมคะ อย่างนี้เขาเรียกว่า Tex few เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่าText Field นะลูก เห็นหรือยัง ใครหาไม่ดตรง Component เราน่ะ ไปที่...ถ้าหาไม่เจอพิมพ์ text fieldl หรือ Text input ของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะคะ เด็ก ๆ อันที่ 1 อันที่ 2 ต่อกันเรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ ให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่าทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text Input text input อันแรก Input 1 นี่เป็นอะไรเอ่ย ตัวบนนะคะ text ใส่ 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 Picture เลือกอัปโหลดไฟล์ login 1 openได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันไม่เท่าก็ขยาย ย่อ ขยายเอานะคะ เราก็ไไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขาโอเคนะคะ เขาได้แล้วนะรูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่มอัปโหลดไฟล์เข้าไปขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะนะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิมีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ แบบนี้นะคะ กับ forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กนะคะ ชื่อว่าCheck box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางให้เราได้ chack box แล้ว แล้วมีอะไรต่อจาก Checkbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า " remember me" ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า"Remember me" R-e Rememberb-e-r member แล้วก็มี me m-e นะคะ เดี๋ยวเปลี่ยน font ก่อนสีเห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกมีอะไรอีก กดผิด แล้วก็มีfor got passwordForgot Password มันเป็นเหมือน Text Link น่ะเราต้องใช้ตัว... label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้Label นี้ ใส่คำว่า พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me ก่อนะคะ มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ for got password ไม่ได้ลดลง 14 พอโอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot" นะคะ f-o-r fot got g-o-t got จำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ forgot แล้วก็ password Forgot แล้วก็ 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" เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N Login สีเอาสีอะไรไปที่ Background นะ เลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color ColorText Colorนะคะ สี...สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย บอให้แก้ตรงไหนนะ Border ใช่ไหมคะ Ladian น่ะความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ใช่ไหม ทำให้ตัว 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 บางคนเขาก็ใช้ m... mt อะไรหว่า จำไมเดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก text input อันที่ 3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ตรง 2 อันนี้ อันที่ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช่นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ "Firebase" นะคะ มันจะเป็นของต F-i-n-d B-a-s-e Fire Base อยู่ไหนนี่ ๆ Firebase.google.com ให้เราหา Fire เจอไหม พิมพ์ F-i-r-e-b-a-s-e ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้อง เราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebase หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี Google ไปแล้วนะ ตั้งแต่ตอนที่เราใช้ตัวนัั้น ให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง projec ตรงช่องนี้นะเด็ก ๆ นะ enter your projec เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ login นะทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งาน แล้วก็กด Continue New มันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ for yourfile bet project เสร็จแล้วเราก็คลิก Continue new เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-hแล้วก็ต้องติ๊กยอมรับI Accept แล้วก็ติ๊ก Accept นะ แล้วก็คลิกได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มน ะมันกำลังจะสร้างให้เรา เขากำลังจะหา...มันเป็นเหมือน Database แต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ บางคนอยู่หน้า your new project ready แล้ว Login หรือยัง บางทีต้อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มีมอนิเตอร์มีอนารีเกตีมี endgrade เราไปคลิกที่ไอ้รูป...รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All tintication คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คืการระบุตัวตนน่ะ คลิกเปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์ เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก nable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Allten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไร นะ Username ใช่ไหมตรง Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดู ตรงบิ้ว มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้วมันจะขึ้นว่าสถานะตรงนี้ Project overview แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project seting นะ ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่างYour App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเราเรายังไม่มีแอปในโปรเจกนี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี ids แล้วก็มีรู้ Printer เครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web app นี่คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไรอันไหนไม่ใช้จะปิดแล้วนะ ลองพิมพ์ชื่อ ชื่อ app เราลงไปนะคะ E-book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะะคะเข้าใจนะ พิมพ์ลงไปนะคะ E เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ Ebook นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะ พิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไป เช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ตามแม่นะ พิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register App ได้เลยชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อบไปวางในแอปเราจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าเวอร์ชันอันนี้ Component Sing in ไม่เจอมันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer data wever...data assen seting นะคะ หาก่อนนะ compronent all ten sing in ต้องการหา Sign in Loading locไม่ใช่ My data sourse หรือ ก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ update ยังไง เดี๋ยวนะอาจจะต้อง Update Thunkable เราหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรอเดี๋ยวแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Components มันมีไม่ครบ ThuSolutionSolution เดี๋ยวนะ Integration เราจะต้อง Using Thunkable ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อบฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable Tool ที่ Signinมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ เก็บฐานข้อมูลนะ ถ้าจะให้ไปเก็บ...แบบ Tool Editing เดี๋ยวเรามาลองที่ Box ของเราก็แล้วกัน ไปที่ Block นะคะเด็ตัวแรกเลย ก็คือ Text Input 1 ไปที่ input 1 usernam ไปที่ Text input1 เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นนะ set text input text to Username Text Keyboard Typeฺ Border มันจะต้องเป็นพิมพ์ เพระาฉะนั้น Cheang คลิกเมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บเลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Text เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ screen1 ยังตอนนี้ที่เราจะกำหนดค่า ก็คือ 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 ก็เหมือนกันมี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input password when... คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...set Text นี้เป็นซ่อน ซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหม set defult เราไม่ได้ set defaultไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ ทำเหมือนกันก็เป็นเซ็ต มันต้องซ่อนสิ password ต้องซ่อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ต้องไม่แสดง User น่ะ ไม่แสดง User แสดงอย่างนี้ได้ แต่ passwor มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ To อะไร To Default บ่ Password น่าจะเป็น to Default หน้าจะเป็น Too หรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก password เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ แก้เงื่อนไขมันก่อน จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ เมื่อกำหนดค่า เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type keybrod มีการพิมพื ปุ๊บนี่ ให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรไหมละนี่ น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Password text username Text Password ใน Block ที่ 1 ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา whyriabl ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ ถึงที่ต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ sign in มันจะต้อเขาบอกว่าให้มันอยู่ตรง... เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Hello Sing in Email Sign in hello Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือเป็นแบบนี้หรือ ดู Sign up Sign Up Do Sign In doไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกัน ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีไม่เหมือนกันนะใช้ไม่เหมือน เดี๋ยวนะคะ Sign Up อันนี้หรอให้ทำอะไรให้ลงทะเบียน ให้ลงทะเบียนโดยใช้ Email หรือ Passeord ไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป (ปี้)ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้าThunkable X ก็คือใช้ IOS เข้าใจแล้ว ทดสอบแอปมันยังไม่ reresd ใช้ไม่ได้ ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะ มันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก้จะมาก็อป Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป้น Thunkable X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไป เราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้ คือ เชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkable ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ตอนนี้มันเป็น Thunk เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเอง อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ โอเค Thunkable X ทำไมไม่อัปให้เรา -