(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้ว เปิด 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-e u-m-e c-o ไม่มี Cooluทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างแบบนี้ เราก็ไปที่Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รุปเหมือนคนเลยใช่ไหมจะมีให้ไหมรูปคนThunkable เราหา เราหาโลโก้รูปแบบนไอ้อะไรนะอะไรนะ ี้ เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะเราจะเอาตัวนี้ ตัวนี้ดีกว่า ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ สมมติจะเอาตัวนี้ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard 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 น่ะคะ เราก็จะได้รู้ Image Image Image Icon Image ของเราก็คือ Icon login icon 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 Text Input 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 รูปแรก Image1 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 นะคะ เดี๋ยวเปลี่ยน 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-r fot 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 Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยม ดูนะคะเราไปเลือก botton คลิก button แล้วลงด้านล่างสุดใช่ไหม Button นี้ พิมพ์คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-i-n Login สีเอาสีอะไร ไปที่ Background นะ เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 sab... อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สี... สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยแก้ตรงBorder ใช่ไหมคะ Ladian น่ะ ความ โค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด login เข้าไป ไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ label คำว่า 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" นะคะ มันจะเป็นของตF-i-n-d B-a-s-e Find Base อยู่ไหน นี่ ๆ Firebase.google.com ให้เราหา Fire เจอไหม พิมพ์ F-i-r-e- ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรกก็คือเราจะต้อง เราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ fins bese หรเพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี ตั้งแต่ตอนที่เราใช้ตัวนัันให้ไปเลือกอะไร เลือก Create a New projects ค่ะ เห็นไหมคะสร้าง projexตรงช่องนี้นะเด็ก ๆ นะ enter your proเราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ login นะ ทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะติ๊กยอมติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานแล้วก็กด Continue มันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ for your file 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 ก็คืการระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์ิอย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้ว แล้วใช้เบอร์โทรศัพท์ เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน ถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก nable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Allten ที่เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไรนะ Username ใช้ไหมตรAnominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดู ตรงบิ้ว มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว มันจะขึ้นว่าสถานะตรงนี้ Project overview แล้วเลือก Project Setting No 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 viewer data wever data assen seting setting หาก่อนนะ compronanall ten singinmต้องการหา Signin ไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Seaก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนีupdate ยังไง อาจจะต้อง Update Thunkable เราหน่อยมันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรอเดี๋ยว แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Components มันมีไม่ครบ Solution Solution เดี๋ยวนะ 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 text input text to Username Text Keyboard Type ฺBorder มันจะต้องเป็นพิมพืเพระาฉะนั้น Cheang คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ เลือกอันนี้ออกไปก่อนเลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ... ให้กำหนดค่า 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 Input password wen...คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้... เซต Text นี้เป็นซ่อนซ่อนแล้วก็ ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วควา่มจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้Text Input Password นี่รับค่าจากการพิมพ์เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหม set defilเราไม่ได้ set defule ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไป เกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน ก็ เป็นเซ็ต มันต้องซ่อนสิ password ต้องซ้อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพื password ต้องไม่แสดงUser น่ะไม่แสดง User แสดงอย่างนี้ได้แต่ passworมันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อนตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อน กลับไปแก้ ซ่อนอะไรคะ Tool To Default บ่ Password น่าจะเป็น to Default หน้าจะเป็น Tooหรือ Tool อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลง เป็นซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ แก้เงื่อนไขมันก่อน จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่ เราใส่สลับเอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตคามหบักนะ เมื่อพิมพ์ปุ๊ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ เมื่อกำหนดค่า เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type keybrod ให้มันให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรไหมละนี่ น่าจะใช่ กำหนดตัวแปลให้เก็บค่าของ Text Password text usernameText Password ไหน Block ที่ 1 ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา whyriablไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ Color เป็นจริง เมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ ถึงที่ต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน...เราจะเอามันไปใส่ในไหนได้ sininเขาบอกว่าให้มันอยู่ตรง... เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Sing in Email Sign in hello Reset Password Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรอ เป็นแบบนี้หรือ ดู 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 ธรรมดา มันไม่อัปเดตให้น่ะ ตอนนี้มันเป็น Thunkเนื่องจากสัปดาห์หน้า ทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ระกว่างรอ ตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ... แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นงั้นเดี๋ยวปล่อยเลยนะคะ Thunkable X ทำไมไม่อัปให้เรา