ใบความรู้ที่ 5 ส่วนประกอบของโปรแกรม mit app inventor
10 likes26,897 views
ส่วนประกอบของโปรแกรม mit app inventor
![ครูณัฐพล บัวอุไร [www.nattapon.com] 1
การสร้างแอพลิเคชันด้วย MIT AppInventor
ใบความรู้ที่ 5
เรื่อง ส่วนประกอบของโปรแกรม MIT App Inventor
1. เมื่อเข้าสู่ระบบโดยใช้แอคเคาท์ของ Gmail แล้ว จะปรากฏหน้าต่างดังรูป ซึ่งเป็นหน้าต่างที่แสดง
โปรเจ็คหรือแอพลิเคชันทั้งหมดที่ได้สร้างไว้
หมายเลข 1 : ปุ่ม New Project สาหรับสร้างโปรเจ็คใหม่
หมายเลข 2 : รายชื่อโปรเจ็คทั้งหมดที่เคยสร้างไว้
หมายเลข 3 : ปุ่ม Delete สาหรับลบโปรเจ็คที่ไม่ต้องการ โดยต้องทาเครื่องหมาย ในช่องหน้า
โปรเจ็คที่ต้องการลบก่อน
2. เมื่อคลิกปุ่ม New Project จะปรากฏหน้าต่างสาหรับกาหนดชื่อแอพลิเคชันใหม่ โดยผู้สร้าง
สามารถกาหนดชื่อได้ตามต้องการ เมื่อกาหนดชื่อเสร็จให้กดปุ่ม OK
3. เข้าสู่หน้าต่างสาหรับสร้างแอพลิเคชัน โดยมีองค์ประกอบแต่ละส่วนดังนี้
1
2
3](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-1-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 2
การสร้างแอพลิเคชันด้วย MIT AppInventor
3.1 กลุ่มเมนูบาร์
หมายเลข 1 : Project เมนูจัดการเกี่ยวกับโปรเจ็ค
หมายเลข 2 : Connect ปุ่มเลือกการแสดงผลเพื่อทดสอบโปรแกรม
หมายเลข 3 : Build ปุ่ม Package แอพลิเคชันเพื่อนาไปใช้งานจริง
หมายเลข 4 : Help ปุ่มแสดงหน้าต่างช่วยเหลือ
หมายเลข 5 : My Project รายหน้าต่างรายชื่อโปรเจ็คทั้งหมด
หมายเลข 6 : Guide แนะนาการใช้งาน App Inventor
หมายเลข 7 : Report an Issue รายงานปัญหาข้อสงสัยต่างๆ เกี่ยวกับระบบ
หมายเลข 8 : แสดงเมล์ผู้ใช้งาน สามารถออกจากระบบได้จากเมนูนี้
หมายเลข 9 : แสดงชื่อแอพลิเคชันที่ทางานอยู่
หมายเลข 10 : แสดง screen หรือหน้าจอแอพลิเคชันที่กาลังสร้างหรือออกแบบอยู่
หมายเลข 11 : เพิ่ม screen หรือหน้าจอแอพลิเคชัน
หมายเลข 12 : ลบ screen หรือหน้าจอแอพลิเคชันที่ไม่ต้องการ
หมายเลข 13 : เปิดหน้าต่างสาหรับออกแบบแอพลิเคชัน
หมายเลข 14 : เปิดหน้าต่างสาหรับใส่คาสั่งควบคุมแอพลิเคชัน
1
2
3
4
5
6
7
8
9 1
0
0 1
1
0
1
2
0 1
3
0
1
4
0](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-2-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 3
การสร้างแอพลิเคชันด้วย MIT AppInventor
เมนู Palette
Palette คือกลุ่มของเครื่องมือที่จะนามาออกแบบหน้าจอแอพลิเคชัน โดยมีกลุ่มของเครื่องมือหลาย
ประเภท
ใน Palette จะประกอบไปด้วย 9 Components ดังนี้
1. Basic เป็นกลุ่มของเครื่องมือพื้นฐาน เช่น ปุ่ม รูปภาพ ข้อความ เป็นต้น
2. Media เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการสื่อมัลติมีเดีย
กลุ่มเครื่องมือ Palette สำหรับออกแบบ
หน้ำจอแอพลิเคชัน](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-3-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 4
การสร้างแอพลิเคชันด้วย MIT AppInventor
3. Animation เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการแอนิเมชัน ภาพเครื่องไหว
4. Social เป็นกลุ่มของเครื่องมือเกี่ยวกับการเชื่อมต่อระบบเครือข่าย
5. Sensors เป็นกลุ่มของเครื่องมือเกี่ยวกับการตรวจสอบเซ็นเซอร์ เช่น ตาแหน่ง GPS
6. Screen Arrangement เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดตาแหน่งหน้าจอ
7. เป็นกลุ่มของเครื่องมือเกี่ยวกับคาสั่ง LEGO](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-4-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 5
การสร้างแอพลิเคชันด้วย MIT AppInventor
8. Other stuff เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการแอพลิเคชันทั่วไป เช่น การเริ่มโปรแกรม
การกาหนดบลูทูธ การแสดงคาเตือน
9. Not ready for prime time เป็นกลุ่มของเครื่องมือแสดงฟังก์ชันเพิ่มเติมให้กับแอพลิเคชัน
Property และ Component
Property เป็นส่วนประกอบของโปรแกรมที่แสดงคุณสมบัติของวัตถุในหน้าจอแอพลิเคชัน เช่น
Button จะมีคุณลักษณะให้ปรับแต่ง ได้แก่ ชื่อ สี ขนาด เป็นต้น ผู้พัฒนาแอพลิเคชันสามารถปรับแต่ง
คุณลักษณะของ Button ได้จาก Property นั้นๆ
Component เป็นส่วนประกอบของโปรแกรมที่แสดงให้เห็นว่าแอพลิเคชันที่พัฒนาขึ้นตอนนี้ มี
องค์ประกอบหรือเครื่องมือใดบ้าง เช่น มีปุ่ม มีรูปภาพ จานวนเท่าใด เป็นต้น](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-5-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 6
การสร้างแอพลิเคชันด้วย MIT AppInventor
Media คือส่วนที่แสดงให้เห็นว่าแอพลิเคชันที่พัฒนาขึ้นตอนนี้มีการใช้สื่ออะไรบ้าง เช่น มีไฟล์ภาพ
หรือไฟล์เสียงอะไรอยู่ในแอพลิเคชัน
การใช้ Blocks Editor
1. คลิกปุ่ม Block
2. ปรากฏหน้าต่าง Blocks Editor ดังรูป แต่ละส่วนมีรายละเอียดดังนี้
หมายเลข 1 : กลุ่มสัญลักษณ์ Blocks ต่างๆ ที่จะนามาใช้ในการควบคุมแอพลิเคชัน
หมายเลข 2 : เมนู โดยแสดงชื่อแอพลิเคชัน, screen และปุ่ม Design เพื่อกลับไปหน้าจอ
ออกแบบ
หมายเลข 3 : พื้นที่ทางาน ใช้สาหรับวางคาสั่งควบคุม
1
2
3](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-6-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 7
การสร้างแอพลิเคชันด้วย MIT AppInventor
กลุ่มสัญลักษณ์ Blocks
ในหน้าต่าง Blocks จะเป็นการนาสัญลักษณ์ Block ต่างๆ มาต่อเป็นโครงสร้างตามลาดับขั้นตอนการ
ทางานของแอพลิเคชัน มีแต่กลุ่มของ Block ดังนี้
1. Control
2. Logic
3. Math
4. Text
5. Lists
6. Colors
7. Variables
8. Procedures
เมื่อคลิกไปที่แต่ละเมนูจะปรากฏ Block ของเมนูนั้นๆ ขึ้นมา ดังรูป เช่น คลิกที่เมนู Button1 จะ
ปรากฏ Block ซึ่งเป็นคาสั่งเกี่ยวกับการควบคุมปุ่ม Button1
การวาง Blocks : การใช้งานคาสั่งทาได้โดย คลิกที่ Block ที่ต้องการและลากมาวางบนพื้นที่วางคาสั่ง
การลบ Blocks : การลบ Block ทาได้โดยคลิกที่ Block ที่ต้องการลบ และลากไปใส่ถังขยะที่มุมล่างขวาของ
หน้าจอ
Block ของแต่ละคำสั่ง](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-7-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 8
การสร้างแอพลิเคชันด้วย MIT AppInventor
การทดสอบแอพลิเคชันผ่าน Emulator
เมื่อใส่คาสั่งควบคุมแอพลิเคชันเรียบร้อยแล้ว สามารถทดสอบแอพลิเคชันผ่านโปรแกรม Emulator
ซึ่งเป็นโปรแกรมจาลองหน้าจอแท็บเล็ต โดยมีวิธีการดังนี้
1. เปิดโปรแกรม aiStarter
2. คลิกเมนู Connect เลือก Emulator
ผลจำกกำรลำก Block มำวำง
เมื่อต้องกำรลบ Block ให้ลำกมำ
ใส่ถึงขยะ](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-8-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 9
การสร้างแอพลิเคชันด้วย MIT AppInventor
3. โปรแกรมจะแสดงข้อความเริ่มต้น Android Emulator โดยให้รอประมาณ 1-2 นาที
4. โปรแกรมจะโหลดหน้าต่าง Emulator ขึ้นมาดังรูป เมื่อโปรแกรมโหลดเสร็จเรียบร้อย สามารถ
ทดสอบโปรแกรมที่สร้างไว้ได้ตามต้องการ](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-9-320.jpg)
![ครูณัฐพล บัวอุไร [www.nattapon.com] 10
การสร้างแอพลิเคชันด้วย MIT AppInventor
การ Package
เมื่อทดสอบแอพลิเคชันและแก้ไขจนสมบูรณ์แล้ว สามารถนาแอพลิเคชันนั้นๆ มาทางานบนแท็บเล็ต
ได้ โดยมีวิธีการดังนี้
1. คลิกปุ่ม Build จะปรากฏเมนูสาหรับแพ็คเกจ ได้แก่
- App (Provied QR code for .apk) คือการสร้าง QR code เพื่อดาวน์โหลดโปรแกรมลง
Smart Phone
- App (save .apk to my computer) คือการบันทึกไฟล์ .apk ลงในเครื่องคอมพิวเตอร์
ก่อน](https://image.slidesharecdn.com/5mitappinventor-140615112536-phpapp02/85/5-mit-app-inventor-10-320.jpg)
ใบความรู้ที่ 5 ส่วนประกอบของโปรแกรม mit app inventor
- 1. ครูณัฐพล บัวอุไร [www.nattapon.com] 1 การสร้างแอพลิเคชันด้วย MIT AppInventor ใบความรู้ที่ 5 เรื่อง ส่วนประกอบของโปรแกรม MIT App Inventor 1. เมื่อเข้าสู่ระบบโดยใช้แอคเคาท์ของ Gmail แล้ว จะปรากฏหน้าต่างดังรูป ซึ่งเป็นหน้าต่างที่แสดง โปรเจ็คหรือแอพลิเคชันทั้งหมดที่ได้สร้างไว้ หมายเลข 1 : ปุ่ม New Project สาหรับสร้างโปรเจ็คใหม่ หมายเลข 2 : รายชื่อโปรเจ็คทั้งหมดที่เคยสร้างไว้ หมายเลข 3 : ปุ่ม Delete สาหรับลบโปรเจ็คที่ไม่ต้องการ โดยต้องทาเครื่องหมาย ในช่องหน้า โปรเจ็คที่ต้องการลบก่อน 2. เมื่อคลิกปุ่ม New Project จะปรากฏหน้าต่างสาหรับกาหนดชื่อแอพลิเคชันใหม่ โดยผู้สร้าง สามารถกาหนดชื่อได้ตามต้องการ เมื่อกาหนดชื่อเสร็จให้กดปุ่ม OK 3. เข้าสู่หน้าต่างสาหรับสร้างแอพลิเคชัน โดยมีองค์ประกอบแต่ละส่วนดังนี้ 1 2 3
- 2. ครูณัฐพล บัวอุไร [www.nattapon.com] 2 การสร้างแอพลิเคชันด้วย MIT AppInventor 3.1 กลุ่มเมนูบาร์ หมายเลข 1 : Project เมนูจัดการเกี่ยวกับโปรเจ็ค หมายเลข 2 : Connect ปุ่มเลือกการแสดงผลเพื่อทดสอบโปรแกรม หมายเลข 3 : Build ปุ่ม Package แอพลิเคชันเพื่อนาไปใช้งานจริง หมายเลข 4 : Help ปุ่มแสดงหน้าต่างช่วยเหลือ หมายเลข 5 : My Project รายหน้าต่างรายชื่อโปรเจ็คทั้งหมด หมายเลข 6 : Guide แนะนาการใช้งาน App Inventor หมายเลข 7 : Report an Issue รายงานปัญหาข้อสงสัยต่างๆ เกี่ยวกับระบบ หมายเลข 8 : แสดงเมล์ผู้ใช้งาน สามารถออกจากระบบได้จากเมนูนี้ หมายเลข 9 : แสดงชื่อแอพลิเคชันที่ทางานอยู่ หมายเลข 10 : แสดง screen หรือหน้าจอแอพลิเคชันที่กาลังสร้างหรือออกแบบอยู่ หมายเลข 11 : เพิ่ม screen หรือหน้าจอแอพลิเคชัน หมายเลข 12 : ลบ screen หรือหน้าจอแอพลิเคชันที่ไม่ต้องการ หมายเลข 13 : เปิดหน้าต่างสาหรับออกแบบแอพลิเคชัน หมายเลข 14 : เปิดหน้าต่างสาหรับใส่คาสั่งควบคุมแอพลิเคชัน 1 2 3 4 5 6 7 8 9 1 0 0 1 1 0 1 2 0 1 3 0 1 4 0
- 3. ครูณัฐพล บัวอุไร [www.nattapon.com] 3 การสร้างแอพลิเคชันด้วย MIT AppInventor เมนู Palette Palette คือกลุ่มของเครื่องมือที่จะนามาออกแบบหน้าจอแอพลิเคชัน โดยมีกลุ่มของเครื่องมือหลาย ประเภท ใน Palette จะประกอบไปด้วย 9 Components ดังนี้ 1. Basic เป็นกลุ่มของเครื่องมือพื้นฐาน เช่น ปุ่ม รูปภาพ ข้อความ เป็นต้น 2. Media เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการสื่อมัลติมีเดีย กลุ่มเครื่องมือ Palette สำหรับออกแบบ หน้ำจอแอพลิเคชัน
- 4. ครูณัฐพล บัวอุไร [www.nattapon.com] 4 การสร้างแอพลิเคชันด้วย MIT AppInventor 3. Animation เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการแอนิเมชัน ภาพเครื่องไหว 4. Social เป็นกลุ่มของเครื่องมือเกี่ยวกับการเชื่อมต่อระบบเครือข่าย 5. Sensors เป็นกลุ่มของเครื่องมือเกี่ยวกับการตรวจสอบเซ็นเซอร์ เช่น ตาแหน่ง GPS 6. Screen Arrangement เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดตาแหน่งหน้าจอ 7. เป็นกลุ่มของเครื่องมือเกี่ยวกับคาสั่ง LEGO
- 5. ครูณัฐพล บัวอุไร [www.nattapon.com] 5 การสร้างแอพลิเคชันด้วย MIT AppInventor 8. Other stuff เป็นกลุ่มของเครื่องมือเกี่ยวกับการจัดการแอพลิเคชันทั่วไป เช่น การเริ่มโปรแกรม การกาหนดบลูทูธ การแสดงคาเตือน 9. Not ready for prime time เป็นกลุ่มของเครื่องมือแสดงฟังก์ชันเพิ่มเติมให้กับแอพลิเคชัน Property และ Component Property เป็นส่วนประกอบของโปรแกรมที่แสดงคุณสมบัติของวัตถุในหน้าจอแอพลิเคชัน เช่น Button จะมีคุณลักษณะให้ปรับแต่ง ได้แก่ ชื่อ สี ขนาด เป็นต้น ผู้พัฒนาแอพลิเคชันสามารถปรับแต่ง คุณลักษณะของ Button ได้จาก Property นั้นๆ Component เป็นส่วนประกอบของโปรแกรมที่แสดงให้เห็นว่าแอพลิเคชันที่พัฒนาขึ้นตอนนี้ มี องค์ประกอบหรือเครื่องมือใดบ้าง เช่น มีปุ่ม มีรูปภาพ จานวนเท่าใด เป็นต้น
- 6. ครูณัฐพล บัวอุไร [www.nattapon.com] 6 การสร้างแอพลิเคชันด้วย MIT AppInventor Media คือส่วนที่แสดงให้เห็นว่าแอพลิเคชันที่พัฒนาขึ้นตอนนี้มีการใช้สื่ออะไรบ้าง เช่น มีไฟล์ภาพ หรือไฟล์เสียงอะไรอยู่ในแอพลิเคชัน การใช้ Blocks Editor 1. คลิกปุ่ม Block 2. ปรากฏหน้าต่าง Blocks Editor ดังรูป แต่ละส่วนมีรายละเอียดดังนี้ หมายเลข 1 : กลุ่มสัญลักษณ์ Blocks ต่างๆ ที่จะนามาใช้ในการควบคุมแอพลิเคชัน หมายเลข 2 : เมนู โดยแสดงชื่อแอพลิเคชัน, screen และปุ่ม Design เพื่อกลับไปหน้าจอ ออกแบบ หมายเลข 3 : พื้นที่ทางาน ใช้สาหรับวางคาสั่งควบคุม 1 2 3
- 7. ครูณัฐพล บัวอุไร [www.nattapon.com] 7 การสร้างแอพลิเคชันด้วย MIT AppInventor กลุ่มสัญลักษณ์ Blocks ในหน้าต่าง Blocks จะเป็นการนาสัญลักษณ์ Block ต่างๆ มาต่อเป็นโครงสร้างตามลาดับขั้นตอนการ ทางานของแอพลิเคชัน มีแต่กลุ่มของ Block ดังนี้ 1. Control 2. Logic 3. Math 4. Text 5. Lists 6. Colors 7. Variables 8. Procedures เมื่อคลิกไปที่แต่ละเมนูจะปรากฏ Block ของเมนูนั้นๆ ขึ้นมา ดังรูป เช่น คลิกที่เมนู Button1 จะ ปรากฏ Block ซึ่งเป็นคาสั่งเกี่ยวกับการควบคุมปุ่ม Button1 การวาง Blocks : การใช้งานคาสั่งทาได้โดย คลิกที่ Block ที่ต้องการและลากมาวางบนพื้นที่วางคาสั่ง การลบ Blocks : การลบ Block ทาได้โดยคลิกที่ Block ที่ต้องการลบ และลากไปใส่ถังขยะที่มุมล่างขวาของ หน้าจอ Block ของแต่ละคำสั่ง
- 8. ครูณัฐพล บัวอุไร [www.nattapon.com] 8 การสร้างแอพลิเคชันด้วย MIT AppInventor การทดสอบแอพลิเคชันผ่าน Emulator เมื่อใส่คาสั่งควบคุมแอพลิเคชันเรียบร้อยแล้ว สามารถทดสอบแอพลิเคชันผ่านโปรแกรม Emulator ซึ่งเป็นโปรแกรมจาลองหน้าจอแท็บเล็ต โดยมีวิธีการดังนี้ 1. เปิดโปรแกรม aiStarter 2. คลิกเมนู Connect เลือก Emulator ผลจำกกำรลำก Block มำวำง เมื่อต้องกำรลบ Block ให้ลำกมำ ใส่ถึงขยะ
- 9. ครูณัฐพล บัวอุไร [www.nattapon.com] 9 การสร้างแอพลิเคชันด้วย MIT AppInventor 3. โปรแกรมจะแสดงข้อความเริ่มต้น Android Emulator โดยให้รอประมาณ 1-2 นาที 4. โปรแกรมจะโหลดหน้าต่าง Emulator ขึ้นมาดังรูป เมื่อโปรแกรมโหลดเสร็จเรียบร้อย สามารถ ทดสอบโปรแกรมที่สร้างไว้ได้ตามต้องการ
- 10. ครูณัฐพล บัวอุไร [www.nattapon.com] 10 การสร้างแอพลิเคชันด้วย MIT AppInventor การ Package เมื่อทดสอบแอพลิเคชันและแก้ไขจนสมบูรณ์แล้ว สามารถนาแอพลิเคชันนั้นๆ มาทางานบนแท็บเล็ต ได้ โดยมีวิธีการดังนี้ 1. คลิกปุ่ม Build จะปรากฏเมนูสาหรับแพ็คเกจ ได้แก่ - App (Provied QR code for .apk) คือการสร้าง QR code เพื่อดาวน์โหลดโปรแกรมลง Smart Phone - App (save .apk to my computer) คือการบันทึกไฟล์ .apk ลงในเครื่องคอมพิวเตอร์ ก่อน