(อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้าThunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอินทำอย่างไรบาง ที่ทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่าเพราะฉะนั้น เราจะทำหน้า Login นี่เราจะทำอย่างไรพิมพ์ Thunkable ของเรา Thunkable ของเราThunkableแล้วก็ให้ Login เข้าแล้วเราก็ล็อกอินเข้าที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google เข้าผิดอันสะบ่ อย่างเถอะ สัยสงสัยจะไม่ใช่ตัวนี้งง ๆ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออก Sign Out เข้าไม่ถูกอันน่ะ เข้าใหม่มีหลายตัวจำไม่ได้เข้าตัวนี้หรือ โอเคเข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create New app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไปมันก็จะเป็นCategory นะคะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของล็อกอินที่เขาสร้างไว้นะ เป็นตัวอย่าง ว่านี่ถ้าเราจะทำให้ให้มีลักษณะแบบนี้ มีช่องกรอบ ๆ มีช่องกรอบ ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ Username ใช่ไหมลูก แล้วก็ปุ่ม Login ใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงาม ไม่ใช่เรียงแล้วโย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Colum หาคำว่า "Colum" พิมพ์ค่ะ ขี้เกียจ Search ขี้เกียดเลื่อนไอ้นี่หาก็ให้พิมพ์นะคะ พิมพ์คำว่า Colum ลงไป c-o ทำไทl C-o-l-u-m-e u-m-e c-o ไม่มี Cooluทำไมล่ะ ๆ มี Componantไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วางตำแหน่งนึกออกนะ จัดตำแหน่งตรงกลางนะคะ แล้วก็ไปหารูปอะไรรุปเหมือนคนเลยใช่ไหม จะมีให้ไหมรูปคน Thunkable กับ... เราหานะคะ เราหาโลโก้รูปแบบนี้ ไอ้อะไรนะ อะไรนะ เอาแบบไหน แบบนี้ก็ได้ นึกออกนะเขาเรียกว่าอะไร Login Search คำว่า "Icon" แล้วก็ Login นะคะ เราหาไอคอนนี้กัน เราจะเอาตัวไหนใช้เลือกเอาเลย เอาตัวไหนดีได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่าตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหนหาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านี่ ดูด้วยนะฟรี ฟรี ฟรี Download Image Standard Free ฟรีนะ เราเลือกว่าฟรีนี่ ให้ไหม ไหนบอกว่าฟรี อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Freedownload ด้วย เดี๋ยวติดลิขสิทธิ์อีก Free Download โอเค หาใหม่ ไม่ได้ตัวนี้ก็ต้องได้ตัวนี้ล่ะนะ ตัวนี้ก็สวยอยู่นะเอาตัวนี้ก็ได้ png ก็พอ Premium free downloadไปไหนแล้วได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ได้หรือยัง โอเคเราจะใช้ตัวนี้นะคะ เหมือนเดิมก็ไปที่ Thunkable เรา แล้วก็ตรงชื่อ Picture นะ ก็อัปโหลดไฟล์ที่เมื่อกี้เราไปโหลดมา อยู่ไหนล่ะ Download ไหม Logo loging โอเค ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับ เด็ก ๆ ได้หรือยังครับ ได้แล้วนะคะ มีรูปแล้ว ต่อไปสิ่งที่เราจะต้องมีในล็อกอินก็คือมีอะไรคะ มี Label ใช่ไหมคะ แสดงข้อความว่าให้ล็อกอินเข้าไป จะใช้ Login หรือคำว่าอะไรนะ User Logล็อกอินหรือใช้คำว่าอะไรดีUser Login แล้วกันนะนะคะ เมื่อเราได้รูปแล้วสิ่งที่เราจะมีในบรรทัดต่อมา ก็คือ lable คะ ใช่ไหม เป็น Label นะคะ เด็ก ๆ เห็นไหมในตัวอย่างเห็นไหม Member Login ใช่ไหมคะ เราก็ใช้ Label ในการสร้าง ลาก label มาวางอยู่ใต้รูปใช่ไหม แล้วตรง Text หรือ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า Login ลงเข้าไป l-og-i-nสัญญาณล่ามโอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง Label นะคะ ให้พิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข็มอ่อนสีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหมทำให้เป็นตัวหนาด้วยจัดแนวตรงไหนเอ่ย Text Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้เอาเท่าไร 30 โอเคไหม โอเคนะ ได้ส่วนของ User login ได้ส่วน Label แล้วทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label ก็อันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วยจะได้พอเราไปแก้โค้ดน่ะค่ะ เราก็จะได้รู้ 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 นะลูก เห็นหรือยัง ใครหาไม่ดตรง Component เราน่ะ ไปที่... ถ้าหาไม่เจอพิมพ์ Text Field นะคะ หรือ Text input ของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมาทั้ง 2 อันนะคะเด็ก ๆ อันที่ 1 อันที่ 2 ต่อกันเรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ ให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะ เว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text Input Text input อันแรก Input 1 นี่เป็นอะไรเอ่ย ตัวบนนะคะ Text Input 1 มันจะเป็นใส่ 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 เหมือนเดิมนะคะ รูปต่อไป ก็คือก็คือรูปกุญแจหาต่อ หาต่อ แม่กุญแจ กุญแจอยู่ไหนนะเจอแต่กุญแจ เจอแต่ลูกกุญแจไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า "Lock" เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้วได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูปหาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image1 Image1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันไม่เท่าก็ขยาย ย่อ-ขยายเอานะคะ เราก็ไไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ก็เพิ่มอัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด เอ๊ย ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของเดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้นะคะ กับ forget passwordมี Button 1 อันนะคะ ปุ่มกด และก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีปิ๊ก ชื่อว่า Check box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง ให้เราได้ Check box แล้ว 1 อัน แล้วมีอะไรต่อจาก Checkbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Labelเขียนคำว่า " remember ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า "Remember me" R-e Remember b-e-r member แล้ว me m-e นะคะ เดี๋ยวเปลี่ยนฟอนต์ สีฟอนต์ก่อนจะได้เห็น No เห็นไหมคะ เห็นหรือเปล่าอะไรอีกนะ มีอะไรอีก กดผิดอยู่เรื่อยเลย แล้วก็มี 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 เด็ก ๆ อยากได้ปุ่มแบบไหน เป็นสีเหลี่ยมหรือเป็นโค้งดูนะคะ เราไปเลือก botton คลิก button แล้วลงด้านล่างสุดใช่ไหม Button นี้พิมพ์ข้างในว่า Login นะเด็ก ๆเข้าไปL-O ตัวใหญ่เลย L-o-g-i-n Login สีเอาสีอะไร ไปที่ Background นะ Background เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วง โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อยแก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Ladian น่ะ แก้ตรง ladian นะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับโอเคไหมตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด login เข้าไปนี่ มันจะไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ในบล็อกไง ในโค้ดน่ะยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ label คำว่า User login น่ะใช้ Label ทำ เห็นหรือเปล่าเห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ text input เห็นไหม ลาก Text Input ไปวาง 2 อัน เป็นอันที่ 3 กับ 4 ได้รูปแล้ว เสร็จแล้วมา Label วางเป็นอันที่ 2 ข้างในก็พิมพ์เปลี่ยนเป็น User Login เหมือนตัวอย่างนะ มันตรงส่วนเชื่อน่ะมันมีหลายตัวนะคะ เขาบอกบางคนเขาก็ใช้ Firebase บางคนเขาก็ใช้ mt อะไรหว่าจำไม่ได้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกอันนี้ลูก text input อันที่ 3 กับ 4 นี่เลือกไอ้ที่เป็น Text Input ไปวางและก็เอารูปมาใส่ตรง 2 อันนี้ 3 กับ 4 อันที่ 3 กับอันที่ 4 โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้สิ่งที่เราจะต้องทำเพิ่มนะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช่นะมันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์คำว่า "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ F-i-s-e B-a-s-e Firebase อยู่ไหนหว่า นี่ ๆ Firebase.google.com ให้เราหา Firebase.google.com เจอไหม พิมพ์ F-i-r-e-b-a-s-e นะคะ ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้อันดับแรก ก็คือเราจะต้องเราจะต้องกดGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebese หรือยัง เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี Google ตั้งแต่ตอนที่เราใช้ตัวนัันให้ไปเลือกอะไร เลือก Createa New projects ค่ะ เห็นไหมคะ สร้าง Project ใหม่นะ คลิก 1 ครั้ง ตรงช่องนี้นะเด็ก ๆ นะ นี่ enter your Project name นี่ เราก็พิมพ์ชื่อ Project เข้าไป อะไรนะ Firebase อะไรนะ login นะ ทำไมมันไม่ให้พิมพ์L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมรับก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานเขานะ แล้วก็กด Continue มันก็จะขึ้นมาบอกว่านี่คือ Google Analytic นะคะ for your firebase project คุณจะทำนั่นนี่โน่น เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านแล้วนะ แล้วเราก็ถาม เอ๊ะ ไม่ใช่เรา เขาจะถามว่าเราอยู่ไหนเราก็ต้องเลือกนะ หา Thailand นะลูก T-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก Analytic Location แล้วก็ติ๊ก Accept นะ แล้วก็โอเคได้เลยมันก็จะหมุน ๆ ๆ ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เราน่ะ เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบทุกคนอยู่หน้า your new project is ready แล้ว คลิก Continue ค่ะ Login หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่ Build เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release Monitor มี Analytic endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authentication ใช่ไหมคะ เราก็คลิก get start ทีนี้ สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือ เขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คื Anonymous นะ การระบุตัวตนน่ะ ที่เปิด Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่โทรศัพท์ แล้วก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน ถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ Password เห็นไหมคะ เรามี Password ด้วยใช่ไหมเราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authen ที่เราใช้ในการ Login นี่เราชใ้ช้สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะตัวนี้คืออะไร นะ Username ใช่ไหม ชื่อ Anonymous เพราะฉะนั้น ตรง 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 ได้เลย ไหนนะ ไม่ใช่สิ ชื่อที่จะใส่น่ะ คือ ชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่ มันจะมีโค้ดมาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปฯ ไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่าไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าเวอร์ชันนี้ Components ไม่เจอมันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer data Viewer data assen seting หาก่อนนะ Components Authen signin ต้องการหา My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้อีกตัวหนึ่งก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี update อย่างไร เดี๋ยว ๆ แป๊บหนึ่งนะ อาจจะต้อง Update Thunkable เราเสียหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้... ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือเดี๋ยวแป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ ๆ มันก็ขึ้น Thunkable เหมือนกันนี่หว่า เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration Community เราจะต้อง Using Thunkableก็ไม่ใช่มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา ก็คือ Tool ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้นมันก็จะวางไม่ได้ ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้อะไรได้ แต่จะไม่เก็บในเขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... แบบ Tool Editing นะคะ เดี๋ยวเรามาลองที่ Box ของเราแล้วกัน ไปที่ box นะคะเด็ก ๆ ตัวแรกเลย ก็คือ Text Input 1 ไปที่ input 1 username ใช่ไหม ไปที่ Text input1 เมื่อ Text input username คลิกไม่ใช่ มันจะต้องเป็นพิมพ์นะ set text input text to Text input Username Text Keyboard Type ฺBorder มันจะต้องเป็นพิมพ์ เพระาฉะนั้น Cheang คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ ให้ทำอะไร เลือกอันนี้ออกไปก่อน เลือกออกมาวาง เมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Text จาก taxt เป็นข้อความดูสิ แล้วเราต้องไป Test ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเคถูกเห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ  เพราะตรงนี้ Username เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ Scene 1 ตอนนี้ที่เราจะกำหนดค่า ก็คือ Text Input อันที่ 1 ใช่ไหมเ รากลับไปที่บลแล้วตัวแรกที่เราเริ่มก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บ เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนตอนมาพิมพ์ช่องนี้ นี่โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ คือ กำหนดค่าให้ Text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่บล็อก เมื่อกี้ไม่ได้ลบทิ้ง Edit undo มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะ สิ่งแรกก็คือเมื่อ Text input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือ Username ก็คือให้ set ค่าของ Text Input นี่จะซ่อนเป็นพิมพ์น่ะ นะ คะดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหม text Inputจะต้องทำงานนะคะ ตั้งเงื่อนไขให้มันอะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหม คือ ตัวที่ 2 ของเราpassword ก็เหมือนกัน คลิกที่ Password มี 2 อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input password เมื่อคลิกเข้าไป wen... นี่ทำอะไรเหมือนกัน ก็คือให้...เซต Text นี้เป็นซ่อนซ่อนแล้วก็ ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วควา่มจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์ot Keyboard Type เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มเห็นไหม set default เราไม่ได้ set defule นี่ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะต้องเกิดผลก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text In password ก็เป็น set มันต้องซ่อนสิ password ไม่ให้โชว์นะ ต้องซ้อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลอง Test ดูนะคะ เพราะตอนพิมพ์ password ตามหลักต้องไม่แสดงข้อความนะ User น่ะไม่แสดง User แสดงอย่างนี้ได้เหมือนแสดงชื่อ แต่ password มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนไว้ นี่ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ To อะไร To Default บ่ Password น่าจะเป็น to Default น่าจะเป็น Too หรือ Tool อะไร มีหลายตัวเลือกเป็น... เมื่อคลิก password เมื่อคลิก Password แล้วพิมพ์ Password ลงไปปุ๊บเมื่อพิมพ์ Password ลง input password เป็นซ่อนแล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อนลองดูสิ แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม จาก Text ให้มันซ่อนได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้วตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ เมื่อกำหนดค่า เมื่อกำหนดค่า Text Inputเมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ให้มัน ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่านี่ น่าจะใช่ กำหนดตัวแปรให้เก็บค่าของ Text Password Text username Text Password ในบล็อกที่ 2 บล็อกที่ 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา Variable ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ Text ไปที่ Color เป็นจริงเมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ ถึงที่ต้องทำต่อขาดไปไหนนะSign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ในไหนได้ Sign in มันจะต้องเขาบอกว่าให้มันอยู่ตรงมันจะไปอยู่ที่บล็อกหรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Hello at Gmail Sing in Email Reset Password for Delete User Sign Up เขาให้กำหนดเป็นแบบนี้หรือ ดู Sign up Sign in Sign Do ไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกันน่ะ ทำไม Faeture นี้ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ไม่เหมือนกันนะ ใช้ไม่เหมือนน่ะ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไร ให้ลงทะเบียนโดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อปฯ ไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable Xเอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้า Thunkable X ก็คือใช้ IOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ Release ใช้ไม่ได้ ต้องเป็น ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น มันไม่เป็น Thunkable X น่ะมันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะถ้า Thunkable x น่ะ มันจะเป็น... ก็คือเราก็จะมาก็อป Firebase น่ะค่ะ ก๊อปฯ Firebase เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัปไอ้ Thunkable เดิมเรานี่ให้เป็น Thunkable x ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งาน เพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไมได้อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้คือเชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkable x ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้วเดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้อัปเวอร์ชันมันแค่นั้นเอง อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะ สัปดหา์หน้าไม่อยู่ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้นเดี๋ยวปล่อยเลยนะคะ (นักศึกษาชาย) นักเรียนทั้งหมดทำความเคารพ (อาจารย์สุธิรา)  Thunkable X ทำไมไม่อัปให้เราล่ะ  -