Pyversity Beginner's Tutorial

Build Your First App with
MIT App Inventor

No coding experience needed. Go from zero to a working Android app in under an hour — completely free.

Free & browser-based No downloads needed Android compatible Drag-and-drop blocks
1

What is MIT App Inventor?

MIT App Inventor is a free, web-based platform created by MIT that lets you build real Android apps using a visual, drag-and-drop interface — no prior coding knowledge required.

Instead of writing lines of code, you snap together colourful puzzle-piece "blocks" to define how your app behaves — just like Scratch or Lego for apps.

💡

Why App Inventor? It's used by millions of beginners worldwide, taught in schools and universities, and lets you publish real apps to Android devices. Perfect starting point before moving to professional tools.

Everything runs in your browser. You only need a Google account to get started.

2

Sign In to App Inventor

Head to appinventor.mit.edu and click the big orange "Create Apps!" button. You'll be asked to sign in with your Google account — this is free and takes less than a minute.

🔒 appinventor.mit.edu
MIT APP INVENTOR
Imagine. Program. Share.
🚀 Create Apps!
Powered by Google — sign in with your Gmail account
3

Create a New Project

Once logged in, you'll see the My Projects dashboard. This is your home screen where all your apps live.

🔒 ai2.appinventor.mit.edu
MIT App Inventor 2 ▾ Projects ▾ Connect ▾ Build yourname@gmail.com
+ New Project
Import Project (.aia)
Name Created Modified
HelloWorld Apr 1, 2025 Apr 1, 2025
MyQuizApp Mar 15, 2025 Mar 20, 2025
4

The Designer — Building Your Screen

The Designer is where you build the visual layout of your app. Think of it like arranging furniture in a room. There are four panels:

🔒 ai2.appinventor.mit.edu – Designer View
📦 Palette
User Interface
🔘 Button
🏷️ Label
✏️ TextBox
🖼️ Image
Media
🔊 Sound
📷 Camera
📱 Viewer (Phone Preview)
Hello, World!
Click Me
Result will appear here
← Drag components here
⚙️ Properties
Button1
📦 Palette
All the UI components you can use: buttons, labels, images, text boxes, etc.
📱 Viewer
A live phone preview. Drag components here to place them on your screen.
🗂️ Components
A tree list of everything you've added to your app.
⚙️ Properties
Change appearance: colour, font, size, visibility of the selected component.
🎯

Try this: Drag a Button and a Label from the Palette onto the Viewer. In Properties, change the Button's Text to "Say Hello". You've built your first screen!

5

The Blocks Editor — Making It Work

The Blocks Editor is where you add behaviour to your app. Click the "Blocks" button in the top-right to switch to it. Here, you connect colourful blocks together like puzzle pieces to define your app's logic.

🔒 ai2.appinventor.mit.edu – Blocks View
Blocks
Button1
Label1
Control
Math
Text
<-- Drag blocks from the left panel to here -->
⚡ when Button1.Click
← This runs when button is tapped
do Label1 ▸ set Text
to
" Hello, World! 🎉 "
← This value is set on the label

The example above shows a simple program: when the button is clicked → set the Label's text to "Hello, World! 🎉". That's real, working app logic — no typing required!

🧩

Block colours tell you the type: Orange = Events (triggers), Blue = Actions (do something), Purple = Set values, Green = Text/Data. Blocks only connect if they're compatible — the shape must match.

6

Test Your App on a Real Device

You don't need to build and install an APK every time you want to test. App Inventor has a live testing feature using the MIT AI2 Companion app — changes you make instantly appear on your phone!

📱

MIT AI2 Companion App

Install this free app from the Google Play Store on your Android phone.

📶

Same Wi-Fi Network

Make sure your phone and computer are on the same Wi-Fi connection.

📷

Scan QR Code

In App Inventor go to Connect → AI Companion and scan the QR code shown.

// Steps in App Inventor menu:
Connect → AI Companion
→ A QR code and 6-digit code appear
→ Open MIT AI2 Companion on your phone
→ Tap "Scan QR Code" → your app loads live! ✅
💻

No Android phone? Use the built-in emulator: Connect → Emulator. It opens a virtual phone right in your browser (may be slower).

7

Build & Share Your APK

Ready to share your app with friends? App Inventor can package your project into an .apk file — a real Android app file that anyone can install.

⚠️

Note: App Inventor currently supports Android only. iOS export is not available. To publish on the Google Play Store, you'd export to Android Studio — but that's a next step for later!

8

What Should You Build First?

Now that you know the basics, here are some great beginner project ideas to practise your skills — ordered from easiest to slightly more challenging:

👋

Hello World Button

Button that changes a label's text when tapped. Classic first project.

🎲

Dice Roller

Shake or tap to generate a random number 1–6. Uses the Accelerometer.

🎨

Paint App

Draw on a canvas with your finger. App Inventor's tutorial "PaintPot" covers this.

🔢

Calculator

Add, subtract, multiply. Great practice for variables and math blocks.

🌍

Language Translator

Uses the built-in Yandex Translate component. Very few blocks needed!

📍

Location Tracker

Show your GPS coordinates. Uses the LocationSensor component.

Ready to Start Building?

Everything you need is free and ready right now. Open App Inventor and build your first app today — it only takes minutes!

🚀 Open MIT App Inventor