(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้ว เปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะเด็ก ๆ วันนี้จะพาทำ หน้าล็อกอินทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่ เราจะทำอย่างไร พิมพ์ Thunkable บอกว่า Thunkable ของเรา Thunkable แล้วก็ให้ Login เข้าจำได้นะ Password อะไรตัวเองอะไรนะ แล้วเราก็ล็อกอินเข้า ที่เราสร้างไว้นะในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันซะบ่ [เสียงหัวเราะ] ช่างเหอะ สงสัยจะไม่ใช่ตัวนี้ [เสียงหัวเราะ] งง ๆ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วยผมจะออกก่อน Sign Out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัวจำไม่ได้ เข้าตัวนี้หรอ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก new App ตั้งชื่อเหมือนเดิมจะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติ ส่วนใหญ่ ถ้าแอปพวกมี Login อะไรเข้าไปนี่มันก็จะเป็น Category ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่คือส่วนของล็อกอินที่ ที่เขาสร้างไว้นะเป็นตัวอย่างว่า นี่ถ้าาเราจะทำให้มีลักษณะแบบนี้ นี่มีช่องกรอก ๆ นี่ เราจะทำอย่างไร จัดวางอย่างไรนะคะ มันก็จะมีส่วนของเหมือน Username ใช่ไหมลูก Password แล้วก็ปุ่ม Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันนี่เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงาม ไม่ใช่เรียงแล้วโย้ไปโย้มา หรือเคลื่อนที่ไปมานะคะ วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า Column หาคำว่า "Column" [เสียงหัวเราะ] พิมพ์ ขี้เกียจ Search C-o-l ขี้เกียจเลื่อนไอ้นี่หาก็จะพิมพ์นนะคะ พิมพ์คำว่า Column ลงไป C-o ทำไมช้าจัง l C-o-l-u-m-e เห็นไหม C-o ไม่มี Column หรือ ทำไมล่ะ ทำไมล่ะ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขามีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่ง ตรงกลางนะคะ แล้วก็ไปหารูปอะไรรูป... รูปเหมือนคนอย่างนี้ใช่ไหม จะมีให้ไหมน่ะรูปคนน่ะ Thunkable เราหานะคะ เราหาโลโก้ รูปโลโก้แบบนี้ไอ้อะไรนะ อะไรนะ เอาแบบไหน เอาแบบนี้ก็ได้ เดี๋ยวเอา... เอาอย่างนี้ นึกออกนะ เขาเรียกว่าอะไร Python สินะ Python Login คำว่า "Icon" แล้วก็ล็อกอินนะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ [เสียงหัวเราะ] ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free Free นะ เราเลือกฟรีนะนี่ ใช่ไหม ไหนบอกว่าฟรี ขี้ตั๊วเบ่เบ๋ อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Free Download ด้วย เดี๋ยวติดลิขสิทธิ์อีก Free Download โอเค หาใหม่ ไม่ได้ตัวนี้ ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะ เอาตัวนี้ก็ได้ PNG ก็พอ Premium Free Download ไปไหนแล้ว ได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเค เราจะใช้ตัวนี้นะคะ เหมือนเดิม ก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo Log in โอเค ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอิน ก็คือ มีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ Login เข้าไป จะใช้ Login หรือ ใช้คำว่าอะไรดี User Login แล้วกันนะ นะคะ เมื่อเราได้รูปแล้วสิ่งที่เรา จะมีในบรรทัดต่อมาก็คือ Lable ค่ะ ใช่ไหมเป็น Label นะคะเด็ก ๆ นี่ในตัวอย่างนี่เห็นไหม Member Login ใช่ไหมคะ เราก็ต้องใช้ Label ในการสร้าง ลาก Label มาวาง อยู่ใต้รูปใช่ไหม แล้วตรง Text นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า "Login" เข้าไป l-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง Label นะคะ เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน ก็สีเปลี่ยนสีได้น่ะ เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข้มอ่อน ถ้าแบบสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Test Align นะคะ คือ จัดกึ่งกลาง โอเค ขนาดตัวอักษร นะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไหร่ 30 โอเคไหม โอเคนะ นะคะได้ส่วนของ User login แล้ว ก็คือส่วนของ Label แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเวลาเราไปแก้ Code น่ะค่ะ เราก็จะได้รู้ Image Image ก็เหมือนกัน Image Image ลูก Icon Image ของเราก็คือ Icon Login Icon login l-o-g-i-n นะคะ ปุ๊บ 1, 2, 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Text Field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้นะคะ พอขาว ๆ 2 อันนี้ เราจะใส่ส่วนที่เรียกว่า Text Field นะลูก นี่เห็นไหมคะเห็นหรือยัง ใครหา Text Field ไม่เจอ ตรง Component เราน่ะ ไปที่... ถ้าหาไม่เจอพิมพ์ Text Field นะคะ หรือ Text Input อยู่นี้เขาใช้ Text Input ของ Thunkable มันใช้ Text Input นะคะ เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมาทั้ง 2 อันนะคะเด็ก ๆ อันที่ 1 อันที่ 2 ต่อกัน เรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไรให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text Input Text Input อันแรก Text Input 1 นี่เป็นอะไร ตัวบนนะคะ Text Input 1 มันจะเป็นใส่ Username Text Text Input 1 นี่คือ User Name นะ Text Input Username นะคะ อันที่ 2 เป็น Password ไหม Password นะคะ บอกให้รู้ว่าแต่ละอันคืออะไร นะคะ เวลา Coding เราจะได้รู้นะ เราไปแก้ถูกอันหรือเปล่า Text Input อันที่ 2 ชื่อว่า Password บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งนะคะ เราได้ 2 ส่วนแล้วนะ ทีนี้ใน Username นะคะ ใน Username นี่มันมีอะไรอยู่ด้วย เห็นหรือเปล่า มันใส่อะไรเข้าไป ในตัวอย่าง ในตัวอย่าง กดผิดขอโทษ ในตัวอย่างเห็นไหมคะ มันมี Icon รูปเป็นรูปคนกับรูปลูกกุญแจนะ เราจะให้มันเห็น Icon นี้ทำอย่างไร เอ้า ไปที่ หน้าจอเราเหมือนเดิมนะคะ เราก็เอารูปนี่ ใส่เข้าไปใน... ในนี้ ใส่ได้ไหม ให้ใส่เข้าไปไหมนี่ มันให้ใส่เข้าไปใน Text ไหมล่ะ ไม่ให้ใส่เข้าไปข้างในหรือ ไม่ให้ใส่ก็วางข้าง ๆ ได้นะ ก็คือเราก็จะมี image เล็ก ๆ นี่ 2 อันนะคะ โอเคไหมคะ แล้วหารูปใส่นะเด็ก ๆ อย่าลืมนะคะ มีรูปอะไร รูปคนกับรูปกุญแจนะ หาต่อสิครับ รออะไร เมื่อกี้เปิดไว้แล้ว เอาตัวนี้แล้วกัน Free Download เหมือนเดิมนะคะ รูปต่อไปก็คือรูปกุญแจ หาต่อ หาต่อ แม่กุญแจ กุญแจอยู่ไหนนะ [เสียงหัวเราะ] เจอแต่กุญแจ เจอแต่ลูกกุญแจ ไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า Lock เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image1 Image1 Picture เลือกอัปโหลดไฟล์ Login 1 Open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เข้าได้แล้วนะคะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด เอ้ยไม่ใช่ อีก 2 ส่วนสิ มีส่วนของ เดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้เห็นไหมคะ กับ Forget Password แล้วก็ Login มี Button 1 อันนะคะ ปุ่มกดนะ และก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊กเห็นไหมคะ ชื่อว่า Check Box เด็ก ๆ เห็น Check Box ไหม นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง ให้เราได้ Check Box แล้ว 1 อัน แล้วมีอะไรต่อจาก Check Box ก็คือมี Label ใช่ไหมคะ บอกว่า Remember Me มี Label เขียนคำว่า "Remember Me" ไว้ ใส่ Label เข้าไปตรงนี้ นะคะ พิมพ์คำว่า "Remember Me" R-e Remember m-e-b-e-r member แล้วก็ Me M-e นะคะ เดี๋ยวเปลี่ยน Font ก่อนจะได้เห็น เห็นนะ เห็นไหมคะ เห็นหรือเปล่า อะไรอีกนะมี... มีอะไรอีก กดผิด แล้วก็มี Forgot Password Forgot Password นี่มันเป็น เขาเรียกว่าอะไรล่ะ เป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... Label นั่นล่ะ แล้วตอนเขาเรียกอะไรนะ ตอนเชื่อมน่ะนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า "พื้นที่" ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me ก่อนนะคะ มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ Forgot Password ไม่ได้ไง 18 ใหญ่ไปลดลง 14 พอ โอเค Remember Me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้ คำว่า "Forgot" นะคะ F-o-r F-o-r Forgot g-o-t got จำไม่ได้ ช่วงนี้สงสมองไม่ค่อยจำ Forgot F-o-r-g-o-t แล้วก็ password Forgot แล้วก็ P P-a-s-s Pass แล้วก็ word w-o-r-d แล้วก็ตามด้วย เครื่องหมายคำถาม Forgot Password ก็ลดไซซ์ ให้พอ ๆ กับไอ้นี่ล่ะนะ ไอ้ Remember Me นี่ล่ะก็คือ 14 นะคะ ทำไซซ์ให้เท่ากัน แล้วก็สี สีแจ่มว้าว ขึ้นมาหน่อย ให้เห็นความแตกต่าง ตำแหน่งควรจะตรง ๆ กัน No No No ตำแหน่งไม่ค่อยได้ เดี๋ยวเลื่อนอีกนิดหนึ่งนะ [เสียงหัวเราะ] Color เอาสีอะไร เอาสี... สีเหลือง สีเขียว สีฟ้า โอเค โอเคแล้วนะ นะคะ โอเคนะ อันสุดท้ายคืออะไรคะ Login ใช่ไหม ปุ่ม Button Button Login เด็ก ๆ อยากได้ปุ่มแบบไหน เป็นสีเหลี่ยมหรือเป็นโค้ง ดูนะคะ เราไปเลือก Button ค่ะ คลิก Button แล้วลากมาวางด้านล่างสุดใช่ไหม Button นี้ พิมพ์... ข้างในว่า "LOGIN" นะคะเด็ก ๆ พิมพ์คำว่า LOGIN เข้าไป L-O ตัวใหญ่เลย L-O-G-I-N LOGIN สีเอาสีอะไร ไปที่ Background นะ Background เลือกสีค่ะ สีปุ่ม ปุ่ม ๆ ๆ ๆ ๆ มีความ... แซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัว... ตัวอักษรเขาจะเอาสี... สีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีมันอยู่ไหน สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ Font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ มากโค้งน้อยจำได้นะ บอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radiance นะ แก้ตรง Radiance นะ ความโค้งมนของวัตถุนะคะ ขึ้นอยู่กับค่า Radiance เลย โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไร ใช่ไหม ทำให้ตัว Login นี่มันเชื่อมได้นี่ ก็คือพอ... พอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลงไปแล้วกด LOGIN เข้าไปนี่ มันจะเอาไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember Me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้ว... แล้วเราจะทำให้มันเป็นลิงก์ตอนเราไป ใน Box ไง ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดูอันที่ 2 ใบเตยต้องใส่ Label คำว่า User Login นะลูกนะ เห็นหรือเปล่า เห็น Label ไหม เลือกอันนี้ แล้วก็มาวางเป็นส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ Text Input เห็นไหม ลาก Text Input ไปวาง 2 อัน เป็นอันที่ 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มาเอา Label ก็เป็นอันที่ 2 ถ้าอย่างนั้นก็พิมพ์เปลี่ยน เป็น User Login เหมือนตัวอย่างนะ มันตรงส่วนการเชื่อมน่ะ มันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้ M... MT อะไรหว่า จำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก... เลือกอันนี้ลูก Text Input นี่ อันที่ 3 กับอันที่ 4 3 กับ 4 นี่ เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ตรง 2 อันนี้นะคะ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้ สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อม... เชื่อมฐานข้อมูลน่ะ ที่เขาใช้นะ มันจะชื่อว่าไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ Find F-i-n-d-b-a-s-e Fire Base อยู่ไหนล่ะ นี่ ๆ Firebase.google.com นะคะ ให้เราหา Firebase.google.com นะเด็ก ๆ เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้อง เราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเรา Login เข้าบัญชี Google ไปแล้วนะ ตั้งแต่ตอนที่เราใช้ตัวนัั้นน่ะ ให้ไปเลือกอะไร เลือก Create a New Project ค่ะ เห็นไหมคะ สร้าง Project ใหม่นะ คลิก 1 ครั้ง ตรงช่องนี้นะเด็ก ๆ นะ 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 เลือก Analytic Location แล้วก็ติ๊ก Accept นะ แล้วคลิก Create Project ได้เลย มันก็จะหมุน ๆ จนกว่ามันจะเต็มน่ะนะ มันกำลังจะสร้างให้เราน่ะ เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้ นะคะ เราก็ต้องรอจนกว่า ไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า Your new project is ready แล้วคลิก Continue ค่ะ Login หรือยัง บางทีต้อง Login ก่อน มันต้องขึ้นอย่างนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release มี Monitor มี Analytics มี Engage เราเลือกที่ Build คลิกลงไปที่ไอ้รูป... รูป ไอ้เหมือนสามเหลี่ยม ลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authentication ใช่ไหมคะ เราก็คลิก Get Start ทีนี้สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่า ไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ Anonymous นะ การระบุตัวตนน่ะ คลิกเปิด Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ ถ้าสมมติว่าถ้าไปทำของตัวเองแล้ว ใช้เบอร์โทรศัพท์เป็น ตัวให้เข้าก็จะคลิกที่โทรศัพท์ แล้วก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่า เราใช้การ Login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ Login ผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authentication ที่เราใช้ในการ Login นี่ เราใช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ เห็นไหมคะ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไรนะ Username ใช้ไหม ชื่อ Anonymous แล้วก็ Password นะ ใช้ 2 ตัวเห็นไหมคะ เพราะฉะนั้น ตรง Firebase เราก็เลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้พอ... พอเราย้อนกลับมานะคะ มาดู เอ้ย ตรง Build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้วให้เรามาที่ตัวนี้ Project Overview ที่เป็นรูปฟันเฟืองคลิก 1 ครั้ง แล้วเลือก 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 มาเห็นไหมคะ เขาบอกว่าเราจะต้องเอาโค้ดนี้ ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่า Version นี้ Components Sign in Sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data Viewer List ไม่ใช่ Data Viewer Grid Rating นะ Data Accent Setting เดี๋ยวขอหาก่อนนะ Components Authen Sign in นี่ต้องการหา Sign in Loading Location ไม่ใช่ My data source หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 เท่านะ ขอ Search ตัวนี้อีกตัวหนึ่งก่อนนะคะ Thunkable X คืออะไร พิมพ์ผิดพิมพ์ถูกแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ Update อย่างไร เดี๋ยว ๆ แป๊บหนึ่งนะ อาจจะต้อง Update Thunkable เราสักหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอเทสต์แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่หว่า เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration Commodity Doc Resource คลิก Login Logout ไม่ใช่น่ะ น่าจะต้อง Using Taskable Live App ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่า เราจะก๊อปไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tools หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเราก็คือ Tools ที่ชื่อว่า Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้อะไรได้ แต่มันจะไม่เก็บใน... เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ก็จะให้ไปเก็บ... Back to editing นะคะ เดี๋ยวเรามาลองที่ Box ของเราก็แล้วกัน เพราะที่ Box นะคะเด็ก ๆ ตัวแรกเลย ก็คือ Text Input 1 ไปที่ input 1 Username ใช่ไหม เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นพิมพ์นะ Text... Save Text Input text to Text Input Username Text Keyboard Type Border มันจะต้องเป็นพิมพ์ เพราะฉะนั้น เตือนคลิก เมื่อมีการคลิก เมื่อ คลิกที่ Text Input Username ปุ๊บ เลือกอันนี้ออกไปก่อน เลือกออกมาวางเมื่อคลิกเข้าไป ที่ Text Input Username ใช่ไหมคะ ให้ทำอะไร มันจะต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหมโอเคถูกนะ เห็นไหมคะ มันต้อง ให้พิมพ์ข้อความ แล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editing ตอนนี้เด็ก ๆ ได้ อยู่ที่ Scene 1 หรือยัง Scene 1 ในหน้า Design นี่ ตอนนี้ ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหม เรากลับไปที่ Box แล้วตัวแรกที่เราเลือก ก็คือ เดี๋ยวลบก่อนนะ บางคนน่าจะไม่ทัน เมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้ แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ Test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บ มัน เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนตอนมาพิมพ์ตรงช่องนี้ นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเราจะกำหนดค่าให้ Text input ตัวที่ 1 ของเรา นะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้งนะ 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 เมื่อคลิกเข้าไป When Text Input Password คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้... ให้ Set Text นี้เป็นซ่อน... ซ่อนแล้วก็ ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้ว ความจริงเราต้องเลือกอันนี้ Set Text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์นะ Keyboard Type พิมพ์ เสร็จแล้วตรงนี้เป็น Default Default กำหนดเป็นค่าเริ่มเห็นไหม Set Default ไม่ใช่แล้ว ไม่ใช้ Set Defalt เราไม่ได้ Set Default นี่ ไม่ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซ็ตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะต้องเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text In Password ก็ เป็น Set มันต้องซ่อนสิ Password ไม่ให้โชว์นะ ต้องซ่อนใช่ไหม เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ Password ตามหลักก็คือต้องไม่ให้แสดงข้อความนะ User น่ะไม่แสดง User แสดงอย่างนี้ได้นะ เหมือนแสดงชื่อ แต่ Password นี่ มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนนี่ กลับไปแก้ซ่อนอะไรหว่า To อะไร To Default บ่ Password Hint น่าจะเป็น To Default มี To อะไรนะครับ มีหลายตัว เลือกเป็น... เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงนะคะ Set Text Input Password เป็น ซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่หรือเราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ เขาใส่อันไหนล่ะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text In... เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ Set เมื่อ เราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ ให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง ของ Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่าล่ะนี่ น่าจะใช่ กำหนดตัวแปรให้เก็บค่า ของ Text Password Text Username Text Password ไหน Block ที่ 2 Block ที่ 1 น่ะไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable Variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ Text ไปที่ List ไปที่ Color เป็นจริงเมื่อ... เมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ เห็นทีจะต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ใน ไหนได้ Sign in มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Block หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in hello@gmail Sign in Email Sign in email password delete signout Reset Password For Delete User Signup เขาให้กำหนดเป็นแบบนี้หรือ ดู Sign up Sign in Do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ Features นี้ ใช้ไม่เหมือนกันน่ะ ทำไม Feature นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะ ใช้ไม่เหมือนกันน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไรให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อป ทำไม เราใช้ Thunkable X ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign In ได้นี่ไงเขาบอก แต่ทำไมของเรามันไม่เป็น X อ๋อถ้า Thunkable X ก็คือต้องใช้ iOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ Release ใช้ไม่ได้ ต้องเป็น ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยว จะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น มันไม่ได้เป็น Thunkable X น่ะ แล้วมันไม่ให้ใช้ Feature นี้ Sign In น่ะ ถ้า Thunkable X น่ะ มันจะเป็น... ก็คือเราก็จะมาก๊อป Firebase น่ะค่ะ Firebase แล้วเอาไปวางใน Sign in เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัป ไอ้ Thunkable เดิมเรานี่ ให้เป็น Thunkable X ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งาน เพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้คือเชื่อมด้วย Firebase จะใช้ได้ก็ต่อเมื่อ Thunkable เรามันเป็น Thunkable X ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้ เนื่องจากสัปดาห์หน้า ทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำ การบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอ ตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้ ก็อัปเวอร์ชันมันแค่นั้นเองมันก็น่าจะใช้ได้ เดี๋ยวจะลองดูว่าจะอัปอย่างไร ถึงจะนำไปใช้กับตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะ สัปดาห์หน้าไม่อยู่ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ [เสียงหัวเราะ] แม่ไม่ไปปล่อย ก็เลยไม่ไป เอ๊า อย่างนั้นนั้นเดี๋ยวปล่อยแล้วนะคะ อย่างนั้น เดี๋ยวปล่อยแล้ว โอเคค่ะ (นักศึกษา) นักศึกษาทั้งหมดทำความเคารพ ขอบคุณครับ (อาจารย์สุธิรา) Thunkable X ทำไมไม่อัปให้เราหว่า