--- title: ฝึก PE พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 นาโน subtitle: date: วันจันทร์ที่ 22 สิงหาคม 2565 เวลา 09.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้วเปิด Google Chrome เรา แล้วก็เข้า Thunkable เหมือนเดิมนะคะ เด็ก ๆ วันนี้จะพาทำหน้าล็อกอิน ทำอย่างไร บางทีทำแอปนะ บางอันเขาก็จะมีให้ล็อกอินเข้าไปใช่หรือเปล่า เพราะฉะนั้น เราจะทำหน้า Login นี่ เราจะทำอย่างไรพิมพ์ Thunkable ของเราThunkable ของเรา Thunkable แล้วก็ให้ Login เข้า จำได้นะ Password อะไร ตัวเองอะไรน่ะ แล้วเราก็ Login เข้า ที่เราสร้างไว้ในครั้งก่อนนะคะ ใช้อะไร ใช้ Google จะใช้ตัวนี้ เข้าผิดอันสะบ่ ช่างเถอะ สงสัยจะไม่ใช่ตัวนี้ งง ๆ Google นะ แต่มี 2-3 ตัว ไม่ออกให้ผมด้วย ผมจะออกก่อน sign out เข้าไม่ถูกอันน่ะ เข้าใหม่ มีหลายตัว จำไม่ได้ เข้าตัวนี้หรือ โอเค เข้าถูกอันแล้ว จำได้หรือเปล่า ตัวเดิมตัวเอง Login Thunkable ที่เราสร้างไว้นะคะ ครั้งก่อน ทีนี้ตัวนี้ โปรเจกต์ใหม่อยู่แล้วนะคะ ให้เราคลิกที่ Create new app เลือก New App ตั้งชื่อเหมือนเดิม จะตั้งชื่อว่าอะไรครับ จะตั้งชื่อแอปนี้ว่าอะไร สมมติ ส่วนใหญ่ ถ้าแอปพวกมี Login เข้าไป มันก็จะเป็น Category นะ ให้เลือกเป็น Education แล้วกัน ดูนะ ในรูปที่เปิดให้ดูนี่ คือ ส่วนของล็อกอินที่เขาสร้างไว้นะ เป็นตัวอย่าง ว่า นี่ ถ้าเขาทำให้ให้มีลักษณะแบบนี้ นี่ มีช่องกรอก ๆ นี่ เราจะทำอย่างไรจัดวางอย่างไรนะคะ มันก็จะมีส่วนของ User name Password ใช่ไหมลูก ปล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันเห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้แล้วสวยงาม ไม่ใช่โย้ไปโย้มา หรือเคลื่อนที่ไปมา วิธีการนี้ คือ ใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" พิมพ์ค่ะ ขี้เกียจ Search c-o-l ขี้เกียจเลื่อนไอ้นี่หาก็ให้พิมพ์ลงไป c-o ทำไl C-o-l-u-m-eu-m-e c-oไม่มี Column หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่ง นึกออกนะ จัดตำแหน่ง ตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนอย่างนี้ใช่ไหม จะมีให้ไหม รูปคนน่ะ Thunkable กับ... เราหานะคะ เราหาโลโก้รูปแบบนี้ อะไรนะ อะไรนะ เอาแบบไหน เอาแบบนี้ก็ได้ Search คำว่า "Icon" แล้วก็ login นะคะ เราหา icon นี้กัน เราจะเอาตัวไหนใช้ เลือกเอาเลย เอาตัวไหนดี ได้แล้วนะคะ เราจะเอาตัวนี้ล่ะ ตัวนี้ดีกว่า หาเอาเองนะคะ อยากได้แบบไหน หาเอา สมมติจะเอาตัวนี้ ฟรีหรือเปล่านีี่ ดูด้วยนะ ฟรี ฟรี ฟรี Download Image Standard Free Free นะ เราเลือกว่าฟรี ให้ไหม ไหนบอกว่าฟรี ขี้ตั๊วะ เบ เบ๋ อย่าลืมหาคำว่า "ฟรี" ด้วยนะเด็ก ๆ Free download ด้วย เดี๋ยวติดลิขสิทธิ์อีก 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-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง label นะคะ เพื่อจะพิมพ์ข้อความ คำว่า "Login"ลงไปนะรูปแบบฟอนต์ เด็ก ๆ ลองเลือกนะคะ อยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Backgroundเราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข้มอ่อน สีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Test Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไหร่ 30 โอเคไหม 5 โอเคนะ ได้ส่วนของ User login แล้ว ก็คือส่วนของ label แล้ว ทำอะไรต่อ บอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อันนี้ อย่าลืมใส่ชื่อ จะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้ พอเวลาเราไปแก้ code น่ะค่ ะเราก็จะได้รู้ Image Image ก็เหมือนกัน ImageIcon Image ของเรา ก็คือ Iconlogin icon login l-o-g-i-n นะคะ ปุ๊บ 1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า "Tex field" เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่ เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัวเราจะใส่ส่วนที่เรียกว่าText Field นะลูก นี่ เห็นไหมคะ เห็นหรือยัง ใครหา 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 นี่ เป็นอะไรเอ่ย ตัวบนนะคะ text input 1 มันจะเป็น ใส่ 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 เหมือนเดิมนะคะ รูปต่อไป ก็คือรูปกุญแจ หาต่อ หาต่อ แม่กุญแจ กุญแจอยู่ไหนนะ เจอแต่กุญแจ เจอแต่ลูกกุญแจ ไม่เจอแม่ แม่กุญแจ หาแม่กุญแจก่อนนะคะ หา Lock ใช้คำว่า "Lock" เอาตัวนี้แล้วกัน เจอตัวไหนเอาก่อนล่ะ โอเคนะคะ ได้รูปแล้ว ได้องค์ประกอบแล้ว ใส่ไปเรื่อย ๆ ใครยังไม่ได้รูป หาใส่ด้วยนะคะ อันที่ 1 รูปแรก Image1 Image1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขา ก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่ม อัปโหลดไฟล์เข้าไป ขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของ เดี๋ยวนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้ เห็นไหมคะ กับ forget password login มี Button 1 อันนะคะ ปุ่มกด และก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊ก เห็นไหมคะ ชื่อว่าCheck box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง เราได้ chack box แล้ว 1 อัน แล้วมีอะไรต่อจาก Checkbox ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า "remember me" ไว้ ใส่ Label เข้าไปตรงนี้ นะคะ พิมพ์คำว่า "Remember me" R-e Remember m-e-b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน font ก่อน สี เห็นไหมคะ เห็นหรือเปล่า อะไรอีกนะ มีอะไรอีก กดผิดอยู่เรื่อยเลย แล้วก็มีfor got password Forgot Password มันเป็นเหมือน Text Link น่ะ เราต้องใช้ตัว... label นั่นล่ะ แล้วตอน เขาเรียกอะไรนะ ตอนเชื่อมนะ ตอน Coding น่ะ ค่อยเชื่อมให้มันเป็นลิงก์ แล้วค่อยใส่ลิงก์นะคะ ตัวนี้ Label นี้ ใส่คำว่า พื้นที่ ตัวใหญ่ไปเสียละมั้ง เดี๋ยวลดไซซ์ Remember me มีความรู้สึกว่ามันใหญ่ไป มันจะใส่ for got password ไม่ได้ไง 18 ใหญ่ไป ลดลง 14 พอ โอเค Remember me เหลือ 14 นะคะ แล้วก็ Forgot Password นะเด็ก ๆ อีก Label หนึ่ง เราจะใช้คำว่า "Forgot" นะคะ f-o-r f-o-r fotgot g-o-t got จำไม่ได้ ช่วงนี้สมงสมองไม่ค่อยจำ forgot แล้วก็ 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" นะคะ พิมพ์คำว่า loginเข้าไปL-O ตัวใหญ่เลย L-O-G-i-n Login สีเอาสีอะไร ไปที่ Background นะ Backgruond เลือกสีค่ะ สีปุ่มมีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะ นี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษรเขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้ อยากได้เป็นโค้ง ๆ โค้งมาก โค้งน้อย จำได้ไหมคะ บอกให้แก้ตรงไหนคะ Border ใช่ไหมคะ Rediacne น่ะ ความโค้งมนของวัตถุนะคะ ขึ้นอยู่กับค่าเลย โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ใช่ไหม ทำให้ตัว Login นี่ มันเชื่อมได้นี่ ก็คือพอใส่ชื่อลงไปนะคะ ชใส่ไอ้นี่ลงไป แล้วกด login เข้าไปนี่ มันเอาไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไร อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ตอนเราไป Block ไง ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะ ดู อันที่ 2 ใบเตยต้องใส่ label คำว่า "user login" ใช้ label ทำนะลูกนะ เห็นหรือเปล่า เห็น Label ไหม เลือกอันนี้ แล้วก็มาวางส่วนที่ 2ส่วนที่ 3 กับ 4 ใช้ text input เห็นไหม ลาก Text Input ไปวาง 2 อัน เป็นอันที่ 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มาเอา Label วางเป็นอันที่ 2 ข้างในก็เปลี่ยนเป็น User login ตามตัวอย่างนะ มันตรงส่วนการเชื่อมน่ะมันมีหลายตัวนะคะ เขาบอก บางคนเขาก็ใช้ Fire-base บางคนเขาก็ใช้อะไรนะ mt อะไรหว่า เดี๋ยวดูก่อน นะคะ เดี๋ยวระหว่างรอเพื่อน ทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือกtext input อันที่3 กับ 4 นี่ 3 กับ 4 นี่ เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ ตรง 2 อันนี้นะคะ3 กับ 4 อันที่3 กับอันที่ 4 อเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้ว ทีนี้ สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช้นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์คำว่า "Find base" นะคะ มันจะเป็นของ เนF-i-n-d B-a-s-e Find Base อยู่ไหนนะ นี่ ๆ Findbase .google.com ให้เราหา Firebaseเจอไหม พิมพ์ F-i-r-e- ให้ไปที่เว็บ Firebase.google.com นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้องกดGet Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ fire bese หรือยัง ให้เรากดตรงนี้นะคะ get start เพราะ เราเพิ่งใช้งานครั้งแรก เราก็กด 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 file base project คุณจะทำนั่นที่โน่น เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถาม ไม่ใช่เรา แล้วเขาก็ถามว่าเราอยู่ไหน เราก็ต้องเลือกนะ หา Thailand ลูก T-h แล้วก็ต้องติ๊กยอมรับนะ คะ I Accept เลือก Analytic location แล้วก็ติ๊ก Accept นะ แล้วก็คลิก create project ได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้นะคะ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ ทุกคนอยู่หน้า your new project is eady แล้ว คลิก continue ค่ะ Login หรือยัง บางทีต้อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือด้านซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือ นี่ ๆ มันจะมี Build มี Release มอนิเตอร์ มี analytic มี endgrade เราไปคลิกที่ ิbiไอ้รูป...รูป ไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ Authentication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authentication ใช่ไหมคะ เราก็คลิก get start ทีนี้ สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ anonymoการระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้...สมมติมีตัวอื่นเพิ่มนะ ใช้เบอร์โทรศัพท์ อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเอง แล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้า ก็จะคลิกที่โทรศัพท์ เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การlogin ด้วยตัวไหน ถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email หรือ password เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก enable เพราะเรามี 2 ตัวใช่ไหมคะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Authe ที่เราใช้ login เราใช้สิ่งนี้นะคะ ใช่ไหม ของเรา ใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไร นะ Username ใช้ไหม ตรง Anominus เพราะฉะนั้น ตรง Firebase เราเลยเลือก 2 ตัวนี้เหมือนกัน แล้วไปไหนต่อ อันนี้ พอเราย้อนกลับมานะคะ มาดู ตรง build มันจะขึ้นว่าสถานะตรงนี้ Enable ใช้งานได้แล้ว เสร็จแล้ว ให้เรามาที่ตรงนี้ Project overview แล้วเลือก Project Setting No No No มันจะเข้ามาที่หน้าที่ Project setting นะ ใครยังไม่เข้ามาหน้านี้ ยกมือนะคะ ไปไม่ถูก เดี๋ยวตามไม่ทันนะ แล้วมาที่ด้านล่าง Your App เห็นไหมคะ แอปของคุณ มัน เพราะตอนนี้มันบอกว่าเรา... เรายังไม่มีแอปใน prokect นี้ เราก็ต้องไปที่แอปของเรา คลิกที่รูปนี่ ไอ้ตัวที่ 3 น่ะค่ะ เห็นไหมคะ มันมี ids แล้วก็มีรูปเหมือน Printer แล้วก็เครื่องหมายมากกว่า-น้อยกว่าน่ะ คลิกที่ตัวนี้ 1 ครั้งนะคะ คลิกเลือก ตรงตำแหน่งนี้ My Web app นี่ คืออะไร เราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ E-Book ไหมคะ มันจะใช้ว่าอะไรอันไหนไม่ใช้จะปิดแล้วนะ ลองพิมพ์ชื่อ ชื่อแอปเราลงไปนะคะ E-book เด็ก ๆ ดูนะคะ ชื่อแอปอันนี้นะคะ เข้าใจนะ พิมพ์ลงไปนะคะ E... เดี๋ยว เพื่อความชัวร์ เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-book เดี๋ยวว่าไม่รู้จักชื่อนี้นะคะ นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะ พิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะ แล้วก็พิมพ์ลงไป เช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ E-book ตามแม่นะnพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะ เสร็จแล้วกด Register App ได้เลย ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้าง นี่ ๆ อยู่ข้างบนนี่ มันจะมี code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า.. ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่าอันนี้เวอร์ชันนี้ Component sign in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ Data viewer list ไม่ใช่ data viewer grid rating data assen setting นะคะ หาก่อนนะ component authen sing in ต้องการหา Sign in Loading lacotion ไม่ใช่ My data sourse หรือ ก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ update อย่างไร เดี๋ยวก่อนนะ อาจจะต้อง Update Thunkable เราหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้... ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอเทสต์ตัวนี้ก่อนนะ แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ อยากรู้ มันก็ขึ้น Thunkable เหมือนกันนี่นะ เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะIntegration community resource เราจะต้อง Using Thunkable live app ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่าเราจะก๊อปฯ ไอ้ตัวนี้ แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มีใน App เราน่ะ ใน Thunkable ของเรา ก็คือ Tool ที่ Sign in มันไม่ขึ้นน่ะ Components นี้มันไม่ขึ้น มันก็จะวางไม่ได้ ต้องใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือ ตอนนี้ เรากรอกข้อมูลได้ อะไรได้ แต่จะไม่เก็บเขาเรียกว่าอะไรล่ะ ในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... wait Tool Editing เดี๋ยวเรามาลองที่ Box ของเรานะคะเด็ก ๆ ตัวแรกเลย ก็คือ Text Input 1 ไปที่input 1 username ใช่ไหม เมื่อ Text input usernameคลิก ไม่ใช่ มันจะต้องเป็นพิมพ์นะ set textinput text to text input Username TextKeyboard Type Border มันจะต้องเป็นพิมพ์ เพระฉะนั้น Cheange คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บ ให้ทำอะไร เลือกอันนี้ออกไปก่อน เลือกออกมาวาง เมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้ทำอะไร มันจะต้องทำ... ให้กำหนดค่า Text Input Username เป็น Text to ข้อความ ดูสิ แล้วเราต้องไปเทสต์ว่ามันพิมพ์เข้าไปได้ไหม ขึ้นไหม โอเค ถูกนะ เห็นไหมคะ มันต้องให้พิมพ์ข้อความ แล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้ ที่ design อยู่ที่ scence 1 ตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหม เรากลับไปที่ Block แล้วตัวแรกที่เราเริ่ม ก็คือ เมื่อกี้แม่ว่าแม่ลอง ให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้ แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ test ตอนแรกที่ test พอพิมพ์ปุ๊บ ,yoมัน... เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึงถึงเหมือนตอนมาพิมพ์ตรงช่องนี้ นี่ โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเราจะกำหนดค่าให้text input ตัวที่ 1 ของเรา นะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้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 when test input password คลิกโดนคลิกนี่ทำอะไร เหมือนกัน ก็คือให้... เซต Text นี้เป็น ซ่อนซ่อนแล้วก็ซ่อน เสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ... รู้แล้ว ความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์นะ Keyboard type พิมพ์ เสร็จแล้วตรงนี้ เป็น Defult Default กำหนดเป็นค่าเริ่มต้น เห็นไหม set default เราไม่ได้ set defule ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไปปุ๊บ สิ่งที่จะให้มันเกิดผล ก็คือให้มันแสดง Text to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน ก็ Text in password ก็ เป็น set... มันต้องซ่อนสิ password ไม่ให้โชว์นะ ต้องซ่อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ตามหลัก ก็คือต้องไม่แสดงข้อความนะ User น่ะไม่แสดง User แสดงอย่างนี้ได้นะ เหมือนแสดงชื่อ แต่ password มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะ นี่ ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนนี่ กลับไปแก้ ซ่อนอะไรคะ ToolTo Default บ่ Password hint น่าจะเป็น to Default หน้าจะเป็น To หรือ To อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password แล้วพิมพ์ Password ลงไปปุ๊บ เมื่อพิมพ์ Password ลงนะคะ set text input password เป็นซ่อน แล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนนะ นี่ เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ปุ๊บ ถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ดเปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนนะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text input... เมื่อกำหนดค่า เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซ็ตเมื่อเราพิมพ์นะ Keyboard Type มีการพิมพ์ปุ๊บนี่ ให้มัน... ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ยังติดอยู่ในบ่วงของ text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรหรือเปล่านะนี่ น่าจะใช่ กำหนดตัวแปร ให้เก็บค่าของ Text Password text username Text Password ใน Block ที่ 2 block ที่ 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เราปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ... ไปที่ list ไปที่ Color เป็นจริง เมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บ สิ่งที่ต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว แต่มันมาอยู่ใน... เราจะเอามันไปใส่ใน... ไหนได้ sing in มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันไปอยู่ที่บล็อกหรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Hello at gmail Sing in Email Signout Reset Password Delete User for Sign Up เขาให้กำหนดเป็นแบบนี้หรือ do Sign up do sign in Sign Up DSign In doไม่ให้ใช้น่ะ ไม่ยอมให้ใช้ฟีเจอร์นี้น่ะ ใช้ไม่เหมือนกัน น่ะ ทำไม Faeture นี้ ไปใช้ตรงนี้ไม่ได้ เราจะเอามาใช้ตรงนี้ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดี ต้องมาใส่ไว้ในไหน ไม่เหมือนกันนะ ใช้ไม่เหมือนกันน่ะ Alert ปุ๊บ เดี๋ยวนะคะ Sign Up อันนี้หรือ ให้ทำอะไร ให้ลงทะเบียน โดยใช้ Email หรือ Password ไม่ใช่น่ะ อันนี้ก็ไม่ใช่ บอกว่าให้ก๊อปฯ ทำไมเราใช้ Thunkable x ไม่ได้ล่ะ Thunkable X เอามาจากไหนนะ Thunkable X มันจะเพิ่ม Sign in ได้ นี่ไงเขาบอก แต่ของเราไม่เป็น X อ๋อ ถ้าThunkable X ก็คือต้องใช้ iOS เข้าใจแล้ว ทดสอบแอป มันยังไม่ release ใช้ไม่ได้ ต้องเป็น... ข้อจำกัดเยอะเหมือนกันนะนี่ โอเค เดี๋ยวจะไปหาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน มันไม่เป็น ไม่เป็น มันไม่เป็น Thunkable X น่ะ มันไม่ให้ใช้ฟีเจอร์นี้ sign in น่ะ ถ้า Thunkable น่ะ x น่ะ มันจะเป็น... ก็คือเราก็จะมาก็อป Firebase น่ะค่ะ เลย Components นี้ มันจะเป็นเหมือนให้วางน่ะ เดี๋ยวจะดูวิธีแก้ว่าเราจะอัป (เดต) ไอ้ Thunkable เดิมเรานี่ ให้เป็น Thunkable x ได้อย่างไรนะคะ แล้วสัปดาห์ถัดไปเราจะเอามาใช้งาน เพื่อจะให้มันเชื่อมฐานข้อมูลใน Firebase นะคะ ถ้าแก้ไม่ได้ อาจจะเปลี่ยนเป็นเชื่อมโดยวิธีอื่น ตอนนี้คือเชื่อมด้วย Fire base Thunkable เรามันเป็น Thunkable x ตอนนี้มันเป็น Thunkable ธรรมดา มันไม่อัปเดตให้น่ะ ทีนี้ เนื่องจากสัปดาห์หน้า ทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะ เสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ในระหว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้ แก้อัปฯ เวอร์ชันมัน จะนำมาไปใช้ตัวนี้ ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย (นักศึกษาหญิง) ... (อาจารย์สุธิรา) งั้นเดี๋ยวปล่อยเลยนะคะ โอเคค่ะ (นักศึกษาชาย) นักศึกษาทั้งหมดทำความเคารพ (อาจารย์สุธิรา) Thunkable X ทำไมไม่อัปให้เรา