--- title: พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่ วันที่ 27 ก.ค. 2022 ปลา subtitle: date: วันอังคารที่ 2 พฤษภาคม 2566 เวลา 09.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ ได้ยินนะคะ ใครที่เข้ามาแล้ว เปิด 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 ใช่ไหมลูก ปุ่มล็อกอินใช่ไหมคะ นะคะ มันจะมีสัดส่วนของมันอยู่นะ เราจะวางอย่างไร ให้มันนี่ เห็นไหม ระดับช่องไฟระดับอะไรนี่ เรียงได้ออกมาแล้วสวยงาม ไม่ใช่โย้ไปโย้มาเคลื่อนที่ไปมา วิธีการนี้คือใช้เครื่องมือที่ชื่อว่า... Column หาคำว่า "Column" พิมพ์ค่ะ ขี้เกียจ Sue Search ขเลื่อนไอ้นี่หาก็ให้พิมพ์ ลงไป c-o ทำไทl C-o-l-u-m-e c-oไม่มี Column หรือ ทำไมล่ะ ๆ มี Componant ไหนอีกนี่ ดูตัวอย่างเขานะ ดูตัวอย่างเขา มีส่วนของอะไรบ้าง มีเหมือนมีรูป ใส่ไหมคะ อยากใส่ไหม สมมติเราจะใส่รูปเหมือนอย่างนี้นะคะ เหมือนตัวอย่างอย่างนี้ เราก็ไปที่อะไรคะ Image หรืออะไรลูก เลือกมาใช่ไหม เลือก Image แล้วก็วาง ตำแหน่งนึกออกนะ จัดตำแหน่ง ตรงกลางนะคะ แล้วก็ไปหารูปอะไร รูปเหมือนคนเลยใช่ไหมจะมีให้ไหม รูปคนน่ะ Thunkable กับ... เราหา เราหาโลโก้ รูปโลโก้แบบนี้ ไอ้อะไรนะ อะไรนะ ี้ เอาแบบนี้ก็ได้ เขาเรียกว่าอะไร Icon นะ Search คำว่า "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 มาวางอยู่ใต้รูปใช่ไหม แล้วตรง Page นะ เราก็แก้เป็นอะไร User พิมพ์คำว่า "User" แล้วก็คำว่า "ล็อกอิน"เข้าไป l-og-i-n สัญญาณล่าม โอเค ได้ยินอยู่นะ โอเคค่ะ นะคะ ใครที่วางรูปเสร็จแล้วให้วาง Label นะคะ เพื่อจะพิมพ์ข้อความคำว่า "Login" ลงไปนะ รูปแบบฟอนต์เด็ก ๆ ลองเลือกนะคะ รูปแบบ font เด็ก ๆ ลองเลือกอยากได้แบบไหน แล้วก็สี เปลี่ยนสีได้เดี๋ยวเราจะขอฟอนต์ เนื่องจาก Background เราเป็นสีเข้ม เพราะฉะนั้น ตัวหนังสือเราก็จะใช้สีอ่อนนะคะ สีตรงข้าม เข้ม อ่อน สีพื้นเข้ม ตัวหนังสือก็สีอ่อนนะคะ หลักการ User Login นะคะ ตัวหนาไหม ทำให้เป็นตัวหนาด้วย จัดแนวตรงไหนเอ่ย Text Align นะคะ คือจัดกึ่งกลาง โอเค ขนาดตัวอักษรนะคะ 18 เล็กไป เพิ่ม เพิ่มขนาดได้ เอาเท่าไร 30 โอเคไหมโอเคนะ ได้ส่วนของ User login แล้ว ก็คือส่วนของ Label แทำอะไรต่อบอกแล้วนะคะ ทำส่วนไหนปุ๊บ อย่าลืม Label Label อันนี้ อันนี้อย่าลืมใส่ชื่อจะได้รู้ว่าตรงนี้มันคืออะไรนะ ทุกครั้งนะคะ บอกเสมอว่าใส่ชื่อมันเข้าไปด้วย จะได้พอเวลาเราไปแก้ Code น่ะคะ เราก็จะได้รู้ Image Image Icon Image ของเราก็คือ Icon login icon login l-o-g-i-n นะคะ ปุ๊บ 1 2 3 ส่วนที่ 3 ที่จะต้องใส่ เห็นไหมคะ อย่างนี้เขาเรียกว่า Text field เพราะมันจะต้องเป็นให้กรอกข้อความได้ 2 อันขาว ๆ นี่เห็นนะ ไอ้ตัวขาว ๆ 2 อันนี้ ไอ้ตัว เราจะใส่ส่วนที่เรียกว่า Text Field นะลูกนี่เห็นไหม เห็นหรือยัง ใครหาไม่ดตรง Component เราน่ะ ไปที่...ถ้าหาไม่เจอพิมพ์ text feelหรือ Text input ของ Thunkable มันใช้ Text Input เราก็ลากมา มีกี่อัน 2 อันใช่ไหมคะ เราก็ลากมา 2 อันนะคะ เด็ก ๆ อันที่ 1 อันที่ 2 ต่อกัน เรียงต่อกัน Text Field เราใช้ 2 อัน เพราะฉะนั้น เราก็เอาลงมา 2 อัน 1 อัน 2 อันนะคะ ขยายขนาดด้วยนะคะ เช็กอย่างไรให้มันเท่า ๆ กัน เอามาทาบใส่กันอย่างนี้นะคะ ขนาดมันก็ควรจะเท่ากันนะเว้นช่องไฟให้สวยงามนะคะ เห็นหรือเปล่า ทีนี้ Text Field อยากได้สีอะไร เหมือนเดิมค่ะ ใส่สีเข้าไปให้เธอด้วยนะคะ Text Input text input อันแรก Input 1 นี่เป็นอะไรเอ่ย ตัวบนนะคะ text Input1 มันจะเป็นใส่ 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 Image 1 Picture เลือกอัปโหลดไฟล์ login 1 open ได้แล้ว ปรับขนาดเอาเองนะเด็ก ๆ มันมันไม่เท่าก็ขยาย ย่อขยายเอานะคะ เราก็ไปที่ตำแหน่งของวัตถุชิ้นนั้น คลิกที่ชื่อเขาก็ได้ คลิกที่ชื่อเขา โอเคนะคะ เขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ก็เพิ่มอัปโหลดไฟล์เข้าไปขนาดมันไม่ได้ เราก็ยืดได้ หดได้นะ นะคะ เดี๋ยวเด็กไปแต่งเพิ่มเติมทีหลังเด้อ จะใส่สีใส่อะไรน่ะ บอกคร่าว ๆ ว่าองค์ประกอบมันมีอะไร แล้วก็มีอีกส่วนหนึ่งใช่ไหมคะ อันล่างสุด ไม่ใช่ อีก 2 ส่วนสิ มีส่วนของอะไรนะ เปิดให้ดูชัด ๆ มีส่วนที่เหมือนติ๊ก ๆ อย่างนี้ กับ forget password มี Button 1 อันนะคะ ปุ่มกดและก็ส่วนที่มีติ๊กอย่างนี้นะคะ ส่วนที่มีติ๊ก เห็นไหมคะ ชื่อว่า Check box เห็นไหมคะ นะคะ แถบเครื่องมือ Check Box ลากลงไปเลย ลากไปวาง ให้เราได้ check box แล้ว แล้วมีอะไรต่อจาก Check box ก็คือมี Label ใช่ไหมคะ บอกว่า Remember me มี Label เขียนคำว่า " remember me" ไว้ใส่ Label เข้าไปตรงนี้นะคะ พิมพ์คำว่า"Remember me" R-e Remember b-e-r member แล้วมี me m-e นะคะ เดี๋ยวเปลี่ยน Font สี Fก่อนสีเห็นไหมคะ เห็นหรือเปล่า อะไรอีกนะ มีอะไรอีก กดผิด แล้วก็มี 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-or forgot 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 นะคะ ว่า "Login" เข้าไปL-O ตัวใหญ่เลย L-O-G-i-n Loginสีเอาสีอะไรไปที่ Background นะ เลือกสีค่ะ สีปุ่ม มีความแซ่บเบอร์ 10 อยากได้สีชมพูอยู่ไหนนี่ สีชมพู เอาฟ้าน้ำทะเลก็ได้นะนี่ ๆ เขาอยากได้ประมาณนี้ แต่ตัวอักษร เขาจะเอาสีเข้ม ๆ นะครับ Color Color Color Text Color นะคะ สีน้ำเงินไหม สีม่วงไหม โอเค ทำตัวหนาด้วย เปลี่ยนรูปแบบ font ด้วย โอเคนะคะ ตัวนี้อยากได้เป็นโค้ง ๆ โค้งมากโค้งน้อย จำได้นะ บอกว่าให้แก้ตรงไหนคะ ตรง Border ใช่ไหมคะ Radian น่ะ ความโค้งมนของวัตถุนะคะ ความโค้งมนของวัตถุ ขึ้นอยู่กับค่า Radian โอเคไหม ตอนนี้เราได้องค์ประกอบหนึ่งครบแล้ว ทีนี้มันจะเชื่อมอย่างไรนะ ทำให้ตัว Login มันเชื่อมได้ ก็คือพอใส่ชื่อลงไปนะคะ ใส่ไอ้นี่ลองไปแล้วกด login เข้าไป มันจะเอาไปเก็บไว้ที่ไหน เดี๋ยวขอเดินดูก่อนนะคะ ว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือยัง ตรงไหนลูก อะไรนะ อ๋อ Remember me Forget Password ใช้ Label ธรรมดา ใช่ ๆ แล้วเราจะทำให้มันเป็นลิงก์ ตอนเราไปใน Block ไง ในโค้ดน่ะ ยัง ๆ ๆ มันจะไปทำตอนเราสั่งมันน่ะ โอเคนะดู อันที่ 2 ใบเตยต้องใส่ label คำว่า "login" น่ะ ลูกนะ เห็นหรือเปล่าเห็น Label ไหม งเลือกอันนี้ แล้วก็มาวางส่วนที่ 2 ส่วนที่ 3 กับ 4 ช่องที่ 3 กับ 4 ใช้ text input เห็รลาก Text Input ไปวาง 2 อัน 3 กับ 4 ได้รูปแล้ว เสร็จแล้ว มา Label ก็เปลี่ยนเป็น User เหมือนตัวอย่างนัะ มันตรงส่วนการเชื่อมน่ะ มันมีหลายตัวนะคะ เขาบอก บางคนเขาก็ใช้ Firebase บางคนก็ใช้ m... m อะไรหว่า เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อนทำองค์ประกอบให้เสร็จ อันต่อมาอันนี้ เลือก text input อันที่ 3 กับ 4 นี่ เลือกไอ้ที่เป็น Text Input ไปวาง และก็เอารูปมาใส่ ตรง 2 อันนี้นะคะ อันที่3 กับ 4 อันที่ 3 กับอันที่ 4 (อาจารย์สุธิรา) โอเคไหมคะ ได้องค์ประกอบตัวนี้แล้วนะ เสร็จแล้วทีนี้ สิ่งที่เราจะต้องทำเพิ่ม นะคะ ก็คือมันจะเป็นเหมือนเชื่อมฐานข้อมูลน่ะ ที่เข้าใช้นะ มันจะชื่อว่า ไปเปิด Google เด็ก ๆ เปิด Google แล้วพิมพ์ "Firebase" นะคะ มันจะเป็นของตระกูล Google นี่ล่ะ F-i-r-d B-a-s-e FireBase อยู่ไหน นี่ ๆ Firebase.google.com นะคะ ให้เราหา Firebase.google.com เจอไหม พิมพ์ F-i-r-e- ให้ไปที่เว็บ Firebase.google.com ตัวนี้นะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase ตัวนี้ หน้าตาอย่างนี้ อันดับแรก ก็คือเราจะต้องเราจะต้องกด Get Start เพราะเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ firebase หรือยังGet start นะคะ เพราะเราเพิ่งใช้งานครั้งแรก เราก็กด Get Start นะเด็ก ๆ เขาจะ Login ให้เราด้วยบัญชี Google เพราะเราล็อกอินด้วยบัญชี Google ไปแล้วนะ ตั้งแต่ตอนที่เราใช้ตัวนัั้น ให้ไปเลือกอะไร เลือก Create a New projects ค่ะ เห็นไหมคะ สร้าง project ใหม่นะ 1 ครั้ง ตรงช่องนี้นะเด็ก ๆ นะ nter your proเราก็พิมพ์ชื่อ Project เข้าไป อะไรนะFirebase อะไรนะ login นะ ทำไมมันไม่ให้พิมพ์ L-o-g-i-n นะคะ เราต้องยอมรับก่อนนะ ติ๊กยอมรับก่อน ติ๊กยอมรับของเขาด้วยนะ ไม่อย่างนั้นเขาไม่ให้ใช้งานของเขานะ แล้วก็กด Continue มันก็จะขึ้นมา บอกว่านี่คือ Google Analytic นะคะ for your Firebase project เสร็จแล้วเราก็คลิก Continue เลย ไม่ต้องไปอ่านนะ แล้วเราก็ถาม เอ้ย ไม่ใช่เรา เขาก็ถามว่าเราอยู่ไหน เราก็ต้องเลือกนะ หา Thailand ลูกT-h แล้วก็ต้องติ๊กยอมรับนะคะ I Accept เลือก Analytics location แล้วก็ติ๊ก Accept นะ แล้วก็โอเค ได้เลยมันก็จะหมุน ๆ จนกว่ามันจะเต็มนะ มันกำลังจะสร้างให้เรา เขากำลังจะหา... มันเป็นเหมือน Database แต่ออนไลน์อย่างนี้ เราก็ต้องรอจนกว่าไอ้เจ้านี่มันหมุนจนครบ บางคนอยู่หน้า your new project is ready แล้ว คลิก Continue ค่ะ Login หรือยัง บางทีต่อง Login ก่อน มันขึ้นแบบนี้ ต่อไปนะคะ ให้มาเลือกที่... เห็นไหม มันจะมีแถบเครื่องมือ ด้านซ้ายมือนะ เด็ก ๆ คลิกที่คำว่า "Build" เห็นไหมคะ แถบเครื่องมือทางซ้ายมือนี่ ๆ มันจะมี Build มี Release Analytics endgrade มีมอนิเตอร์มีอนารีเกตีมี endgrade เราไปคลิกที่ไอ้รูป... รูปไอ้เหมือนลูกศรสามเหลี่ยมนี่นะคะ แล้วคลิกที่ All Authenication คลิก 1 ครั้ง มันจะเข้ามาที่หน้า Authetication ใช่ไหมคะ เราก็คลิก get start ทีนี้ สิ่งที่เราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหม ตัวที่เป็น คือเขาบอกว่าไอ้ที่เราจะให้มัน Login เข้าไปน่ะ เราใช้อะไร เราใช้ Username ก็คือ การระบุตัวตนน่ะ ที่เปิด Enable Enable แล้วก็ Save นึกออกนะ ถ้าสมมติ แล้วถ้าสมมติเด็ก ๆ ใช้... สมมติมีตัวอื่นเพิ่มนะ เช่น ใช้เบอร์โทรศัพท์ อย่างนี้ นึกออกนะ สมมติถ้าไปทำของตัวเองแล้วใช้เบอร์โทรศัพท์เป็นตัวให้เข้าก็ไปคลิกที่เราก็เลือก Enable เหมือนกัน นึกออกนะคะ ให้นึกถึงหลักว่าเราใช้การ login ด้วยตัวไหน หรือถ้าสมมติเมื่อกี้นี้ล็อกอินผ่าน Email เห็นไหมคะ เรามี Password ด้วยใช่ไหม เราก็เลือกตัวนี้ และเราก็คลิก Enable เพราะเรามี 2 ตัวนะ เราใช้ 2 ตัวนะ เสร็จแล้วก็กด Save ก็คือบอกให้ระบบมันรู้ว่า Allten ที่เราใช้ในการ Login น่ะ สิ่งนี้นะคะ ใช่ไหม ของเราใช้แค่ 2 ตัว เรามาย้อนดูนี่ ตัวนี้กับตัวนี้นะ ตัวนี้คืออะไร นะ Username ใช้ไหมตร Anominus เพราะฉะนั้น ตรง 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... เดี๋ยวเพื่อความชัวร์เอาตัวใหญ่เหมือนที่ตัวเองพิมพ์นี่ล่ะ Ebook นะคะ เดี๋ยวไม่รู้จักชื่อนี้นะคะ ให้ดูชื่อที่ตัวเองพิมพ์นะ พิมพ์ให้มันเหมือนเลยนะ ดูชื่อนี้ไว้นะ แล้วก็พิมพ์ลงไปเช็กนะคะ ว่าชื่อแอปของเรานะคะ เด็ก ๆ ดูนะคะ ดูตรงหัวนี่ ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ Ebook ตามแม่นะพิมพ์ไว้ว่าอะไร ให้ดูตรงหัวนะ เสร็จแล้วกด Register App ได้เลย ไหนล่ะ ไม่ใช่สิ ชื่อที่จะใส่น่ะ เป็นชื่อแอปที่เราสร้างนี่ ๆ อยู่ข้างบนนี่ มันจะมี Code มาเห็นไหมคะ เขาบอกว่าเราต้องเอาโค้ดนี้ ไปใส่ในแอปเรานั่นเองนะคะ ก๊อปไปวางในแอปเรานั่นเอง จะขึ้นอย่างนี้ไหม ใครยังไม่ขึ้น เสร็จแล้วเรากลับมาที่แอปเรานะคะ หาเครื่องมือที่ชื่อว่า ไม่แน่ใจจะเห็นไหมนี่ มันใช้ว่าอะไรหว่า Version นี้ อันนี้ Component Sing in ไม่เจอ มันจะไปต่อไม่ได้ มันต้องใช้อะไรนี่ data wever data assen setting นะคะ หาก่อนนะ Component all ten sing in ต้องการหา Signinไม่ใช่ My data sourse หรือก็ไม่ใช่ เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkable ขอ Search ตัวนี้ก่อนนะคะ Thunkable x คืออะไร พิมพ์ผิดพิมพ์ถูกกันแล้ว เราเลือกเวอร์ชันผิดใช่ไหมนี่ Update อย่างไร อาจจะต้อง Update Thunkable เราหน่อย มันจะใช้ เขาเรียกว่าอย่างไรล่ะ ใช้ ใช้ฟังก์ชันนั้นไม่ได้น่ะ มันไม่เหมือนกันหรือ เดี๋ยวขอเทสต์ตัวนี้ก่อนนะ แป๊บหนึ่งนะเด็ก ๆ มันต่างกันหรือ อยากรู้ อยากร มันก็ขึ้น Thunkable เหมือนกันนี่ เพราะมัน Components มันมีไม่ครบ Thunkable Solution เดี๋ยวนะ Integration ไม่ใช่เราจะต้องUsing Thunkable ก็ไม่ใช่ มันเป็น Test เพราะเขาบอกว่า เราจะก๊อบฯ ไอ้ตัวนี้ แล้วเอาไปวาง แต่ทีนี้ Tool หนึ่งที่เราไม่มี ใน App เราน่ะ ใน Thunkable Tool ที่ Signin มันไม่ขึ้นน่ะ Components นี้ มันไม่ขึ้น มันก็จะวางไม่ได้ใช้ตัวไหนนะ เดี๋ยวขอ Test ดูนะคะ คือตอนนี้ เรากรอกข้อมูลได้ อะไรได้ แต่จะไม่เก็บ เขาเรียกว่าอะไรล่ะ เก็บในฐานข้อมูลนะ ถ้าจะให้ไปเก็บ... back Tool Editing เดี๋ยวเรามาลองที่ Bock ของเราตัวแรกเลย ก็คือ Text Input 1 ไปที่ input 1 username ไปที่ Text input1 เมื่อ Text input username คลิก ไม่ใช่ มันจะต้องเป็นนะ set text input text to Username Text Keyboard Type Border มันจะต้องเป็นพิมพ์เพราะฉะนั้น Change คลิก เมื่อมีการคลิก เมื่อคลิกที่ Text Input Username ปุ๊บฃ เลือกอันนี้ออกไปก่อน เลือกออกมาวางเมื่อคลิกเข้าไปที่ Text Input Username ใช่ไหมคะ ให้มันทำอะไร มันต้องทำ...ให้กำหนดค่า Text Input Username เป็น Text To ข้อความ จาก taxt เป็นข้อความดูสิ แล้วเราต้องไปเทสต์ว่ามันิมพ์เข้าไปได้ไหม ขึ้นไหม โอเคถูก เห็นไหมคะ มันต้องให้พิมพ์ข้อความแล้วแสดงข้อความนั้นได้ โอเคนะคะ เพราะตรงนี้ Username นะ เหมือนกัน Text Input อันที่ 2 กลับไปที่ Back to Editting ตอนนี้เด็ก ๆ ได้อยู่ที่ screen 1 หรือยังตอนนี้ที่เราจะกำหนดค่า ก็คือText Input อันที่ 1 ใช่ไหม เรากลับไปที่ Block แล้ว ตัวแรกที่เราเริ่ม ก็คือเมื่อกี้แม่ว่าแม่ลองให้นึกถึงนะ เมื่อเราคลิกเข้าไปที่ตัวนี้ แล้วพิมพ์ มันก็ต้องมีการเปลี่ยนแปลง แต่ตอนแรกที่ test ตอนแรกที่ Test น่ะ พอพิมพ์ปุ๊บ เมื่อกี้มันน่าจะ Save ไว้แล้ว พอพิมพ์ครั้งแรกมันไม่มีข้อความขึ้นมานะ ให้นึกถึงเหมือนมาพิมพ์ช่องนี้ นี่โอเคนะคะ โอเค เพราะฉะนั้น สิ่งที่เราจะต้องทำ ก็คือเราจะต้องกำหนดค่าให้ text input ตัวที่ 1 ของเรานะคะ เพราะฉะนั้น ไปที่ Block เมื่อกี้ไม่ได้ลบทิ้งไหม อีกอันดู มันน่าจะเก็บค่าไว้ ลืมลากใส่ถังขยะ ไม่เป็นอะไร ให้เราเลือก Components ที่ชื่อว่า Text Input นะ สิ่งแรกก็คือเมื่อ text input โดนคลิกลงไป ก็คือโดนคลิกเข้าไปที่ Text Input ใช่ไหมคะ เราเลือกตัวนี้ออกมา สิ่งที่จะต้องเกิดขึ้นต่อใน Text Input Username ก็คือ มันจะต้องให้ set ค่าของ Text Input น่ะ จากซ่อนเป็นพิมพ์น่ะนะคะ ดูนะคะ ลอง Test ดู มันขึ้นเหมือนที่บอกไหม text Inputจะต้องทำงานนะคะ ต้องทำงาน ตั้งเงื่อนไขให้มัน อะไรต่อ เสร็จแล้วทำอย่างไรต่อ มันมีอีกตัวหนึ่งใช่ไหม คือตัวที่ 2 ของเรา password ก็เหมือนกัน อันใช่ไหมคะ When เมื่อเราคลิกเข้าไปที่ Text Input password wen... คลิกโดนคลิกนี่ทำอะไรเหมือนกัน ก็คือให้... เซต Text นี้ เป็นซ่อน ซ่อนแล้วก็... ซ่อนเสร็จแล้วก็มาแสดง แล้วก็ให้พิมพ์นะ อันนี้ก็ทำเหมือนกัน ก็คือ...รู้แล้วความจริงเราต้องเลือกอันนี้ set text Password นะคะ กำหนดให้ Text Input Password นี่ รับค่าจากการพิมพ์นะ เสร็จแล้วตรงนี้เป็น Defult Default กำหนดเป็นค่าเริ่มต้น เห็นไหม set Default เราไม่ได้ set Default ไม่ได้ให้ซ่อนด้วย เอาใหม่นะคะ ที่แน่ ๆ เราจะต้องเซตค่าให้ไอ้ 2 ตัวนี้ล่ะ เมื่อพิมพ์ เมื่อคลิกเข้าไป เกิดผลก็คือให้มันแสดงText to แล้วก็ข้อความในนี้นะ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in password ก็เป็นเซ็ต มันต้องซ่อนสิ password ต้องซ่อนนะ เปลี่ยนเป็นซ่อนนะคะ ซ่อน Password จะซ่อนให้เราไหมล่ะ เราลองเทสต์ดูนะคะ เพราะตอนพิมพ์ password ตามหลักก็คือต้องไม่แสดงนะ User น่ะแสดง User แสดงอย่างนี้ได้แต่ passwor มันไม่ควรแสดงชื่อไหม มันไม่ควรแสดงข้อความไหม ให้มันซ่อนนะนี่ตอนนี้มันยังไม่ซ่อน ตอนนี้มันยังไม่ซ่อน เดี๋ยวเราต้องให้มันซ่อนกลับไปแก้ ซ่อนอะไรคะ To อะไร To Default บ่ Password น่าจะเป็น to Default หน้าจะเป็น To หรือ Tool อะไร มีหลายตัว เลือกเป็น... เมื่อคลิก password เมื่อคลิก Password แล้วพิมพ์ Password ลงไป ปุ๊บ เมื่อพิมพ์ Password ลงนะคะ Set text input เป็นซ่อนแล้วก็ To... ไม่ให้เอาออก จัด Text แล้วก็ทำให้ Text Input เป็นซ่อน ลองดูสิ ถูกไหม แก้เงื่อนไขมันก่อน จาก Text ใช่ไหม ให้มันซ่อน ได้ไหม ขอลองอันล่างเลย ไม่ซ่อนน่ะ นี่เราใส่สลับ เอาใหม่ Edit ใหม่ ต้องไล่ให้ถูกนะนี่ เมื่อพิมพ์เข้าไปแล้ว ตามหลักนะ เมื่อพิมพ์ ปุ๊บถ้าใช้อันไหนนะ จาก Default เปลี่ยนเป็น... ที่พิมพ์จากคีย์บอร์ด เปลี่ยนเป็นอะไรได้ อยากให้มันซ่อนน่ะ เราอยากให้มันซ่อน มันจะซ่อนให้ไหมน่ะ Text input เมื่อกำหนดค่า เมื่อกำหนดค่า Text Input เมื่อเราคลิกเข้าไปเสร็จ เซตเมื่อเราพิมพ์นะ Keyboard Type keybrod ให้มัน...ให้ Text Password มันซ่อน มันจะซ่อนให้เราไหม ยังติดอยู่นะคะ ฃยังติดอยู่ในบ่วง Text Password ไม่ซ่อน ขาดค่าอะไรไปอีกค่าหนึ่ง ต้องกำหนดตัวแปรไหมล่ะนี่ น่าจะใช่ กำหนดตัวแปรให้เก็บค่าของ Text Password text username Text Password ไหน Block ที่ 2 Block ที่ 1 ไม่มีปัญหาแล้ว ไอ้บล็อกที่ 2 นี่สิ ทำอย่างไรจะซ่อนให้เรา ไปที่ Text ไปที่ Text ทำให้เป็นตัวใหญ่ ทำให้ text ไปที่ list ไปที่ Color เป็นจริง เมื่อคลิกแล้วจริงปุ๊บ เป็นจริงปุ๊บสิ่งที่ต้องทำต่อ ขาดไปไหนนะ Sign in ขึ้นมาแล้ว เจอแล้ว เอ๊ะ แต่มันมาอยู่ใน... เราจะเอามันไปใส่ใน ไหนได้ Sign in มันจะต้อง เขาบอกว่าให้มันอยู่ตรง... มันจะไปอยู่ที่ Block หรือ เดี๋ยวนะ มันเป็นอะไรล่ะ App Feature Sign in Sign in Sing in Hello at 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 มันจะเพิ่ม 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 ธรรมดา มันไม่อัปเดตให้น่ะ ตอนนี้มันเป็น Thunkable เนื่องจากสัปดาห์หน้าทั้งอาทิตย์ไม่อยู่นะคะ งดคลาสอยู่แล้ว เด็ก ๆ ทำการบ้านที่สั่งไว้ให้น่ะเสร็จหรือยัง ทำให้เรียบร้อยก่อนนะคะ ระกว่างรอตัวอื่นนะคะ ถ้าแก้ได้แล้ว เดี๋ยวเรามาทำต่อได้ เพราะเราทำตัวแอปทิ้งไว้แล้ว เราแค่มาแก้... แก้อัปเวอร์ชันมันแค่นั้นเอง เดี๋อัปเวอร์ชันมันจะนำมาไปใช้ตัวนี้ของเราได้นะคะ อย่างนั้นเราจะมาแก้กันในสัปดาห์ถัดไปนะคะ ไม่ใช่สัปดาห์หน้านะคะ บอกงด Class ล่ามทุกคนไว้แล้วนะคะ สำหรับสัปดาห์นี้ เดี๋ยวจะขอพอแค่นี้นะคะ มีใครสงสัยงานในครั้งก่อน ๆ หรือเปล่า ถามได้นะคะ เมื่อกี้ว่าพ่อจะมารับไม่ใช่หรือใบเตย อ๋อ...แม่ไม่ไป ก็เลยไม่ไป อย่างนั้น เดี๋ยวปล่อยเลยนะคะ (นักศึกษาชาย) นักศึกษาทั้งหมดทำความเคารพ Thunkable X ทำไมไม่อัปให้เรา