Create a Hello World Android App in App Inventor #tt21

Tinkerer: Lory Livezey

App Inventor is an open source platform for creating Android, and soon to be IOS mobile applications. Without having to write a single line of code, it teaches basic programming constructs, like if/then and loops. It's ideal for the classroom, and powerful enough to write some really sophisticated apps.


Objectives

You'll learn how to:

  • Create a button that populates a label in App Inventor
  • Test a program on the Android Device using AI Companion

Previous Step

  Connect the Bluetooth HC-06 Module to the Arduino #tt20

If you are using an Amazon Kindle, you will need to follow this tutorial first:   Test MIT App Inventor on the Amazon Kindle #tt24


Starter Breakpoint

We will be starting from scratch!


Summary

In this tutorial, we're going to create that cliche, simple to learn Hello World application.


Using App Inventor Web Site

App Inventor runs in a browser, so you can use it on any platform -- Windows, Mac, Linux, or Raspberry Pi.

Browse to the App Inventor Web Site, and click "Create Apps".

You'll use a Google to sign in, so if you don't have one, create one.

Once you get past all of the screens, click "Start New Project" and then give it a name. I'll call it "HelloWorld". Click on it to go into the design canvas.


Design View

Drag a button over to the canvas:

Drag the button to the canvas

Rename it "Say Hello" by clicking on it in the components window and clicking "Rename":

Rename the button to Say Hello

Renaming the button will change what we call it, but it doesn't change the "display text". Change the display text on the button to "Say Hello":

Change the button display text

Drag a label over, and rename it to HelloLabel. Change the display text to blank.

Create a label rename and set text to blank


Blocks View

Next, go into Blocks view. Click on the Say Hello button and you'll see all of the events that are available. Select the When-Click-do block and drag it over.

Drag the when click do block onto the canvas

When we click the button, we want to display "Hello World" in the label. Click the Label, and drag the "Set HelloLabel Text to" block over and snap it into the Do. Then click Text, and drag the blank text block over. Type "Hello World" in it.

Type Hello World

That's our hello world app, so now let's test it on our Android device.


AI2 Companion

Search the Google Play store for MIT AI2 Companion, and install it.

Install AI2 Companion on Android

Go back to the app, and click "Connect" and "AI Companion".

Connect to AI Companion

It will give you a QR code, that you can either type into your device or scan.

QR Code

On the Android:

Type QR Code into Device

Once you do this, the app should pop up.

Click the button, and there's our Hello World.

Hello World

In this module, we learned how to create a very basic Hello World app in App Inventor, and test it on our Android Device. This is only the beginning, so please subscribe to my Youtube Channel and visit the site often!


Finish Breakpoint

This file can be uploaded into App Inventor:


Next Up

Creating a Bluetooth Android App using App Inventor #tt22

Be sure to subscribe to our channel!