App Inventor คืออะไร?

What is App Inventor?

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

App inventor ใช้หลักการคล้ายๆ กับ Scratch แต่ซับซ้อนกว่า โดยลักษณะการเขียนโปรแกรมแบบ Visual Programming  คือ เขียนโปรแกรมด้วยการต่อบล็อกคำสั่ง เน้นการออกแบบเพื่อแก้ปัญหา (problem solving) ด้วยการสร้างโปรแกรมที่ผู้เรียนสนใจ บนโทรศัพท์มือถือสมาร์ทโฟน

การเขียนโปรแกรมบนสมาร์ทโฟนและแท็บเล็ต Android ด้วย App inventor ในภาพรวมแสดงได้ตามรูปล่างนี้

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

ขั้นตอนการสร้างโปรแกรม (ตามภาพ) เริ่มจากออกแบบหน้าตาโปรแกรมบนมือถือ ด้วยโปรแกรม App Inventor Designer ซึ่งใช้สำหรับสร้างส่วนโปรแกรมต่างๆ (components) เพื่อใช้งานในโปรแกรมมือถือที่จะสร้างขึ้น

จากนั้นเขียนโปรแกรมให้แต่ละส่วนโปรแกรม ด้วยโปรแกรม App Inventor Blocks Editor ซึ่งใช้วิธีการต่อบล็อกคำสั่ง เพื่อให้ส่วนโปรแกรมนั้นๆ ทำหน้าที่ของมัน ตามที่ออกแบบเอาไว้

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

ตัวอย่างการพัฒนา Application

1. ทำการ Login ด้วย Gmail Account จากนั้นเข้าสร้าง new project ก็จะเข้าสู่หน้าต่าง App Inventor เมื่อต้องการสร้างโปรเจคใหม่ให้เลือกคำสั่ง New ผลลัพท์ที่ได้ดังรูป (สามารถดาวน์โหลดโปรแกรม app inventor จาก www.appinventor.mit.edu)

 

**บางคนที่ login เข้าไปแล้วเจอหน้าตาให้กรอกข้อมูล นั่นแสดงว่า Gmail ของคุณยังไม่สามารถเล่นตัว App Inventor ได้ครับ ให้กรอกข้อมูลส่งไปบอกเหตุผลที่ต้องการเล่น เดี๋ยวทาง google จะ activate ให้คุณเองครับ : )***

2. สร้างโปรแกมเล่นเสียง (สามารถจัดหน้าจอโปรแกรม โดยใช้ arrangment เช่น จัดวัตถุในแนวนอนใช้ Horizontal arrangment, จัดวัตถุในแนวตั้ง Vertical arrangment, จัดวัตถุในแบบตาราง Table arrangment) โดยลาก item ต่างๆ ลงมาได้เลยเริ่มจากTopic Basicตามลำดับ Label (ข้อความ) > Button (ปุ่ม) > Label จากนั้นไปที่ Topic Media เลือก Sound ลากมาวาง จะได้ดังรูป

 

 

3. ทำการอัพโหลด media ที่เราต้องการให้เล่นมาใส่ ในที่นี้ผมโหลด dishhh.wav กับ varnDich.jpg มาลงดังรูป

 

 

6. จากนั้นกำหนดองค์ประกอบต่างๆหรือคุณสมบัติผ่านทาง Properties ได้ตามใจชอบเลยครับ ดังรูป

 

 

5. ซึ่งผมจะลบข้อความในปุ่มทิ้ง และใส่รูปที่จัดเตรียมมาลงไป ส่วนข้อความก็ใส่ไปขำๆนะครับ : )
ในที่นี้ผมปรับขนาดปุ่มเป็น Width 235 และ Height 314 นะครับ เท่ากับขนาดภาพที่เตรียมมาเป๊ะ ฮ่าๆๆ ส่วนข้อความก็ใส่มั่วๆไปเลย ของผมก็จะได้ออกมาดังนี้ (* ในสื่อการเรียนเราใช่ arrangement ในการจำลอง Class หากต้องการขยาย arrangment เราควรใช้คำสั่ง fill parent หากต้องการแสดง arrangment ตัวนั้นต้องเลือกสถานะ Visible เป็น showing )

 

 

6. จากนั้นเลือก Open The Block Editor(หน้าจอเขียนคำสั่งแบบ block) ที่มุมขวาบน รอโหลด มาแล้วคลิกรัน จะได้หน้าต่างนี้ขึ้นมา

 

 

8. จากนั้นเลือกที่ My Blocks (Block คำสั่งที่ใช้งานอยู่) แล้วก็เลือก Object มาวางดังรูป จากรูปคือ Block คำสั่งของปุ่ม เมื่อเกิดเหตุการณ์คลิกเมาส์ และในช่องของ do คือเหตุการณ์เมื่อมีการคลิกเมาส์

 

 

 

 

9. กด save จากนั้น เชื่อมต่อโทรศัพท์กับคอมพิวเตอร์และ กด Connect to phone จนขึ้นว่า connecting หรือหากใช้ emulator (โปรแกรมจำลอง OS) ต้องใช้คำสั่ง Connect to device

 

 

10. จากนั้น กลับไปที่หน้าออกแบบ UI และทำการ อัพโหลดโปรแกรม สามารถเลือกว่าจะลงคอมพิวเตอร์ หรือโทรศัพท์ ดังรูป

 

* ไฟล์ที่ได้นามสกุลไฟล์คือ apk หรือเมื่อแสดงผลลัพท์ทาง emulator ต้องใช้คำสั่ง New emulator


แบบฝึกหัดก่อนเรียน : แบบทดสอบการพัฒนา สื่อการเรียน
แบบฝึกหัดหลังเรียน : แบบทดสอบการพัฒนา สื่อการเรียน