รู้จักกับเจ้า Block Editoe

Open The Block Editor

     หลังจากทำการพัฒนา และออกแบบ Application แล้ว จะต้องทำการเปิด Block Editor เพื่อกำหนดคำสั่งลงไปใน Application แสดงขั้นตอนตามรูป

กด Open the Blocks Editor(อยู่ด้านขวาบนนะครับ)

ตรงมุมด้านล่างซ้ายจะขึ้นแบบนี้นะครับ ให้กด Keep ครับ

พอโหลดเสร็จมันจะเป็นหน้าตาประมาณนี้นะครับ กดที่ AppInventorForAnd.....jnlp ได้เลย(ไม่ต้องกดที่ตัวสามเหลี่ยมตัวเล็กนะครับ)

แล้วจะขึ้นหน้าตาประมาณนี้ครับ(JAVA มาแล้ว)

แล้วก็แบบนี้ต่อครับไม่ต้องกดอะไร แค่รอ(ใช้ระยะเวลาไม่นานนะครับ)

แล้วก็แบบนี้ต่อครับ กด RUN ได้เลยครับ(บางเครื่องอาจจะให้ ติ๊ก I Accept นะครับ)

มาแล้วครับตัว Block Editor เอาไว้เขียนโค้ด

        ทำความรู้จักกับส่วนประกอบของ Block Editor กันก่อนนะครับ

• Tab A คือ ส่วนที่แสดงชื่อโปรเจ็คที่เรากำลังพัฒนา เช่น Project1-Screen1 คือ ชื่อ Project1 ที่เรากำลังพัฒนาและอยู่ในหน้าของ Screen1 (ในหนึ่งโปรเจ็คของเราอาจจะมีหลายสกรีนหรือหลายหน้าแล้วแต่การออกแบบครับ)
• Tab B คือ ปุ่ม Save, Undo, Redo คือ อันไม่ขออธิบายครับ(มันจะ Save อัติโนมัติ ครับ)
• Tab C คือ ส่วน Block รูแบบของ Block เพื่อใช้ในการออกแบบคำสั่ง(เดี๋ยวจะอธิบายอีกทีนะครับ สำหรับส่วนนี้)
• Tab D คือ ปุ่ม New Emulator ใช้สำหรับจำลองหน้าจอของสมาร์ทโฟน หรือTablet ครับ เอาไว้จำลองว่าโปรเจ็คที่เราสร้างทำงานได้อย่างที่เขียนหรือไม่(ส่วนนี้เจ้าของ Blog ไม่นิยมใช้ครับ ช้ามาก นิยม Pack เป็น .APK แล้วรันในสมาร์ทโฟน หรือTablet)
• Tab E คือ Conection To Device เอาไว้สังเกตตอนโหลด Block Editor ครับและอื่นๆ เดี๋ยวจะอธิบายภายหลัง

ถ้าขึ้นอักษรแบบนี้ มันกำลังโหลดไฟล์ทั้งหมดที่เราสร้างมาไว้ใน Block Editor ครับ ถ้าไฟล์ที่เราสร้างมีขนาดใหญ่มันก็จะโหลดช้าครับ ถ้าไฟล์ที่เราสร้างมีขนาดเล็กก็จะโหลดเร็วครับ และตามความเร็วของคอมพิวเตอร์และอินเตอร์เน็ต ด้วยนะครับ

• Tab F คือ Zoom ลักษณะการทำงานก็ตามชื่อครับเอาไว้ซูม เข้า-ออก เอาไว้สำหรับ ดูโค้ดที่เราเขียน(ทำไปแล้วจะรู้เองนะครับว่าใช้ยังไง)
• Tab G ส่วนของ Work Space พื้นที่การทำงานสำหรับลาก Block มาวางตามรูปแบบการออกคำสั่ง
• Tab H คือ Recycle Bin คือ ถังขยะครับ ไม่ต้องบอกนะครับว่าเอาไว้ทำอะไร ถ้าจะลบตัวไหน ลากมาวางในถงขยะได้เลย 

แล้วจะออกแบบยังไงต่อ

พอโหลดเสร็จจะขึ้นหน้าตาประมาณนี้ครับ(ยังไม่มีโค้ด ใดๆ ครับ)

รวมปัญหาที่เกิดกับเจ้า App Inventor

รวมปัญหาที่เกิดกับเจ้า App Inventor

รวบรวมปัญหา และวิธีการแก้ปัญหา เกี่ยวกับ App Inventor ครับ(จากประสบการณ์ครับ)

      ต้องรู้หลักการทำงานก่อนนะครับ ว่า App Inventor ทำงานยังไง มีส่วนไหนบ้างที่เกี่ยวข้อง ขั้นตอนการติดตั้งแบบ Online และ Offline ถูกต้องนะครับ Java สำคัญมาก อื่นๆ อีกมากมาย

1. ปัญหาที่เกิดขึ้นกับ App Inventor แบบ Offline

• เปิดไฟล์ launch-buildserver หรือ  launch-buildserver 32 ที่อยู่ใน foder ที่มีชื่อว่า BuildServer แล้วไฟล์ดอสหน้าจอดำๆ รันได้แป็บเดี่ยวแล้วหายไป (คือปรกติแล้วพอกด ไฟล์สคริบจะรันจดเสร็จ) 
• เปิดไฟล์ที่สอง ชื่อว่า startAI จะอยู่ใน foder ที่มีชื่อว่า AppEngine ให้รอจนกว่า ไฟล์สคริปจะทำงานเสร็จ จนหยุดนิ่ง (ย้ำนะครับ ว่ารอจนกว่า ไฟล์สคริปจะทำงานเสร็จ จนหยุดนิ่ง)(พอเสร็จแล้วห้ามกดปิดนะครับ ให้ย่อไว้ด้านล่าง)
• จากที่เคยลองทำมา ไฟล์ launch-buildserver หรือ  launch-buildserver 32 ขึ้นมาแป็บเดียวแล้วหายไปก้อยังสามารถ สร้าง App Inventor แบบ Offline ได้อยู่นะครับ แต่ไฟล์ startAI รอจนกว่า ไฟล์สคริปจะทำงานเสร็จ จนหยุดนิ่ง แล้วให้ย่อหน้าต่างไว้ด้านล่างนะครับ
• Google Chrome อัพเดท Versions บ่อยๆ นะครับ
• แนะนำให้ใช้ Google Chrome นะครับ  เพราะ App Inventor เป็นของ Google + MIT ครับ
• ในช่องของ URL ให้พิมพ์ http://localhost:8888 แล้วกด Enter พอกดแล้วมันจะขึ้นแบบนี้นะครับ(ขึ้นแค่ localhost:8888 ส่วน http:// จะหายไปครับ)

•  ในช่อง Log In จะกรอก อีเมลล์จริงหรือเอาตามนี้ก็ได้นะครับ (E-mail ต้องเป็นของ Gmail เท่านั้นนะครับ แต่การทำแบบ Offline ไม่จำเป็นต้องกรอกอีเมลล์จริงครับ ไม่มีผล)

2. ปัญหาที่เกิดขึ้นกับ App Inventor แบบ Online

• ตัวอย่างปัญหาที่เกิดขึ้นกับ App Inventor แบบ Online คือ Open The Block Editor ไม่ได้ ทั้งนี้เพราะปัญหาอาจจะเกิด ตัว JAVA ของเราครับ  การทำงานของ Block Editor เป็นดังนี้ครับ

กด Open the Blocks Editor

ตรงมุมด้านล่างซ้ายจะขึ้นแบบนี้นะครับ ให้กด Keep ครับ

พอโหลดเสร็จมันจะเป็นหน้าตาประมาณนี้นะครับ กดที่ AppInventorForAnd.....jnlp ได้เลย(ไม่ต้องกดที่ตัวสามเหลี่ยมตัวเล็กนะครับ)

แล้วจะขึ้นหน้าตาประมาณนี้ครับ(JAVA มาแล้ว)

แล้วก็แบบนี้ต่อครับไม่ต้องกดอะไร แค่รอ(ใช้ระยะเวลาไม่นานนะครับ)

แล้วก็แบบนี้ต่อครับ กด RUN ได้เลยครับ

มาแล้วครับตัว Block Editor เอาไว้เขียนโค้ด

**** ถ้าไม่เป็นไปตามนี้ก็น่าจะเกิดปัญหานะครับ อาจจะเกิดจาก ตัว JAVA หรือ Web Browser ลองดูว่าคอมพิวเตอร์ มีเจ้า Baidu ถ้ามีให้ Uninstall ออกทั้งตระกูล เลยนะครับ
  

**** อัพเดท java ให้เป็น Version ที่สูงกว่าครับ 
         Link เดียวช่วยได้ทุกอย่างครับ (แปลภาษาเอาเองนะครับ) 
         Link: http://beta.appinventor.mit.edu/learn/troubleshooting.html

""มีปัญหาอะไร Comment ไว้ด้านล่างนะครับ เดี๋ยวตอบให้""

สร้าง Applications .apk

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

หน้าต่าง The Design(ทั้ง online และ Offline นะครับ)

1. หน้าต่าง My Projects

• Click ปุ่ม New 

• ตั้งชื่อไฟล์งานของเรา (ตั้งชื่อเป็นภาษาอังกฤษ นะครับ ห้ามมีช่องว่าง ถ้าตั้งชื่อไม่ถูกต้องเดี๋ยว App Inventor มันจะฟ้อง error เองครับ **ยกตัวอย่างการตั้งชื่อไฟล์งานนะครับ Test01,Project1 อะไรประมาณนี้ครับ)

• เมื่อตั้งชื่อเสร็จแล้วระบบจะเข้าไปหน้า Design แบบอัตโนมัติ ครับ

• Tab A: คือปุ่ม My Projects Click ปุ่มนี้เพื่อกลับไปยังหน้ารวมโปรเจ็คทั้งหมด และสามารถเลือกได้ว่าจะพัฒนาโปรเจ็คไหน
• Tab B:(Project Name) คือชื่อของโปรเจ็คของเราที่เรากำลังพัฒนาครับ
• Tab C:(Palette) คือเครื่องมือออกแบบคำสั่ง Application(ถ้าคนที่เรียน VB 6.0 มาแล้วจะเข้าใจดีครับ)
• Tab D:(Viewer) คือส่วนของการแสดงผล Application ที่เป็นหน้าจอของโทรศัพท์และใช้ในการจัดวางองค์ประกอบของ UI ถ้าเริ่มสร้างจะเป็นพื้นที่เปล่า
• Tab E:(Components) คือการแสดงรายชื่อ และตั้งชื่อของ Application 
• Tab F:(Properties) คือการกำหนดคุณสมบัติของเครื่องมือในแท็บ Palette

ตัวอย่างของ Palette //

  

แท็บ Basic

เป็นเครื่องมือพื้นฐานที่ใช้งานเป็นประจำ ประกอบด้วย Label, Button, Canvas, CheckBox, Clock, Image, ListPicker, PasswordTextbox, Textbox, TinyDB

แท็บ Media

เป็นหมวดเครื่องมือที่ใช้จัดการกับมัลติมีเดียทั้งภาพและเสียง ประกอบด้วย Camera, Player, Image Picker, Sound, VideoPlayer

แท็บ Screen Arrangement

ใช้จัดการเกี่ยวกับการวางตำแหน่งของเครื่องมือต่างๆ และช่วยจัดระเบียบหน้าตาของ Applications ช่วยให้การทำงานง่ายขึ้น และยังช่วยให้การเขียนโปรแกรมสั้นลงด้วย ลักษณะการทำงานจะคล้ายๆ กับการรวมกลุ่มอุปกรณ์หรือจับกลุ่ม แบ่งได้เป็น

• HorizontalArrangement      - การวางตำแหน่งในแนวนอน
• TableArrangement              - การวางตำแหน่งแบบตาราง
• VerticalArrangement          - การวางตำแหน่งในแนวตั้ง

App Inventor (Online) ผ่านอินเตอร์เน็ต

แบบ Online

App Inventor (Off line) จําลองเซิฟเวอร์

ขั้นตอนการติดตั้ง App Inventor (แบบ Offline นะครับ)

App Inventor (Off line) จําลองเซิฟเวอร์ 

1. ติดตั้ง Java Development Kit (JDK) หรือ Java Runtime Enviroment (JRE) อย่างใดอย่างหนึ่ง ตั้งแต่เวอร์ชั่น 6 ขึ้นไปและควรเลือกให้ตรงกับ Windows ที่ใช้ ที่มีทั้ง 32 bit(x86) และ 64 bit(x64)

• ไฟล์ JDK (Java Development Kit ) สามารถดาวโหลดได้ที่

          http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

• jdk-7u75-windows-x64.exe for Windows 64(x64) bit
• jdk-7u75-windows-i586.exe for Windows 32(x86) bit

A. ติ๊ก เลือก Accept License Agreement

B. ตรงนี้ให้เลือกนะครับ ระหว่าง (x86)คือ Windows  32 bit และ(x64)Windows  64 bit(วิธีการดูว่า Windows ของเราเป็นแบบ 64(x64) หรือ 32(x86) ให้ Click ขวา ตรง MyComputer แล้วเลือกตรง แท็บ Properties และให้ดูตรง แท็บ system Type ว่าเป็น 32 หรือ 64 นะครับ)

*** ถ้าเลือกลง Java Development Kit (JDK) จะสามารถทำการ Package งาน Application ที่สร้างให้เป็นไฟล์ .apk ได้ทันที

2. ติดตั้ง appinventor setup installer v1.2

Link : http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

3. เมื่อทำการติดตั้ง Software ครบแล้วให้ทำการ Copy Foder V1.4.6 ไว้ที่ใดในเครื่องก้อได้(เมื่อทำการใช้งานแล้วไม่ควรย้ายที่) Foder V1.4.6  สามารถดาวน์โหลดได้ที่

Link : http://sourceforge.net/projects/ai4a-configs/files/V1.4.6/

ภายใน Foder V1.4.6 จะประกอบด้วยไฟล์

4. ขั้นตอนการเข้าใช้งาน

     ให้เปิดไฟล์แรก ชื่อว่า launch-buildserver จะอยู่ใน foder ที่มีชื่อว่า BuildServer (ถ้า Windows เป็นแบบ 32 bit ให้เปิดไฟล์ชื่อ launch-buildserver32 ) เมื่อเปิดไฟล์แล้ว จะปรากฏหน้าต่าง ดังภาพ ให้รอจนกว่าไฟล์สคริปจะทำงานเสร็จ จนขึ้นข้อความว่า Sever running (พอเสร็จแล้วห้ามกดปิดนะครับ ให้ย่อไว้ด้านล่าง)

5. หลังจากนั้น

     ให้เปิดไฟล์ที่สอง ชื่อว่า startAI จะอยู่ใน foder ที่มีชื่อว่า AppEngine จะปรากฏหน้าต่างดังภาพ ให้รอจนกว่า ไฟล์สคริปจะทำงานเสร็จ จนหยุดนิ่ง (พอเสร็จแล้วห้ามกดปิดนะครับ ให้ย่อไว้ด้านล่าง)

****ระหว่างใช้งานโปรแกรม AppInventor ห้ามปิดหน้าต่าง ดอส ทั้งสองหน้าต่างนี้นะครับ และให้ย่อหน้าต่าง (Minimize) ลงไป

6. เปิดโปรแกรม web browser ขึ้นมา แนะนำให้ใช้ Google Chrome

     ที่ตำแหน่ง URL ให้พิมพ์ ้http://localhost:8888 จะปรากฏหน้าต่างเข้าใช้งาน ให้คลิ๊กเลือกที่ Log In เพื่อเข้าใช้งานได้เลย ไม่ต้องใส่อีเมลล์จริงก็ได้(ไม่จำเป็นต้องใส่อีเมลล์จริงนะครับ เพราะมัน offline)

เมื่อ Log In อาจจะเจอหน้าต่างแบบนี้หรือไม่เจอก็ได้นะครับ

ให้กด ตรง ปุ่ม I accept ..... นะครับ แล้วจะเข้าสู่หน้าต่างนี้ นะครับ

กดตรงปุ่ม New ได้เลยครับ เป็นการตั้งชื่อไฟล์โปรเจ็ค

7. ยังไม่จบนะครับ สำหรับแบบ Offline 

     หลังจากที่ได้ทำการติดตั้งโปรแกรม App Inventor จนเสร็จเรียบร้อยแล้ว ขั้นตอนสุดท้าย(ย้ำนะครับว่าขั้นตอนสุดท้ายสำหรับแบบ Offline) คือการเซ็ตค่า Java เพื่อสามารที่จะ Package งานเป็น .apk เอาไปลงใน สมาร์ทโฟนหรือ Tablet ที่เป็น android 

      

     เริ่มกันเลยนะครับ

1. Click ขวา ที่ My Computer เลือก Properties
2. Click แถบ Advanced system setting
1. ตรงแถบ Addvanced ให้ Click ปุ่ม Enviroment Variadles จะปรากฏหน้าต่างขึ้นมาใหม่อีกหนึ่งหน้าต่าง ชื่อของหน้าต่างคือ Enviroment Variadles แล้ว Click ปุ่ม New (ปุ่ม New ด้านล่างนะครับ ตรง Tab system variables) จะปรากฏหน้าต่างมาอีกหนึ่งหน้าต่างครับ ชื่อว่า Edit system variables ตรงช่อง variable Name: ให้ตั้งชื่อว่า JAVA_HOME (ต้องพิมพ์ตัวอักษรพิมพ์ใหญ่ ตามนี้นะครับ มี Underscore คั่นกลางด้วยนะครับ) จากนั้นในช่อง variable Value: .ให้ Copy address path โปรแกรม Java มาใส่ (วิธีการ Copy address path โปรแกรม Java มาใส่ คือ ไปที่ My Computer ไปที่ Drive C ไปที่ Program File ไปที่ Java แล้ว Click foder ที่อยู่ใน foder java นั้นแหละครับ พอ Click เข้าไปแล้ว ก้อทำการ  Copy address ในช่อง address ด้านบนนะครับ จะได้ประมาณนี้นะครับ ---->>>C:\Program Files\Java\jdk1.7.0_71<<<--------ปล. ตัวเลขอาจจะไม่ตรงกันนะครับ แล้วแต่ว่า Java ของท่านจะเป็นรุ่นอะไร ของผมเป็นรุ่น jdk1.7.0_71 นะครับ) เมื่อเราได้  Copy address path มาแล้ว ก็เอามาใส่ตรงช่อง variable Value ได้เลยครับ  จากนั้นกด Ok กด apply เป็นอันเสร็จ พิธีครับ 

3. เมื่อเสร็จทุกอย่างแล้วก็ Restart เครื่องซักครั้งนะครับ
4. เมื่อทำการจัดเตรียมระบบเรียบร้อยแล้ว ต่อไปก็ทำการเข้าสู่ App Inventor ได้โดยไปที่

• เปิดไฟล์ launch-buildserver หรือ launch-buildserver32(เลือกเอาหนึ่งตัวนะครับ ดูว่า Windows ของท่านเป็นกี่ Bit) จะอยู่ใน foder ที่มีชื่อว่า ""BuildServer""
• เปิดไฟล์ที่สอง ชื่อว่า startAI จะอยู่ใน foder ที่มีชื่อว่า AppEngine 
• ******ระหว่างใช้งานโปรแกรม AppInventor ห้ามปิดหน้าต่าง ดอส ทั้งสองหน้าต่างนี้นะครับ และให้ย่อหน้าต่าง (Minimize) ลงไป********
• เปิด Google Chrome ที่ตำแหน่ง URL ให้พิมพ์ ้http://localhost:8888 กด Enter กด Log In เป็นอันเสร็จพิธีครับ

จะเริ่มต้น App Inventer อย่างไร

จะเริ่มต้น App Inventor อย่างไร??

ทำไมต้องเป็น App Inventor

     App Inventor ช่วยให้คุณสามารถสร้างโปรแกรม Android โดยไม่ต้องเขียนโค้ดโปรแกรมหรือแทนการเขียนโค้ด สามารถมองเห็นวิธีการออกแบบ Applications ผ่านหน้าจอ กำหนดองค์ประกอบของ App

แล้วระบุลักษณะ หรือเหตุการณ์ทำงานของ App โดยการกำหนดค่าที่ต้องการลงในบล๊อก ทำให้สามารถทำอะไรกับโทรศัพท์ Android ด้วยบล๊อกได้เหมือนกับการเขียนโปรแกรมด้วยภาษาใดภาษาหนึ่ง

    เช่น การกำหนดตัวแปร การสร้างเงื่อนไข ดำเนินการทำซ้ำ และมีเงื่อนไข หรือแม้แต่การคำนวณ มีบล๊อกแม้กระทั่งการจัดเก็บข้อมูลในฐานข้อมูล และสร้างการพูดคุยกับบริการเว็บ Twitter, Facebook ได้

    App Inventor เป็นภาษาภาพที่มีอินเตอร์เฟซแบบลาก แม้กระทั่งคนที่ไม่มีความรู้ด้านการเขียนโปรแกรมหรือ ไม่รู้ภาษาคอมพิวเตอร์ใดเลย ก็พัฒนา App ของตนเองได้ ทั้งนี้เพราะ

1. App Inventor มีความผิดพลาดในกรณี ไวยากรณ์ หรือ No Syntax เพราะเป็นภาษาบล๊อก ที่ไม่จำเป็นต้องจำคำสั่งและพิมพ์รหัสลงไป
2. ใน App Inventor ทุกสิ่งที่อยู่ตรงหน้าของคุณหรือบนหน้าจอคอมพิวเตอร์ ชิ้นส่วน และคุณสมบัติทางโปรแกรมต่างๆ มีการจัดระเบียบเป็นหมวดหมู่ สามารถใช้งานได้เพียงแค่ลากและวางเท่านั้น
3. App Inventor เป็นการออกแบบ App แบบระดับชั้น จากบนสู่ล่าง เกิดขึ้นตามลำดับที่ผู้ออกแบบได้กำหนดด้วยตนเอง
4. App Inventor มีองค์ประกอบทางโปรแกรมระดับสูง แต่มีความเรียบง่ายในการใช้งาน

ความต้องการของระบบ</00\>

• ระบบปฏิบัติการ
• Macintosh: Mac OS X 10.5, 10.6 (Intel);
• Windows: XP, Vista, 7;
• GNU/Linux: Ubantu 8+, Debian 5+;

• โปรแกรม Browser
• Google Chrome 4.0 and Higher;
• Mozilla Firefox 11.0;
• Apple Safari 5.0 and Higher;
• Mircrosoft Internet Explorer 6 and Higher;

• โปรแกรมอื่นๆ
• appinventor setup installer v 1.2;
• jdk 7u3 windows i586 and Higher;

เริ่มต้นกับ App Inventor

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) ด้วยการสร้างโปรแกรมที่ผู้เรียนสนใจ บนโทรศัพท์มือถือสมาร์ทโฟน (สมัยนี้สมาร์ทโฟนใช้กันทั่วไปอยู่แล้ว โดยเฉพาะเด็กวัยรุ่น)

App inventor จึงเป็นอีกโปรแกรมหนึ่ง ที่เหมาะสำหรับใช้ในการสอนเขียนโปรแกรม ให้นักเรียนในระดับมัธยมปลาย หรือระดับมหาวิทยาลัย โดยเฉพาะผู้ที่ไม่เคยเขียนโปรแกรมมาก่อนหรือไม่ได้เรียนอยู่ในสายคอมพิวเตอร์

การเขียนโปรแกรมบนสมาร์ทโฟนและแท็บเล็ต 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) ในคอมพิวเตอร์แทน

ที่มา : http://kidsangsan.com