--- title: ฝึก PE พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ภูมิ subtitle: date: วันศุกร์ที่ 5 สิงหาคม 2565 เวลา 09.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้า ทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ Login เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Googleเข้าผิดอันสะบ่สงสัยจะไม่ใช่ตัวนี้ งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อนเข้าไม่ถูกอันน่ะเข้าใหม่มีหลายตัวจำไม่ได้หรอโอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้ หม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New Appตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไรส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Category ให้เลือกเป็น Education แล้วกันดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของ Login ที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงามไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Colum หาคำว่า "Colum" ขี้เกียจ lขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไทl C-o-l-u-m-e-u-m-e c-oไม่มี Colum ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ดูตัวอย่างเขานะดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่ Image หรืออะไรลูกเลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนน่ะ Thunkable เราหา เราหา Logo รูปแบบนไอ้อะไรนะอะไรนี้เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ตัวนี้ดีกว่าตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ดูด้วยนะฟรี ฟรี ฟรี Download Image Standard Free เราเลือกว่าฟรีใช่ไหมไหนบอกว่าฟรีอย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก free downloas โอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะตัวนี้ก็สวยอยู่นะเอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เราแล้วก็ตรงชื่อ Picture นะอัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging ได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีใน Login ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไปจะใช้คำว่าล็อกอินหรือใช้คำว่าอะไรดี User Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ lable คะเป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า Login เข้าไป l-og-i-n สัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ รูปแบบ font เด็ก ๆ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วยจัดแนวครงไหนเอ่ยTest Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ นะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้เอาเท่าไหร่ 30 โอเคไหมโอเคนะได้ส่วนของ User login แล้วก็คือส่วนของ Lable ทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม 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 feelหรือ Text inpu tของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะคะ เด็ก ๆ อันที่ 1 อันที่ 2 ต่อกันเรียงต่อกัน Text Field เราใช้ 2 อันเพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ ขยายขนาดด้วยนะคะ ให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะเว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่าทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text Input text input อันแรก Input 1 นี่เป็นอะไรตัวบนนะคะ ใส่ Username TextInput 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 รูปแรก Image 1 Picture เลือกอัปโหลดไฟล์ login 1 openได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยายย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้นคลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขาโอเคนะคะ เขาได้แล้วนะคะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไปขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะนะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อจะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิมีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนกับ forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีปิ๊ก ชื่อว่า Check box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางให้เราได้ chack box แล้วแล้วมีอะไรต่อจาก Chec kbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า " remember " ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Rememberb-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยนสร font ก่อนจะได้เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกมีอะไรอีก กดผิด แล้วก็มี for got password Forgot Password มันเป็นเหมือน Text Link น่ะเราต้องใช้ตัว... label นั่นล่ะแล้วตอนเขาเรียกอะไรนะตอนเชื่อมนะตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me มีความรู้สึกว่ามันใหญ่ไปมันจะใส่ for got password ไม่ได้ลดลง 14 พอโอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot"นะคะ f-o-r for got g-o-t got จำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ forgot แล้วก็ password Forgot แล้วก็ P P-a-s-s Pass W-o-r-d แล้วก้ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กันไอ้นี่ล่ะนะ ไอ้ Remember me ก็คือ 14 ทำ Slide ล้วก็สีสีแจ่มว้าวขึ้นมาหน่อยให้เห็นความแตกต่างตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้เดี๋ยวเลื่อนอีกนิดหนึ่ง color เอาสีอะไร เอาสี...สีเหลือง สีเขียว สีฟ้า โอเคโอเคแล้วนะนะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยมดูนะคะ เราไปเลือก botton คลิก button แล้วลากมาวางด้านล่างสุดใช่ไหม Button นี้พิมพ์คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N Login สีเอาสีอะไรไปที่ Background นะเลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม ม่วงโอเคทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วยโอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ ด้วย โค้งมากโค้งน้อยแก้ตรง Border ใช่ไหมคะ Ladian น่ะแก้ตรง ladiaความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้วทีนี้มันจะเชื่อมอย่างไรนะทำให้ตัว Login มันเชื่อมได้ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูกอ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ใน Code น่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่ label คำว่า 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" นะคะ มันจะเป็นของ F-i-n-e B-a-s-e Fine Base อยู่ไหนนี่ ๆ Firebase.google.comให้เราหา Fire เจอไหม พิมพ์ F-i-r-e- ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรกก็คือเราจะต้องเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebase หรือยังให้เรากดตัวนี้นะคะ เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชีตั้งแต่ตอนที่เราใช้ตัวนี้ให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง projects ตรงช่องนี้นะเด็ก ๆ นะ enter your projects เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebaseอะไรนะ login นะทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะติ๊กยอมติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานแล้วก็กด Continueมันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ for your file base project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะแล้วเราก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับ I Accept เลือกแล้วก็ติ๊ก Accept นะ แล้วก็hเลือกได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะมันกำลังจะสร้างให้เรา เขากำลังจะหา...มันเป็นเหมือน Databaseแต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบทุกคนอยู่หน้า your new project ready แล้ว Login หรือยัง บางทีต้อง Login ก่อน มันขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือซ้ายมือนะเด็ก ๆ คลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Releaseมีมอนิเตอร์มีอนารีเกตีมี endgrade เราไปคลิกที่ไอ้รูป...รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All tintication คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get startทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คืการระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์ิอย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหนถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน E-mail เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Allten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช้ไหมตร Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่ออันนี้ พอเราย้อนกลับมานะคะ มาดูตรงบิ้วมันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้วมันจะขึ้นว่าสถานะตรงนี้ Project overview แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project seting ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเรา ยังไม่มีแอปใน project นี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี ids แล้วก็มีรู้ Printer เครื่องหมายมากกว่า - น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือกตรงตำแหน่งนี้ My Web app นี่คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไรอันไหนไม่ใช้จะปิดแล้วนะลองพิมพ์ชื่อ ชื่อ app เราลงไปนะคะ E-book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะ เข้าใจนะ พิมพ์ลงไปนะคะ E เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-book นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะไม่ใช่พิมพ์คำว่า E-มาพิมพ์ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register Appได้เลยชื่อที่จะใส่น่ะ เป็นชื่อแอปที่ไม่ใช้เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี code มาเห็นไหมคะ เขาบอกว่าเราต้องเอา ฉนนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่มันใช้ว่าอะไรหว่าเวอร์ชันอันนี้ Component ไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่ Data viewer data wever data assen setingsetting เดี๋ยวนะหาก่อนนะ compronan all ten singinต ้องการหา Signin ไม่ใช่ My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี update ยังไงอาจจะต้อง Update Thunkable เราหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้... ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรอเดี๋ยวแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่เพราะมัน Components มันมีไม่ครบ Solution เดี๋ยวนะ Integration ไม่ใช่น่ะเราจะต้อง Using Thunkable app ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราใน Thunkable Tool ที่ Sigin มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมุลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะก็จะให้ไปเก็บ... แบบ Tool Editingเดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ Textinput 1 usernamไปที่ Text input1เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นนะ set textinput text toUsername Text Keyboard Typeฺ Border มันจะต้องเป็นพิมพ์เพระาฉะนั้น Cheang คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บเลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text จาก ธรรมชาติ Taxt เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะ เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ seen 1 ตอนนี้ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ test พอพิมพ์ปุ๊บเมื่อกี้มันน่าจะ Save ไว้แล้วพอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ช่องนี้นี่โอเคนะคะ โอเคเพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง อีกอันดูอมันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะสิ่งแรกก็คือเมื่อ text input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมาสิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือ 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 defil เราไม่ได้ set defule นี่ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกันก็เป็น setมันต้องซ่อนสิ passwordต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Passwordจะซ่อนให้เราไหมล่ะ เราลอง ดูนะคะ เพราะตอนพิมพื password ต้องไม่แสดงUser น่ะไม่แสดง User แสดงอย่างนี้ได้แต่ passwor มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนเดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ Tool To Default บ่ Password น่าจะเป็น to Default หน้าจะเป็น Tool หรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก password เมื่อคลิก Passwordแล้ว พิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ แก้เงื่อนไขมันก่อนจาก Text ให้มันซ่อนได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะเมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Typekeybrod ให้มันให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรไหมละนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Password text username Text Passwordไหน Block ที่ 1 ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา whyriable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ text ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ sining เขาบอกว่าให้มันอยู่ตรง... ที่ Boxเดี๋ยวนะ มันเป็นอะไรล่ะApp Feature Sign inSignin Singin Email Sign in hello Reset PasswordDelete User Sign Upเขาให้กำหนดเป็นแบบนี้หรอเป็นแบบนี้หรือ ดู Sign up Sign Up Do Sign In do ไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะใช้ไม่เหมือนกันน่ะ ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีต้องเอามาใส่ไว้ในไหน ไม่เหมือนกันนะใช้ไม่เหมือนกันน่ะเดี๋ยวนะคะ Sign Up อันนี้หรอให้ทำอะไรให้ลงทะเบียนให้ลงทะเบียนโดยใช้ E-mail หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป (ปี้) ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in ได้ Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อถ้า Thunkable X ก็คือใช้ IOS เข้าใจแล้วทดสอบแอปมันยังไม่ reresd ใช้ไม่ได้ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก้จะมาก็อป Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป้น Thunkabel X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkable X ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkableเนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อ... แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ Thunkable X ทำไมไม่อัปให้เรา - (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะใครที่เข้ามาแล้วThunkable