A4 ชุดกิจกรรมการเรียนรู้ การพัฒนาแอปพลิเคชัน 1-2564

1

คำนำ

ชุดกจิ กรรมเรียนร้พู ัฒนาทักษะการขียนแอปพลเิ คช่นั ช้นั มธั ยมศกึ ษาปีที่ 3 เป็นส่วนหนงึ่ ของรายวิชา
เทคโนโลยี (วิทยาการคานวณ) จัดทาข้ึนเพื่อพัฒนาผู้เรียนให้มีคุณภาพตามมาตรฐานการเรียนรู้และตัวช้ีวัด
กลุ่มสาระการเรยี นรู้วิทยาศาสตร์และเทคโนโลยี (ฉบับปรบั ปรงพ.ศ. 2560) ตามหลกั สตู รแกนกลางการศึกษา
ข้ันพ้ืนฐาน พุทธศักราช 2551 ชุดกิจกรรมการเรียนรู้ชุดน้ีจัดทาขึ้น จานวน 4 ชุดได้แก่ ชุดท่ี 1 ความหมาย
และลกั ษณะสาคญั ของแอปพลเิ คชนั 2. ขน้ั ตอนการพฒั นาโปรแกรม 3. เครือ่ งมอื ทใ่ี ชใ้ นการพัฒนาแอปพลิเคชัน
4. การพัฒนาแอปพลิเคชันบนสมาร์ตโฟนด้วย MIT App Inventor เพ่ือใช้ประกอบการจัดการเรียนรู้ กลุ่ม
สาระการเรียนรู้วิทยาศาสตร์ สาระท่ี 4 เทคโนโลยี มาตรฐาน ว.4.2 เข้าใจและใช้แนวคิดเชิงคานวณในการ
แก้ปัญหาที่พบในชีวิตจริงอย่างเป็นข้ันตอนและเป็นระบบ ใช้เทคโนโลยีสารสนเทศและการสื่อสารในการ
เรียนรู้การทางาน และการแกป้ ญั หาได้อย่างมีประสิทธิภาพ รู้เท่าทนั และมีจริยธรรม รหัสตัวช้วี ัด ว.4.2 ม.3/1
พฒั นาแอปพลิเคชันท่ีมกี าร บูรณาการกบั วิชาอ่ืนอย่างสรา้ งสรรค์

เอกสารเลม่ นี้ ชดุ กจิ กรรมการเรยี นรู้ เร่ือง การพฒั นาแอปพลิเคชันเบ้อื งตน้ เพอ่ื พัฒนาความสามารถ
ในการเขยี นแอปพลิเคชนั กล่มุ สาระการเรียนรวู้ ิทยาศาสตร์ ชน้ั มัธยมศึกษาปที ่ี 3 โรงเรยี นสารสาสนว์ เิ ทศ
สุราษฎร์ธานี ชุดที่ 1 ความหมายและลักษณะสาคัญของแอปพลิเคชัน 2. ขั้นตอนการพัฒนาโปรแกรม
3. เครื่องมือที่ใช้ในการพัฒนาแอปพลิเคชัน 4. การพัฒนาแอปพลิเคชันบนสมาร์ตโฟนด้วย MIT App
Inventor จัดทาข้ึนเพื่อใช้เป็นนวัตกรรมจัดการเรียนรู้ให้นักเรียนมีความรู้ความเข้าใจและสามารถเขียนแอป
พลิเคชันเบื้องต้นได้อยา่ งเป็นขนั้ ตอนด้วยโปรแกรม MIT App Inventor

ผู้จัดทาหวังเป็นอย่างยิ่งว่า ชุดกิจกรรมการเรียนรู้ เรื่อง การพัฒนาแอปพลิเคชันเบื้องต้น กลุ่มสาระ
การเรียนรู้วิทยาศาสตร์ ช้ันมัธยมศึกษาปีที่ 3 โรงเรียนสารสาสน์วิเทศสุราษฎร์ธานี ชุดท่ี 1 ความหมายและ
ลักษณะสาคัญของแอปพลิเคชัน 2. ข้ันตอนการพฒั นาโปรแกรม 3. เครื่องมือท่ีใช้ในการพัฒนาแอปพลิเคชัน
4. การพัฒนาแอปพลิเคชันบนสมาร์ตโฟนด้วย MIT App Inventor เล่มนี้ จะมีผลในการพัฒนาผลสัมฤทธ์ิ
ทางการเรียนของนักเรียนให้ดีขึ้น และสร้างความพึงพอใจในการเรียนรู้ เพื่อให้ผู้เรียนมีความรู้ความเข้าใจ มี
ทกั ษะในการเขยี นแอปพลเิ คชนั เบอื้ งต้นได้ อยา่ งถกู ตอ้ งและมีประสิทธิภาพตอ่ ไป

นางสาวลักขณา รอดอานวย
ครู โรงเรียนสารสาสนว์ เิ ทศสุราษฎรธ์ านี

2

สำรบญั

เร่ือง หนำ้
คานา
สารบัญ 3
คาช้ีแจงสาหรับครู 4
คาชแี้ จงสาหรับนักเรยี น 5
แบบทดสอบก่อนเรียน 9
ใบความรู้ 1 ความหมายและลักษณะสาคญั ของแอปพลิเคชนั 11
13
กจิ กรรมท่ี 1 ความหมายและลักษณะสาคัญของแอปพลิเคชัน 16
ใบความรู้ 2 ขนั้ ตอนการพฒั นาโปรแกรม 18
19
กจิ กรรมที่ 2 ขน้ั ตอนการพฒั นาโปรแกรม 21
กิจกรรมท่ี 3 ข้นั ตอนการพัฒนาโปรแกรม (งานกลุม่ ) 22
ใบความรู้ 3 เครื่องมือท่ีใช้ในการพฒั นาแอปพลิเคชนั 23
กจิ กรรมที่ 4 เครือ่ งมือที่ใชใ้ นการพัฒนาแอปพลเิ คชนั
ใบความรู้ 4 การพัฒนาแอปพลเิ คชันบนสามารถโฟนดว้ ย MIT App Inventor 34
กจิ กรรมท่ี 5 แบบฝกึ ปฏิบตั ิการเขยี นแอปพลเิ คชันเครอ่ื งคดิ เลขบนสมาร์ตโฟน
ดว้ ย MIT App Inventor 37
กิจกรรมที่ 6 แบบฝกึ ปฏบิ ตั กิ ารเขียนแอปพลิเคชันตอบคาถามบนสมารต์ โฟน
ดว้ ย MIT App Inventor 42
กิจกรรมที่ 7 แบบฝึกปฏบิ ตั ิการเขยี นแอปพลเิ คชันเสียงสตั ว์บนสมารต์ โฟน
ด้วย MIT App Inventor 53
กจิ กรรมที่ 8 แบบฝกึ ปฏบิ ตั ิการเขียนแอปพลิเคชันคานวณค่า BMI ดชั นีมวลกาย
บนสมารต์ โฟน ดว้ ย MIT App Inventor
ทดสอบหลังเรียน

3

คำช้แี จงสำหรบั ครผู สู้ อน

ชุดกิจกรรมการเรียนรู้ เรือ่ ง การพฒั นาแอปพลิเคชนั เบอ้ื งต้น เพ่อื พัฒนาความสามารถในการเขยี น
แอปพลิเคชัน กลมุ่ สาระการเรยี นรวู้ ทิ ยาศาสตร์ ช้ันมธั ยมศึกษาปีที่ 3 โรงเรียนสารสาสนว์ เิ ทศสุราษฎร์ธานี ชุด
น้ีจดั ทาขนึ้ จานวน 4 เร่อื ง ได้แก่
เรอ่ื งที่ 1 ความหมายและลกั ษณะสาคญั ของแอปพลิเคชัน
เรือ่ งท่ี 2 ข้นั ตอนการพฒั นาโปรแกรม
เรอ่ื งที่ 3 เคร่อื งมือทใี่ ช้ในการพัฒนาแอปพลเิ คชัน
เรือ่ งท่ี 4 การพฒั นาแอปพลเิ คชนั บนสมาร์ตโฟนด้วย MIT App Inventor

เพื่อใช้ประกอบการจัดการเรยี นรู้ กลุ่มสาระการเรียนรู้วิทยาศาสตร์ สาระท่ี 4 เทคโนโลยี มาตรฐาน
ว.4.2 เข้าใจและใช้แนวคิดเชิงคานวณในการแก้ปัญหาที่พบในชีวิตจริงอย่างเป็นข้ันตอนและเป็นระบบ ใช้
เทคโนโลยีสารสนเทศและการสื่อสารในการเรียนรู้การทางาน และการแก้ปญั หาได้อย่างมีประสิทธิภาพ รู้เท่า
ทัน และมีจริยธรรม รหัสตัวชี้วัด ว.4.2 ม.3/1 พัฒนาแอปพลิเคชันท่ีมีการ บูรณาการกับวิชาอ่ืนอย่าง
สร้างสรรค์ ท้ังน้ีนักเรียนจะได้เรียนรู้ในห้องเรียนและนอกห้องเรียนโดยอิสระโดยมีครูอานวยความสะดวก
ชี้แนะแนวทาง ตรวจสอบผลงานอยา่ งต่อเนือ่ ง มแี นวทางการเรยี นรู้ ดงั นี้

ใบความรู้ ความหมายและลกั ษณะสาคญั ของแอปพลิเคชัน
กิจกรรมท่ี 1 ความหมายและลักษณะสาคัญของแอปพลิเคชัน
ใบความรู้ ขน้ั ตอนการพฒั นาโปรแกรม
กจิ กรรมท่ี 2 ขน้ั ตอนการพฒั นาโปรแกรม
กิจกรรมที่ 3 ออกแบบแอปพลเิ คชัน
ใบความรู้ เครือ่ งมอื ที่ใช้ในการพัฒนาแอปพลิเคชัน
กิจกรรมท่ี 4 เคร่ืองมอื ท่ใี ช้ในการพฒั นาแอปพลเิ คชัน
ใบความรู้ การพฒั นาแอปพลิเคชนั บนสามารถโฟนดว้ ย MIT App Inventor
กจิ กรรมที่ 5 แบบฝกึ ปฏิบตั กิ ารเขยี นแอปพลเิ คชันเครื่องคดิ เลขบนสมารต์ โฟน ดว้ ย MIT App
Inventor
กจิ กรรมท่ี 6 แบบฝึกปฏิบตั กิ ารเขยี นแอปพลเิ คชันตอบคาถามบนสมาร์ตโฟน ดว้ ย MIT App
Inventor
กิจกรรมที่ 7 แบบฝึกปฏิบัติการเขยี นแอปพลิเคชันเสียงสัตว์บนสมารต์ โฟน ด้วย MIT App Inventor
กจิ กรรมท่ี 8 แบบฝึกปฏิบตั ิการเขยี นแอปพลเิ คชันคานวณคา่ BMI ดัชนีมวลกายบนสมารต์ โฟน ด้วย
MIT App Inventor

4

คำชีแ้ จงสำหรบั นกั เรียน

1. ศกึ ษาใบความรู้ ความหมายและลักษณะสาคญั ของแอปพลเิ คชนั
2. ศึกษาใบความรู้ ขัน้ ตอนการพัฒนาโปรแกรม
3. ศึกษาใบความรู้ เคร่อื งมอื ทีใ่ ช้ในการพัฒนาแอปพลิเคชัน
4. ศกึ ษาใบความรู้ การพัฒนาแอปพลเิ คชันบนสามารถโฟนด้วย MIT App Inventor
5. ปฏิบตั ติ ามคาชแ้ี จงในการทาแบบฝึก 6-กิจกรรม ดังน้ี

กิจกรรมท่ี 1 ความหมายและลกั ษณะสาคัญของแอปพลิเคชนั
กิจกรรมท่ี 2 ข้นั ตอนการพฒั นาโปรแกรม
กิจกรรมที่ 3 ออกแบบแอปพลิเคชนั
กิจกรรมที่ 4 เครื่องมอื ท่ใี ชใ้ นการพฒั นาแอปพลิเคชัน
กิจกรรมที่ 5 แบบฝกึ ปฏิบัติการเขียนแอปพลเิ คชันเครื่องคิดเลขบนสมาร์ตโฟน ดว้ ย MIT App
Inventor
กิจกรรมท่ี 6 แบบฝึกปฏบิ ตั ิการเขียนแอปพลเิ คชันตอบคาถามบนสมาร์ตโฟน ดว้ ย MIT App
Inventor
กจิ กรรมที่ 7 แบบฝึกปฏบิ ัตกิ ารเขยี นแอปพลิเคชันเสียงสตั ว์บนสมารต์ โฟน ด้วย MIT App Inventor
กิจกรรมท่ี 8 แบบฝกึ ปฏบิ ตั ิการเขียนแอปพลเิ คชันคานวณค่า BMI ดัชนีมวลกายบนสมารต์ โฟน
ด้วย MIT App Inventor
6. ประเมนิ ผลการทาแบบฝกึ กิจกรรมทกุ กิจกรรมโดยใชเ้ กณฑ์ทีก่ าหนดของ แต่ละกจิ กรรม ดงั นี้
6.1 ประเมนิ ตนเอง
6.2 นาไปใหผ้ ปู้ กครองประเมนิ
6.3 สง่ ครปู ระเมิน
7. ปฏิบัตกิ จิ กรรมแบบฝึกตามเวลาที่กาหนดทั้งในเวลา การบ้านและนอกเวลาใช้เวลาทั้งสนิ้ 3-ช่ัวโมง ไมร่ วม
ทดสอบ

5

แบบทดสอบก่อนเรียน

6

แบบทดสอบก่อนเรยี น

คำชีแ้ จง : ชอื่ .............................................นามสกุล............................................ชน้ั ...............เลขท่ี..............
1. ขอ้ สอบชุดนี้มีจานวน 20 ข้อ ๆ ละ 1 คแนน ใหน้ ักเรยี นทาทกุ ขอ้ คะแนนเต็ม 20 คะแนน
2. ใหน้ ักเรียนเลอื กกากบาท (X) คาตอบที่ถกู ทส่ี ุดเพยี งขอ้ เดียว

1. ขอ้ ใดกล่าวถึง MIT App Inventor ได้ถกู ต้อง 3. การเตรียมความพร้อมในการเขียนโปรแกรมมี
ก. เป็นเคร่ืองมือที่ใช้สร้างแอปพลิเคชันในรูป ความสาคัญอยา่ งไร

ของบล็อกคาสง่ั ก. เพ่ือให้มีทักษะในการเขียนโปรแกรมเพ่ือ
ข. เป็นเครื่องมือที่ใช้สร้างแอปพลิเคชันในรูป แก้ปญั หาตามที่ได้ออกแบบไว้

ของการเขียนโปรแกรมภาษาระดับสงู ข. เพื่อไม่ให้โปรแกรมทางานผิดพลาดหรือเกดิ
ค. เป็นเคร่ืองมือท่ีใช้ทดสอบแอปพลิเคชันท่ี ปัญหาภายหลงั จากนาไปใชง้ านจริง

สร้างข้นึ ค. เพื่อให้ได้โปรแกรมท่ีทางานได้สมบูรณ์ทุก
ง. เปน็ เครอ่ื งมือที่ใชอ้ อกแบบผังงาน ฟงั ก์ชันและมปี ระสิทธิภาพดที สี่ ดุ

2. ข้อใดเรียงข้ันตอนของวัฏจักรการพัฒนา ง. เพ่ือใหร้ ้วู ่าการเขียนโปรแกรมภาษาใดเหมาะ
ระบบงาน (SDLC) ไดถ้ ูกต้อง กับการแก้ปญั หานั้น ๆ

ก. การใชง้ านจรงิ 4. ก่อนท่ีจะเขียนโปรแกรมแก้ปัญหา ผู้เขียน
ข. การเขยี นโปรแกรม โปรแกรมควรทาสิ่งใดก่อน เพ่ือให้การแก้ปัญหามี
ค. การปรบั ปรงุ และพัฒนาโปรแกรม ประสทิ ธิภาพมากท่ีสดุ
ง. การทดสอบและแก้ไขโปรแกรม
จ. วิเคราะห์ปัญหา ก. ออกแบบผังงานการทางานของโปรแกรม
ฉ. การจัดทาเอกสารและคู่มือ ข. จัดหาอุปกรณ์และเคร่อื งมอื ท่ีจาเปน็
ช. การออกแบบโปรแกรม ค. ค้นหาการแก้ปัญหานั้น ๆ จากอินเทอร์เน็ต
ง. ศึกษาการเขียนโปรแกรมจากสื่อหรือแหล่ง
ก. จ ช ข ง ฉ ก ค เรยี นรใู้ หเ้ ขา้ ใจ
ข. จ ช ข ก ค ง ฉ
ค. ฉ จ ข ช ค ก ง 5. โปรแกรมทใ่ี ชใ้ นการเขียนโปรแกรม คอื ข้อใด
ง. จ ช ข ง ฉ ค ก ก. Thunkable ข. Thunkableyouapp
ค. DragandDrup ง. MTI Inventer

7

6. โทรศัพท์หรือสมาทโฟนในข้อใดท่ีเราสามารถ

ทดสอบแอปพลิเคชนั 11. น.ส.น้าหวาน ใช้โปรแกรม Microsoft Word
ในการพิมพ์จดหมายราชการส่งไปยังสานักงาน
ก. Andriod ข. iPhone ราชการต่างๆ อยากทราบ น.ส. น้าหวานใช้
แอปพลเิ คช่นั ลกั ษณะใดในการทางาน
ค. iPad ง. Apple
ก. แอปพลิเคชั่นบนระบบคอมพิวเตอร์ส่วน
7. ข้อใดคือ Application ที่เราดาวโหลดใส่ บุคคล
โทรศพั ทเ์ พ่ือใช้ในการทดสอบ
ข. แอปพลิเคชั่นสาหรับระบบสมองกลฝังตัว
ก. MIT App Inventor 2 ค. แอปพลิเคชันบนสมารต์ โฟนหรือแท็บเลต็
ข. MIB App Inventor 2 ง. เว็บแอปพลิเคชนั
ค. MIC App Inventor 2
ง. MIL App Inventor 2 12.Line Facebook Instagram เป็นแอปพลิเคช่ัน
ลกั ษณะใด
8. ทาไมเราต้องทาการทดสอบ Appก่อนการใช้งาน
จรงิ ก. แอปพลิเคช่ันบนระบบคอมพิวเตอร์ส่วน
บุคคล
ก. เพ่ือให้เห็นภาพการทางานก่อนการนาไปใช้
จริง ข. แอปพลิเคชั่นสาหรบั ระบบสมองกลฝังตัว
ค. แอปพลิเคชนั บนสมารต์ โฟนหรอื แท็บเล็ต
ข. เพอื่ หาจดุ บกพร่องของแอพพลเิ คชั่น ง. เวบ็ แอปพลิเคชัน
ค. เพอ่ื แก้ไขปรับปรงุ จดุ ที่ยังไม่สมบรู ณ์
ง. ถูกทุกขอ้ 13. จากภาพ เป็นชุดคาส่ังท่ีใช้ในการควบคุมการ
ทางานของแอปพลิเคชัน่ โดยทาหนา้ ท่ใี ด
9. นักเรียนต้องออกแบบปุ่ม + - x / ให้อยู่ใน
ลักษณะแนวนอน นักเรียนตอ้ งใชค้ าสง่ั ใด ก. ทาหนา้ ทเี่ กบ็ ตาแหน่งของลาดบั ชุดข้อมูล
ท่จี ะแสดงผล
ก. HorizontalArrangement
ข. HorizontalScrollArragement ข. ทาหน้าทเ่ี ก็บชุดคาถาม
ค. VerticalArrangement ค. ทาหน้าที่เกบ็ ชอ่ื ของภาพ
ง. VerticalScrollArrangement ง. ทาหน้าที่เก็บคาตอบทถ่ี ูกตอ้ ง

10. คาส่ังต่างๆ ที่ใช้ในการสร้างแอปพลิเคชั่น อยู่ 14. ในการทดสอบแอปพลเิ คชัน่ ท่ีนักเรยี นสรา้ งข้ึน
ในขอ้ ใด
สามารถ มีวิธีการการทดสอบ กีว่ ธิ ี
ก. User Interface
ข. Layout ก. 1 วธิ ี ข. 2 วิธี
ค. Media
ง. Drawing and Animation ค. 3 วธิ ี ง. 4 วธิ ี

8

15. จากภาพ เป็นชุดคาส่ังที่ใช้ในการควบคุมการ 18. ขอ้ ใดไมใ่ ชข่ ้นั ตอนการพฒั นาแอปพลเิ คชนั
ทางานของแอปพลเิ คชน่ั โดยทาหน้าท่ีใด ก. การศกึ ษาความตอ้ งการ
ข. การออกแบบ
ก. ทาหนา้ ทีเ่ ก็บตาแหน่งของลาดับชดุ ข้อมูล ค. การสรา้ งแอปพลิเคชนั
ทีจ่ ะแสดงผล ง. การจาหนา่ ยแอป

ข. ทาหนา้ ท่เี กบ็ ชดุ คาถาม 19. การพัฒนาแอปพลิเคชันด้วยโปรแกรม MIT
ค. ทาหน้าที่เก็บชือ่ ของภาพ App inventor มีลักษณะการเขียนโปรแกรม
ง. ทาหนา้ ทีเ่ กบ็ คาตอบทถ่ี ูกตอ้ ง อยา่ งไร

16. ข้อใดให้ความหมายของ แอปพลิเคชั่นได้ ก. การเขียนดว้ ยภาษาจาวา (JAVA)
ถูกตอ้ งทส่ี ดุ ข. การเขยี นด้วยชดุ คาส่ัง (Blocks)
ค. การเขียนดว้ ยเลขฐาน 2
ก. ชุดคาสั่งหรือโปรแกรมท่ีถูกพฒั นาขึ้นเพ่ือใช้ ง. การเขยี นด้วยภาษาคอมพิวเตอร์ระดบั สูง
ในการควบคมุ การทางานของระบบคอมพิวเตอร์
20. กรณีไม่มีโทรศัพท์ Android เราควรใช้การ
ข. ชุดคาสง่ั ทถ่ี ูกพัฒนาขน้ึ เพื่อทางานบนสมาร์ต เช่อื มต่อแบบใด
โฟนเท่านนั้
ก. เช่อื มต่อด้วยระบบจาลอง iPhone
ค. เป็นการสร้างแอปพลิเคช่ันข้ึนเพื่ออานวย บนคอมพิวเตอร์
ความสะดวกแกผ่ ูใ้ ช้งาน
ข. เชือ่ มต่ออุปกรณ์ด้วยระบบเครอื ข่ายแบบ
ง . เ ป็ น ก า ร ส ร้ า ง ชุ ด ค า ส่ั ง ใ ห้ ส า ม า ร ถ ไรส้ าย
ติดต่อส่ือสารผ่านระบบเครือข่ายได้อย่างสะดวก
มากขน้ึ ค. เช่ือมต่ออุปกรณ์ผ่านสายสัญญาณ USB
ง. เช่อื มตอ่ ดว้ ยระบบจาลอง Android
17. ข้อใดให้ความหมายของ แอปพลิเคช่ันได้ บนคอมพิวเตอร์
ถกู ตอ้ งทีส่ ุด

ก. วิเคราะห์ปญั หา
ข. กาหนดปัญหา
ค. ศึกษาความเปน็ ไปได้
ง. วเิ คราะห์ความ

9

ใบควำมรู้
เร่อื ง ควำมหมำยและลกั ษณะสำคญั ของแอปพลิเคชัน

แอปพลิเคชัน (Application) หมายถงึ ชดุ คาส่งั หรอื โปรแกรมท่ีถกู พัฒนาขึน้ เพื่อใช้ในการควบคุมการ
ทางานของระบบคอมพวิ เตอร์ ท้งั ระบบคอมพวิ เตอรท์ ่ีประมวลผลระดับสงู ระบบคอมพิวเตอรใ์ นอุตสาหกรรม
ต่างๆ คอมพวิ เตอรส์ ่วนบคุ คล สมารต์ โฟน สมาร์ตวอช เพือ่ ใชร้ ะบบคอมพิวเตอรน์ นั้ ทางานตามคาสั่งตามท่ีผู้ใช้
ต้องการโดยแอปพลิเคชันจะมีส่วนที่เรียกว่า ส่วนติดต่อผู้ใช้ (User Interface) เพ่ือทาให้ผู้ใช้งานเกิดความ
สะดวกในการใช้งานแอปพลิเคชันนนั้ ๆ

แอปพลิเคชันท่ีใช้งานระบบคอมพิวเตอร์มีหลายประเภท สามารถจาแนกตามลักษณะการใช้งาน ได้
ดังนี้

1. แอปพลิเคชันบนระบบคอมพิวเตอร์ส่วน
บคุ คล

(Desktop Application)
เป็นแอปพลิเคชันท่ีทางานบนระบบปฏิบัติการ
คอมพิวเตอร์ส่วนบุคคล หรืออาจจะเรียกว่า โปรแกรม
คอมพวิ เตอรก์ ไ็ ด้ เชน่ โปรแกรมแปลงสกลุ เงิน โปรแกรม
ผันเสียงวรรณยุกต์ โปรแกรมจัดการเอกสาร โปรแกรม
นาเสนอ

2. แ อ ป พ ลิ เคชัน สำ หรับระบ บส มองกล ฝังตัว
(Microcontroller Application)

เป็นแอปพลิเคชันท่ีถูกพัฒนาเพ่ือทางานเฉพาะ
อย่างใดอย่างหนึ่งบนอุปกรณ์สมองกลฝังตัว เช่น ระบบ
รดนา้ ต้นไมอ้ ตั โนมตั ิ ระบบตรวจจบั แกส๊ รว่ั ภายในบา้ น
ระบบเตอื นภยั ต่าง ๆ

10

3. แอปพลิเคชันบนสมำร์ตโฟนหรือแท็บเล็ต
(Mobile Application)

เ ป็ น แ อ ป พ ลิ เ ค ชั น ท่ี ท า ง า น บ น ส ม า ร์ ต
โฟนหรือแท็บเล็ตเพ่ืออานวยความสะดวกหรือใช้
งานในดา้ นตา่ ง ๆ ตามท่ีตอ้ งการ

4. เว็บแอปพลเิ คชนั (Web Application)
เป็นแอปพลิเคชันท่ีทางานบนเว็บเบราว์เซอร์ สามารถเข้าถึงได้ง่าย ไม่ต้องแจกจ่ายหรือติดต้ัง

ซอฟตแ์ วร์

ใช้งานในการเรยี นการสอน ใชเ้ ก็บเอกสารตา่ ง ๆ

5. แอปพลเิ คชนั บนอปุ กรณ์พกพำอื่น ๆ
เช่น สมาร์ตวอต์ช เป็นแอปพลิเคชันที่มีรูปแบบการทางานเฉพาะบนอุปกรณ์ขนาดเล็กหรืออุปกรณ์

พกพาอืน่ ๆ เพือ่ อานวยความสะดวกอย่างง่าย

11

กจิ กรรมที่ 1
ควำมหมำยและลกั ษณะสำคัญของแอปพลิเคชนั

1. นกั เรยี นตอบคาถามเกยี่ วกบั แอปพลิเคชนั ตอ่ ไปนี้
1.1 แอปพลิเคชนั คืออะไร
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.2 แอปพลเิ คชันมปี ระโยชน์ต่อการดาเนินชีวติ ของมนษุ ยอ์ ยา่ งไร
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.3 แอปพลิเคชนั ทด่ี ีควรมลี ักษณะอยา่ งไร
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.4 แอปพลเิ คชันในอนาคตจะมีคณุ สมบัติอย่างไร
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

12

2. นักเรียนยกตัวอย่างแอปพลิเคชันท่ีใช้ในชีวิตประจาวันมา 3 แอปพลิเคชัน พร้อมบอกประโยชน์ของแอป
พลเิ คชันนน้ั ลงในตาราง

ช่ือแอปพลิเคชนั ประโยชน์
_____________________ _________________________________________________________
_____________________ _________________________________________________________
_____________________ _________________________________________________________

_____________________ _________________________________________________________
_____________________ _________________________________________________________
_____________________ _________________________________________________________

_____________________ _________________________________________________________
_____________________ _________________________________________________________
_____________________ _________________________________________________________

3. นกั เรียนออกแบบแอปพลิเคชนั ทสี่ ามารถใชแ้ กไ้ ขปัญหาในชีวิตประจาวนั ดังน้ี
3.1 ชื่อแอปพลเิ คชนั
____________________________________________________________________________
3.2 วธิ ีการใช้งาน
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
3.3 ประโยชน์ของแอปพลิเคชัน
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

13

ใบควำมรู้
เร่ือง ขนั้ ตอนกำรพฒั นำโปรแกรม

การพัฒนาแอปพลเิ คชันควรจะต้องมกี ารวางแผนและออกแบบโปรแกรมไว้ล่วงหนา้ เพ่ือใหก้ ารพัฒนา
แอปพลิเคชันนั้นมีความสมบูรณ์และสามารถทางานได้ตามท่ีต้องการ ซึ่งผู้พัฒนาแอปพลิเคชันสามารถใช้
หลักการออกแบบโปรแกรม เรียกว่า วัฏจักรการพัฒนาระบบงาน (System Development Life Cycle :
SDLC) ซง่ึ มีกระบวนการทางานเร่ิมต้นจากการวิเคราะหป์ ัญหาไปจนถงึ การนาโปรแกรมไปใชง้ านและปรับปรุง
พัฒนาระบบใหด้ ีขนึ้ มขี นั้ ตอนของวัฏจักรการพฒั นาระบบ ดงั ต่อไปน้ี

1. การวเิ คราะห์ปัญหา
(Problem Analysis)

7. การปรับปรุงและ 2. การออกแบบโปรแกรม
พัฒนาโปรแกรม (Program Design)
(Program Maintenance)

6. การใช้งานจริง 3. การเขียนโปรแกรม
(Program Implement) (Program Coding)

5. การจดั ทาเอกสารและคู่มือการใชง้ าน 4. การทดสอบและแก้ไขโปรแกรม
(Program Documentation) (Program Testing & Verification)

14

ขน้ั ตอนที่ 1
การวิเคราะห์ปัญหา (Problem Analysis) หรืออาจเรียกว่าขั้นตอนการค้นหาและเลือกสรรโครงการ

เป็นข้ันตอนในการวิเคราะห์สภาพสถานการณ์ปัจจุบันของหน่วยงาน และมองหาวิธีการหรือระบบที่จะนามา
ช่วยในการพัฒนาหรือแก้ไขปัญหาที่เกิดขึ้น เช่น องค์กรมีปัญหาด้านการบันทึกข้อมูลในคลังสินค้าล่าช้าจึงมี
แนวคดิ ท่จี ะพฒั นาระบบบริหารจัดการขอ้ มูลด้วยแอปพลิเคชนั หรือโรงเรียนมีปัญหาด้านการตรวจสอบรายช่ือ
การเข้าเรียน จงึ ต้องการพฒั นาแอปพลเิ คชนตรวจสอบรายชือ่ การเข้าเรียนข้นึ มา

ขัน้ ตอนที่ 2
การออกแบบโปรแกรม (Program Design) หรือขัน้ ตอนการวางแผนในการพฒั นาโปรแกรมหรือแอป

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

ขน้ั ตอนที่ 3
การเขียนโปรแกรม (Program Coding) เป็นขั้นตอนการพัฒนาโปรแกรมหรือแอปพลิเคชัน โดยการ

นาโปรแกรมท่ีไดอ้ อกแบบไว้แลว้ มาเขยี นเป็นรหัสต้นฉบับ ผ้พู ฒั นาควรเลือกเคร่ืองมือใหเ้ หมาะสม และสามารถ
พัฒนาโปรแกรมใหม้ ีคุณสมบัตติ ามท่ีได้กาหนดไว้ สามารถทางานได้ตามรปู แบบและบรบิ ทที่ผู้ใช้ต้องการ เช่น
การพฒั นาโปรแกรมตรวจสอบรายชื่อการเขา้ เรียน ควรอย่ใู นรูปแบบของแอปพลเิ คชนั บนสมารต์ โฟนทีส่ ามารถ
ทางานไดบ้ นระบบปฏิบัติการที่หลากหลายทงั้ iOS และ Android หรืออื่นๆ

ขัน้ ตอนที่ 4
การทดสอบและแก้ไขโปรแกรม (Program Testing & Verification) เม่ือเขียนโปรแกรมหรือแอป

พลเิ คชันใหม้ กี ารทางานตามคุณสมบตั ทิ ่ีกาหนดไวแ้ ว ก่อนที่จะนาแอปพลิเคชันน้ีไปใชง้ านจริงควรมกี ารทดสอบ
การทางานของระบบในทุกมิติเสียก่อน เพื่อหาข้อผิดพลาดหรือการทางานที่อาจจะไม่ถูกต้อง และปรับปรุง
แก้ไขข้อบกพร่องน้ันให้สมบูรณ์ หรือบางครั้งอาจจะไม่ใช่การทางานท่ีผิดพลาดแต่อาจมีการลาดับการทางาน
ของกระบวนการทางานของระบบไม่ถกู ต้อง หรือไมส่ ะดวกต่อผใู้ ช้งาน เชน่ การพฒั นาแอปพลิเคชนั ตรวจสอบ
รายช่ือการเขา้ เรียน ครูควรสามารถเลือกหอ้ งที่ต้องการตรวจสอบรายชือ่ ได้ และรายชือ่ นักเรียนควรเรยี งลาดับ
ตามเลขท่ี

15

ขนั้ ตอนท่ี 5
การจัดทาเอกสารแลคู่มือการใช้งาน (Program Documentation) เมื่อพัฒนาโปรแกรมเสร็จสิ้น

สมบูรณ์แล้ว ผู้พัฒนาควรทาเอกสารประกอบการพัฒนาแอปพลิเคชันเพ่ือบอกคุณสมบัติ องค์ประกอบและ
ข้อจากัดต่างๆ ในการใช้โปรแกรม พร้อมจัดทาคู่มือการใช้งานเพ่ือให้ผู้ใช้งานใหม่ทาความเข้าใจในการใชง้ าน
โปรแกรมไดง้ ่ายและรวดเรว็ ท่ีสุด

ขน้ั ตอนท่ี 6
การใช้งานจรงิ (Program Implement) บริบทของการทดสอบโปรแรมกับการใช้งานจรงิ อาจมีความ

แกต่างกัน การนาระบบไปใช้งานจริงจึงเป็นขั้นตอนท่ีสาคัญท่ีผู้พัฒนาและเจ้าของโครงการต้องติดตาม
ตรวจสอบและให้ความสาคัญในระยะแรกๆ เพราะอาจเกิดข้อผิดพลาดบางประการที่ตรวจสอบไม่พบใน
ขน้ั ตอนของการทดสอบและแกไ้ ขโปรแกรม เมื่อมีการใชง้ านจรงิ สักระยะหนึ่ง โดยไม่เกดิ ปญั หาใดๆ จงึ อาจจะ
สรปุ ไดว้ า่ โปรแกรมน้ันมคี วามสมบรู ณ์และสามารถใชง้ านไดต้ ่อเนื่อง

ข้นั ตอนท่ี 7
การปรับปรงุ และพฒั นาโปรแกรม (Program Maintenance) โปรแกรมทุกโปรแกรมที่ได้พัฒนาขึ้นน้ัน

ไมส่ ามารถใชง้ านได้ตลอดไป เนือ่ งด้วยโครงสรา้ งระบบหรอื ซอฟต์แวรร์ ะบบมีการปรับเปล่ียน ทาใหโ้ ปรแกรมที่
ใชง้ านอยทู่ างานไม่สมบูรณ์หรือมีข้อผิดพลาด ดังน้ัน การปรบั ปรุงและพฒั นาโปรแกรมใหทันสมัยอยู่เสมอจึงมี
ความสาคัญและควรทาอย่างต่อเนื่อง เพราะนอกจากจะเป็นการทาให้ระบบมีความสมบูรณ์และทางานได้เป็น
ปกติแลว้ ยังเป็นการป้องกันภยั ท่อาจเกดิ ขึ้นได้ เชน่ การถกู โจมตจี ากมลั แวร์หรือซอฟตแ์ วรไ์ มถ่ งึ ประสงค์

16

กจิ กรรมท่ี 2
ข้นั ตอนกำรพัฒนำโปรแกรม

1. นักเรยี นตอบคาถามเกีย่ วกบั ข้นั ตอนการพฒั นาโปรแกรมตอ่ ไปน้ี
1.1 วัฏจกั รของการพฒั นาระบบงาน (System Development Life Cycle: SDLC) มกี ข่ี ั้นตอน อะไรบ้าง
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.2 การออกแบบโปรแกรมสามารถทาไดด้ ้วยวธิ ใี ดไดบ้ า้ ง
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.3 เพราะเหตใุ ดจึงต้องทดสอบและแกไ้ ขโปรแกรมหลงั จากเขยี นโปรแกรมเสรจ็
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.4 เพราะเหตใุ ดจงึ ต้องปรับปรุงและพฒั นาโปรแกรม
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

17
2. นักเรยี นออกแบบแอปพลเิ คชันของตอนเอง 1 แอปพลิเคชัน

2.1 ชือ่ แอปพลิเคชัน
_____________________________________________________________________________
_____________________________________________________________________________
2.2 วาดไอคอนแอปพลิเคชนั

2.3 วาดหนา้ ต่างผใู้ ช้งานของแอปพลเิ คชัน พร้อมระบรุ ายละเอียดตา่ งๆ

2.4 คณุ สมบัตขิ องแอปพลเิ คชนั
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

18

กิจกรรมที่ 3
ขน้ั ตอนกำรพฒั นำโปรแกรม (งำนกลมุ่ )

1. นักเรยี นเลือกหวั ข้อทกี่ าหนดให้ 1 ขอ้ จากนัน้ ออกแบบหนา้ ต่างผ้ใู ชง้ านแต่ละหน้า พร้อมกบั อธิบายการ
ทางานและการเชือ่ มโยงหนา้ ตา่ งแตล่ ะหนา้ อย่างชัดเจน

หวั ขอ้ ท่ี 1 แอปพลิเคชันวเิ คราะห์ดชั นมี วลกายและแนะนาการดูแลสขุ ภาพ
หัวขอ้ ท่ี 2 แอปพลเิ คชนั คานวณพืน้ ทรี่ ปู ทรงตา่ งๆ จานวน 4 รปู ทรง (ส่ีเหล่ยี มจัตุรัส

สีเ่ หล่ียมผนื ผ้า วงกลม และสามเหลย่ี ม)
หัวข้อท่ี 3 แอปพลเิ คชนั เกมทายคาศพั ท์เก่ยี วกับผลไมแ้ ละมีการเก็บคะแนน
หัวข้อท่ี 4 แอปพลิเคชันบนั ทกึ งานและการบา้ นท่ีได้รบั แตล่ ะวชิ าในแต่ละวัน
หัวขอ้ ท่ี 5 แอปพลิเคชันสาหรับห้องสมุดที่สามารถยืม คืนหนงั สอื และดาวน์โหลดหนงั สือมาอ่านได้

19

ใบควำมรู้
เร่อื ง เคร่ืองมอื ทีใ่ ชใ้ นกำรพฒั นำแอปพลเิ คชนั

เครอ่ื งมือท่ีใชใ้ นการพฒั นาแอปพลิเคชนั ในรูปแบบของบล็อกคาสั่ง มดี งั นี้
1. MIT App Inventor

เป็นเครื่องมือท่ีใช้ในการสร้างแอปพลิเคชันท่ีทางานบนระบบปฏิบัติการแอนดรอยด์ (Android)
โดยผู้พัฒนาแอปพลิเคชันไม่ต้องเขียนภาษาโปรแกรมใด ทาให้บุคคลท่ัวไปสามารถพัฒนาแอปพลิเคชันด้วย
ตนเองได้ รูปแบบของเคร่ืองมือมีองค์ประกอบที่สาคัญ 2 ส่วน คือส่วนของการออกแบบส่วนติดต่อผู้ใช้งาน
(User Interface: UI) ซึ่งสามารถออกแบบได้โดยการลากส่ิงที่ต้องการแสดงผลมาไว้บนหน้าจอแอปพลิเคชัน
และตกแต่งได้ตามความต้องการ และส่วนของการเขียนชุดคาส่ัง (Blocks) คือ คาส่ังที่ผู้พัฒนาสามารถเขียน
คาส่ังให้แอปพลิเคชันทางาน โดยคาส่ังท่ีใช้ในรูปแบบของบล็อกคาส่ังที่เชื่อมต่อกันได้อย่างเป็นลาดับและมี
ระบบ

20
2. Thunkable

เป็นเครื่องมือในการพัฒนาแอปพลิเคชันท่ีมีรูปแบบเดียวกันกับ MIT App Inventor คือ มี
สว่ นประกอบทส่ี าคัญ 2 สว่ น คอื ส่วนของการออกแบบสว่ นตดิ ต่อผู้ใชง้ าน (User Interface: UI) และส่วนของ
การเขียนชุดคาสัง่ (Blocks) ซง่ึ โดยพ้ืนฐานการทางานทั้ง 2 เครือ่ งมือมีความแตกต่างกันไมม่ ากสามารถพัฒนา
แอปพลิเคชันพน้ื ฐานท่ไี มม่ ีความซบั ซ้อนได้

เคร่ืองมือในการสร้างแอปพลิเคชันท้ัง MIT App Inventor หรือ Thunkable มีหลักการสร้างและ
การเขยี นคาส่งั ท่คี ลา้ ยคลงึ กนั การใช้เครื่องมือในการสร้างแอปพลิเคชันนนั้ ก็ขนึ้ อยู่กับความเหมาะสมหรือความ
สะดวกในการทางาน

21

กจิ กรรมที่ 4
เครื่องมอื ที่ใช้ในกำรพฒั นำแอปพลิเคชนั

1. นักเรยี นตอบคาถามเกี่ยวกับเครอ่ื งมือที่ใชใ้ นการพัฒนาแอปพลิเคชนั
1.1 ข้อดขี อง MIT App Inventor และ Thunkable คืออะไร
_____________________________________________________________________________
_____________________________________________________________________________
______________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
1.3 ส่วนของการเขียนชดุ คาสัง่ (Blocks) คอื อะไร
_____________________________________________________________________________
_____________________________________________________________________________

2. นกั เรียนสบื คน้ ข้อมูลบนอนิ เตอร์เนต็ เกยี่ วกับเครอ่ื งมือที่ใชใ้ นการพัฒนาแอปพลิเคชันว่ามีเคร่ืองมือใดบ้าง
โดยบันทกึ คาตอบเปน็ แผนภาพความคดิ และตกแต่งใหส้ วยงาม

22

ใบควำมรู้
เรอ่ื ง กำรพัฒนำแอปพลเิ คชนั บนสมำร์ตโฟนด้วย MIT App Inventor

MIT App Inventor ถือได้วา่ เปน็ เครือ่ งมือในยุคแรกๆ ที่ชว่ ยให้บุคคลทว่ั ไปทไ่ี ม่มที ักษะด้านการเขียน
โปรแกรมหรอื การพัฒนาแอปพลิเคชนั ดว้ ยภาษาคอมพิวเตอร์สามารถพฒั นาแอปพลิเคชันด้วยตนเองได้ โดยมี
หลักการ คือ ออกแบบส่วนติดต่อผู้ใช้งานด้วยวิธีลากและวาง (Drag and Drop) และการเขียนคาสั่งควบคุม
ด้วยการใช้บล็อกคาสั่ง (Block Programming) ทาให้สามารถพัฒนาแอปพลิเคชันพ้ืนฐานท่ีมีการทางานไม่
ซบั ซ้อนได้งา่ ย สะดวก และรวดเร็ว

23

กิจกรรมท่ี 5
กำรพฒั นำแอปพลิเคชนั บนสมำร์ตโฟนด้วย MIT App Inventor (ครั้งที่ 1)

(แอปพลิเคชนั เครื่องคดิ เลข)

1. นักเรียนฝึกปฏิบัติการสร้างแอปพลิเคชันเคร่ืองคิดเลขบนสมาร์ตโฟนด้วย MIT App Inventor โดยปฏิบัติ
ตามขน้ั ตอนต่อไปนี้

1.1 เข้าเวบ็ ไซต์ https://appinventor.mit.edu/ และเขา้ สู่ระบบดว้ ย Google Account ดังภาพ

24

1.2 คลกิ เมาสเ์ ลือก และตัง้ ช่อื ทีต่ ้องการ เชน่ Calculator ดงั ภาพ

1.3 จะปรากฏหนา้ จอโปรแกรมสาหรบั สร้างแอปพลิเคชันขึ้นมา ดงั ภาพ

1.4 ออกแบบหนา้ จอเครอ่ื งคิดเลข 25
 คลิกเมาส์คาสั่ง แล้วลากมาวางบนหน้าจอสมารต์ โฟน สาหรบั รับคา่ ตัวเลข
จานวนที่ 1

 คลกิ เมาส์คาสั่ง อีกครั้งแล้วลากมาวางบนหน้าจอสมาร์ตโฟน สาหรับรับค่า
ตัวเลขจานวนท่ี 2

26
 คลิกเมาส์คาสั่ง Layout แล้วลากคาสง่ั

มาวางบนหน้าจอสมาร์ตโฟน เพอ่ื จดั วางตวั ดาเนินการ (บวก ลบ คูณ หาร) ใหอ้ ยูใ่ นแนวนอน

 ใส่ปุ่มกดเครอ่ื งหมายบวก (+) โดยคลิกเมาส์ที่คาสั่ง User Interface เลอื ก
แล้วลากมาวาง

27

 เปล่ียนชอื่ ปมุ่ กดเป็นเครอื่ งหมาย +

 สร้างปุ่มกดเครื่องหมายลบ ( – ) คูณ ( × ) หาร ( / ) ให้ครบ โดยใช้วิธีเดียวกันกับการสร้างปุ่ม
เคร่ืองหมายบวก (+)

 คลกิ เมาสค์ าสงั่ 28
ผลลพั ธ์การคานวณ แล้วลากมาวางบนหน้าจอสมาร์ตโฟน สาหรับแสดง

 สรา้ งปุ่มผู้จัดทาโดยคลกิ เมาส์ทค่ี าสงั่ แ ล้ ว ล า ก

มาวางบนหนา้ จอสมาร์ตโฟน จากนั้นเปล่ียนช่อื ปมุ่ เปน็ “ผจู้ ดั ทา” พร้อมตกแตง่ ใหส้ วยงาม

29

1.5 เขยี นคาส่ังควบคุม เพื่อเขยี นคาสงั่ ควบคุม
 คลิกเมาสเ์ ลือก

 จะปรากฏหน้าจอสาหรบั เขียนโปรแกรม จากนั้นคลกิ เมาส์ แล้วลากบลอ็ กคาสั่ง
มาวาง

30

 คลิกเมาสเ์ ลอื ก แลว้ ลากบลอ็ กคาสั่ง
มาวาง

 คลกิ เมาส์เลอื ก แล้วลากบลอ็ กคาสงั่ มาวาง

31

 คลกิ เมาส์เลอื ก แล้วลากบลอ็ กคาสง่ั
มาวาง

 เขยี นคาส่งั ควบคมุ ให้ครบ

32
การทดสอบผลการทางาน สามารถทาได้ 3 วิธี

วิธที ่ี 1 การเชื่อมต่อผ่านระบบเครือข่ายไร้สาย (WiFi) ด้วยแอปพลเิ คชนั MIT AI2 Companion

โดยปฏบิ ตั ิตามขน้ั ตอน ดงั น้ี
1. ดาวน์โหลดและตดิ ตง้ั แอปพลิเคชนั MIT AI2 Companion ในสมารต์ โฟน (เฉพาะระบบปฏบิ ัติการ

Android เท่านน้ั )

2. คลกิ เมาสท์ ี่เมนู Connect แลว้ เลือก AI Companion ท่ีหน้าเว็บไซต์

33

3. เปิดแอปพลิเคชัน MIT AI2 Companion บนสมาร์ตโฟน แล้วใส่ Code หรือสแกน QR Code ที่
ปรากฏบนหน้าเวบ็ ไซต์

วิธที ่ี 2 การใช้ Emulator เพ่ือแสดงสมาร์ตโฟนจาลองบนเคร่ืองคอมพิวเตอร์ วิธีการนี้เหมาะ

สาหรับผทู้ ไ่ี ม่มสี มาร์ตโฟนทีเ่ ปน็ ระบบปฏิบตั กิ าร Android โดยปฏิบัตติ ามขั้นตอน ดังนี้
1. ตดิ ตั้งโปรแกรม aiStarter ซึง่ สามารถดาวน์โหลดได้จากเว็บไซต์

MIT App Inventor
(https://appinventor.mit.edu/explore/ai2/setup-emulator)

2. เปิดโปรแกรม aiStarter
3. หน้าเว็บไซตเ์ ลอื กเมนู Connect แลว้ เลือก Emulator
4. ระบบจะประมวลผลและแสดงหน้าสมาร์ตโฟนจาลอง ดังภาพ

วธิ ที ี่ 3 การเช่อื มต่อผา่ นสาย USB

1. ตดิ ตง้ั โปรแกรม aiStarter และเปดิ โปรแกรมเช่นเดียวกบั วธิ ที ่ี 2
2. ดาวนโ์ หลดและติดตงั้ แอปพลเิ คชัน MIT AI2 Companion
ในสมาร์ตโฟน
3. เชอื่ มต่อสมารต์ โฟนกับคอมพวิ เตอร์ด้วยสาย USB
4. หน้าเวบ็ ไซต์เลือกเมนู Connect แล้วเลอื ก USB

34

กจิ กรรมที่ 6

กำรพัฒนำแอปพลิเคชันบนสมำรต์ โฟนด้วย MIT App Inventor (คร้ังที่ 2)
(แอปพลเิ คชันตอบคำถำม)

1. นักเรยี นสรา้ งแอปพลิเคชันตอบคาถาม โดยให้ผู้ใชง้ านพมิ พ์คาตอบทีถ่ ูกต้อง แอปพลเิ คชันลกั ษณะน้จี ะตอ้ งมี

ชดุ คาสงั่ ทีเ่ ก่ียวกับชดุ ขอ้ มูล (List) และมีการประมวลผลดว้ ยการตรวจสอบคาตอบและเก็บคะแนน ซงึ่ สามารถ

สร้างแอปพลิเคชนั นไี้ ด้โดยใช้ MIT App Inventor ดังนี้

1.1 สรา้ งโพรเจกตใ์ หม่ และตง้ั ช่อื “VocabTest”

1.2 ออกแบบหน้าจอโดยมอี งค์ประกอบ ดงั น้ี

 Image กาหนดความกว้างแบบเต็มหน้าจอ และความสูง 300 pixels โดยเปล่ียนชื่อเป็น
QuizImage1

 Label1 สาหรบั แสดงข้อคาถามโดยเปลย่ี นชอ่ื เปน็ QuizLabel1

 สรา้ ง Layout แบบแนวนอน (Horizontal) เพอ่ื วางองคป์ ระกอบดังน้ี

 TextBox1 สาหรับเป็นช่องให้ผใู้ ชง้ านพิมพ์คาตอบ

 Button1 สาหรับใหผ้ ใู้ ช้งานกดส่งคาตอบ โดยเปลยี่ นชอ่ื เปน็ answerButton1
 Button2 สาหรับให้ผู้ใช้งานเปลี่ยนคาถามไปเปน็ ข้อถัดไป โดยเปล่ยี นชื่อเป็น Next

 Label1 สาหรบั แสดงข้อความ “ถกู ” หรอื “ผิด”

35
1.3 หาภาพตวั อยา่ งจานวน 3 ภาพ และอัปโหลดเข้าสู่คลังสือ่ (Media) เชน่ ภาพมด ภาพแมว และภาพวัว
โดยควรต้งั ชอ่ื ใหส้ ือ่ ความหมาย

1.4 ชุดคาส่ังที่ใชใ้ นการควบคุมการทางานของแอปพลเิ คชัน
 กาหนดค่าเริม่ ต้น โดยการสรา้ งตัวแปรจานวน 4 ตัว ไดแ้ ก่
 index ทาหนา้ ท่ีเก็บตาแหนง่ ของลาดบั ชุดขอ้ มลู ที่จะแสดงผล
 questionList ทาหน้าทเ่ี กบ็ ชดุ คาถาม
 pictureList ทาหน้าทีเ่ กบ็ ช่อื ของภาพ
 AnswerList ทาหนา้ ทเ่ี ก็บคาตอบทีถ่ กู ต้อง

36
 กาหนดค่าเริ่มต้นเม่ือแอปพลิเคชันเร่ิมทางาน โดยเมื่อแอปพลิเคชันทางาน ระบบจะทาการ

กาหนดภาพและคาถามท่ีแสดงผลเป็นภาพและคาถามลาดบั ที่ 1

 คาส่ังควบคุมสาหรับปุ่มส่งคาตอบ มีหน้าที่ตรวจสอบคาตอบท่ีผู้ใช้งานพิมพ์เข้ามาในช่อง
TextBox1 โดยแปลงคาตอบให้อยู่ในรูปของตัวพิมพ์ใหญ่ แล้วตรวจสอบคาตอบที่กาหนดไว้ใน
ลิสต์ของคาตอบว่าตรงกันหรือไม่ ถ้าตรงกันให้แสดงผลคาว่า “ถูกต้องครับ” ถ้าไม่ตรงกันให้
แสดงผลคาว่า “ผดิ ครับ...พยายามอกี นิดนะ”

 คาสั่งควบคุมสาหรับปุ่มเล่ือนไปข้อถัดไปทาหน้าท่ีเล่ือนข้อคาถามไปยังข้อถัดไป โดยการเปลี่ยน
ลาดับการแสดงผลของภาพและข้อคาถาม ซ่ึงมีการตรวจสอบลาดับการกดปุ่มถัดไปว่าเกินกว่า
ลาดบั ทม่ี อี ยูห่ รอื ไม่ (ในที่นม้ี อี ยู่ 3 ลาดบั ) หากเกนิ ใหก้ ลบั ไปแสดงผลลาดับท่ี 1 อกี คร้งั

37

กจิ กรรมท่ี 7
กำรพฒั นำแอปพลิเคชันบนสมำรต์ โฟนดว้ ย MIT App Inventor (คร้งั ท่ี 3)

(แอปพลิเคชนั เสยี งสตั ว์)

1. นักเรียนสร้างแอปพลิเคชันเสียงสัตว์ โดยให้ผู้ใช้งานสามารถคลิกท่ีชื่อสัตว์ แอปพลิเคชันลักษณะนี้มี
วตั ถปุ ระสงค์เพื่อให้ได้เรียนรู้เกี่ยวกับการจัดวาง Layout การใช้รูปภาพกับปุ่มกด และ การเลน่ ไฟล์เสยี ง โดยมี
ขนั้ ตอนในการสรา้ ง ดังน้ี

1.1 สร้างโพรเจกตใ์ หม่ และตงั้ ชือ่ “SoundAnimal”
1.2 เลือกคาสั่ง Layout เลอื กหัวขอ้ HorizontalArrangement
1.3 โดยให้นักเรยี นตั้งคา่ Properties ดงั ภาพ

1.4 ใหน้ กั เรยี นนาภาพถ่ายมาใส่ โดยเลือกท่ีหัวข้อ User Interface เลอื กคาส่งั Image

1.5 ทาการอัพโหลด รูปภาพและไฟลเ์ สยี งทตี่ ้องการ

38

1.6 ทาการตัง้ คา่ ให้กับไฟล์ image โดยคลกิ ท่ีรูป แลว้ ทาการตั้งค่า
1.7 หัวขอ้ Components ใหเ้ ลือกคาส่งั Image1 ดงั รูป

1.8 กาหนดการต้ังค่า Properties หัวข้อ Picture เลือกรปู ภาพท่ีตอ้ งการ จากตวั อย่างเลือกภาพ
kitty.png แลว้ กด OK

จะได้ผลลัพธด์ งั ภาพ

1.9 ตัง้ คา่ รูปภาพเพิ่มเตมิ โดยการกาหนดให้ กว้าง เต็มหน้าจอ ตามภาพ
1.10 ต่อไปเป็นขั้นตอนการทาปุ่ม โดยคลกิ เลือก คาสงั่ Layout แลว้ ลาก HorizontalArrangement
มาใสด่ ้านลา่ งรูปภาพ และทาการกาหนดความกวา้ งให้เปน็ Fill parent ตามภาพ

39

1.11 หลงั จากน้ัน เลือกคาสั่ง User Interface แลว้ เลอื กคาสั่ง Button มาวางตามภาพ

1.12 กาหนดปมุ่ ให้อยกู่ ง่ึ กลาง โดยเลือก แล้วตั้งค่า Center:3 ตามภาพ
1.13 กาหนดความกว้างให้กับปุ่ม โดยการคลปิ ท่ปี ุ่ม และต้งั ค่าตามภาพ
1.14 ให้นักเรยี นเปลี่ยนข้อความท่ีป่มุ ให้เป็นคาว่า Sound โดยการต้งั คา่ ดงั น้ี
1.15 ตั้งค่าเปลย่ี นขนาดตวั อักษรบนปุ่ม ดงั ภาพ
1.16 ต้ังคา่ ตา่ ง ๆ เพ่ิมเตมิ ไดต้ ามภาพ จะไดห้ น้าตางแอปพลิเคชนั ดังภาพ

40

2. ข้ันตอนการใสไ่ ฟล์เสยี ง
2.1 ใหน้ ักเรียนเลอื ก คาส่ัง Media เลอื กทีค่ าสัง่ Sound ตามภาพ

2.2 ลาก Sound มาใส่ จะปรากฏรูปลาโพง ตามภาพ

2.3 ทาการตง้ั คา่ ให้กบั Sound โดยคลิกเลือกทรี่ ูปลาโพง
2.4 ตัง้ ค่าเสียงให้กับคาสัง่ โดยเลอื กที่ Properties ตามภาพ โดยเลอื ก ไฟล์เสียง ตามตวั อยา่ ง คอื
meow.mp3 แล้วกด OK

41

3. ตงั้ ค่าชุดคาส่งั ที่ใช้ในการควบคุมการทางานของแอปพลเิ คชนั

คาส่ังดงั กล่าวคือ เมื่อเราใชเ้ มาสค์ ลิกท่ีป่มุ จะปรากฏเสยี งของแมวขึน้ มา และจะโทรศัพทจ์ ะส่งั ดว้ ย

คาส่งั รับคา่ ผ่านปมุ่ คาสั่งกาหนดให้เสียงดัง
ขึน้ เมอื่ คลกิ ท่ปี ุม่

คาสั่งกาหนดให้สั่นเมือ่ คลกิ ท่ปี ่มุ

42

กิจกรรมที่ 8
กำรพัฒนำแอปพลเิ คชนั บนสมำร์ตโฟนดว้ ย MIT App Inventor (คร้ังท่ี 4)

(โปรแกรมคำนวณคำ่ BMI ดชั นีมวลกำย)

1. สร้างโปรเจคใหม่ โดยตงั้ ช่อื วา่ “BMI”

1.1 ต้งั ค่าในหวั ขอ้ AlignHorizontal เป็น Center : 3 ตามภาพ
1.2 เปลีย่ นช่ือ โปรแกรมในหัวข้อ Title เปน็ BMI
1.3 ตง้ั ค่า Sizing เปน็ Responsive
1.4 เลอื กคาสง่ั Layout ลากหัวข้อ VerticalArrangment มาวางตามภาพ

43

1.5 ตั้งค่าข้อมลู Properties ตามภาพ

1.6 เลอื กคาส่ัง User Interface เลอื กหัวขอ้ Label แลว้ ลากไปวางบนหนา้ จอมอื ถอื
1.7 จากน้นั เลอื กคาส่ัง Layout เลือกหัวขอ้ TableArrangment มาวางดา้ นล่าง Label1
และ เลือกหวั ข้อ HorizontalArrangement มาวางตามลาดับ

44
1.8 คลกิ Text for Label1 และต้งั คา่ Properties เปลี่ยนช่อื Text เปน็ “คานวณคา่ BMI ดชั นมี วล
กาย” และทาการตงั้ คา่ ขอ้ มูล ดงั ภาพ

1.9 ต้งั คา่ Table Arrangement
- Columns : 3
- Width: 80 percent

45

1.10 กาหนดชอ่ งสาหรบั กรอกขอ้ มลู โดยการเพิ่ม Label และ TextBox ตามภาพ

1.11 ต้งั คา่ ความกว้าง Label และ TextBox ดังน้ี (สว่ นสงู )
สว่ นสูง Width : 15 persent
TextBox Width : 40 Persent
เซนตเิ มตร Width : 20 persent

ต้งั คา่ ความกวา้ ง Label และ TextBox ดงั นี้ (นา้ หนัก)
ส่วนสงู Width : 15 persent
TextBox Width : 40 Persent
เซนติเมตร Width : 20 persent

จะไดผ้ ลลพั ธ์ตามรูป

46
1.12 เลอื กคาสง่ั User Interface เพือ่ สร้างปมุ่ โดยเลือก หัวขอ้ Button มาวาง และทาการตั้งคา่ ตามภาพ

1.13 เลือกคาสั่ง Layout หัวขอ้ HorizontalArrangement มาวางลา่ งป่มุ เพอ่ื กรอกข้อมูลหลังจากคานวณ
และทาการตง้ั คา่ ตามภาพ

1.14 เลือกคาสั่ง User Interface แลว้ เลอื กหัวข้อ Label มาวางเรียงลาดบั และตัง้ คา่ ขอ้ ความตามภาพ

47

1.15 เปลี่ยนช่อื Label7 ให้เป็น LabelName และ Label9 ใหเ้ ปน็ LabelBMI

1.16 ขั้นตอนต่อไป เปน็ การป้อนข้อมูลคาอธิบายเกีย่ วกับกาคานวณ โดยการเลอื กคาสงั่ Layout เลือกหัวขอ้
HorizontalArrangement มาวางดา้ นล่าง และต้ังคา่ ความกว้าง และความสงู ตามภาพ

- Width : 80 persent

- Height : 20 Pixels

1.17 เลือกคาสง่ั User Interface เลือกหัวข้อ Label มาใส่ใน HorizontalArrangement

1.18 คลกิ ที่ แล้วทาการต้ังค่า AlignHorizontal ให้เปน็

Center : 3

1.19 คลกิ ท่ี Label แลว้ ทาการตง้ั ค่าต่าง ๆ เช่น TextColor , FontSize เป็นต้น

เปล่ียนชื่อ Label9 เปน็ LabelShowText

48
หลังจากน้นั ให้ลบคาว่า Text for Label9 ในช่อง Text ออกไป เพ่อื ท่ีจะใหข้ ้อความแสดงข้ึนมาหลังจาก
คานวณเสรจ็ ตามภาพ
2. ข้ันตอนการสรา้ งเกณฑ์การคดิ BMI
2.1 เลือกคาสั่ง Layout เลือกหัวข้อ TableArrangement มาวางดา้ นล่าง โดยกาหนดการตั้งค่า

แถวและคอลมั น์
- Columns : 1
- Row : 6
และ กาหนดความกว้าง Width : 80 persent

2.2 หลังจากนั้นให้ นา Label มาใส่ลงในแถวทัง้ 6 แถว ตามภาพ

49

2.3 เปลี่ยนข้อความใน Text ตามภาพ

3. ขนั้ ตอนการกาหนดกลอ่ งข้อความสาหรับกรอกชอื่
3.1 เลือกคาสั่ง User Interface เลือกหัวข้อ Notifier ลากมาวางไวบ้ น Screen จะไดผ้ ลลพั ธด์ งั ภาพ

3.2 ต่อไปเปน็ การเปลยี่ นช่ือของ TextBox และ Button ตา่ งๆ ดังน้ี
- TextBox1 เปล่ยี นเป็น TextBoxHeight
- TextBox2 เปล่ียนเปน็ TextBoxWeight
- Button1 เปลย่ี นเป็น ButtonBMI