How To Build Apps Using MIT App Inventor?

Page 1 of 3

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.

Furthermore, MIT inventor has a support section to help users get answers to their questions and collaborate and contribute section, too.

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.

First way

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).

Like what we do?

The Latest EdTech News To Your Inbox

Follow us: