(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่ เราจะทำอย่างไรพิมพ์ Thunkable ของเรา Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้า จำได้นะ Password ตัวเองอะไรนะแล้วเราก็ Login เข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google ใช้ตัวนี้ เข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วย แต่ผมจะออกก่อนเข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้ เข้าตััวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New Appตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอย่างไรส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Category ให้เลือกเป็น Education แล้วกันดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของล็อกอินที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูกล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงาม ไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" พิมพ์ค่ะ ขี้เกียจ Search ขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไท C-o-l-u-m-e-u-m-e c-o ไม่มี Column หรือ ทำไมล่ะ ๆ มี Component ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่ image หรืออะไรลูก เลือกมาใช่ไหม เลือก image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่ง ตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไงใช่ไหม จะมีให้ไหมรูปคนน่ะ Thunkable กับ... เราหานะคะ เราหาโลโก้รูปแบบนี้ ไอ้อะไรนะอะไรนะ เอาแบบไหน เอาแบบนี้ก็ได้ Icon login 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 มาวางอยู่ใต้รูปของ... ใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า Login เข้าไป l-o-g-i-n สัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Text Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ นะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้ เอาเท่าไร 30 โอเคไหม โอเคนะนะคะ ได้ส่วนของ User login แล้ว ก็คือส่วนของ Label แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label ว่าอันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเราไปแก้ Code น่ะค่ะ เราก็จะได้รู้ Image Image ก็เหมือนกัน Image Icon Image ของเราก็คือ Icon login Icon login l-o-g-i-n นะคะ ปุ๊บ 1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Tex field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่ เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้ กรอบขาว ๆ 2 อันนไอ้ตัวเราจะใส่ส่วนที่เรียกว่า Text Field นะลูก เห็นหรือยัง ใครหาไม่ตรง Component เราน่ะ ไปที่... ถ้าหาไม่เจอพิมพ์ Text field หรือ Text input ของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะเด็ก ๆ ราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะคะ เด็ก ๆ อันที่ 1 อันที่ 2 ต่อกันเรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไรให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่าทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text  Input Text input อันแรก Input 1 นี่เป็นอะไรเอ่ยตัวบนนะคะ Text input 1 ใส่ มันจะเป็นใส่ Username Text Input 1 นี่คือ User Name นะ Text Input User name นะคะ อันที่ 2 เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไรนะคะ เวลา Coding เราจะได้รู้นะ เราไปแก้ถูกอันหรือเปล่า Text Input อันที่ 2 ชื่อว่า Password บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งนะคะ เราได้ 2 ส่วนแล้วนะ ทีนี้ใน Username นะคะ ใน Username นี่ มันมีอะไรอยู่ด้วยเห็นหรือเปล่า มันใส่อะไรเข้าไปในตัวอย่าง ในตัวอย่าง กดผิด ขอโทษ ในตัวอย่างเห็นไหมคะ มันมีไอคอนรูปเป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเห็น con นี้ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ใส่เข้าไปในนี้ ใส่ได้ไหม ให้ใส่เข้าไปไหมนี่ จะให้ใส่เข้าไปใน Text ไหมล่ะ ไม่ให้ใส่เข้าไปข้างใน ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็มี Image เล็ก ๆ นี 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะเด็ก ๆ อย่านะคะ ลืมมีรูปอะไร รูปคนกับรูปกุญแจน่ะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free download เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจหาต่อ ๆ หาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า Lock เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image 1 Image 1 Picture เลือกอัปโหลดไฟล์ Login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด เอ้ยไม่ใช่ อีก 2 ส่วนสิ มีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้เห็นไหมคะ กับ Forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กชื่อว่า Check box เดเห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวางให้เราได้ Check box แล้วแล้วมีอะไรต่อจาก Check box ก็คือมี Label ใช่ไหมคะ บอกว่า Rememberme มี Label เขียนคำว่า "Rememberใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน Font สี Font ก่อน จะได้เห็น เห็นไหมคะ Browเห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกมีอะไรอีก กดผิด แล้วก็ม ีforgot password Forgot Password มันเป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... Label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมน่ะนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า... เดี๋ยวพื้นที่ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me ก่อนนะคะ มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ Forgot password ไม่ได้ลดลง 14 พอโอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้คำว่า "Forgot" นะคะ  f-o-r 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 ทำ ไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่างตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ Color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไร คะ Login ใช่ไหม ปุ่ม Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน เป็นสีเหลี่ยมดูนะคะ เราไปเลือก ottonคลิก button แล้วลงด้านล่างสุดใช่ไหม Button นี้พิมพ์ข้างในว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N LOGIN สีเอาสีอะไรไปที่ Background นะเลือกสีค่ะ สีอะไร สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color สีน้ำเงินนะ สี... สีม่วงโอเคทำตัวหนาด้วย เปลี่ยนรูปแบบ Font ด้วยโอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยจำได้นะ บอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Ladian น่ะ แก้ตรง Ladian นะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด Login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ตอนเราไปใน Box ไง ในโค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดูอันที่ 2 ใบเตยต้องใส่ label คำว่า login นะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางเป็ส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ text input ลาก 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 B-a-s-e Firebase ไหนน่ะ นี่ ๆ Firebase.google.com เจอไหม ให้เราหา Firebase เจอไหม พิมพ์ F-i-r-e-b-a-s-e ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebese หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี Google ตั้งแต่ตอนที่เราใช้ตัวนัั้นให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง project คลิก 1 ครั้ง ตรงช่องนี้นะเด็ก ๆ นะ Enter your project name นี่ เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ login นะทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมรับก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งาน แล้วก็กด Continue มันก็จะขึ้นมาบอกว่านี่คือ Google Analytic นะคะ for your firebase project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะคะ แล้วเราก็ถามเอ้ยว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือกAnalytic แล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เราน่ะ เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า your new project ready แล้ว Login หรือยัง บางทีตอง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือ นี่ ๆ มันจะมี Build มี Release มีมอนิเตอร์มี Analytic มี ฎndgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentintication คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authentication ใช่ไหมคะ เราก็คลิก Get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือการระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ ถ้าสมมติถ้าไปทำของตัวเองแล้ว ใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็คลิกตัวนี้ และเราก็คลิก nable เพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่ใช้ในการล็อกอินที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไรนะ Username ใช้ไหมตร Anominus แล้วก็ Password 2 ตัว เพราะฉะนั้น ตรง 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 เดี๋ยวว่าไมนะคะ นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ E-book ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register App ได้เลย ไหนนะ ไม่ใช่สิ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่ มันจะมี Code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าอันนี้ Component Sign in ไม่เจอ มันจะไปต่อไม่ได้มันต้องใช้อะไรนี่ Data viewer list Data viewer seting data ascent setting หาก่อนนะคะ component Authen sing in ต้องการหา Signin Lating locaไม่ใช่My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนี่ Update อย่างไร เดี๋ยวนะ อาจจะต้อง Update Thunkable เราสักหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอ Test ตแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่เพราะมัน Components มันมีไม่ครบ ThunkablSolution Soluti เดี๋ยวนะ Integration เราจะต้อง Using Thunkable lite app ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา Tool ที่ Signin มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้แต่จะไม่เก็บใน เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... แบบ back to Editing เดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ text input 1 username ไปที่ 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 จาก taxt เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะ เพราะตรงนี้ Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Screen 1 ตรงค่า Design ตอนนี้ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ test น่ะ พอพิมพ์ปุ๊บ มันเมื่อกี้มันน่าจะ Save ไว้แล้วพอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ช่องนี้ นี่โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง อ Edit มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะสิ่งแรกก็คือเมื่อ text input โดนคลิกลงไป ก็คือคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือ มันจะต้องให้ก็คือ set ค่าของ Text Input น่ะจะซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหม text Input จะต้องทำงานนะคะ ตั้งเงื่อนไขให้มันอะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหมคือตัวที่ 2 ของเรา password ก็เหมือนกันมี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input password when... คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้... เซต Text นี้เป็นซ่อน ซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วควา่มจริงเราต้องเลือกอันนี้set textPassword นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Default Default กำหนดเป็นค่าเริ่มเห็นไหม set default เราไม่ได้ set default นี่ ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกันก็เป็นเซ็ต มันต้องซ่อนสิ password ไม่ให้โชว์นะ ต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ตามหลัก ก็คือต้องไม่แสดงนะคะ User น่ะไม่แสดง User แสดงอย่างนี้ได้แต่ password มันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ Tool To Default บ่ Password น่าจะเป็น to Defaultหน้าจะเป็น To หรือ To อะไร มีหลายตัวเลือกเป็น... เมื่อคลิก password เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิถูกไหม แก้เงื่อนไขมันก่อนจาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะ Text in... เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type keybrod ให้มันให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วงของ Text Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่าไหมละนี่น่าจะใช่กำหนดตัวแปรให้เก็บค่าของ Text Password text username Text Password ไหน Box ที่ 1 ไอ้ box ที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable ไปที่ Text ไปที่ Textทำให้เป็นตัวใหญ่ทำให้ text ไปที่ Colorเป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign in เขาบอกว่าให้มันอยู่ตรง... เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in hello at Gmail Sing in Email Sign in hello Reset Password for Delete User 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 เข้าใจแล้ว ทดสอบแอปมันยังไม่ Release ใช้ไม่ได้ ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น...ก็คือเราก็จะมาก็อป Firebase น่ะค่ะ ใน Sign เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เปน Thunkได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้คือเชื่อมด้วย Firebase จะใช้ได้ก็ต่อเมื่อ Thunkable เรามันเป็น Thunkable ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีตอนนี้มันเป็น Thunkable เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเอง อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ สัปดาห์หน้าไม่อยู่ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อ... แม่ไม่ปล่อย ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยแล้วนะคะ ขอบคุณค่ะ Thunkable X ทำไมไม่อัปให้เรา Continue with...  - (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้ว Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรเปิด Google Chrome เรา แล้วก็เข้าก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราบางทีทำแอปนะ บางอันเขาThunkableThunkable ของเราแล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ล็อกอ