องค์ประกอบของ App Inventor มีกี่ส่วน

ที่หน้า Designer คลิกที่ Button ตรงคอลัมน์ Components (ซึ่งทำให้คอลัมน์ Properties แสดงคุณสมบัติของ Button) จากนั้นพิมพ์ข้อความ Talk To Me ลงในช่อง Text ตรงด้านล่างของ Properties ข้อความที่พิมพ์จะไปปรากฏที่ปุ่ม Button ที่หน้าจอ Viewer

ต่อไปนำ Components ที่ 2 คือ TextToSpeech จาก Media ในคอลัมน์ Palette มาวางที่ Viewer โดย Component นี้จะไม่แสดงที่ Viewer แต่จะแสดงอยู่ในช่อง Components และ Properties

เมื่อวาง Components เรียบร้อยแล้ว ต่อไปเป็นการกำหนดการทำงานแต่ละ Components โดยคลิกที่ Blocks 

หน้า Blocks ประกอบด้วย Blocks ทางด้านซ้าย ตรงกลางเป็น Viewer สำหรับวาง Blocks และถังสำหรับใส่ Blocks ที่ต้องการลบ โดยลากลงไปปล่อยหรือใช้คีย์ Delete ก็ได้ 

เครื่องมือของ Blocks ประกอบด้วย Built-in ซึ่งเป็นคำสั่งมาตรฐาน ถัดลงมาเป็นส่วนของ Screen ซึ่งมี Components  ที่ถูกนำมาวางไว้ในหน้า Designer  ได้แก่ Button กับ TextToSpeech

เมื่อคลิกที่ Button จะปรากฏคำสั่งในการดำเนินการกับ Button ให้เลือก ในกรณีนี้ให้เลือก when Button Click do ลากมาวางที่ Viewer ซึ่งเป็นการเริ่มคำสั่งเมื่อปุ่มถูกคลิก

จากนั้นคลิกที่ TextToSpeech และเลือก Blocks call TextToSpeech Speak message มาต่อกับคำสั่ง when Button Click do เป็นการสั่งให้โปรแกรมเปลี่ยนข้อความเป็นเสียงพูดพร้อมกับขึ้นข้อความตามมา

การพิมพ์ข้อความลงไป ให้ไปที่ Blocks ของ Text ที่อยู่ใน Built-in เลือก Block เครื่องหมายคำพูดมาวางต่อท้าย 

จะได้คำสั่งในการใช้งานได้เรียบร้อย

เมื่อคลิกบนปุ่มที่หน้าจอ จะมีเสียงพูดตามข้อความที่พิมพ์ สามารถเปลี่ยนข้อความได้ตามต้องการ โดยกลับมาเปลี่ยนข้อความใน Blocks

____________________________________

จากตัวอย่างของ MIT AppInventor ถ้าปรับข้อมูลอีกเล็กน้อยโดยกรอกข้อความที่ต้องการออกเสียงได้ที่หน้าจอของแอป ไม่ต้องกลับไปกรอกที่ Blocks  

ไปที่หน้า designer คลิกที่ Label ในคอลัมน์ User Interface ลากมาปล่อยที่ Viewer และพิมพ์ข้อความ "กรอกข้อความในช่องว่าง" ที่ช่อง Text ตรงด้านล่างของ Properties

ลาก TextBox จากช่อง User Interface มาวางที่ Viewer และลบข้อความ Hint ออก และอาจะคลิกที่ช่อง MultiLine ถ้าต้องการกรอกข้อความหลายบรรทัด

ไปที่หน้า Blocks ลากข้อความใน Text Block สีแดงออก ลากไปปล่อยในถังด้านขวา 

ดูที่ Palette ด้านซ้าย จะเห็นว่าที่ Blocks ส่วน Screen มี Button, Label1, TextBox1 ตามที่ใส่ไว้ในหน้า Designer 

คลิกที่ TextBox1 และเลือก TextBox1.Text ที่ช่อง Viewer ต่อกับ call.TextToSpeech.Speak ตรงส่วนของ message

หน้าต่างแรกในการออกแบบ App inventor

                             1. Palette  2. Viewer  3. Components  4. Properties  5. Media                               

Palette กลุ่มของเครื่องมือต่างๆที่ใช้พัฒนาโปรแกรม

Basic เป็นเครื่องมือพื้นฐานที่ส่วนใหญ่ใช้งานเป็นประจำ 

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

Animation เป็นเครื่องมือที่ใช้จัดการกับภาพเคลื่อนไหวอนิเมชั่น

Social เป็นเครื่องมือที่ใช้งานด้านการติดต่อสื่อสาร แสดงรายชื่อ, อีเมล์, เบอร์โทรศัพท์ เป็นต้น

Sensors เป็นหมวดของเครื่องมือที่ใช้ในการตรวจจับการทำงานในรูปแบบต่างๆ

ใช้ในการตรวจวัดความเร่ง ความเอียง การตรวจจับตำแหน่งที่ตั้ง 

เครื่องมือเหล่านี้เป็นเครื่องมือที่มีอยู่ใน Smartphone รุ่นใหม่ๆเกือบทุกรุ่นและรองรับระบบปฏิบัติการแอนดรอยด์

Screen Arrangement เป็นเครื่องมือที่ใช้เกี่ยวกับการวางตำแหน่งของเครื่องมือต่างๆ 

ซึ่งจะช่วยให้การจัดการกับแอพพลิเคชั่น รวมถึงการเขียนโปรแกรมทำได้ง่ายขึ้น

เครื่องมือที่ใช้ออกแบบมาเพื่อใช้พัฒนาแอพพลิเคชั่นบนอุปกรณ์ชิ้นต่อของ LEGO

เครื่องมือที่แบ่งการทำงานเป็นหลายรูปแบบ ยกตัวอย่างเช่น Notifier ใช้ตรวจสอบการทำงานของโปรแกรม แสดงข้อความผิดพลาดของการทำงาน, Speech Recognizer การวิเคราะห์เสียงพูดเพื่อเปลี่ยให้เป็นข้อความ, Text To Speech เปลี่ยนข้อความให้แสดงผลออกมาเป็นเสียงพูด