(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเรา Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่=jk'สงสัยจะไม่ใช่ตัวนี้งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อนเข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้เข้าตัวนี้หรอโอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไรส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็น Category ให้เลือกเป็น Education แล้วกันดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของ Login ที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงามไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Colum หาคำว่า "Colum" ขี้เกียจ C-O-L ขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป  C-o-l-u-m-e ไม่มี Colum หรอทำไมล่ะ ๆ มี Componantไหนอีกนี่ดูตัวอย่างเขานะดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่อะไรคะImage หรืออะไรลูกเลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนThunkableเราหา เราหาโลโก้รูปแบบนี้ไอ้อะไรนะอะไรนะเอาแบบนี้ก็ได้นึกออกนะSearch คำว่า "Icon" แล้วก็ Login นะคะ เราหา Icon นี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้สมมติจะเอาตัวนี้ฟรีหรือเปล่านี่ดูด้วยนะฟรี ฟรี ฟรีDownload ImageStandard Free เราเลือกว่าฟรีใช่ไหมไหนบอกว่าฟรีอย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีกfree downloasโอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะตัวนี้ก็สวยอยู่นะเอาตัวนี้ก็ได้ png ก็พอPremium free downloadไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เราแล้วก็ตรงชื่อ Picture นะอัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหมLogo logingได้แล้วครับ ได้แล้วกระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีใน Loginก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ Login เข้าไปจะใช้คำว่าLogin หรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ lable คะเป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Text นะ เราก็แก้เป็นอะไรUser พิมพ์คำว่า "User"แล้วก็คำว่าล็อกอินเข้าไป l-o-g-i-nสัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้พิมพ์เพื่อจะพิมพ์ข้อความคำว่า "Login"ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Loginนะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วยจัดแนวตรงไหนเอ่ยTest Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ นะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้เอาเท่าไหร่ 30 โอเคไหมโอเคนะได้ส่วนของ User login แล้วทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืมLabel อันนี้อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไร นะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วยจะได้พอเราไปแก้ code น่ะคะเราก็จะได้รู้ ImageImage Image ก็เหมือนกันIcon Image ของเราก็คือ Iconloginicon login l-o-g-i-nนะคะ ปุ๊บ1 2 3 ส่วนที่ 3ที่จะต้องใส่เห็นไหมคะ อย่างนี้เขาเรียกว่า Text เพราะมันจะต้องเป็นให้กรอกข้อความได้2 อันขาว ๆ นี่เห็นนะไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่าText Field นะลูก เห็นหรือยัง ใครหาไม่ดตรง Component เราน่ะ ไปที่...ถ้าหาไม่เจอพิมพ์ text feelหรือ 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 รูปแรกImage1Picture เลือกอัปโหลดไฟล์login 1 openได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยายย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้นคลิกที่ชื่อเขาก็ได้คลิกที่ชื่อเขาโอเคนะคะ เขาได้แล้วนะรูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่ม อัปโหลดไฟล์เข้าไปขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะนะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อจะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุดไม่ใช่ อีก 2 ส่วนสิมีส่วนของ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆกับ forget passwordมี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊ก ชื่อว่าCheck box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลยลากไปวางให้เราได้ check box แล้วแล้วมีอะไรต่อจาก Checkboxก็คือมี Label ใช่ไหมคะ บอกว่าRemember me มี Labelเขียนคำว่า "remember me"ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า"Remember me" R-e Rememberb-e-r memberแล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font สี 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-rfor gotg-o-t gotจำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำforgotแล้วก็ passwordForgot แล้วก็ PP-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 meForget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ในโค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่label คำว่า User loginนะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4ช่องที่ 3 กับ 4 ใช้ text inputลาก Text Inputไปวาง 2 อัน3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มา Labelก็เปลี่ยนเป็น User loginมันตรงส่วนเชื่อน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebasemt อะไรหว่าจำไม่ได้เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก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ให้เราหา Fireเจอไหม พิมพ์ F-i-r-e-b-a-s-eให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรกก็คือเราจะต้องเราจะต้องกดGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ fire bese หรือยังเพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Loginให้เราด้วยบัญชี Google เพราะเรา Login ด้วยบัญชีGoogle ตั้งแต่ตอนที่เราใช้ตัวนัให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง projexตรงช่องนี้นะเด็ก ๆ นะenter your project nameเราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebaseอะไรนะ login นะทำไมมันไม่ให้พิมพ์L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะติ๊กยอมก่นอติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานแล้วก็กด Continueมันก็จะขึ้นมา บอกว่านี่คือ Google Analyticนะคะ for yourfile bet projectเสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะแล้วเราก็ถามเขาก็ถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา 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 ก็คือการระบุตัวตนน่ะ ที่เปิด EnableEnableแล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ เช่นใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะสมมติถ้าไปทำของตัวเองแล้วแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การเรา login ด้วยตัวไหนถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Emailเห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิกnableเพราะเรามี 2 ตัวนะเราใช้ 2 ตัวนะ เสร็จแล้วก็กด Saveก็คือบอกให้ระบบมันรู้ว่าAllten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช้ไหมตรงAnominusเพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดูตรงมันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้วมันจะขึ้นว่าสถานะตรงนี้Project overview คลิก 1 ครั้งแล้วเลือก Project SettingNo No Noมันจะเข้ามาที่หน้าที่ Project setingใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเราเรา ยังไม่มีแอปใน Project นี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี ids แล้วก็มีรู้ Printerเครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือกตรงตำแหน่งนี้ My Web app นี่คืออะไร เราต้องไปหน้าที่เราทำของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไรเดี๋ยวอันไหนไม่ใช้จะปิดแล้วนะลองพิมพ์ชื่อ ชื่อ app เราลงไปนะคะ E-bookเด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะะคเข้าใจนะ พิมพ์ลงไปนะคะ Eเดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะE-book นะคะ นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register Appได้เลยไหนนะชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี code มาเห็นไหมคะ เขาบอกว่าเราต้องเอา code นี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปOไปวางในแอปเรจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่มันใช้ว่าอะไรหว่า อันนี้Componentไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่Data viewerdata weverdata assent setingsettingหาก่อนนะcompronanall ten singinต้องการหา SigninLoding Location ไม่ใช่My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkableขอ ก่อนนะคะ Thunkable x คืออะไรพิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนีupdate ยังไงอาจจะต้อง Update Thunkable เราหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรอเดี๋ยวขอ Test แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรืออยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่นาเพราะมันComponents มันมีไม่ครบ ThunkableIntegrationเราจะต้องเราจะต้องเราจะต้องUsing Thunkableก็ไม่ใช่ มันเป็น Testเพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราใน Thunkable Tool ที่ Signinมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Testดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะก็จะให้ไปเก็บ...แบบ Tool Editingเดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่input 1 usernamไปที่ Text input 1เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นนะ set textinput text toUsername TextKeyboard Typeฺ Borderมันจะต้องเป็นพิมพ์เพาะฉะนั้นCheangคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บเลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text InputUsername ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความดูสิ แล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะ เพราะตรงนี้ Usernameเหมือนกัน Text Input อันที่ 2กลับไปที่ Back to Edittingตอนนี้เด็ก ๆ ได้อยู่ที่ seen 1 หรือยีงตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหมเรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือเดี๋ยวลบก่อนนะเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ testพอพิมพ์ปุ๊บเมื่อกี้มันน่าจะ Save ไว้แล้วพอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ช่องนี้นี่โอเคนะคะ โอเคเพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้ง อีกอันดูมันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะสิ่งแรกก็คือเมื่อ text inputโดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Inputเราเลือกตัวนี้ออกมาสิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือUsername ก็คือมันจะต้องให้ set ค่าของ Text Input น่ะจะซ่อนเป็นพิมพ์น่ะนะ คะดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหมtext Inputจะต้องทำงานนะคะ ตั้งเงื่อนไขให้มันอะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหมคือตัวที่ 2 ของเราpassword ก็เหมือนกันเมื่อคลิกที่  passwordมี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Inputpassword wen...คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้... Set Text นี้เป็นซ่อนซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วความจริงเราต้องเลือกอันนี้set textPassword นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์ keyboaเสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหมset defilเราไม่ได้ set defuleไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้อง Set ค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกันก็xt in passwordเป็นเซ็ตมันต้องซ่อนสิ passwordต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Passwordจะซ่อนให้เราไหมล่ะ เราลอง Test ดูนะคะ เพราะตอนพิมพ์ password ต้องไม่แสดงUser น่ะไม่แสดงUser แสดงอย่างนี้ได้แต่ passwordมันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ ToolTo Default บ่ Password น่าจะเป็น to Defaultหน้าจะเป็น Tooหรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก passwordแล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลง Set Text input Passเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Textแล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ ถูกไหมแก้เงื่อนไขมันก่อนจาก Textให้มันซ่อน ได้ไหม ขอลองอันล่างเลยไม่ซ่อนน่ะเราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว เมื่อพิมพ์ปุ๊บถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะเมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Input Passwordเมื่อเราคลิกเข้าไปเสร็จ Set เมื่อเราพิมพ์นะ Keyboard Typekeybrodให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรไหมละนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Passwordtext UsernameText Passwordไหน Block ที่ 1ไอ้ Box ที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variableไปที่ Text ไปที่ Textทำให้เป็นตัวใหญ่ทำให้ textไปที่ Listเป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บถึงที่จะต้องทำต่อขาดไปไหนนะSign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน...เราจะเอามันไปใส่ในไหนได้siningเขาบอกว่าให้มันอยู่ตรง... มันไปอยู่ที่ Box หรอเดี๋ยวนะ มันเป็นอะไรล่ะApp FeatureSign inSign in Hello GmailSing in EmailSign in helloReset PasswordDelete User Sign Upเขาให้กำหนดเป็นแบบนี้หรอดู Sign upSign Up DoSign In doไม่ให้ใช้น่ะไม่ยอมให้ใช้ฟีเจอร์นี้น่ะใช้ไม่เหมือนกันทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีต้องเอาใส่ไว้ตรงไหน ไม่เหมือนกันนะใช้ไม่เหมือนเดี๋ยวนะคะ Sign Upอันนี้หรอให้ทำอะไรให้ลงทะเบียนให้ลงทะเบียนโดยใช้ E-mail หรือ Passeordไม่ใช่น่ะ อันนี้ก็ไม่ใช่บอกว่าให้ก๊อป (ปี้)ทำไมเราใช้ Thunkable x ไม่ได้ล่ะThunkable Xเอามาจากไหนนะ Thunkable Xมันจะเพิ่ม Signin ได้Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น Xอ๋อถ้าThunkable X ก็คือใช้ IOSเข้าใจแล้วทดสอบแอปมันยังไม่ reresdใช้ไม่ได้ต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น...ก็คือเราก็จะมาก็อป(ปี้) Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkableเดิมเรานี่ให้เป็น Thunkableได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย FirebaseThunkable เรามันเป็น Thunkable Xตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะเนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ Thunkable Xทำไมไม่ Up