Loading the lesson
Loading the lesson
Search AllRounder.ai
Search the courses, subjects, tracks, games and features, or jump straight to a page.
Search the courses, subjects, tracks, games and features, or jump straight to a page.
a free, browser-based tool from MIT for building mobile apps by joining blocks instead of typing code.
the Designer view lays out the screen; the Blocks view holds the logic that makes it work.
the parts of a screen, such as TextBox, Button and Label, each with properties you can change.
blocks such as "when Button1.Click" that run only when the user does something.
the MIT AI2 Companion app runs your project on a real phone while you build it.
This worked example takes you through building a simple calculator app in MIT App Inventor, from opening the tool in a browser to testing the finished app on a phone.
The five sub-lessons turn the general steps of app development into a real project. You open MIT App Inventor and sign in with a Google account, start a new project called CalculatorApp, plan and design the screen, add logic with blocks so the app calculates when a button is tapped, and finally test the app live on a phone with the MIT AI2 Companion app. Following one small app from start to finish shows how planning, design, coding and testing fit together.
This example applies the steps of app development to one small, useful app: a calculator that adds, subtracts, multiplies and divides two numbers. Each sub-lesson covers one step.
Step 1: Open MIT App Inventor. MIT App Inventor is a free, block-based tool for making mobile apps, mainly for Android phones. It runs in a web browser at ai2.appinventor.mit.edu, so nothing needs to be installed. You sign in with a Google account, which also lets the tool save your projects online.
Step 2: Start a New Project. After signing in, you choose "Start New Project" and give the project a name. The example uses the name CalculatorApp: a single word, because project names cannot contain spaces. A clear name tells you at once what the project is and helps you organise your work as you make more apps.
Step 3: Design the Interface. Before building, you sketch a wireframe, a simple drawing of where each item will sit on the screen, and think about how the user will move through the app. For the calculator, that means planning where the boxes for the two numbers, the buttons for +, −, × and ÷, and the label that shows the answer will go. In App Inventor this layout is built in the Designer view by dragging components onto the screen.
Step 4: Add Logic with Blocks. Next you switch to the Blocks view and snap together blocks that tell the app what to do. Event blocks such as "when Button1.Click" run when the user taps a button. In the calculator, tapping "+" takes the numbers the user typed, adds them, and shows the result on the screen. This is where the app's behaviour is decided, using the same ideas of input, processing and output met in programming.
Step 5: Test on Phone. Finally, you install the MIT AI2 Companion app on a phone and connect it to your project. The app then runs on the phone in real time, and changes you make in App Inventor appear straight away. Testing every button, and trying unusual inputs, helps you find and fix bugs before you share the app.
By the end of the example you have used every stage of the development process on a real app, and you can reuse the same pattern for your own ideas.