(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่านะคะ เพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable  Thunkable ของเรา Thunkable Thunkable แล้วก็ให้ Login เข้า จำได้นะ Password อะไรตัวเองอะไรน่ะ แล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google จะใช้ตัวนี้ เข้าผิดอันสะบ่ ช่าสงสัย จะไม่ใช่ตัวนี้งง ๆ Google นะ แต่มี 2-3 ตัวไม่ออกให้ผมด้วย แต่ผมจะออกก่อน Sign Out เข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้ เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่าตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create New App เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติ ส่วนใหญ่ ถ้าแอปพวกมี Login อะไรเข้าไปมันก็จะเป็น Category ให้เลือกเป็น Education แล้วกัน (อาจารย์สุธิรา) ดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของล็อกอินที่เขาสร้างไว้นะเป็นตัวอย่าง ว่าถ้าเขาทำให้ให้มีลักษณะแบบนี้ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name ใช่ไหมลูก แล้วก็ปุ่มล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันนี่ เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงามไม่ใช่เรียงแล้วโย้ไปโย้มา เคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Colum" พิมพ์ค่ะ ขี้เกียจ Search c-o-lขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไทมมันช้าจัง l C-o-l-u-m-eu-m-e c-oไม่มี Column ทำไมล่ะ ๆ มี Component ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ  เหมือนตัวอย่างอย่างนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะจัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนไงใช่ไหม จะมีให้ไหมรูปคนน่ะ Thunkable เราหา เราหานะคะ รูปโลโก้รูปแบบไอ้อะไรนะอะไรนะเอาแบบนี้ก็ได้ Icon สินะ Search คำว่า "Icon" แล้วก็ Login นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้นะคะ ตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free ฟรีนะ เราเลือกว่าฟรีนี่ล่ะ ใช่ไหม ไหนบอกว่าฟรี ขี้ตั๊วเบเบ๋ อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ  Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก 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 อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Test Input Text Input อันแรก Input 1 นี่เป็นอะไรตัวบนนะคะ Text Input ใส่ Username Text Input 1 นี่คือ User Name นะText Input Username นะคะ อันที่ 2 เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไรนะคะ เวลา Coding เราจะได้รู้นะ เราไปแก้ถูกอันหรือเปล่า Text Input อันที่ 2 ชื่อว่า Password บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งนะคะ เราได้ 2 ส่วนแล้วนะ ทีนี้ใน Username นะคะ ใน Username นี่มันมีอะไรอยู่ด้วยเห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ในตัวอย่าง กดผิด ขอโทษ ในตัวอย่างเห็นไหมคะ มันมีไอคอนรูปเป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเป็น Icon นี้ ไปที่หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ ใส่เข้าไปในนี้ ใส่ได้ไหม ให้ใส่เข้าไปไหมนี่ จะให้ใส่เข้าไป Text ไหมน่ะ ไม่ให้ใส่เข้าไปข้างในหรือ ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็มี Image เล็ก ๆ นี่ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะ เด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจน่ะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว e download เหมือนเดิมนะคะ ูปต่อไปก็คือก็คือรูปกุญแจหาต่อ ๆ แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจ ไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Log ใช้คำว่า "Lock"เอาตัวนี้แล้วกันแล้วกันเจอตัวไหนเอาก่อนน่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้วใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะครับ อันที่ 1 รูปแรกImage1 Picture เลือกอัปโหลดไฟล์ Login 1 Open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่มอัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด เอ้ย ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของอะไรนะ เดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้เห็นไหมคะ กับ Forget Password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊ก ชื่อว่า Check Box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง ให้เราได้ Check Box แล้วแล้วมีอะไรต่อจาก Check oxก็คือมี Label ใช่ไหมคะ บอกว่าRemember me มี Label เขียนคำว่า "remember" ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า"Remember me" R-e Rememberb-e-r memberแล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน ฟอ ก่อนสีฟอนต์เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีกมีอะไรอีก กดผิดหรืออะไร แล้วก็มี 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 Forgot g-o-t got จำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ f-o-r-g-o-tforgotแล้วก็ PasswordForgot แล้วก็ P p-a-s-s Pass W-o-r-d แล้วก็ตามด้วยเครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ให้พอ ๆ กันไอ้นี่ล่ะนะ ไอ้ Remember me นี่ล่ะ ก็คือ 14 นะคะ ทำไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าวขึ้นมาหน่อย ให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ Color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน สีเหลี่ยม หรือโค้ง ดูนะคะ เราไปเลือก Buttonคลิก Button แล้วลงด้านล่างสุดใช่ไหม Buttonนี้พิมพ์คำว่า "Login" เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N Login สีเอาสีอะไร ไปที่ Background นะ Background เลือกสีค่ะ สีปุ่ม ปุ่ม ๆ มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color สีนำเงินนะ สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบฟอนต์ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยบอกแล้วนะว่าให้แก้ตรงไหนคะ Border ใช่ไหมคะ Ladian น่ะ แก้ตรง Ladian นะ ความโค้งมนของวัตถุ นะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับค่า Ladian เลย โอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรใช่ไหม ทำให้ตัว Login นี่มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด Login เข้าไปนี่ มันจะไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็น Link ตอนใน Box ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดูอันที่ 2 ใบเตยต้องใส่ Label คำว่า "User Login" น่ะลูกนะ เห็นหรือเปล่า เห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ Text Input เห็นไหม 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-r-e-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 ไปแล้วนะ ตั้งแต่ตอนที่เราใช้ตัวนัั้นน่ะ ให้ไปเลือกอะไร เลือก Create A New Projects ค่ะ เห็นไหมคะ สร้าง Project ตรงช่องนี้นะเด็ก ๆ นะ Enter your project name เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebase อะไรนะ Login นะ ทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมก่อน  ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานเขานะ แล้วก็กด Continue มันก็จะขึ้นมา บอกว่านี่คือ Google Analytics นะคะ for your firebase project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะคะ แล้วเราก็ถามว่าเราอยู่ไหน เราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก Analytics แล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลย มันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เราน่ะ เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า Your new project is ready แล้ว Login หรือยัง บางทีต้อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือ นี่ ๆ มันจะมี Build มี Release Monitor มี Analytics อนารีเีมี endgrade เราไปคลิกที่อ้รูป... รูปไอ้เหมือนสามเหลี่ยม ลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้งมันจะเข้ามาที่หน้า Authentication ใช่ไหมคะ เราก็คลิก Get start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไรเราใช้ Username ก็คือ Annominus นะการระบุตัวตนน่ะ คลิกเปิด Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้ว แล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ Login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่เรา Login เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไรนะ Username ใช้ไหมตรงนี้ Annymouse เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่ออันนี้ พอเราย้อนกลับมานะคะ มาดูตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้วให้เรามาที่ตรProject overview แล้วเลือก Project Setting No No Noมันจะเข้ามาที่หน้าที่ Project Setting นะ ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ  ไปไม่ถูกเดี๋ยวตามไมทันนะ แล้วไปที่ด้านล่างให้มาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณมันเพราะตอนนี้มันบอกว่าเราเรายังไม่มีแอปในโปรเจกนี้เราก็ต้องไปที่แอปของเราคลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี IDS แล้วก็มีรู้ Printer เครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web App นี่คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไร เดี๋ยวอันไหนไม่ใช้จะปิดแล้วนะ ลองพิมพ์ชื่อ App เราลงไปนะคะ E-Book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะ เข้าใจนะ พิมพ์ลงไปนะคะ E... เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-Book เดี๋ยวว่าไม่รู้จักชื่อนี้นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะพิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะ แล้วก็พิมพ์ลงไป ดูชื่อของตัวเองนะคะ ดูชื่อในแปเช็กนะคะ ว่าชื่อแอปของเรานะคะ  เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ E-Book ตามแม่นะ พิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะ เสร็จแล้วกด Register App ได้เลยชื่อที่จะใส่น่ะ ไม่ใช่สิ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้าง นี่ ๆ อยู่ข้างบนนี่ มันจะมี Code มาเห็นไหมคะ เขาบอกว่าเราต้องเอา Code นี้ ไปใส่ในแอปเรานั่นเองนะคะ ก๊อป(ปี้)ไปวางในแอปเรจะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าเวอร์ชันนี้ Component Sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data Viewer List data ViewerData Assence Setting ต้องการหา Sigไม่ใช่My Data Sourse หรือก็ไม่ใช่เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkableขอ Search ตัวนี้อีกตัวหนึ่งก่อนนะคะ Thunkable X คือตัวอะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ Update อย่างไร เดี๋ยว ๆ อาจจะต้อง Update Thunkable เราสะหน่อย มันจะใช้เขาเรียกว่าอย่างไรล่ะ ใช้ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรอเดี๋ยว แป๊บหนึ่งนะเด็ก ๆ  มันต่างกันหรือ อยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่น่ะ เพราะมัน Component มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration Community Source ไม่ใช่เราจะต้อง Using Thunkable Lifก็ไม่ใช่ มันเป็น Testเพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้ แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา Tool ที่ Sign inมันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้อะไรได้ แต่มันจะไม่เก็บใน เขาเรียกว่าอะไรล่ะ ฐานข้อมูลนะ ก็จะให้ไปเก็บ... Back To Editting เดี๋ยวเรามาลองที่ Box ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ Text Input 1 sernameไปที่ Text input1เมื่อ 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 ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 'ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหม เรากลับไปที่ Block แล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลงแต่ตอนแรกที่ Test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บเมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนมาพิมพ์ตรงช่องนี้นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเรากำหนดค่าให้Text Input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Box เมื่อกี้ไม่ได้ลบทิ้ง Edit Undo มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะ สิ่งแรกก็คือเมื่อ Text Input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือให้ Set ค่าของ Text Input น่ะจากซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหม Text Input จะต้องทำงานนะคะ ตั้งเงื่อนไขให้มัน อะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหมคือตัวที่ 2 ของเรา Password ก็เหมือนกัน เมื่อคลิกที่ Password มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input Password เมื่อคลิกเข้าไป W...คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้...Set Text นี้เป็นซ่อน ซ่อนแล้วก็ ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้วความจริงเราต้องเลือกอันนี้ Set TextPassword นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์เสร็จแล้วตรงนี้ เป็น Defult Default กำหนดเป็นค่าเริ่มต้น เห็นไหมset Default เราไม่ได้ set defuleไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะเมื่อพิมพ์ เมื่อคลิกเข้าไปเกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะเหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text Toก็เป็น Seมันต้องซ่อนสิ Password ต้องซ้อนนะเปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง Test ดูนะคะ เพราะตอนพิมพ์ Password ตามหลักต้องไม่แสดงUser น่ะไม่แสดงUser แสดงอย่างนี้ได้แต่ Password มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อนนี่ เดี๋ยวเราต้องให้มันซ่อน กลับไปแก้ ซ่อนอะไรคะ Tool To Default บ่ Password น่าจะเป็น To Defaultหน้าจะเป็น Tooหรือ Tool อะไร มีหลายตัวเลือกเป็น...เมื่อคลิก asswordเมื่อคลิก Passwordแล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงเป็นซ่อนแล้วก็ To... ไม่ให้ออกจาก Textแล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะอันนี้ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text Input เมื่อกำหนดค่าjเมื่อกำหนดค่า Text Inputเมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Typekeybrodให้มันให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหมมันจะซ่อนให้เราไหมยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Password ไม่ซ่อนขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรไหมละน ี่น่าจะใช่ กำหนดตัวแปรให้เก็บค่าของ Text Password Text Username Text Passwordไหน Box ที่ 1ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เราwhyriablไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ทำให้ Text ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บสิ่งที่จะต้องทำต่อขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว เอ๊ะ แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign inเขาบอกว่าให้มันอยู่ตรง... มันไปอยเดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Hello At EmSing in EmailSign in hello Reset PasswordDelete User Sign Up เขาให้กำหนดเป็นแบบนี้หรอเป็นแบบนี้หรือ ดู Sign upSign Up Do Sign Up Do Sign Do Sign In doไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ Feature นี้ ใช้ไม่เหมือนกัน ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะ ใช้ไม่เหมือนกันน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรอให้ทำอะไรให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อปฯ ทำไมเราใช้ Thunkable X ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable Xมันจะเพิ่ม Sign in ได้ Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อถ้า Thunkable X ก็คือใช้ iOS   เข้าใจแล้วทดสอบแอป มันยังไม่ Release ใช้ไม่ได้มันต้องเป็นข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็นไม่เป็น มันไม่เป็น Thunkable X น่ะ แล้วมันไม่ให้ใช้ Feature นี้ Sign in น่ะ ถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก็จะมาก็อปฯ Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป็น Thunkable X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งานเพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้อาจจะเปลี่ยนเป็นเชื่อมไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่นตอนนี้คือเชื่อมด้วย Fire baseThunkable เรามันเป็น Thunkableตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะตอนนี้มันเป็น Thunkเนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยังทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้วเราแค่มาแก้อัปเวอร์ชันมัน แค่อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะ สัปดาห์หน้าไม่อยู่บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ... แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยแล้วนะคะ โอเThunkable Xทำไมไม่อัปให้เราอ๋อ... อ๋อ... แม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นแม่ไม่ปล่อยก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยแล้วนะคะ โอเเดี๋ยวปล่อยแล้วนะคะ โอเคค่ะ (นักศึกษาชาย) นักศึกษาทั้งหมดทำความเคารพ ขอบคุณครับ (อาจารย์สุธิรา) Thunkable XThunkable Xทำไมไม่อัปให้เราทำไมไม่อัปให้เรา