Introduction to MIT App Inventor

Technology and Livelihood 10

AY 2022 - 2023
 MIT App Inventor
• is an intuitive, visual programming environment that
allows everyone – even children – to build fully functional
apps for Android and iOS smartphones and tablets. 
• free, cloud-based service that allows you to make your
own mobile apps using a blocks based programming
language
 Setting up MIT App Inventor
Materials Needed

• What you need:

- laptop/desktop computer
- smartphone/tablet device (Android/iOS)
- wireless internet connection
 Starting MIT App Inventor
• In your laptop, open https://appinventor.mit.edu/.
• Click Create Apps!
Familiarizing the MIT App Inventor IDE/ environment
Designer and Blocks Editor

• The App Inventor consists of the:

o Designer – design the App’s User Interface (UI) by

arranging both on- and off-screen components.
o Blocks Editor – program the App’s behavior by
putting blocks together.
Working on MIT App Inventor Designer Window
Android Phone
- allows to test your
work as you build

App Invertor Blocks Editor

- where you assemble program
App Invertor Designer blocks that specify how the
- where you select the components should behave
components for your app
APP Inventor Designer IDE
MIT App Blocks IDE
Setting up MIT App Inventor
Live Testing

Live Testing
- to see your App on a device (Android/iOS) while you build it.
Setting up MIT App Inventor
Live Testing Procedure
Steps to Follow for Live Testing
1. Install the MIT AI2 Companion App on your cellphone.
Setting up MIT App Inventor
Live Testing Procedure
Steps to Follow for Live Testing
2. Connect both your computer (laptop/desktop) and
your device (Android/iOS) to the same WIFI network.
App Inventor will automatically show you the app you are building, but
only if your computer (running App Inventor) and your device (running
the Companion) are connected to the same WiFi Network.
Setting up MIT App Inventor
Live Testing Procedure
Steps to Follow for Live Testing
3. Open an App Inventor project and connect it to your
laptop.
– Go to App Inventor and open a project (or create a
new one – use Project > Start New Project and give
your project a name).
Setting up MIT App Inventor
Live Testing Procedure
Steps to Follow for Live Testing
4. Then Choose “Connect” and “AI Companion” from
the top menu in the AI2 browser.
Setting up MIT App Inventor
Live Testing Procedure
Steps to Follow for Live Testing
5. Open an App Inventor project and connect it
to your device.
– A dialog with a QR code will appear on your PC
screen. On your cellphone, launch the MIT App
Companion app just as you would do any app.
Then click the “Scan QR code” button on the
Companion, and scan the code in the App Inventor
window.
 References:
MIT App Inventor. Massachusetts Institute of Technology (2012).
Retrieved 31 August 2021, from https://appinventor.mit.edu/

Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)

This work is licensed under a

Creative Commons Attribution-ShareAlike 4.0 International License.