(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้าThunkable เหมือนเดิมนะคะเด็ก ๆวันนี้จะพาทำหน้าล็อกอินทำอย่างไรบางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเราThunkableแล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Googleเข้าผิดอันสะบ่สงสัยจะไม่ใช่ตัวนี้งง ๆGoogle นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วยผมจะออกก่อนเข้าไม่ถูกอันน่ะเข้าใหม่มีหลายตัวจำไม่ได้โอเคเข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะครั้งก่อนทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่Create new app เลือก New Appตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับจะตั้งชื่อแอปนี้ว่าอย่างไรส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็นCategoryให้เลือกเป็น Education แล้วกันดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของล็อกอินที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆมีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของUser name ใช่ไหมลูกล็อกอินใช่ไหมคะนะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงามไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คืใช้เครื่องมือที่ชื่อว่า...Columหาคำว่า "Colum"ขี้เกียจ Sue-lขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไทl C-o-l-u-m-eu-m-e c-oไม่มี Cooluทำไมล่ะ ๆ มี Componantไหนอีกนี่ดูตัวอย่างเขานะดูตัวอย่างเขามีส่วนของอะไรบ้างมีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหมสมมติเราจะใส่รูปเหมือนอย่างนี้นะคะเหมือนตัวอย่างแบบนี้ เราก็ไปที่Image หรืออะไรลูกเลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะแล้วก็ไปหารูปอะไรรุปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนThunkableเราหา เราหาโลโก้รูปแบบนไอ้อะไรนะอะไรนะี้เอาแบบนี้ก็ได้Search คำว่า "Icon" แล้วก็ล็อกอินนะคะเราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะเราจะเอาตัวนี้ตัวนี้ดีกว่าตัวนี้ดีกว่า หาเอาเองนะคะอยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้สมมติจะเอาตัวนี้ดูด้วยนะฟรี ฟรี ฟรีDownload ImageStandard Free เราเลือกว่าฟรีใช่ไหมไหนบอกว่าฟรีอย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆFreedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีกfree downloasโอเค หาใหม่ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะตัวนี้ก็สวยอยู่นะเอาตัวนี้ก็ได้ png ก็พอPremium free downloadไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เราแล้วก็ตรงชื่อ Picture นะอัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหมLogo logingได้แล้วครับ ได้แล้วกระผมได้แล้วครับเด็ก ๆ ได้หรือยังครับได้แล้วนะคะมีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอินก็คือมีอะไรคะมี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไปจะใช้คำว่าล็อกอินหรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะเมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมาก็คือ lable คะเป็น Label นะคะเด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้างลาก label มาวางอยู่ใต้รูปใช่ไหมแล้วตรง Page นะ เราก็แก้เป็นอะไรUser พิมพ์คำว่า "User"แล้วก็คำว่าล็อกอินเข้าไป l-og-i-nสัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะใครที่วางรูปเสร็จแล้วให้พิมพ?เพื่อจะพิมพ์ข้อความคำว่า "Login"ลงไปนะรูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะรูปแบบ font เด็ก ๆ ลองเลือกอยากได้แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะสีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Loginนะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วยจัดแนวครงไหนเอ่ยTest Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะนะคะ 18 เล็กไป เพิ่มเพิ่มขนาดได้เอาเท่าไหร่ 30 โอเคไหมโอเคนะได้ส่วนของ User login แล้วทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืมLabel Label อันนี้อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะบอกเสมอว่าใส่ชื่อมันเข้าไปด้วยจะได้พอเราไปแก้ code น่ะคะเราก็จะได้รู้ ImageImage ImageIcon Image ของเราก็คือ Iconloginicon login l-o-g-i-nนะคะ ปุ๊บ1 2 3 ส่วนที่ 3ที่จะต้องใส่เห้นไหมคะอย่างนี้เขาเรียกว่า Tex fewเพราะมันจะต้องเป็นให้กรอกข้อความได้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 นี่เป็นอะไรตัวบนนะคะ teใส่ 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 เหมือนเดิมนะคะรูปต่อไปก็คือก็คือรูปกุญแจหาต่อ ๆหาต่อ ๆแม่กุญแจ กุญแจอยู่ไหนนะเจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะหา Log ใช้คำว่า Lockเอาตัวนี้แล้วกันแล้วกันเจอตัวไหนเอาก่อนน่ะโอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้วใส่ไปเรื่อย ๆใครยังไม่ได้รูปหาใส่ด้วยนะครับอันที่ 1 รูปแรกImage1Picture เลือกอัปโหลดไฟล์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 Rememberb-e-r memberแล้วมี me m-e นะคะเดี๋ยวเปลี่ยน 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-rfot 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 นะเลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10sab...อยากได้สีชมพูอยู่ไหนนี่ สีชมพูเอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color ColorText Colorนะคะ สี...สีม่วงโอเคทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วยโอเคนะคะตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยแก้ตรงBorder ใช่ไหมคะLadian น่ะความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้วทีนี้มันจะเชื่อมอย่างไรนะทำให้ตัว Login มันเชื่อมได้ก็คือพอใส่ชื่อลงไปนะคะใส่ไอ้นี่ลองไปแล้วกด login เข้าไปไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูกอ๋อ Remember meForget Password ใช้ Label ธรรมดา ใช่ ๆแล้วเราจะทำให้มันเป็นลิงก์ในโค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่label คำว่า loginนะลูกนะ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4ช่องที่ 3 กับ 4 ใช้ text inputลาก Text Inputไปวาง 2 อัน3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มา Labelก็เปลี่ยนเป็น Userมันตรงส่วนเชื่อน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebasemt อะไรหว่าเดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกtext input อันที่3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวางและก็เอารูปมาใส่ตรง 2 อันนี้ อันที่3 กับ 4 อันที่ 3 กับอันที่ 4โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่มนะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะที่เข้าใช่นะมันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์"Firebase" นะคะ มันจะเป็นของตF-i-n-d B-a-s-eFind Base อยู่ไหนนี่ ๆ Firebase.google.comให้เราหา Fireเจอไหม พิมพ์ F-i-r-e-ให้ไปที่เว็บ Firebase.google.com นะคะใครยังหาไม่เจอ ดูนะคะชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรกก็คือเราจะต้องเราจะต้องกดGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะตอนนี้เปิดมาที่ fins bese หรเพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆเขาจะ Loginให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชีตั้งแต่ตอนที่เราใช้ตัวนัันให้ไปเลือกอะไร เลือก Createa New projects ค่ะเห็นไหมคะสร้าง projexตรงช่องนี้นะเด็ก ๆ นะenter your proเราก็พิมพ์ชื่อ 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แล้วเลือก Project SettingNo No Noมันจะเข้ามาที่หน้าที่ Project setingใครยังไม่เข้ามาหน้านี้ ยกมือนะคะไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเราเรา ยังไม่มีแอปในโปรเจกนี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะเห็นไหมคะมันมี ids แล้วก็มีรู้ Printerเครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือกตรงตำแหน่งนี้ My Web app นี่คืออะไร เราต้องไปหน้าที่เราทำของเราก็คือ E-Book ไหมคะมันจะใช้ว่าอะไรอันไหนไม่ใช้จะปิดแล้วนะลองพิมพ์ชื่อ ชื่อ app เราลงไปนะคะ Eboo kเด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะะคเข้าใจนะ พิมพ์ลงไปนะคะEเดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะEbook นะคะนะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะแล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะเด็ก ๆ ดูนะคะ ดูตรงหัวนี่ใส่ชื่อของใครของมันนะไม่ใช่มาพิมพ์ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะเสร็จแล้วกด Register Appได้เลยชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่มันจะมี code มาเห้นไหมคะเขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้นเสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่มันใช้ว่าอะไรหว่าอันนี้Componentไม่เจอมันจะไปต่อไม่ได้มันต้องใช้อะไรนี่Data viewerdata weverdata assen setingsettingหาก่อนนะcompronanall ten singinmต้องการหา Signinไม่ใช่My data sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkableขอ Seaก่อนนะคะ Thunkable x คืออะไรพิมพ์ผิดพิมพ์ถูกกันแล้วเราเลือกเวอร์ชันผิดใช่ไหมนีupdate ยังไงอาจจะต้อง Update Thunkable เราหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ใช้ฟังก์ชันนั้นไม่ได้น่ะมันไม่เหมือนกันหรอเดี๋ยวแป๊บหนึ่งนะเด็ก ๆมันต่างกันหรืออยากรู้ ๆมันก็ขึ้น Thunkable เหมือนกันนี่เพราะมันComponents มันมีไม่ครบSolutionSolution เดี๋ยวนะIntegrationเราจะต้องUsing Thunkableก็ไม่ใช่ มันเป็น Testเพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราใน Thunkable Tool ที่ Signinมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Testดูนะคะคือตอนนี้ เรากรอกข้อมุลได้แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะก็จะให้ไปเก็บ...แบบ Tool Editingเดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่input 1 usernamไปที่ Text input1เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นนะ set textinput text toUsername TextKeyboard TypeฺBorderมันจะต้องเป็นพิมพืเพระาฉะนั้นCheangคลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บเลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text InputUsername ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Textจาก taxt เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหมขึ้นไหมโอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้โอเคนะคะเพราะตรงนี้ Usernaเหมือนกัน Text Input อันที่ 2กลับไปที่ Back to Edittingตอนนี้เด็ก ๆ ได้อยุ่ที่ seen 1 sinvpy'ตอนนี้ที่เราจะกำหนดค่า ก็คือ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 ก็เหมือนกันมี 2 อันใช่ไหมคะWhen เมื่อเราคลิกเข้าไปที่ Text Inputpassword wen...คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้...เซต Text นี้เป็นซ่อนซ่อนแล้วก็ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะอันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วควา่มจริงเราต้องเลือกอันนี้set textPassword นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหมset defilเราไม่ได้ set defuleไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกันก็เป็นเซ็ตมันต้องซ่อนสิ passwordต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Passwordจะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะเพราะตอนพิมพื password ต้องไม่แสดงUser น่ะไม่แสดงUser แสดงอย่างนี้ได้แต่ passworมันไม่ควรแสดงชื่อไหมมันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ ToolTo Default บ่ Password น่าจะเป็น to Defaultหน้าจะเป็น Tooหรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก passwordเมื่อคลิก Passwordแล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้เอาออกจัด Textแล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ แก้เงื่อนไขมันก่อนจาก Textให้มันซ่อน ได้ไหมขอลองอันล่างเลยไม่ซ่อนน่ะนี่ เราใส่สลับเอาใหม่ Edit ใหม่ต้องไล่ให้ถูกนะนี่เมื่อพิมพ์เข้าไปแล้ว ตคามหบักนะ เมื่อพิมพ์ปุ๊ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น...ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อนมันจะซ่อนให้ไหมน่ะเมื่อกำหนดค่าเมื่อกำหนดค่า เมื่อกำหนดค่า Text Inputเมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Typekeybrodให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่งต้องกำหนดตัวแปรไหมละนี่น่าจะใช่กำหนดตัวแปลให้เก็บค่าของ Text Passwordtext usernameText Passwordไหน Block ที่ 1ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เราwhyriablไปที่ Text ไปที่ Textทำให้เป็นตัวใหญ่ทำให้ textไปที่ Colorเป็นจริงเมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บถึงที่ต้องทำต่อขาดไปไหนนะSign in ขึ้นมาแล้ว เจอแล้วแต่มันมาอยู่ใน...เราจะเอามันไปใส่ในไหนได้sininเขาบอกว่าให้มันอยู่ตรง...เดี๋ยวนะ มันเป็นอะไรล่ะApp FeatureSign inSign inSing in EmailSign in helloReset PasswordDelete User Sign Upเขาให้กำหนดเป็นแบบนี้หรอเป็นแบบนี้หรือ ดู Sign upSign Up DoSign 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 baseThunkable เรามันเป็น Thunkableตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkเนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะบอกงด Class ล่ามทุกคนไว้แล้วนะคะสำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะมีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะเมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตยอ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะThunkable Xทำไมไม่อัปให้เรา - (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะใครที่เข้ามาแล้วThunkable เหมือนเดิมนะคะเด็ก ๆวันนี้จะพาทำหน้าล็อกอินทำอย่างไรเปิด Google Chrome เรา แล้วก็เข้าก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเราบางทีทำแอปนะ บางอันเขาThunkableThunkable ของเราแล้วก็ให้ Login เข้าจำได้นะ Password ตัวเองอะไรนะแล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Googleเข้าผิดอันสะบ่