คู่มือการพัฒนาแอปพลิเคชั่น กัญจน์สิรี

คมู่ ือการพฒั นาแอปพลเิ คชน่ั เพ่ือใช้ในการจัดการเรียนการสอนตามหลักสูตรการศกึ ษา นอกระบบระดับการศึกษาขน้ั พน้ื ฐาน พทุ ธศกั ราช 2551 ผา่ นระบบออนไลน์ สแกน Qr-code ออกแบบ : นางสาวกญั จน์สิรี ปญั ญาดมี ีทรพั ย์ ศูนยก์ ารศกึ ษานอกระบบและการศกึ ษาตามอธั ยาศยั อาเภอแมส่ ะเรียง สานักงานสง่ เสริมการศกึ ษานอกระบบและการศกึ ษาตามอัธยาศยั จังหวดั แมฮ่ ่องสอน สานกั งานส่งเสรมิ การศกึ ษานอกระบบและการศึกษาตามอธั ยาศยั

ก คานา ตามพระราชบัญญัตกิ ารศึกษาแห่งชาติ พ.ศ. 2542 และที่แก้ไขเพิ่มเติม (ฉบับท่ี 2) พ.ศ. 2545 จะพบว่า การศึกษาในปัจจุบันให้ความสาคัญกับการพัฒนาผู้เรียน โดยยึดผู้เรียนเป็นสาคัญมากขึ้น มุ่งหวังให้ผู้เรียน มพี ัฒนาการแบบองค์รวม กล่าวคือ ให้เป็นคนดี คนเก่ง คนมีความสุข จากสภาพปัจจุบันที่มีการแพร่ระบาดไวรัส โควิด 2019 ทาใหป้ ระเทศไทยมผี ู้ติดเช้ือโควิด 2019 เป็นจานวนมาก ส่งผลให้สถานศึกษาทั่วประเทศไม่สามารถ จัดการเรียนการสอนในสถานศึกษาได้ จึงมีการจัดกิจกรรมการเรียนรู้ในรูปแบบที่หลากหลายรูปแบบได้แก่การ จัดการเรียนรู้ในรูปแบบ on-site ,on-line ,on-hand, on –demand หรือรูปแบบอ่ืนๆตามความเหมาะสมกับ สภาพความ พร้อมของสถานศึกษา ของครูประจากลุ่ม และของผู้เรียน เพ่ือให้ผู้เรียนมีคุณภาพเป็นไปตาม หลกั สูตรสถานศึกษาเต็มตามศักยภาพของผูเ้ รียน ผู้จัดทาจึงได้จัดทาคู่มือการพฒั นาแอปพลเิ คช่นั เพ่ือใชใ้ นการจัดการเรยี นการสอนตามหลักสูตรการศึกษา นอกระบบระดบั การศึกษาขัน้ พ้นื ฐาน พทุ ธศักราช 2551 ผ่านระบบออนไลน์ เพื่อเป็นคู่มือแก่ครูประจากลุ่มและ ผสู้ นใจไดศ้ ึกษาเรยี นรู้ เพ่ือเป็นแนวทางในพัฒนาแอปพลิเคชั่นในการจัดการเรียนรู้ให้กับผู้เรียน ผู้จัดทาหวังเป็น อยา่ งยิ่งเอกสารฉบับนี้ จะเป็นประโยชน์ต่อผู้ท่ีได้ศึกษาไม่มากก็น้อย ถ้าข้อความหรือเน้ือหาในเอกสารฉบับนี้ไม่ ครบถว้ นสมบรู ณ์อยา่ งไร ผูจ้ ัดทากข็ ออภยั ไว้ ณ โอกาสนี้ นางสาวกญั จนส์ ิรี ปัญญาดมี ีทรพั ย์ ศูนยก์ ารศึกษานอกระบบและการศึกษาตามอัธยาศัย อาเภอแมส่ ะเรียง

ข สารบญั เรอื่ ง หนา้ ผงั Application การศึกษาขั้นพนื้ ฐาน Online...................................................................................................... 1 การเชอ่ื มตอ่ โปรแกรม MIT App Inventor กบั สมาร์โพน...................................................................................... 2 การสรา้ ง Splash Screen และการใช้คาสั่งเปลยี่ น Screen .................................................................................. 3 การใช้คาสั่งเปล่ยี น Screen .................................................................................................................................... 8 วิธีการเชอ่ื มโยงเว็บไซตแ์ สดงบน Screen ............................................................................................................. 10 การสรา้ งไฟส์ APK และการตดิ ตงั้ ไฟส์ .................................................................................................................. 11 บรรณานุกรม ........................................................................................................................................................ 14

1 MIT App Inventor no MIT App Inventor MIT AI2 Companion Play Sto e ( no 1. MIT AI2 2. Companion Play Sto e MIT I Compan on Code Connect AI Compan on MIT pp Co e Inventor Code และQR Code Co e คูม่ อื การพฒั นาแอปพลิเคช่นั ( กัญจน์สริ ี ปัญญาดมี ีทรพั ย์ )

2 aiStarter Emulator Conne t Emul MIT App Inventor Conne t (https://appinventor.mit.edu/explore/ ai2/setup-emulator) aiStarter งดังภาพ aiStarter c เชอ่ื มตอ่ สมารต์ โพนกบั คอมพิวเตอร์ MIT AI2 Companion ด้วยสาย USB เชื่อมต่อสมารต์ โพนกบั คอมพวิ เตอรด์ ว้ ยสาย USB หน้าเวบ็ ไซต์เลือกเมนู Connect แลว้ เลอื ก USB คมู่ อื การพฒั นาแอปพลิเคช่นั ( กญั จน์สริ ี ปัญญาดีมีทรพั ย์ )

3 Splash Scree เป็ Splash Screen จะแสดงหนา้ จอขน้ึ ฯ ่ี เปดิ โปรเจ็ค อยใู่ นหนา้ จอ ต้งั ค่า Screen 1 Screen 1 ตง้ั ค่าตาแหนง่ วัตถุ แบบ Center ค่มู อื การพัฒนาแอปพลิเคช่ัน ( กญั จนส์ ิรี ปัญญาดมี ที รพั ย์ )

4 คลิกเลือก User interface เลือก image แล้วลาก ต้ังคา่ ความกวา้ ง มาวางในพื้นที่หนา้ จอ ความสูงของรูปภาพ คลิกเลือกไฟส์ แลว้ เลือกไฟส์รปู ภาพ คลิก Picture ในคอมพวิ เตอร์ คลกิ OK คลิก Upload File คลิกเลอื ก Sensors ใสค่ า่ ตวั เลขใน Timerinterval คลิกเลอื ก Clock แลว้ ลากมาวาง ในพ้นื ท่หี นา้ จอ คา่ ของ Timerlnterval มากข้ึน ทาใหห้ น้าจอแสดงนานขึ้น คลปิ ปุม่ Blocks เพอ่ื เข้าพื้นทก่ี ารทางานในสว่ นหน้าจอการเขยี นโคด้ คลิกปุม่ Blocks คู่มือการพัฒนาแอปพลเิ คชัน่ ( กัญจนส์ ิรี ปัญญาดีมีทรัพย์ )

5 เลอื ก Blocks แลว้ ลาก มาไวใ้ นส่วนจดั การ คลิกเลือก Screen1 คลิกเลือก Screen1 เลือก Blocks แล้วลาก มาประกอบกัน คู่มือการพัฒนาแอปพลิเคชน่ั ( กัญจน์สิรี ปัญญาดมี ที รัพย์ )

6 คลิกขวาที่ Block Set Dulicate เพอ่ื คัดลอก Block จะได้ Block ทีค่ ัดลอก ลาก Block ที่คัดลอกมา ประกอบกบั Block อีกตัว คลิกเปลย่ี นจาก true เป็น false คมู่ ือการพฒั นาแอปพลิเคช่ัน ( กญั จนส์ ริ ี ปัญญาดมี ที รพั ย์ )

7 คลิกขวาที่ block Set คลิก block แลว้ ลาก มาประกอบดังภาพ คลิกเลือก Text พิมพ์ช่อื หน้าจอท่ตี อ้ งการ ให้ขึ้นมาแทนที่โดยอตั โนมัติ คู่มือการพฒั นาแอปพลิเคชัน่ ( กญั จนส์ ิรี ปัญญาดีมีทรพั ย์ )

8 S een S een S een Screen S een S een คลิกห้องเรยี นออนไลน์ คลิกเลือก blocks แล้ว คลิกปุม่ Blocks ลากมาไวใ้ นสว่ นจัดการ คลิกเลอื ก button ห้องเรียนออนไลน์ คมู่ อื การพัฒนาแอปพลเิ คชั่น ( กัญจน์สริ ี ปัญญาดมี ีทรพั ย์ )

9 เลอื ก Blocks แล้วลาก มาไว้ในสว่ นจัดการดังภาพ เลอื ก Blocks แลว้ ลาก มาไว้ในสว่ นจัดการดงั ภาพ พมิ พ์ช่ือ Screen ท่ีต้องการ ควรเชอื่ มต่อสมารท์ กับโปรแกรมไว้ เพอ่ื จะได้เห็นภาพจรงิ ท่ีออกสมาร์ทโฟน คู่มอื การพัฒนาแอปพลเิ คช่ัน ( กญั จนส์ ิรี ปัญญาดีมีทรพั ย์ )

10 ตั้งค่า Screen ใส่ URL ลากมาวางในพน้ื ทจี่ ดั การ ค่มู ือการพัฒนาแอปพลิเคชัน่ ( กัญจน์สิรี ปัญญาดีมที รพั ย์ )

11 P n o Pa a e t P no P ee no oo le Play การสร้าง QR code เพือ่ ดาวน์โหลดลงสมารท์ โพน บันทึกไฟส์ .apk ลงในคอมพวิ เตอร์ รอจนกว่าจะ Preparing application icon เสรจ็ สมบรู ณ์ 100% APK n o oo le Play คู่มือการพฒั นาแอปพลิเคชนั่ ( กญั จนส์ ิรี ปัญญาดมี ที รัพย์ )

12 คมู่ อื การพัฒนาแอปพลเิ คชั่น ( กญั จน์สริ ี ปัญญาดมี ีทรพั ย์ )

13 แอปพลิเคชันได้ตดิ ต้งั บนสมารท์ โพนแลว้ เมอ่ื กดเปดิ ก็สามารถใช้งานแอปพลเิ คชนั ไดท้ นั ที ค่มู อื การพฒั นาแอปพลเิ คชน่ั ( กัญจนส์ ิรี ปัญญาดีมีทรพั ย์ )

14 บรรณานุกรม http://mypacenet.weebly.com/blog/1 ( ttp te oo le om te an n e ep -p l - e an-p e - a - a นายมนี ธนา อม่ิ วงษ.์ (2564). เอกสารประกอบการอบรมเชิงปฏบิ ตั ิการ การพัฒนาแอปพลเิ คชนั เพ่อื ใช้ในการจัดการเรียนการสอนผ่านระบบออนไลน์ สาหรบั ครู กศน. คมู่ ือการพฒั นาแอปพลิเคชน่ั ( กญั จนส์ ริ ี ปัญญาดีมที รัพย์ )