---
title: ฝึกพิมพ์ 4960 พัฒนาโปรแกรมประยุกต์สำหรับอุปกรณ์เคลื่อนที่  27 ก.ค. 2565 ปลา ภูมิ
subtitle: 
date: วันจันทร์ที่ 22 สิงหาคม 2565  เวลา 13.00 น.
---

								(ข้อความสดจากระบบถอดความเสียงพูดทางไกล)
ได้ยินนะคะใครที่เข้ามาแล้วเปิด Googlr วันนี้จะพาทำหน้า Login ทำอย่างไร Login นี่ เราจะทำอย่างไรพิมพ์ Thunkable Thunkable ของเรา ตัวเอง อะไรตัวเองน่ะ แล้วเราก็ Login gที่เราสร้างไว้ในครั้งก่อน เข้าผิดอันสะบ่ช่างเถอะ งง ๆ นะ GoogleSing out เข้าไม่ถูกอันน่ะมีหลายตัวดันไม่ได้ โอเค เข้าถูกอันแล้วจำได้หรือเปล่าตัวเดิม ทีนี้ตัวนี้ Project ให้เราคลิกที่ จะตั้งชื่อแอปนี้ว่าอะไรสมมติ Category นะคะ ให้เลือกเป็น login ที่เขาสร้างไว้เป็นตัวอย่างว่าที่เราจะทำ มันก็จะมีส่วนของ Username ใช่ไหใลูกPassword แล้วก็ปุ่ม เราจะวางอย่างไร ใหัมันนี่ เห็นไหมระดับช่างไฟแล้วก็อะไรนี่ เครื่องมือที่ ชื่อว่า...Colume พิมพ์ค่ะ ขี้เกียจ SearchC-oC-o ทำไมช้าจัง lC-o-l-u-mไม่มี Colum ดูตัวอย่าเขานะ ดูตัวอย่าง สมมติเราจะใส่รูปแบบนี้นะคะ อย่างนี้เราก็ไปที่อะไรคะ ใช่ไหม เลือก image แล้วก็วางตำแหน่งนึกออกนะจัดตำแหน่ง แล้วก็ไปหารูปอะไร รูปรูปเหมือนคนใช่ไหม จะมีให้ไหมน่ะรูปคน logo รูป logo แบบนี้อะไรนะ นึกออกนะ เขาเรียกว่าอะไร Icon Icon Login เราหา icon นี้กันเราจะเอาตัวไหนใช้เลือก ตัวนี้ดีกว่าหาเอาเองนะคะ อยากได้ตัวไหน ฟรี ๆ ๆ Standard ฟรี ๆ ๆ นะเราเลือก ฟรี อย่าลืมหาคำว่าฟรีด้วยนะเด็ก ๆ เดี๋ยวไม่ได้นะ Ferrdownload ไม่ได้ตัวนี้ก็ต้องได้ตัวนี้ PNG ก็พอได้แล้วนะคะ แม่ได้แล้วนะ เด็ก ๆ ที่ Thunkable เรา แล้วก็ตรงชื่อ ได้แล้วครับ ได้แล้ว กระผมได้แล้วครับเด็ก ๆ ได้หรือยังครับ สิ่งที่เราจะต้องมีใน login ก็คือมีอะไรคะ  ใช้คำว่าอะไรดี Username  login แล้วกันนะนะคะ เมื่อเราได้รูปแล้ว นี่ ในตัวอย่างนี่ เห็นไหม memberLogin เราก็ต้องใช้ Label ใช่ไหม แล้วตรง Textเราก็แก้เป็นอะไร User n สัญญาณล่ามโอเคได้ยินอยู่ ข้อความ คำว่า login ลงไปเปลี่ยนสีได้ เดี๋ยวเราจะขอฟอนต์เนื่องจาก เข้ม ตัวหนังสือก็ต้องสีอ่อน นะคะ หลักาUser Login นะ Text Align นะคะ คือจัดกึ่งกลาง เล็กไป เพิ่ม เพิ่มขนาดได้เอาเท่าไหร่ 30 ทำอะไรต่อ บอกแล้วนะคะทำส่วนไหนปุ๊บอย่าลืม ใส่ชื่อจะได้รู้ว่าตรงนี้ มันคืออะไรนะทุกครั้งนะคะ อย่างลืมใส่ชื่อ รู้ image image ก็Image Iconiconlogin 1, 2, Text Field เพราะมันจะต้องเป็นให้กรอกข้อความได้ เราจะใส่ส่วนที่เรียกว่า Text Field นเห็นไหมคะ เห็นหรือยัง อยู่นี้เขาใช้ Text input ของ อันที่ 2 ต่อกัน เรียงต่อกัน Text Feil เราใช้ 2 อันขนาดด้วยนะคะเช็กอย่างไรให้มันเท่า ๆ กัน เห็นหรือเปล่า ทีนี้ Text อยากได้สีอะไร text inputอันแรกText Input Text... Text รืนี่คือ Username นะ นะคะอันที่ 2 เป็น Password เวลา Codeding เราจะได้รู้นแก้ถูกอันหรือเปล่า Text input อันที่ บอกแล้วว่าต้องใส่ชื่อให้มันทุกครั้งเราได้ 2 ส่วนแล้วนะ นี่ มันมีอะไรอยู่ด้วยเห็นหรือเปล่ามันใส่อะไรเข้าไป ในตัวอย่างในตัวอย่าง กดผิด ขอในตัวอย่างเห็นไหมคะ มันมี ไปที่ ต่อหลังเหมือนเดิมเราก็เอารูปน่ะ ใส่เข้าไปใน มี image เล็ก ๆ นี่ 2 อันโอเคไหมคะ หารูปใส่นะ เด็ก ๆ อย่าลืม เมื่อกี้เปิดไว้แล้วกุญแจกุยแจอยู่ไหนนะ เจอแต่กุญแจเจอแต่ลูกกุญแจไม่เจอแม่ หา Log ใช้คำว่า เอาตัวนี้แล้วกันดอเคนะคะ ได้รูปแล้ว ได้องค์ประกอบแล้วใส่ไปเรื่อย ๆ รูปแรกImage 1 ย่อขยายเอานะคะเราก็ไปที่ตำแหน่งของวัตถุ โอเคนะคะเขาได้แล้วนะ รูปที่ 2 ก็เหมือนกันนะคะ เอา Lock ใส่ ขนาดมันไม่ได้เราก็ยืดได้หดได้นะ เด็ก ๆ ไปแต่งเพิ่มเติมทีหลังบอกข้าว ๆ ว่าองค์ประกอบมันมีอะไร เดี๋ยวนะ เปิดให้ดูชัด ๆpassword  แล้วก็ login ปุ้มกด และก็ส่วนที่มีติ๊ก เด็ก ๆ เห็น chexแถบเครื่องมือ Check มีอะไรต่อจาก checkbox ก็Label ใช่ไหมคะ บอกว่า Re ตรงนี้นะคะ พิมพ์คำว่า Rememember แล้วก็ meme m-eเห็นไหมคะ แล้วก็มี forFor got passwoเขาเรียกว่าอะไรนะตอนเชื่อมอะนะ  ตัวนี้ label นี้เดี๋ยวพื้นที่ตัวใหญ่ไป 18 ใหญ่ไป ลดลง14 พอโอเค Remember Me for got password นะเด็ก ๆ อีก Label หนึ่งเราจะใช้ for got g-o-t got จำไม่ได้ช่วงนี้ นะคะ for gotแล้วก็ p p-a-s-s For got password แล้วก็สีความแตกต่าง ตำแหน่งควรจะตรง ๆ กันNo No No Color เอาสีอะไร เอาสี... โอเคแล้วนะอันสุดท้ายคืออะไรคะ Login ใช่ไหม คลิก button  แล้วเลือกมวางดlogin เข้าไป Lo ตัวใหญ่เลย นะ Background  เลือกสีค่ะสีปุ่ม ปุ่ม ๆ ๆ อยากได้สีชมพู อยู่ไหนนสีชมพู อักษร เขาจะเอาสีเข้ม ๆ นะครับ Coler Textสีม่วง...โอเค นะคะ ตรง... Border ของวัตถุนะคะ ขึ้นอยู่กับค่า มันจะเชื่อมอย่างไร ใช่ไหม ทำให้ตัว Login นี่มันเชื่อมได้ เดี๋ยวขอ เดินดูก่อนนะคะว่าเด็ก ๆ ทำองค์ประกอบมันครบหรือ อ๋อ Remember me Forgot password ใช้ ยัง มันจะไปทำตอนเราสั่งมัน ดูอันที่ 2 เห็นหรือเปล่า เห็น labelแล้วก็มาวางส่วนที่ 2 เห็นไหม ลาก Text input ไปวาง 2 อันเป็นอันที่ 3 กับ 4 เห็น Userlodinมันตรงส่วนการเชื่อมรชน่ะ มันมีหลายตเขาบอกบางคนเขาก็ใช้ เดี๋ยวดูก่อนนะคะ เดี๋ยวระหว่างรอเพื่อน ทำ เลือกอันที่เป็น Text input ไปวางและก็ อันที่ 4 โอเคไหมคะ ได้องค์ประกอบ มันจะเป็นเหมือนเชื่อม เชื่อมฐานข้อมูลน่ะที่เขาใช้นะ มันจะ Fire F-i-n-e-b-a-s-e ไหนนะนี่ ๆ Firebase พิมพ์ F-i-r-e-b-นะคะ ใครยังหาไม่เจอ ดูนะคะ ชื่อ Firebase กด get start เพราเรายังไม่เคยใช้งานมันเลยนะคะ ตอนนี้เปิดมาที่ Firebase ให้เรากด เราก็กด get start นะเด็ก ๆตอนที่เราใช้ตัวนั้นน่ะ ให้ไปเลืออะไร เลือก Ceate a new ตรงช่องนี้นะ เด็ก ๆ นะ Firebase  อะไรนะ Login นะ ของเขาด้วยนะ ไม่อย่างนั้น เขาไม่ให้ใช้งานนะแล้วก็กด Contune บอกว่า นี่คือ Google Analytic project แล้วเราก็ถาม ไม่ใช่ แล้วเขาก็ถามเรา แล้วก็ต้องติ๊กยอมรับ I Accepนะ แล้วก้คลิก Create prมันก็จะ เหมือน Database แต่ออนไลนนะคะ เราก็ต้องรอจนกว่าไอ้ ทุกคนอยู่หน้า บางทีต้อง login ก่อน มันต้องขึ้นแบบนี้ต่อไปนะคะ ให้มาเลือกที่ เห็นไหมคะ แถบเครื่องมือทางซ้าย build  คลิกลงไปที่ ไอรูป...รูปเหมือนสามเหลี่ยม ครั้งมันจะเข้ามาที่ Alltentiเราใช้เมื่อกี้นี้ ก็คือตัวนี้ใช่ไหมตัวที่เป็น คือเข้าบอกว่า คลิกเปิดเป็น Enbleแล้วก็ Save นึกออกนะ สมมติ มีตัวอื่นเพิ่มนะเช่นใช้เบอร์โทรศัพท์ ก็จะคลิกที่โทรศัพท์ แล้วก็คลิกเป็น เหมือนกันนึกออกนะ เมื่อกี้นี้ login ผ่านอีเมลเรามี Password ด้วย เพราะเรามี 2 ตัวใช่ไหมคะ เรามี 2 ตัวนะเสร็จแล้วก็กด Save ที่เราใช้ในการ login นี่ เราใช้แค่ 2 สิ่งนี้ ใช่ไหมของเราใช้แค่ 2 ตัว password  นะ ใช้แค่ 2 ตัว เพราะฉะนั้น ตรง Firebase เราก็เลย อันนี้ พอ...พอเราย้อนกลับมานะคะ ตรง Build มันจะขึ้นว่า สถานะตรงนี้Em=nเสร็จแล้วให้เรามาตแล้วเลือก ProjectNo No No.8ipy'เดี๋ยวตามไม่ทันนะแล้วให้มาที่ มันบอกว่าเรา ยังไม่มีแอปใน Project oรูปนี่ ไอตัวที่ 3 น่ะค่เห็นไหมคะ มันมี IDS คลิกเลือกmy web app นี่ คืออะไรเราต้องไปหน้าที่เราทำตัวนี้ ของเราก็คือ EBOOK ไหมคะมันจะใช้คำว่าอะไร เดี๋ยว ลองพิมพ์ชื่อ...ชื่อ App เราลงไปนะคะ E-bool E...ตัวใหญ่ เหมือนที่ตัวเองพิมพ์นี่ล่ะ E-bookเดี๋ยวว่าไม่รู้จักชื่อนี้ ดูชื่อของเอง ตรงหัวนี่ ใส่ชื่อของใครของมันนะ ไม่ใช่มาพิมพ์ E-Booไหนนะ ไม่ใช่สิมันจะมีCode มาเห็นไหมคะ  จะขึ้นแบบนี้ไหม ใครไม่ขึ้นจะเห็นไหมนี่มันใช้ว่า component Sign In ไม่เจอ data viewer Data Data AComponents เอ๊ Authen  Sign In ต้องการหา เดี๋ยวนะ ขอเพิ่มอีก 1 Thunkableขอ Search 9yเราเลือก เวอร์ชันผิดใช่ไหมนี่ Update อย่างไร อาจจะต้อง ใช้...ใช่ฟังก์ชันนั้นไม่ได้ มันไม่เหมือนกันหรือเดี๋ยวของ Test อยากรู้ อยากรู้ มันก็ชึ้น Thunkable เหมือนกันนี่นา Thunkable intergation Login Log outusing app ก็ไม่ใช้ เพราะ Tool นึงที่เราไม่มีในแอปเราน่ะ ใน Thunkable ของเรา มันก็จะวางไม่ได้ใช้ตัวไหน คือตอนนี้ เรากรอกดข้อม฿ลได้อะไรด้อะไรได้แต่มันจะไม่เก็บใน ถ้าจะให้ไปเก็บBack to Edit ตัวแรกเลยก็คือ Text input 1 ไปที่ Text in put 1 Username มันจะต้องเป็นพิมพ์นะ Text Set Text input Keyboard Typeborder มันต้องต้องเป็นพิมพ์ Input username  ปุ๊บ ให้ทำอะไรเลือกออกมาวางเมื่อ ทำ...Text input username  To ข้อความ ขึ้นไหมโอเคถูกเห็นไหมคะ โอเคนะคะเพราะตรงนี้ Username ได้ อยู่ที่ Screen 1 ยังในหน้าเรากลับไปที่ block แล้ว เดี๋ยวลบก่อนนะ บางคนน่าจะไม่ทัน แล้วพิมพ์ มันจะต้องมีการเปลี่ยนแปลง แต่ตอนแรกTest พอพิมพ์ปุ๊บ ขึ้นมานะ ให้นึกถึงตอนเราพิมพ์ช่องนี้นี่โอเคนะคะ สิ่งที่เราจะต้องทำก็คือ เราจะกำหนดค่าให้ Text input ตัวที่ 1 ของเรา ไปที่ block เมื่อกี้ไม่ได้ลบดูมันน่าจะเก็บค่าไว้ Component  ที่ชื่อว่า text input เมื่อ Text input โดนคลิกลงไป สิ่งที่จะต้องเกิดขึ้นต่อใน Text input  username มันจะต้องให้ Set ค่า นะคะ ดูนะคะ ลอง Test ดู  Text input จะต้องทำงาน มันมีอีกตัวหนึ่งใช่ไหม คือตัวที่ 2ของเรา Password ก็เหมือนกัน เมื่อเราคลิกเข้าไปใน Text input pเมื่อคลิกเข้าไป When Text ให้ Set tet นี้ เป็นซ้อน ซ้อนแล้วก็ ทำเหมือนกัน ก็คือรู้แล้วความจริงเราต้องเลือกอันนี้ นี่ รับค่าจากการพิมพ์นะ Keybo set defuilไม่ใช้แล้ว ไม่ใช่ Set Defuset ค่าให้ไอ 2 ตัวนี้แหละเมื่อคลิกเข้าไปปุ๊บ สิ่งที่ เหมือนกันนะคะ 2 อันนี้ทำเหมือนกัน Text in pasมันต้องซ้อนสิ เราลอง Test ดูนะคะ เพราะการพิมพ์ password ตามหลักก็ต้องไม่แสดงข้อคuser แสดงแบบนี้ได้ เหมือนแสดงชื่อแต่ Password มัน ตอนนี้มันยังไม่ซ้อนบ่ password hint น่าจะเป็น To เป็น...เมื่อคลิก ปุ๊บ เมื่อพิมพ์ Password ลง text input เป็นซ่อน ลองดูสิถูกไหมแก้เงื่อนไขมันก่อน ของลองอันล่างเลยไม่ซ่อนเมื่อพิมพ์เข้าไปแล้ว  เหมือนตามหลักนะ เมื่อพิมพ์ปุ๊บจาก Default เปลี่ยนเป็น...มันจะซ่อนให้ไหมนะText Inset เมื่อเราพิมพ์นะ keyType มีการพิมพ์ มันซ่อนมันจะช่อนให้เราไหม ขาดค่าอะไรไปอีกค่าหนึ่ง กำหนดตัวแปรให้เก็บค่า Text Username Text Password 1block ที่ 2 นี่สิ ทำอย่างไร มันจะซ่อนใVariable Variable ทำให้เป็นตัวใหญ่ทำให้ Text  ไปที่ List เมื่อคลิกแล้วจริงปุ๊บเป็นจริงปุ๊บ เจอแล้ว แต่มันมาอยู่ใน ไหนได้ Sign Inมันจะต้อง มันจะไปอยู่ที่ Box หรือSign E-mail เขาให้กำหนดเป็นแบบนี้หรอ นี่ ใช่ไม่เหมือนกันน่ะ เอาอย่างไรดี เอาอย่างไรดี เอาอย่างไรดีเหมือนกันนะ นี่นะคะ sign Upอันนี้หรือให้ทำอะไรให้ลงทะเบียน บอกว่าให้ ก๊อปทำไมเราใช้ Thunkable X เอามา แต่ทำไมของเรามันไม่เป็น Xอ๋อ ถ้า Thunkable X ทดสอบแอปมันยังไม่ Reread หาทางมาแก้ตัวนี้ก่อนนะคะ ของเรามัน...มันไม่เป็น X น่ะ มันจะเป็น ก็คือเราจะมา ก็บป

(ปี้) วิธีแก้ว่า เราจะอัปไอ Thunkable เรานี่ให้เป็น  Thunkable X ได้อย่างไร ใน Firebase นะคะ ถ้าแก้ไม่ได้ อาเป็นเชื่อมโดยวิธีอื่น ตอนนี้มันเป็น Thunkable ธรรมดาทีนี้เนื่องจากสัปดาห์หน้า การบ้นที่สั่งไว้ให้เสร็จหรือยัง ทำให้เรียนะคะ ในระหว่างรอตัวอื่นนะคะ แก้... แก้อัปเวอร์ชันมันแค่นั้นเองมันก็น่าจะใช้ได้ เดี๋ยวลองดู ไม่ใช่สัปดาห์หน้านะ สัปดสห์หน้าไม่อยทุกคนไปแล้วนะคะ สำหรับ งานในครั้งก่อน ๆ หรือเปล่า ถามได้นะเมื่อกี้ว่า แม่ไม่ไปก็เลยไม่ไป   อย่างนั้น เดี๋ยวปล่อยแล้วนะคะ จะปล่อยแล้ว Thunkable X ทำไมไม่อัปให้เรา