MIT App Inventor is one of the most powerful and beginner-friendly tools for building mobile applications.
It is especially useful for ICT Club students because it allows you to create real mobile apps without typing complex programming code.
Instead of typing code, you use visual blocks that you drag and connect like puzzle pieces.
This lesson helps you understand how App Inventor works, especially how mobile apps respond to user actions using event-driven programming.
Understanding this lesson will help you build real innovation apps for your school, community, and national competitions.
WHAT IS EVENT-DRIVEN PROGRAMMING?
Mobile apps work differently from simple computer programs.
Normal programs run from top to bottom automatically.
But mobile apps wait for the user to do something.
This is called Event-Driven Programming.
Meaning of Event-Driven Programming
Event-Driven Programming is a programming method where code runs only when a specific event happens.
An event is any action or change that happens in the app.
The app waits for events and responds to them.
What is an Event?
An event is something that happens in the app.
Examples of events include:
When a button is clicked
When the screen is touched
When text is entered
When the phone is rotated
When a picture is taken
The event triggers code to run.
What is an Event Handler?
An Event Handler is the code that runs when an event happens.
It tells the app what to do.
Example:
Event: Button clicked
Event Handler: Open another screen
Real-Life Examples of Event-Driven Programming
Example 1: Opening an App
Event: User clicks WhatsApp icon
Result: WhatsApp opens
Example 2: Sending SMS
Event: User clicks Send
Result: Message is sent
Example 3: Login
Event: User enters password
Result: App checks password
Example 4: Taking Picture
Event: User clicks camera button
Result: Camera opens
THE TWO MAIN WINDOWS IN APP INVENTOR
MIT App Inventor has two main working areas.
These are:
Designer Window
Blocks Editor Window
Each has a special role.
PART 1: DESIGNER WINDOW
The Designer Window is where you design how your app looks.
This is called the User Interface.
What is User Interface?
User Interface means everything the user sees and interacts with.
Examples include:
Buttons
Text boxes
Images
Labels
Screens
This is the visual part of the app.
PARTS OF THE DESIGNER WINDOW
1. Palette
The Palette contains components.
Components are tools you use to build your app.
Examples:
Buttons
Labels
Camera
Sound
You drag components from the Palette to the Viewer.
2. Viewer
The Viewer is the phone screen area.
It shows how your app will look.
You place components here.
3. Components List
This shows all components in your app.
It helps you manage and select components.
4. Properties Panel
This allows you to change component settings.
Example:
Change color
Change text
Change size
5. Non-Visible Components
These components work behind the scenes.
Examples:
Camera
Sound
Text-to-Speech
They do not appear on the screen.
But they perform actions.
PART 2: BLOCKS EDITOR WINDOW
This is where you program your app.
You add logic using blocks.
Blocks are like puzzle pieces.
Follow the video tutorial below
and follow Dave’s instructions in the video below.
PARTS OF BLOCKS EDITOR
1. Blocks Palette
Contains different coding blocks.
Examples:
Logic blocks
Math blocks
Text blocks
2. Workspace
This is where you connect blocks.
This is where your program is built.
3. Component Blocks
Each component has its own blocks.
Example:
Button has click block.
Camera has take picture block.
EVENT HANDLER BLOCKS
Event handler blocks run when events happen.
They are gold in color.
Example:
When Button1.Click
This means:
When Button1 is clicked, do something.
Other Examples of Event Handlers
Screen Orientation Changed
Event:
Phone rotated
Action:
Change layout
Slider Changed
Event:
Slider moved
Action:
Change value
Example:
Increase volume
FUNCTIONS IN APP INVENTOR
Functions perform actions.
They are purple blocks.
They are also called procedures.
Functions allow apps to do work.
Examples of Functions
TextToSpeech.Speak
Makes phone speak.
Example:
Phone says:
Welcome to ICT Club
Camera.TakePicture
Opens camera.
Takes picture.
Sound.Play
Plays sound.
SETTERS AND GETTERS
These control component properties.
They are green blocks.
Getter Blocks
Getter blocks get information.
Example:
Get Button text
Setter Blocks
Setter blocks change information.
Example:
Set Label text to “Hello”
Example
Set Label1.Text to “Welcome”
Result:
Label displays Welcome
DATA BLOCKS
Data blocks store information.
These include:
Numbers
Text
Boolean
Numbers
Example:
10
50
100
Used for calculations.
Text
Example:
Hello
Welcome
Used for messages.
Boolean
Boolean has two values:
True
False
Used for decision making.
PRACTICAL EXAMPLE: SOUNDBOARD APP
In Soundboard App:
Event:
User clicks image
Action:
Sound plays
This uses:
Event handler
Function
ADVANCED CHALLENGE EXAMPLE
Event:
User clicks picture
Action:
Background color changes
This uses:
Setter block
Math block
HOW APP INVENTOR HELPS ICT CLUB STUDENTS
ICT Club students can use App Inventor to build apps like:
School learning apps
Revision apps
Attendance apps
Health apps
Agriculture apps
Example: School Attendance App
Event:
Student clicks Check-In
Action:
Record attendance
Example: Farming App
Event:
Farmer clicks Diagnose
Action:
Show crop disease
REFLECTION QUESTIONS
Think and discuss:
What components will your app need?
Examples:
Buttons
Camera
Text
What events will happen?
Examples:
Button click
Text entry
What actions will happen?
Examples:
Show message
Open screen
KEY TERMS SUMMARY
- User Interface
- Visual part of app
- Designer
- Where app is designed
- Blocks Editor
- Where coding happens
- Event
- User action
- Event Handler
- Code that responds
- Event-Driven Programming
- Programming based on events
- Function
- Code that performs action
FINAL SUMMARY
MIT App Inventor allows students to build mobile apps using visual blocks.
Mobile apps work using events.
Event handlers tell the app what to do.
Designer window builds the visual part.
Blocks editor builds the logic.
Using App Inventor, ICT Club students can build real innovation apps.
This is the foundation of becoming a software developer.
ADDITIONAL RESOURCES
Check out more of Dave Wolber’s App Inventor beginner tutorials at appinventor.org