ระบบใน app inventor ที่ใช้ในการจัดการเกี่ยวกับโค้ดโปรแกรมข้อใด

ความรู้เบื้องต้น เกี่ยวกับ การพัฒนาโปรแกรม Android

วัตถุประสงค์

1. เพื่อเข้าใจระบบปฏิบัติการ Android

2. เพื่อสามารถติดตั้งเครื่องมือที่ใช้ในการพัฒนาโปรแกรม Android

1.1 แนะนำระบบปฏิบัติการAndroid

ระบบปฏิบัติการAndroidได้ถูกนำไปติดตั้งหลายร้อยล้านเครื่องในประเทศ มากกว่า 190 ประเทศทั่ว โลก ระบบปฏิบัติการAndroidถูกพัฒนาต่อ ยอด จากชุมชนโอเพนซอร์ส ลินุกซ์ และมีการพัฒนาและใช้งานร่วมกับบริษัทหน่วยงาน ที่พัฒนาฮาร์ดแวร์ ซอฟต์แวร์ และผู้ให้บริการเครือข่ายอื่นๆ ประมาณ 300 หน่วยงาน ในขณะที่ผู้ใช้อุปกรณ์Androidสามารถดาวน์โหลดโปรแกรมมากกว่า 1.5 พัน ล้านโปรแกรมใน Google Play

ขั้น ตอนที่สำคัญของการพัฒนาโปรแกรมAndroid มีดังนี้

1. การออกแบบโปรแกรมAndroid

2. การเขียนโค้ด พัฒนาและทดสอบโปรแกรมAndroid

3. การเผยแพร่โปรแกรมAndroid

1.2 เครื่องมือที่ใช้ในการพัฒนาโปรแกรม Android

เครื่องมือที่ใช้พัฒนาโปรแกรม Android มีหลากหลาย แต่ในครั้งนี้เราจะเลือกใช้ App Inventor ในการพัฒนาโปรแกรม  Android

โดย App Inventor จะเป็นเหมือนเครื่องมือที่ช่วยในการพัฒนาโปรแกรม Android  โดยที่เราไม่จำเป็นที่จะต้องรู้ โค้ดที่ใช้ในการเขียนโปรแกรม  ตัวเครื่องมือหรือ App Inventor จะมี Block  ที่รวบรวมคำสั่งต่างๆ เอาไว้ เราก็เพียงแค่ลาก Blockเหล่านั้นมาเชื่อมต่อกัน ตามการทำงานที่เราได้ออกแบบไว้

1.3 เกี่ยวกับ App Inventor

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

1.4 ความต้องการขั้นต่ำของระบบ

1) ระบบปฏิบัติการที่สนับสนุน การพัฒนาโปรแกรม Android ได้แก่ระบบปฏิบัติการวินโดวส์ (Windows) , แมคโอเอสเอกซ์ (Mac OS X), และลินุก ซ์ (Linux) โดยทุก ระบบปฏิบัติการมีความต้องการขั้นต่ำ ดังนี้

•         หน่วยความจำ (RAM) อย่างน้อย 2 GB แต่แนะนำให้เป็น 4 GB

•         พื้นที่ฮาร์ดดิสก์อย่างน้อย 400 MB

•         พื้นที่อย่างน้อย 1 GB สำหรับ ติดตั้ง emulator system, images, and caches

•         ความละเอียดของหน้าจออย่างน้อย 1280 x 800

            2) Browser ที่ติดตั้ง JAVA

•         Mozilla Firefox 3.6 or higher ถ้าใช้ NoScript extension ต้องปิดการใช้งานตัวนี้ก่อน

•         Apple Safari 5.0 or higher

•         Google Chrome 4.0 or high

3) โปรแกรม App Inventor Setup

4) Driver ของโทรศัพท์ Android

5) สาย USB Connect

6) บัญชีของ Google

1.5 เริ่มต้นใช้งาน App Inventor

เปิด webbrowser แล้วเข้าไปที่ http://ai2.appinventor.mit.edu/ หากยังไม่ได้ login บัญชี google จะพบกับหน้าจอดังภาพ ให้ทำการลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ

หน้าจอลงชื่อเข้าใช้งาน

หลังจากลงชื่อเข้าใช้แล้วจะได้หน้าจอดังภาพ ให้กดปุ่ม อนุญาต ด้านล่าง

เข้าสู่หน้าจอต้อนรับ ให้หน้าจอนี้จะมี link แนะนำการติดตั้ง Android device และการติดตั้ง Android emulator (ซึ่งจะกล่าวถึงการติดตั้ง และใช้งาน Android emulator ในท้ายบท)  ให้กดปุ่ม Continue เท่านี้ก็พร้อมที่จะเริ่มใช้งานแล้ว

1.6 ส่วนประกอบต่างๆ ของโปรแกรม App Inventor

            1.6.1 หน้าแรกของโปรแกรม จะแสดงโปรเจค ทั้งหมดที่เราได้สร้างไว้ และเราสามารถสร้างโปรเจคใหม่ หรือลบโปรเจคได้ที่หน้าจอนี้

                    สร้างโปรเจคใหม่โดยการ กดที่ปุ่ม Start new project จะมีหน้าจอให้ใส่ชื่อโปรเจค โดยโปรเจคแรกที่เราจะทำจะใช้ชื่อว่า “HelloCat” เสร็จแล้วให้กดปุ่ม OK

1.6.2 หน้าจอสำหรับสร้างโปรแกรม จะมีส่วนประกอบดังต่อไปนี้

1)     เมนูบาร์

2)     เมนู Palette
Layout เครื่องมือเกี่ยวกับการจัดตำแหน่งหน้าจอ
Media เครื่องมือที่เกี่ยวกับการจัดการสื่อมัลติมีเดีย
Drawing and Animation เครื่องมือเกี่ยวกับการจัดการแอนิเมชัน ภาพเคลื่อนไหว
Sensors เครื่องมือเกี่ยวกับการตรวจสอบเซ็นเซอร์ การเคลื่อนไหวของมือถือ หรือ ตำแหน่ง GPS
Social เครื่องมือเกี่ยวกับการเชื่อมต่อระบบเครือข่าย
Storage เครื่องมือเกี่ยวกับการจัดการข้อมูล
Connectivity เครื่องมือเกี่ยวกับการเชื่อมต่อ
LEGO เครื่องมือเกี่ยวกับคำสั่ง LEGO

3)     Property ส่วนการกำหนดคุณสมบัติของเครื่องมือ ในหน้าจอโปรแกรม

4)     Component ส่วนแสดงองค์ประกอบ หรือเครื่องมือในโปรแกรมว่ามีอะไรบ้าง

5)     Media ส่วนแสดงสื่อทั้งหมดว่ามีอะไรบ้าง

        1.6.3 Blocks Editor การเขียนคำสั่งในโปรแกรม App Inventor จะไม่ได้เขียนโดยการพิมพ์โค้ด แต่จะใช้ Block คำสั่ง ในการทำงาน คลิดที่ปุ่ม Blocks และจะมีส่วนประกอบดังต่อไปนี้

1)     หน้าจอ Blocks Editor

2)     Blocks ส่วนแสดงสัญลักษณ์ Blocks ต่างๆ

3)     Viewer หน้าจอสำหรับวาง Blocks

1.7 การติดตั้ง และใช้งาน Android Emulator

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

1.7.1 การติดตั้งโปรแกรม

        โหลดตัวติดตั้งโปรแกรมได้จาก http://appinv.us/aisetup_windows ซึ่งจะมีขนาดของไฟล์ ประมาณ 80 MB

1.7.2 เปิดโปรแกรม aiStarter ด้วย icon ดังภาพ

                หน้าจอหลังเปิดโปรแกรม

1.8 ทดลองเชื่อมต่อ โปรเจค กับ Android Emulator

ขอขอบคุณข้อมูลจาก

ผศ. ดร. กานดา สายแก้ว ภาควิชาวิศวกรรมคอมพิวเตอร์ มหาวิทยาลัยขอนแก่น

ครูณัฐพล บัวอุไร [www.nattapon.com]

http://kidsangsan.com/

http://ai2.appinventor.mit.edu/

http://appinventor.mit.edu/explore/ai2/setup-emulator