MIT App Inventor is a free cloud service that lets you build your mobile apps using a block-based programming language. It has more than 8.2 million customers in 195 countries around the world.
The app inventor offers four different tutorials for beginners and features a massive collection of application creation guides. It also has a section dedicated to providing resources and curriculum ideas for teachers using MIT App Inventor. This section explains what you may require and what you (IT) people need to know before setting up the application for your school. Community Forum, MIT App Inventor Tutorials Page, App Building Guides, Artificial Intelligence with App Inventor, Internet of Things with App Inventor and Links to other App Inventor Resources.
This article will provide a user-friendly step-by-step guide for creating your mobile apps using MIT App Inventor and help you learn the basics of programming applications for Android devices.
In this tutorial, we will guide you in making your very first app: Hello Codi!
To begin making apps, click on the orange “Create Apps!” button on the app inventor. Set up your phone or tablet for live testing. Do check the setup instructions. (Or, start the emulator if you don’t have a mobile device.)
You can access MIT App Inventor through a web browser (Chrome, Firefox, Safari). Also, check the system requirements in advance. Take a walkthrough of the App Inventor environment i.e., learn about the designer and blocks editor.
Next, open Designer or Blocks Editor in your browser, Android device or an Android emulator connected to the Blocks Editor. Choose 'Start a New Project' from the Projects menu and name it Hello Codi.
Hello Codi is an easy-to-build application that could be created in no time. First of all, you need to create a button with a picture of the Codi bee over it, and then program the button so when users click the phone; it makes a buzzing sound.
To create the Hello Codi app, find and upload the Codi the Bee image file.
Next, go to the Designer window under the title Palette at the left of the App Inventor. It includes the Components, the essential elements to use to make applications on the Android phone. Some components are straightforward, such as a Label component that shows text on the screen or a button that is typed to initiate an action. Other components are more detailed: a Canvas drawing that can hold still images or animations and an Accelerometer sensor that operates like a Wii controller. It detects motions like moving or shaking the phone; also, components that send text messages, play music and video or get information from Web sites, and so on.
To use a component, click and drag it to the viewer at the centre of the Designer. So, when you add a component to the viewer (see #1 below), it is also shown in the list of components on the right side of the Viewer.
They (see #2 below) have adjustable properties. These properties modify the way the component is displayed or behaved in the application. To view and modify a component's properties (see #3 below). You first need to select the required component from your component list.
How to select components and set properties?
As previously mentioned, the application will have a Button component displaying the image of the bee inserted by you. This is accomplished by:
Step 1(a). Navigate to the User Interface palette, drag and drop the Button component on screen 1 (refer to section 1 below).
Step 1(b). To place the image of the bee on the button, go to the Properties tab; under Image, click on the text "None" and then click "Upload File..." (refer to #2, below).
A new window will appear, select the picture file, click "Browse", then browse to the location of the codi.jpg file you uploaded earlier (see #3 below).
Click on the codi.jpg file, click on "Open", then click on "OK".
Step 2. Change the Button's Text property:
At first, delete "Text for Button1"; leave the Button's text property blank to make sure there is no writing over the bee image.
Step 3. In the User Interface palette, drag and drop the label component into the viewer (see #1), place it under the bee image. It will show up under your component list under Label1.
For more beautification, go to the Properties tab, modify:
- Text property of Label1 lecture "Touch the Bee". You can change the colour, font style and size.
- Font Size to 30.
- Background Color of Label1.Click on the box and choose the desired colour. You may change it to any colour.
Note: Ensure that the background and text colours are not the same. It can complicate the reading of the text.
Look at the image; for example, the background colour is set to aqua, and the text colour is set to blue, making it easier to read.
Step 4. Under the Palette pane, click on Media and choose a Sound component and place it in the viewer (refer to #1). Wherever you drop the sound, it will appear in the area at the bottom of the viewer marked Non-visible components.
Then, Underneath the Media pane, Click Upload File... (refer to #2), browse to the location of the Bee-Sound.mp3 file and upload it to this project (refer to #3).
Under the Properties, see that the Source property indicates None. Click the word None to change the Sound1 component's Source to Bee-Sound.mp3 (refer to #4).
Programming with the Blocks Editor
Now that you have completed the initial steps, you are ready to start programming the app behaviour. For that, you have to go to the Blocks editor. Click the Blocks button, available on the top right of your screen to access the Blocks Editor.
Next step, play audio:
Step 1. Press button 1 on the left side of the Block Editor to open it. Slide the when Button1. Click block in the work area.
The highlighted mustard yellow blocks are known as an event handler. These blocks specify how the mobile device should respond to certain events: a button has been pressed, the phone is shaken, the user is dragging her finger over a canvas, etc.
Step 2 (a). Then tap on the Sound1 option and drag Sound1 Play the block and connect it to the section of Button1.Click block. This will connect the blocks as puzzle parts, and you can hear a click sound when they connect.
The purple blocks you see here are command blocks; they specify an action to be performed when the event is triggered. These are placed in the body of event handlers. So, when an event handler is executed, it runs the sequence of commands in its body.
These blocks should look like the following:
Now you can see that the command block is in the event handler. This set of blocks means; "when you press Button 1, Sound1 will play."
Try this on your device or using the emulator! When you press the button, you should hear the beehive ringing.
Now you have your first application running!
Note: There may be issues with the Sound component on specific devices. If you see an "OS Error" and the sound does not play - or is significantly delayed in playing, go back into the Designer and try using a Player component (found under Media) instead of the Sound component.
Packaging your app
Now the packaging for your application.
While your device/emulator is connected to App Inventor, your application works in real-time on your device. Disconnecting the block editor emulator/device will cause the application to disappear. However, you can reconnect it every time you lose the connection. To continue running your application without being connected to App Inventor, you need to "Package" the application to generate (.apk file) an application package.
You can do two things:
- App (provide QR code):
You can use it to generate a Barcode (a QR Code); it will let you install the app on a mobile device with a camera and supports a QR/barcode scanner, for example, ZXing barcode scanner (freely available in Google Play).
Note: The bar code is only in operation for two hours. To share the app with others via QR/ barcode over a long period, you will have to download the .apk file to your PC and use third-party software to convert the file into a barcode.
- App (save to my computer):
You may download the application on your computer as a . apk, which you can distribute and share in any way you want by manually installing it on other devices. (it is also known as "side loading").
Now scan the sample application on your phone.
Scan the following barcode on your phone to set up and run the sample application.
Or download the apk. You have a ready-to-use application.
Here is a quick video tutorial to help you set up a talking app. The tutorial consists of two parts:
TalkToMe: A beginner App Inventor app (PART 1)
TalkToMe: A beginner App Inventor app (PART 2)
For a detailed explanation, click here.
This video tutorial will help you learn about the animation in App Inventor by making a Ball (a sprite) bounce around on the screen (on a Canvas):
For a detailed explanation, click here.
The following tutorial, we will show you how to create a drawing app on MIT app inventor. The tutorial will help doodle on the screen as you drag your fingers around.
For a detailed explanation, click here,
To dive deep into the app creation facilities provided by MIT App inventor, click here.