(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้าThunkable เหมือนเดิมนะคะเด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable แล้วก็ให้ Login เข้า จำได้นะ Password ตัวเองอะไรน่ะ แล้วเราก็ Login เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Googleเข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้งง ๆ นะ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย แต่ผมจะออก Sign Out เข้าไม่ถูกอันน่ะเข้าใหม่ มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร ส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น... Category นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของ Login ที่เขาสร้างไว้นะ เป็นตัวอย่างว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของUsername ใช่ไหมลูก แล้วก็ปุ่ม Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้ใช้เครื่องมือที่ชื่อว่า... Colume หาคำว่า "Column" ขี้เกียจ Search  ขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป C-o-l-u-m-e u-ไม่มี Column หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วางปุ๊บ ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไง ใช่ไหม จะมีให้ไหมล่ะ รูปคนน่ะ Thunkable กับ... เราหานะคะ เราหาโลโก้รูปแบบนี้ ไอ้อะไรนะเอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ ดูด้วยนะฟรี ๆ ๆ Download Image Standard Free เราเลือกว่า Free นะ ใช่ไหม ไหนบอกว่าฟรี ขี้ตั๋ว อย่าลืมหาคำว่า "Free" ด้วยนะเด็ก ๆ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีกFree Download โอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหมLogo loging งได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอินก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ Login เข้าไปจะใช้คำว่า "Login" หรือใช้คำว่าอะไรดี User Login แล้วกันนะคะ  เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ Lable คะเป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก Label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไรUser พิมพ์คำว่า "User" แล้วก็คำว่า "Login" เข้าไป L-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์ เพื่อจะพิมพ์ข้อความคำว่า "Login"ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้ามอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Loginนะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Test Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไหร่ 30 โอเคไหม โอเคนะ นะคะ ได้ส่วนของ User login แล้วทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืมLabel Label อันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไร นะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเราไปแก้โค้ดน่ะค่ะ เราก็จะได้รู้ Image ก็เหมือนกัน Image Icon Image ของเราก็คือ IconloginIcon Login l-o-g-i-nนะคะ ปุ๊บ1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Text Field เพราะมันจะต้องเป็นให้กรอกข้อความได้2 อันขาว ๆ นี่เห็นนะไอ้ตัวขาว ๆ 2 อันนี้ เราจะใส่ส่วนที่เรียกว่าText Field นะลูก เห็นหรือยังหา 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 อันแรก Input1 นี่เป็นอะไรตัวบนนะคะ Text Input ใส่ 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 รูปแรก Image 1 Picture เลือกอัปโหลดไฟล์ login 1 Open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อ-ขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เข้าได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่มอัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิ มีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนกับ Forget Password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีปิ๊ก ชื่อว่าCheck box เห็นไหมคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางให้เราได้ Chack box แล้ว แล้วมีอะไรต่อจาก Checkbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า "Remember" ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยนฟอนต์ก่อน สี จะได้เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกกดผิดอยู่เรื่อยเลย แล้วก็มี Forgot Password Forgot Password มันเป็นเหมือน Text Link น่ะเราต้องใช้ตัว... Label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมนะตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้Label นี้ ใส่คำว่า พื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me มีความรู้สึกว่ามันใหญ่ไปมันจะใส่ Forgot password ไม่ได้ลดลง 14 พอโอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot"นะคะ  F-o-r ด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 เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยมดูนะคะ เราไปเลือก Button คลิก Button แล้วลงด้านล่างสุดใช่ไหม Button นี้ พิมพ์คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-o-g-i-n Login สีเอาสีอะไรไปที่ Background นะเลือก สีค่ะ สีปุ่ม ปุ่ม ๆ ๆ มีความแซ่บเบอร์ 10 มีความอยากได้สีชมพู อยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินนะ โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบฟอนต์ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย แก้ตรงไหนคะ Border ใช่ไหมคะ radian น่ะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับค่า radian เลย โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด Login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ในบล็อกไง โค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ Label คำว่า "User Login" นะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ Text nputลาก Text Input ไปวาง 2 อัน 3 กับ 4 ได้รูปแล้ว เสร็จแล้วมา Label ก็เปลี่ยนเป็น User Login มันตรงส่วนเชื่อน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebase อะไรหว่า เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก Text Input อันที่ 3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวางและก็เอารูปมาใส่ตรง 2 อันนี้ อันที่ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่มนะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช้นะ มันจะชื่อว่าไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ Firebase นะคะ มันจะเป็นของต F-i-r-e B-a-s-e Firebase อยู่ไหนนี่ ๆ Firebase.google.com ให้เราหา Fire เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebese หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Login ด้วยบัญชีตั้งแต่ตอนที่เราใช้ตัวนัันให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง Project ตรงช่องนี้นะเด็ก ๆ นะ Enter your project name เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ Login นะทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งาน แล้วก็กด Continueมันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ Firebase  project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก แล้วก็ติ๊ก Accept นะ แล้วก็ Creat Projeโอเคได้เลย มันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบบางคนอยู่หน้าyour new project ready แล้วLogin หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือซ้ายมือนะ ให้เด็ก ๆ คลิกที่ Buildเห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Releaseมี Monitor มี..ndgrade เราไปคลิกที่ไอ้รูป...รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก Get Start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น... คือ เขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ Anonymous นะ การระบุตัวตนน่ะ ที่เปิด Enableแล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้า ก็ไปคลิกที่โทรศัพท์ เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ Login ด้วยตัวไหน ถ้าสมมติเมื่อกี้นี้ Login ผ่าน Emailเห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Saveก็คือบอกให้ระบบมันรู้ว่า Authen ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช้ไหมตรanonymous เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่ออันนี้พอเราย้อนกลับมานะคะ มาดู เอ้ย ตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้วให้เรามาตรงนี้ Project overview แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project setting ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วให้เข้ามาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเรายังไม่มีแอปในโปรเจกนี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี IDS แล้วก็มีรูปเหมือน Printer เครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web app นี่คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไร อันไหนไม่ใช้เดี๋ยวจะปิดแล้วนะลองพิมพ์ชื่อ ชื่อแอปเราลงไปนะคะ E-Book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะเข้าใจนะ พิมพ์ลงไปนะคะ E เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะE-book นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไป เช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ตามแม่นะ พิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register App ได้เลย ไหนนะ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่ มันจะมีโค้ดมาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปฯ ไปวางในแอปเรา จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า... ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าเวอร์ชันนี้Componant Sign In  Sign In ไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่ Data viewer Data setting หาก่อนนะ  Arthen Componantต้องการหา Signinไม่ใช่My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ก่อน ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี่update อย่างไรอาจจะต้อง Update Thunkable เราหน่อยมันจะใช้... เขาเรียกว่าอย่างไรล่ะ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรอเดี๋ยวแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่นะ เพราะมัน... Component มันมีไม่ครบ ThunkableSolution เดี๋ยวนะ Integration Community Doc ไม่ใช่น่ะ เราจะต้อง... Using Thunkable App ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้ว เอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เรา ใน Thunkable Tool ที่ Sign In มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ  คือ ตอนนี้เรากรอกข้อมูลได้อะไรได้ แต่จะไม่เก็บ... เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ก็จะให้ไปเก็บ... แบบ Back Tool Editingเดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่Input 1 Username ไปที่ Text input 1เมื่อ Text Input Usernameคลิก ไม่ใช่ มันจะต้องเป็นนะ Set Text Input Text toUsername Text Keyboard TypeฺBorder มันจะต้องเป็นพิมพ์ เพระาฉะนั้น Cheangคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ เลือกอันนี้ออกไปก่อน เลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเคถูก เห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ  เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 หรือยัง ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือ... เดี๋ยวลบก่อนนะ เมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่เทสต์น่ะ พอพิมพ์ปุ๊บ เมื่อกี้มันน่าจะ 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 InputPassword when don't click คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...เซต Text นี้เป็นซ่อน ซ่อนแล้วก็... ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วความจริงเราต้องเลือกอันนี้Set TextPassword นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มนะ Set Defultเราไม่ได้ Set Defult ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผล ก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in Password ก็เป็น Set มันต้องซ่อนสิ Password ไม่ให้โชว์ใช่ไหม ต้องซ้อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Passwordจะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ Password ต้องไม่แสดงUser น่ะ ไม่แสดงUser แสดงอย่างนี้ได้ แต่ Password มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ To Default บ่ Password น่าจะเป็น To Default หรือ To อะไร มีหลายตัว เดี๋ยวนะครับ เลือกเป็น...เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ แก้เงื่อนไขมันก่อนจาก Textให้มันซ่อน ได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะหรือเราใส่สลับเอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ เมื่อกำหนดค่า เมื่อกำหนดค่า Text Inputเมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ ให้มันทำ...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วงของ Text Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรหรือเปล่านะนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Password Text UsernameText Passwordไหนบล็อกที่ 1ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ Textไปที่ List ไปที่ Colorเป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะSign in ขึ้นมาแล้ว เจอแล้ว เอ๊ะ แต่มันมาอยู่ใน...เราจะเอามันไปใส่ในไหนได้ Sign In มันจะต้อง... เขาบอกว่าให้มันอยู่ตรงบล็อกหรือเดี๋ยวนะ มันเป็นอะไรล่ะApp Feature Sign InSign In Hello Sing in EmailSign in helloReset PasswordDelete User Sign Upเขาให้กำหนดเป็นแบบนี้หรือเป็นแบบนี้หรือ ดู Sign Up ดู SungSign In doไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกันน่ะ ทำไมฟีเจอร์นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีไม่เหมือนกันนะใช้ไม่เหมือนเดี๋ยวนะคะ Sign Upอันนี้หรือให้ทำอะไร ให้ลงทะเบียนโดยใช้ Email หรือ Passwordไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อปฯ ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable Xเอามาจากไหนนะ Thunkable Xมันจะเพิ่ม Sign In ได้Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น Xอ๋อ ถ้า Thunkable X ก็คือใช้ iOS เข้าใจแล้วทดสอบแอปมันยังไม่ release ใช้ไม่ได้ ต้องเป็น...ข้อจำกัดเยอะเหมือนกันนะนี่โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น... มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ Sign In น่ะ ถ้า Thunkable X น่ะ มันจะเป็น...ก็คือเราก้จะมาก็อปฯ Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkableเดิมเรานี่ให้เป็น Thunkable X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Firebase เพราะ Thunkable เรามันเป็น Thunkable Xตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkable X เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเอง จะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อแม่ไม่ไป พ่อก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยเลยนะคะ Thunkable X ทำไมไม่อัปให้เรา  -