การสร้าง Application ด้วย MIT App Inventor 2

การสรา้ ง Application
ด้วย MIT App Inventor 2

นางสุนิสา อนิ ทนิน
วทิ ยาลัยอาชีวศกึ ษาเพชรบุรี

แนะนำเครื่องมอื สร้าง Application
ดว้ ย MIT App Inventor 2

การเขียน Application หรือเรียกให้ทางการคือ
Mobile Application ในปัจจุบันมีเครื่องมือในการช่วย
เขียนมากมาย ไม่ว่าจะเขียนด้วยภาษา JAVA หรือเขียน
ด้วยภาษา html แต่การเขียนโปรแกรมเหล่านั้นยังต้อง
อาศัยทักษะการเขียนโปรแกรมอยู่ แต่การสร้าง
Application ด้วย MIT App Inventor 2 เป็นลักษณะ
ของการลากวาง block ชุดคำสั่งคล้ายกับการต่อจิกซอว์
เรยี กใหเ้ ปน็ ทางการวา่ Block Programming

MIT App Inventor 2 สามารเข้าไปใช้งานออนไลน์
ได้เลยไม่ต้องลงโปรแกรม (มีแบบออฟไลน์ที่ไม่ต้องต่อเน็ต
ด้วย) http://ai2.appinventor.mit.edu โดยจะต้องใช้
อีเมล์ Gmail ในการลอ๊ กอนิ เขา้ สู่ระบบ ก็จะพบหน้าจอนี้

App Inventor จะมีหน้าจออยู่สองส่วน คือส่วนของ
ออกแบบหน้าจอ จะเรียนว่า Designer และส่วนของการ
ลากวาง Block คำสั่งลักษณะเหมือนต่อจิกซอว์ จะเรียกว่า
Blocks

การสร้าง Application ในส่วนหน้าจอ Designer
นั้น เราจะลาก Component (คอมโพแนน) ที่อยู่ในกล่อง
Palette (พาเลท) ด้านซา้ ยมอื ลากมาวางส่วนของ Viewer
(วิวเวอร์) ซึ่งเป็นที่แสดงผลของหน้าจอ Application โดย
เราสามารถกำหนดว่าคอมโพแนนแต่ละตัวมี Properties
(คณุ สมบตั ิ) อย่างไรบ้าง

อะไรคือ Component

Component คือวัตถุที่จะถูกวางบนหน้าจอ
Application ที่เราออกแบบจะมีทั้งแสดงผลบนหน้าจอ
และส่วนของการทำงานภายใน Component จะเก็บใน
Palette โดยแยกตามประเภทของ component ประเภท
ตา่ งๆ ดังน้ี

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

Layout เป็นส่วนที่จะมาจัดวางการแสดงผลของ
หน้าจอวา่ จะวางยังไรใหส้ วยงาม โดยท่ัวไปเราจะลากส่วนน้ี
มาวางเป็นสัดสวนก่อนแลว้ ค่อยลากคอมโพแนนส่วน User
Interface มาวาง

Media เป็นส่วนของการใช้งานด้านมีเดีย ไม่ว่าจะ
เป็นการเล่นเสียง เล่นวิดีโอ ถ่ายรูป อัดเสียงและอีก
มากมาย

Drawing and Animation จะเป็นส่วนของการวาด
รูปและการทำใหภ้ าพเกดิ การเคล่อื นไหว

Sensors จะเป็นส่วนที่ใช้ทำงานรว่ มกับเซน็ เซอร์ของ
อุปกรณ์ เช่น เซ็นเซอร์ความเร็ว เซ็นเซอร์GPS เซ็นเซอร์
เขม็ ทิศ

Social เป็นส่วนของของการเขียนโปรแกรมเกี่ยวกับ
การโทรออก การสง่ sms การเรียกดสู มดุ โทรศัพท์และส่วน
ของแชรไ์ ปยังโปรแกรมสังคอมออนไลน์

Storage เป็นส่วนการเรียกใช้ฐานข้อมูลในการ
จัดเก็บขอ้ มลู การจัดเก็บไฟล์

Connectivity เป็นส่วนการเรียนกใช้บลูทูธ การ
ตดิ ต่อกบั java app

ในแต่ละ Component เราสามารถที่จะกำหนด
คุณสมบัติของมันได้ด้วยว่าต้องการคุณสมบัติยังไร ซึ่ง
สามารถกำหนดคุณสมบัติในแต่ละ Component ได้ใน
ส่วนของ Properties

การกำหนด Properties จะมีหน้าที่ที่ค่อยบอกว่า
Component ของเรานั้นจะมีคุณสมบัติอย่างไร เช่น ปุ่ม

จะมีขนาดตัวอักษรเท่าไหร่? พื้นหลังสีอะไร? มีข้อความ
บนปมุ่ เขียนว่ายังไร?

เมื่อเรารู้จักส่วนของ Designer แล้ว เดี่ยวจะมาทำ
ความรู้จักสว่ นของ Blocks ซง่ึ จะเปน็ สว่ นของการท่จี ะบอก
ให้ Application ของที่เราจะสร้างนั้น มีกระบวนการ
ทำงานยังไร เช่นหลักจากที่ กดคลิกที่ปุ่มแล้วให้ทำอะไร,
การกำหนดค่าตัวแปรมีชื่อตัวแปรอะไรมีค่าเท่าเริ่มต้น
เท่าไหร่ ,การคำนวนบวกเลขแล้วแสดงผลหน้าจออย่างไร
เปน็ ตน้

ฺblock ใน App Inventor ใช้งานยังไร? มีรูปแบบ
อะไรบ้าง? สำหรับผู้ที่เริ่มใช้งานใหม่ๆ อาจจะดูงงๆกับ
รูปแบบของ block ที่จะมาใช้งาน การแบ่งกลุ่มรูปแบบ
ของ Block ดังน้ี

เรียกค่าคุณสมบัติของ Component (property
getter)

สิ่งทีเ่ ราทราบกอ่ นหน้านีค้ อื ทกุ ๆ Component ทเี่ รา
จะเรียนใช้งานจะมีคุณสมบัติและสามารถแก้ไขมันได้
เพิ่มเติม หากเราต้องการนำส่วนของคุณสมบัตินั้นมาใช้
เราสามารถเรียกใช้ Block ลักษณะดงั น้ี (สังเกต block จะ
เป็นสเี ขยี วอ่อน)

กำหนดค่าคุณสมบัติของ Component (property
setter)

การกำหนดคุณสมบัติของ Component นอกจากที่
เราสามารถกำหนดค่าจากส่วน Designer แล้ว ในส่วนของ
Block ก็สามารถกำหนดค่าได้เช่นกันโดยใช้ Block
ลกั ษณะดงั น้ี (สงั เกต block จะเปน็ สีเขียวเขม้ )

มีการดำเนินเหตุการณ์กับ Component (event
handler)

การดำเนินเหตุการณ์ คอื อะไร ? ถ้าสงั เกตการทำงาน
ของ Application เช่นในการคลิกเมนูเพื่อแสดงหน้าที่เรา
ต้องการ หรือการเลือกคำตอบของข้อสอบ สิ่งเหล่านี้คือ
เป็นลักษณะการดำเนินเหตุการณ์ เช่นถ้าคลิกปุ่มนี้ แล้วให้
มันทำอะไรต่อ , หากเป็นการเริ่มต้นเปิดหน้าจอ
Application แล้วให้มันดำเนินการยังไร เราสามารถ
เรียกใช้ Block ลักษณะดงั นี้ (สงั เกต block จะเปน็ น้ำตาล)

โดยการวางชุดคำสั่งในสว่ นของ Block จะสัมพนั ธ์กบั
Component ใ น ส ่ ว น ข อ ง Designer ว ่ า ก ั น ง ่ า ย ๆ
คือ Component ไหนทีจ่ ะเรียกใชใ้ นการลากวางชุดคำสั่ง
ในหน้า Block จะต้องลาก Component ที่เกี่ยวข้องมา
วางใน Viewer ในหน้า Designer เสยี กอ่ น

นอกจากนี้ Block ที่เป็นส่วนของการคำนวน ส่วน
ของข้อความ การกำหนดสี การกำหนดตวั แปร การควบคุม
และอน่ื ๆ จะเป็น Block ถูกสรา้ งข้นึ มาใหอ้ ตั โนมัตโิ ดยทเี่ รา
ไม่ตอ้ งไปสร้าง Component กอ่ น

หากเอามา Block แต่ละแบบที่ผมอธิบายมาต่อกัน
จะไดช้ ุดคำส่ังท่ีทำงานไดป้ ระมาณน้ี

พอหอมปากหอมคอเกี่ยวการแนะนำภาพรวมของ
การ App Inventor 2 ในตอนหน้าจะมาแนะนำส่วนของ
การทดสอบ Application ที่เราสร้างด้วยตัว emulator
และการทดสอบผา่ นมอื ถือจรงิ ขอบคณุ ที่อ่านนะ