App inventor มีหน้าที่อะไร

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

• ส่วนประกอบของโปรแกรม MIT AppInventor
• แนะนำส่วนประกอบต่างๆ ของโปรแกรม
• Blocks คำสั่งต่างๆ
• การทดสอบแอพลิเคชันที่สร้างขึ้น
• การ Package ไฟล์เพื่อนำไปใช้งาน

• วิทยาการคำนวณ ม.3

โดย

-

1

897

App Inventor เป็นเครื่องมือที่ใช้สำหรับสร้างแอปพลิเคชันสำหรับสมาร์ทโฟนและแท็บเล็ตที่เป็นระบบปฏิบัติการ Android ซึ่งบริษัท Google ร่วมมือกับ MIT พัฒนาโปรแกรม App inventor ขึ้น ต่อมา Google ถอนตัวออกมาและยกให้ MIT พัฒนาต่อเอง (โดยเน้นกลุ่มผู้ใช้ด้านการศึกษามากกว่า) ในนาม MIT App inventor

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

การสร้างแอปพลิเคชันจะแบ่งการทำงานออกเป็นสองส่วน คือ ส่วนออกแบบ (App Inventor Designer) ที่จะให้เราเลือกคอมโพเนนท์ที่ต้องการสำหรับที่จะให้สร้างแอปพลิเคชัน ส่วนที่สองเป็นส่วนการเขียนโค้ด (App Inventor Blocks Editor) ที่ให้เราเขียนโค้ดด้วยการต่อบล็อกต่างๆ เข้าด้วยกันเป็นคำสั่ง ซึ่งจะเป็นการกำหนดพฤติกรรมหรือเหตุการณ์ที่เกิดขึ้นกับคอมโพเนนท์ การเขียนโปรแกรมจะเสมือนการต่อชิ้นส่วนตัวต่อจิ๊กซอว์เข้าด้วยกัน ในแต่ละขั้นตอนการสร้างจะสามารถทำการทดสอบได้ทุกขณะ และเมื่อสร้างเสร็จสมบูรณ์แล้วจะสามารถนำแพ็คเกจแอปพลิเคชันเพื่อไปใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android เครื่องใดก็ได้ หรือหากไม่มีโทรศัพท์ระบบปฏิบัติการ Android ก็สามารถที่จะทดสอบได้บนโทรศัพท์จำลองที่ทำงานอยู่บนคอมพิวเตอร์ซึ่งจะมีลักษณะการทำงานเหมือนโทรศัพท์จริงทุกประการ สภาพแวดล้อมในการพัฒนาด้วยโปรแกรม App Inventor นั้นสนับสนุนระบบปฏิบัติการที่หลากหลาย ไม่ว่าจะเป็นระบบปฏิบัติการ Mac OSX, GNU / Linux และระบบปฏิบัติการ Windows โดยแอปพลิเคชันที่สร้างขึ้นนั้นสามารถติดตั้งและทำงานได้บนโทรศัพท์ระบบปฏิบัติการ Android หลากหลายรุ่นที่เป็นที่นิยมในปัจจุบัน

การเข้าใช้งาน MIT App Inventor ครั้งแรก

1. เข้าไปที่เว็บไซต์ https://appinventor.mit.edu/

2. คลิกที่ปุ่ม “Create Apps!”

3. ลงชื่อเข้าใช้ด้วยบัญชีของ Google อาทิ [email protected]

4. ในหน้าต่าง Terms of Service คลิกที่ “I accept the Terms of Service!”

5. เพียงเท่านี้ก็พร้อมใช้งานแล้ว

ส่วนประกอบเมนูของ App Inventor

1. Projects

ประกอบด้วยคำสั่งสำคัญคือ

1.1 My Projects คือหน้าที่รวบรวมแอปที่เราได้สร้างไว้ทั้งหมด

1.2 Start new project ทำหน้าที่สร้างแอปใหม่

1.3 Import project (.aia) ทำหน้าที่เรียกเปิดงานที่ได้เคย Export ออกมาเป็นไฟล์ .aia

2. Connect

ประกอบด้วยคำสั่งสำคัญคือ

2.1 AI Companion ใช้สำหรับส่งแอปของเราไปทดลองรันบนสมาร์ทที่มีการติดตั้งแอปพลิเคชัน “MIT App Inventor 2” ไว้ (สามารถใช้ได้ทั้ง Android iOS และ iPadOS)

2.2 Refresh Companion Screen เมื่อมีการเชื่อมต่อกับสมาร์ทโฟนเพื่อทดลองแอปผ่าน MIT App Inventor 2 แล้วมีการแก้ไขข้อมูล สมาร์ทกดเมนูนี้เพื่ออัปเดตการเปลี่ยนแปลงดังกล่าว

2.3 Reset Connection ใช้ในกรณีที่การเชื่อมต่อในข้อ 2.1 มีปัญหา แล้วต้องการเชื่อมต่อใหม่

3. Build

ประกอบด้วยคำสั่งสำคัญคือ

Android App (.apk) ใช้ในการณีที่สร้างแอปพลิเคชันเสร็จแล้ว แล้วต้องการในไปใช้งานในสมาร์ทโฟนหรือแท็บเล็ตแอนดรอยด์ รวมถึงการนำแอปที่ยังสร้างไม่เสร็จ แต่ต้องการทดสอบในโปรแกรมจำลองบนคอมพิวเตอร์

ส่วนประกอบหน้าต่างของ App Inventor

A เรียกว่า “Palette” คือส่วนที่รวบรวมวัตถุต่างๆ ที่สามารถนำมาใช้งานในแอปของเราได้

B เรียกว่า “Viewer” เป็นส่วนที่จะแสดงตัวอย่างให้เราเห็นว่าหน้าตาของแอปเราจะออกมาในรูปแบบใด รวมถึงเพิ่มความสะดวกสบายให้ผู้พัฒนาสามารถมองเห็นวัตถุต่างๆ ที่อยู่ในแอปของเราด้วย

C เรียกว่า “Components” วัตถุต่างๆ ที่ใส่ลงไปในแอปนอกจากจะมองเห็นในหน้า Viewer แล้ว ผู้พัฒนายังมองเห็นในหน้านี้ด้วย และทำให้ง่ายต่อการจัดการ

D เรียนว่า “Media” เป็นส่วนที่รวมไฟล์ทุกไฟล์ที่ใช้ในแอป

E เรียกว่า “Properties” เมื่อเลือกวัตถุต่างๆ ที่ใส่ลงไปในแอปแล้ว จะสามารถตั้งค่าได้ในส่วนนี้

เริ่มต้นสร้างแอปพลิเคชันด้วย App Inventor

1. คลิกที่เมนู “Project” เลือก “My Projects” จะได้หน้าต่างดังภาพ

2. คลิกที่ “Start new project” (กรอบสีแดง)

3. ตั้งชื่อแอปพลิเคชันที่จะสร้างตามต้องการ เมื่อตั้งชื่อเสร็จแล้วคลิกที่ปุ่ม “OK”

4. จะได้หน้าต่างที่พร้อมสำหรับการสร้างแอปปพลิเคชัน

5. ระหว่างที่สร้างแอปพลิเคชัน หากต้องการทดสอบแอปพลิเคชันที่สร้างเป็นสมาร์ทโฟนหรือแท็บเล็ตจริงๆ สามารถทำได้โดยการคลิกที่เมนู “Connect” เลือก “AI Companion”

6. จะได้ QR Code และรหัสจำนวน 6 ตัวมา

7. ใช้สมาร์ทโฟนหรือแท็บเล็ต (Android iOS หรือ iPadOS) ดาวน์โหลดแอปพลิเคชัน MIT App Inventor 2 แล้วทำการสแกน QR Code หรือพิมพ์โค้ดลงไป รอสักครู่แล้วแอปพลิเคชันที่เราสร้างขึ้นจะแสดงผลในสมาร์ทโฟนหรือแท็บเล็ตที่ใช้เชื่อมต่อ

8. ถ้าต้องการบันทึกงานไว้ทำต่อ สามารถทำได้โดยคลิกที่เมนู “Projects” เลือก “Save project” เมื่อบันทึกเสร็จแล้ว สามารถนำงานมาทำต่อได้ที่หน้า My Projects (ตามขั้นตอนที่ 1)

9. ถ้าต้องการส่งงานทั้งหมดไปให้เพื่อนในกลุ่มทำต่อ โดยไม่ได้ใช้บัญชี Google เดียวกัน สามารถทำได้โดยคลิกที่เมนู “Projects” เลือก “Export selected project (.aia) to my computer” รอให้ระบบดาวน์โหลดงานให้เสร็จแล้วส่งต่อให้เพื่อน

10. ถ้าต้องการนำไฟล์งานที่เพื่อนส่งมาให้ที่มีนามสกุล .aia เข้ามาทำต่อ สามารถทำได้โดยคลิกที่เมนู “Projects” เลือก “Import project (.aia) from my computer”

11. ถ้าพัฒนาแอปพลิเคชันเสร็จเรียบร้อยแล้ว สามารถนำไฟล์ apk ไปใช้งานได้โดยคลิกที่เมนู “Build” เลือก “Android App (.apk)” แล้วเลือก “Download .apk now”

ตัวอย่างสร้างแอปพลิเคชันด้วย App Inventor

1. เริ่มต้นสร้างแอปพลิเคชันด้วยหน้า My projects คลิกที่ “Start new project” หลังจากนั้นจะมีหน้าต่าง Create new App Inventor project ขึ้น พิมพ์ชื่อของแอปพลิเคชันในส่วนของ Project name: ตามต้องการ เสร็จแล้วคลิกที่ปุ่ม “OK”

2. เริ่มสร้างแอปพลิเคชันด้วยการแสดงชื่อแอปพลิเคชัน ใช้เครื่องมือกลุ่ม User Interface ที่ชื่อ “Label” ในส่วนของ Properties ตั้งค่า ดังนี้

– BackgroundColor เลือกสีตามต้องการ

– FontSize ปรับขนาดตัวอักษรตามต้องการ

– Width เลือกเป็น Fill parent…

– Text พิมพ์ข้อความว่า “โปรแกรมบวก ลบ คูณ และหาร เลข”

– TextAlignment เลือกเป็น center

3. สร้างส่วนรับข้อมูลตัวเลขด้วยเครื่องมือ “TextBox” ใช้จำนวน 2 กล่อง

4. ตั้งค่า “TextBox” ทั้ง 2 ชิ้นในส่วนของ Properties ดังนี้

– BackgroundColor เลือกสีตามต้องการ

– FontSize ปรับขนาดตัวอักษรตามต้องการ

– Width เลือกเป็น Fill parent…

– TextAlignment เลือกเป็น center

5. สร้างปุ่มเครื่องหมาย บวก ลบ คูณ หาร ด้วยการเริ่มต้นนำ “TableArrangement” ตั้งค่า Columns เป็น 4 ตั้งค่า Width เป็น Fill parent.. และตั้งค่า Rows เป็น 1

6. ใช้เครื่องมือกลุ่ม User Interface ที่ชื่อ “Button” นำมาวางไว้ใน TableArrangement จำนวน 4 ชิ้น ส่วนของ Properties ตั้งค่า ดังนี้

– ปุ่ม Button1 ตั้งค่า Width : 23 percent… Text พิมพ์ + และ TextAlignment เลือกเป็น center

– ปุ่ม Button2 ตั้งค่า Width : 23 percent… Text พิมพ์ – และ TextAlignment เลือกเป็น center

– ปุ่ม Button3 ตั้งค่า Width : 23 percent… Text พิมพ์ x และ TextAlignment เลือกเป็น center

– ปุ่ม Button4 ตั้งค่า Width : 23 percent… Text พิมพ์ / และ TextAlignment เลือกเป็น center

7. สร้างส่วนแสดงผลลัพธ์โดยการใช้ Label นำ Label มาต่อที่เป็นปุ่มเครื่องหมาย บวก ลบ คูณ หาร ทำการตั้งค่าดังนี้

– BackgroundColor เลือกสีตามต้องการ

– FontSize ปรับขนาดตัวอักษรตามต้องการ

– Height ตั้งขนาดเป็น 20 percent…

– Width เลือกเป็น Fill parent…

– Text ลบข้อความออก

– TextAlignment เลือกเป็น center

8. ทำการเขียนโค้ดคำสั่งโดยการสลับมาที่โหมด “Blocks” โดยปุ่มอยู่มุมขวาบนของหน้าจอ

9. สร้างตัวแปรเพื่อเก็บข้อมูล โดยไปที่หมวดหมู่ “Variables” เลือก “initialize global name to” ตั้งชื่อตัวแปรตามต้องการ

10. กำหนดให้ตัวแปรมีค่าเริ่มต้นเป็น 0 เลือกที่หมวดหมู่ “Math” เลือกใช้ 0

11. ทำซ้ำขั้นตอนที่ 9 และ 10 ให้ได้ตัวแปรจำนวน 3 ตัว

12. เริ่มเขียนคำสั่งเครื่องหมายบวกเลข คลิกเลือกที่ Button1 เลือกใช้บล็อกคำสั่ง “when button1 .Click”

13. นำตัวแปร a ที่เก็บค่าที่ 1 มาใส่ใน when button1 .Click

14. กำหนดให้ TextBox1 รับค่าข้อความ โดยคลิกที่ “TextBox1” เลือก “TextBox1 Text”

15. ทำซ้ำขั้นตอนที่ 14 แต่เปลี่ยนเป็นคลิกที่ “TextBox2” เลือก “TextBox2 Text”

16. กำหนดค่าตัวแปร c ให้เก็บค่า a+b

17. ใช้ตัวดำเนินการทางคณิตศาสตร์ + ในหมวดหมู่ “Math”

18. ใช้คำสั่ง “get” ไปใส่ในตัวดำเนินการทางคณิตศาสตร์ แล้วเลือกเป็นตัวแปร a และ b

19. กำหนดให้แสดงคำตอบใน “Label2”

20. ใช้คำสั่ง get นำตัวแปร c มาแสดงผลใน Label2

21. ทำซ้ำโดยการคลิกขวาที่ชุดคำสั่งการบวกเลข เลือก “Duplicate”

22. เปลี่ยนในส่วนของ when Button1 เป็น Button2 และเปลี่ยนตัวดำเนินการทางคณิตศาสตร์จากบวก เป็น ลบ

23. ทำซ้ำขั้นตอนที่ 21 และ 22 จนครบทั้งการบวก ลบ คูณ และหาร

24. ทดสอบแอปพลิเคชันโดยการใช้สมาร์ทโฟรหรือแท็บเล็ต ดาวน์โหลดแอป app inventor2 แล้วเชื่อมต่อด้วยรหัส หรือ QR Code

อ้างอิง

ทวีป นวคุณานนท์, “ส่วนประกอบของโปรแกรม App Inventor”, https://programmingappinventor.wordpress.com สืบค้นวันที่ 12 ธันวาคม 2564

youngcyber, “App Inventor สำหรับมือใหม่”, http://ai2startup.blogspot.com/ สืบค้นวันที่ 12 ธันวาคม 2564

App Inventor เหมาะสำหรับทำอะไรได้บ้าง

App Inventor ประกอบด้วยอะไรบ้าง

ความเป็นมาของ App Inventor เป็นอย่างไร

การเขียนโปรแกรมใน MIT App Inventor เป็นการเขียนโปรแกรมแบบใด