การเขียนโปรแกรมบนมือถือ Android ไม่ได้ยุ่งยากอย่างที่คิด โดยภาพรวม เราต้องออกแบบหน้าตาโปรแกรมบนคอมพิวเตอร์ก่อน ด้วยโปรแกรม Designer เมื่อได้หน้าตาโปรแกรมมาแล้ว ก็ต้องเขียนโค้ดหรือเขียนโปรแกรมให้แต่ละส่วนโปรแกรมที่เราออกแบบไว้ ด้วยโปรแกรม Blocks Editor
จากนั้นก็ต้องทดสอบดูว่าโปรแกรมทำงานได้จริง หรือถูกต้องหรือเปล่า ด้วยการส่งโปรแกรมไปยังมือถือจริงๆ หรือโปรแกรมมือถือจำลอง เพื่อทดสอบการทำงาน ถ้าโปรแกรมยังทำงานไม่ถูกต้อง เราต้องกลับไปแก้ไขโปรแกรมบนคอมพิวเตอร์อีกครั้ง (หรืออาจจะหลายครั้งก็ได้) อาจจะต้องแก้ไขในส่วนการออกแบบ หรือส่วนการเขียนโค้ด หรือทั้งคู่เลยก็เป็นได้
มาลองทำตาม โปรแกรมแมวเหมียว ในเว็บไซต์ของ MIT กัน โดยโปรแกรมนี้ จะมีรูปแมวบนหน้าจอมือถือ เมื่อแตะที่รูปก็จะได้ยินเสียงร้องของเจ้าแมวเหมียว ดังนั้นเราต้องมีไฟล์ รูปภาพแมว และเสียงร้องของเจ้าแมวเหมียว เพิ่มเติมเท่านั้นเอง (คลิกขวาที่ลิงค์แล้ว Save link as โหลดไฟล์เก็บเอาไว้ที่เครื่องคอมพิวเตอร์ก่อน)
เมื่อมีไฟล์รูปแมวและเสียงร้องแล้ว ก็ไปยังโปรแกรม Designer กันเลย ถ้ายังไม่เคยสร้างโปรเจกมาก่อน จะได้หน้าต่างตามนี้
โปรเจกใน App Inventor ก็คล้ายกับโปรเจกในโปรแกรม Scratch คือจะเก็บไฟล์โปรแกรมหรือโค้ด กับไฟล์ต่างๆที่ใช้ในโปรเจก เช่น รูปภาพ เสียง ข้อมูล เป็นต้น วิธีสร้างโปรเจกใหม่ ทำได้โดยคลิกปุ่ม New ก็จะเห็นหน้าต่างนี้
ใส่ชื่อโปรเจกที่ต้องการ (ห้ามมีช่องว่าง) เช่น Hello_purr หรือ HelloPurr ก็ได้ คลิกปุ่ม OK จะได้หน้าต่างต่อไป
โปรเจกที่เราสร้างขึ้นมาจะเก็บไว้ที่ App Inventor Server คลิกที่ My Projects จะเห็นรายการโปรเจกที่เคยถูกสร้างไว้ (ในที่นี่มี Hello_purr โปรเจกเดียว) คลิกที่ชื่อโปรเจก (Hello_purr) จะเปิดโปรเจกใน Designer
ในโปรแกรม Designer มีส่วนประกอบหลักอยู่ 4 ส่วน คือ
1. Palette เป็นแหล่งรวบรวมส่วนโปรแกรม (Component) เอาไว้เป็นหมวดหมู่ (Basic, Media, Animation, …) คลิกหมวดที่ต้องการ จะเห็นรายการส่วนโปรแกรม ที่เราสามารถใส่เข้าไปบนโปรแกรมมือถือ ที่กำลังออกแบบนี้ได้ เช่น ในหมวด Basic จะเห็นส่วนโปรแกรมปุ่ม (Button) นาฬิกา (Clock) รูปภาพ (Image) เป็นต้น
2. Viewer เป็นพื้นที่บนหน้าจอมือถือ (Screen1) ทำให้เห็นภาพตอนออกแบบโปรแกรม เมื่อเราลากส่วนโปรแกรมมาใส่ในพื้นที่นี้
3. Components คือส่วนโปรแกรมที่ถูกใส่เข้าไปใน Viewer เป็นส่วนโปรแกรมที่เราต้องการให้มีอยู่ในโปรแกรมมือถือ และสามารถเขียนโค้ดเข้าไปในส่วนโปรแกรมเหล่านี้ได้ เพื่อให้โปรแกรมทำงานตามที่ต้องการ
ด้านล่างติดกันเป็นส่วนของ Media เราสามารถเพิ่มไฟล์สื่อชนิดต่างๆ เช่น ไฟล์รูปภาพ ไฟล์เสียง เข้าไปในโปรเจกเพื่อนำไปใช้ในโปรแกรมได้
4. Properties คือคุณสมบัติต่างๆ ของส่วนโปรแกรม เมื่อเราคลิกเลือกส่วนโปรแกรมใด ที่อยู่ใน Viewer หรือใน Components เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมนั้น โดยแต่ละส่วนโปรแกรมจะมีคุณสมบัติ ที่อาจจะเหมือนกันหรือแตกต่างกันออกไปก็ได้ ซึ่งเราสามารถแก้ไข เพิ่มเติม ข้อมูลลงไปในคุณสมบัติต่างๆ ที่มีได้
คิดสร้างสรรค์ 