(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะเด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไร พิมพ์ Thunkable Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ Login เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่ ชั่งเถอะ สงสัยจะไม่ใช่ตัวนี้งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อนเข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้เข้าตัวนี้หรือ โอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create New app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร ส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น  Category ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของล็อกอินที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้มีลักษณะแบบนี้ มีช่องกรอก ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ Username ใช่ไหมลูกล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงามไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Colum หาคำว่า "Colum" พิมพ์ค่ะ ขี้เกียจ Suerch -l ขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไม C-o-l-u-m-e u-m-e c-oไม่มี Colum หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วางปึ๊บ ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนเลยใช่ไหม จะมีให้ไหมรูปคนน่ะ Thunkable เราหา เราหาโลโก้รูปแบบไอ้อะไร แบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา  สมมติจะเอาตัวนี้ ฟรีหรือเปล่าดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free เราเลือกว่าฟรีใช่ไหม ไหนบอกว่าฟรี อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Free download ด้วย เดี๋ยวติดลิขสิทธิ์อีก free download โอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ png ก็พอ Premium free download ไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เราแล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging ได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอิน ก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไปจะใช้ล็อกอินหรือใช้คำว่าอะไรดี User Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมา ก็คือ lable ค่ะเป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่าง เห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้าง ลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Page นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า "Login" ลงไป l-o-g-i-n สัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วยจัดแนวครงไหนเอ่ยTest Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ นะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้เอาเท่าไร 30 โอเคไหม โอเคนะได้ส่วนของ User login แล้ว ก็คือส่วนของ Label แล้ว ทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเราไปแก้ Code น่ะคะเราก็จะได้รู้ Image Image ก็เหมือนกัน ImageIcon Image ของเราก็คือ Icon login l-o-g-i-n นะคะ ปุ๊บ 1 2 3 ส่วนที่ 3 ที่จะต้องใส่เห็นไหมคะ อย่างนี้เขาเรียกว่า Text few เพราะมันจะต้องเป็นให้กรอกข้อความได้ 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 Text Input อันแรก Input 1 นี่เป็นอะไรตัวบนนะคะ Text ใส่ Username TextInput 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 Image1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยายย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะนะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อจะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิมีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนกับ forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีปิ๊ก ชื่อว่า Check box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางให้เราได้ chack box แล้วแล้วมีอะไรต่อจาก Check box ก็คือมี 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-rfot gotg-o-t gotจำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำforgotแล้วก็ passwordForgot แล้วก็ 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" เข้าไป L-o ตัวใหญ่เลย L-o-g-i-n Login สีเอาสีอะไรไปที่ Background นะ เลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ  Color Color Color Text 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 บางคนก็ใช้ mt อะไรหว่าจำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก Text input อันที่ 3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวางและก็เอารูปมาใส่ตรง 2 อันนี้ อันที่ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช้นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ F-i-n-d B-a-s-eFind Base อยู่ไหนนี่ ๆ Firebase.google.com นะ ให้เราหา Firebase.google.com เจอไหม พิมพ์ F-i-r-e-ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรกก็คือเราจะต้องเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebese หรือ เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชีตั้งแต่ตอนที่เราใช้ตัวนัั้น ให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง project ตรงช่องนี้นะเด็ก ๆ นะ Enter your project เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ login นะทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะติ๊กยอมติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานแล้วก็กด Continue มันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ for your firebase  project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-h-a-i แล้วก็ต้องติ๊กยอมรับ I Accept เลือกแล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะมันกำลังจะสร้างให้เรา เขากำลังจะหา...มันเป็นเหมือน Database แต่ออนไลน์ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ บางคนอยู่หน้า your new project ready แล้ว คลิก Contineu Login หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือซ้ายมือนะคลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มีมอนิเตอร์มีอนารีเกต มี endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All tintication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ Annuninus การระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหนถ้าสมมติเมื่อกี้น ี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Auten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช้ไหมตรง Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดูตรง Build มันจะขึ้นว่าสถานะตรงนี้ 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 เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-book นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไป เช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ตามแม่นะ พิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะ เสร็จแล้วกด Register App ได้เลย ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี Code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าอันนี้ Component Singin ไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่ Data viewer data assen setting  หาก่อนนะ Component Auten singin ต้องการหา Signin ไม่ใช่ My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ Update อย่างไร อาจจะต้อง Update Thunkable เราหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือเดี๋ยวขอเทสแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Component มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration เราจะต้อง Using Thunkable ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เรา ใน Thunkable Tool ที่ Signin มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมุลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะก็จะให้ไปเก็บ...แบบ Tool Editing เดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ Text input1 Username เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นนะ set textinput text to text input Username Text Keyboard Type ฺ Border มันจะต้องเป็นพิมพ์เพราะฉะนั้น Cheang คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input  Username ปุ๊บทำอะไร เลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Text จาก taxt เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะ เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 sinvpy' ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ 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 wen... คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้ Set Text นี้เป็นซ่อนซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วควา่มจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่รับค่าจากการพิมพ์นะ Key board เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหมset defilเราไม่ได้ set defule ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน ก็เป็นเซ็ตมันต้องซ่อนสิ password ไม่ให้โชว์นะ ต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ตามหลักต้องไม่แสดง User น่ะไม่แสดง User แสดงอย่างนี้ได้แต่ passwor มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ ToolTo Default บ่ Password น่าจะเป็น to Default หรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิถูกไหม แก้เงื่อนไขมันก่อนจาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะ เมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ ให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรไหมละนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Password text username Text Password ไหน Block ที่ 1 ไอ้ Block ที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา whyriablไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ text ไปที่ Colorเป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ singin เขาบอกว่าให้มันอยู่ตรง... เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sing in Email Sign in Email Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ เขากำหนดให้เป็นแบบนี้หรือ Do Sign up Sign Up Do Sign In do ไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะใช้ไม่เหมือนกันทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะใช้ไม่เหมือน เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไรให้ลงทะเบียนให้ลงทะเบียนโดยใช้ Email หรือ Passeord ไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อปทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Signin ได้Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้า Thunkable X ก็คือใช้ IOS เข้าใจแล้ว ทดสอบแอปมันยังไม่ reresd ใช้ไม่ได้ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก้จะมาก็อป Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkableเดิมเรานี่ให้เป้น Thunk ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkableตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkable  เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ Thunkable X ทำไมไม่อัปให้เรา