MIT App Inventor — Complete Beginner Guide
Before you start your team project, you need to understand what MIT App Inventor is and how it works. This page covers everything from scratch — no coding experience needed.
1What is MIT App Inventor?
MIT App Inventor is a visual programming platform created by the Massachusetts Institute of Technology (MIT). It allows anyone to build fully functional Android apps by dragging and dropping blocks instead of writing code.
🧠 Think of it like this:
Imagine building with LEGO bricks. Each brick has a specific job — one is a button, another is a text box, another plays a sound. You snap them together to create something amazing. MIT App Inventor works exactly the same way, but instead of physical bricks, you use visual blocks on a screen.
Why MIT App Inventor?
- ▹ No coding required — You build logic using visual puzzle blocks
- ▹ Instant results — Test your app on your phone in real-time
- ▹ Free forever — No subscriptions, no licenses
- ▹ Real apps — You can actually install and share what you build
- ▹ Backed by MIT — Used by millions of students worldwide
2Setting Up Your Account
Open the Website
Go to ai2.appinventor.mit.edu in your browser (Chrome or Firefox recommended).
Sign In with Google
Click "Create Apps!" and sign in using your Google account. This is how MIT App Inventor saves your projects.
Create a New Project
Click "Start new project" from the Projects menu. Give it a name (e.g., "MyFirstApp"). No spaces allowed in project names!
💡 Pro Tip
Use your team name in the project name so it is easy to find later. Example: Team1_MatrixCalc
3The Two Screens — Designer & Blocks
MIT App Inventor has two main views. Understanding this is the most important concept before you start building.
🎨 Designer View
This is where you design the User Interface (UI) — what your app looks like. You drag and drop components like buttons, text boxes, labels, and images onto a phone screen preview.
- • Palette (left) → Components to drag
- • Viewer (center) → Phone preview
- • Components (right) → List of added items
- • Properties (far right) → Customize each item
🧩 Blocks View
This is where you define the Logic — what your app does. You connect puzzle-like blocks to create behavior: "When button is clicked → do this calculation → show the result."
- • Built-in category → Math, Text, Logic blocks
- • Component blocks → Button, Label actions
- • Variables → Store and retrieve data
- • Procedures → Reusable logic functions
⚠️ Common Mistake
Students often forget to switch between Designer and Blocks view. If you cannot see your buttons or labels in the Blocks view, it means you have not added them in the Designer view first. Always design first, then add logic.
4Core Components You Will Use
Here are the most important components. You will use most of these in your team project.
ButtonA clickable button. Users tap it to trigger actions.
Examples: "Calculate", "Clear", "Submit"
LabelDisplays text on the screen. Cannot be edited by users.
Examples: Showing results, titles, instructions
TextBoxAn input box where users type text or numbers.
Examples: Entering matrix values, physics measurements
HorizontalArrangementPlaces components side by side in a row.
Examples: Putting 3 text boxes next to each other for a matrix row
VerticalArrangementStacks components on top of each other.
Examples: Organizing input fields and result labels
NotifierShows pop-up messages, alerts, or error messages.
Examples: "Invalid input!" or "Calculation complete!"
ListViewA scrollable list of items.
Examples: Showing a list of physics constants
CanvasA drawing surface where you can draw shapes and animations.
Examples: Plotting graphs, drawing vectors
SliderA draggable slider that returns a number value.
Examples: Adjusting angle in projectile motion
TinyDBStores data locally on the phone even after app closes.
Examples: Saving previous calculation history
5Understanding Blocks (Logic)
Blocks are color-coded puzzle pieces. Here are the main types you need to know:
🟡 Event Blocks (Gold/Yellow)
These start everything. They say "When something happens..."
When Button1.Click → do ...🟣 Control Blocks (Purple)
Decision making blocks. If-then-else, loops, and conditionals.
if (number > 0) then → show "Positive" else → show "Negative"🔵 Math Blocks (Blue)
Perform calculations: add, subtract, multiply, divide, square root, power, trigonometry.
set result to (number1 × number2) + number3🟠 Variable Blocks (Orange)
Create containers to store values. Like a box with a label you can put numbers or text into.
initialize global "result" to 0 → later: set global "result" to 42🟢 Text Blocks (Green)
Work with text: join strings, compare text, convert numbers to text for display.
join "Result: " + (text of result) → "Result: 42"🔴 List Blocks (Red)
Store multiple values in one container. Essential for matrices, datasets, and collections.
create list [1, 2, 3] → select item 2 from list → returns "2"6Testing Your App
You can test your app in three ways:
📱 MIT AI2 Companion (Best Method)
Install the "MIT AI2 Companion" app from the Google Play Store on your Android phone. Then in App Inventor, click Connect → AI Companion. Scan the QR code with the app. Your app will appear on your phone in real-time. Every change you make updates instantly!
💻 Emulator
Click Connect → Emulator. This runs a virtual Android phone on your computer screen. Useful if you do not have an Android phone.
📦 Build APK
Click Build → App (provide QR code for .apk). This creates a real installable file. Scan the QR code to download and install on your phone. This is what you will do for your final presentation!
💡 Recommended Workflow
Use the AI Companion method during development. It is the fastest and you can see changes instantly. Only build the APK when you are done and ready to present.
7Key Concepts for Your Projects
📋 Working with Lists (Critical for Math & Physics apps)
Lists are like arrays in programming. They store multiple values. For example, a 3×3 matrix can be stored as a list of 9 numbers. A physics dataset can be stored as a list of measurements.
// Creating a list
make a list → [1, 4, 7, 2, 5, 8, 3, 6, 9]
// Getting the 5th item
select list item → list, index 5 → returns 5
// Replacing the 3rd item
replace list item → list, index 3, replacement 99
🔄 Procedures (Reusable Functions)
If you need to do the same calculation multiple times, create a procedure. It is like a mini-program inside your program. You define it once and call it whenever you need.
// Define a procedure
to calculate_determinant (a, b, c, d)
result = (a × d) - (b × c)
return result
// Use it anywhere
set Label1.Text to call calculate_determinant(3, 1, 2, 4)
⌨️ Getting Number Input from Users
When users type in a TextBox, the value is always text (a string). To do math with it, you must convert it to a number first.
// WRONG (treats as text)
"5" + "3" = "53" ← joined as text!
// CORRECT (convert to number first)
number("5") + number("3") = 8 ← math!
⚠️ Always validate input! If a user leaves a TextBox empty and you try to convert it to a number, the app will crash. Use anif TextBox.Text is not empty check before any calculation.
Ready to Build?
Now that you know the basics, head to your batch page and find your team project!