Go to http://appinventor.mit.edu/

Click on Invent. You will have to sign in with a google account. If you do not have one you will need to create one.

MIT APP INVENTOR INTERFACE:

The Designer: The Designer is split into four regions -

  • the Palette where you pick the components you want to use to build the UI. The Palette is divided into sections according to the type of component. For our example we only need to explore the Basic tab.
  • the Viewer which represents the screen of the phone and is used to layout the components of the UI
  • the Components pane which shows you a different view of the components that you have placed on the viewer - why you need a different view will become all too clear later on.
  • the Properties pane which lists all of the settings for the currently selected component. You use this to customize each component.

First button and textbox

Step 1.

Place a button and a TextBox on the Viewer.

click and hold on the buttoniconand drag it to the viewer and release the button. Repeat for textbox.

The components will arrange themselves on the screen. There are ways that you can control the layout but for the moment let's concentrate on getting the example working.

Step 2

Select the Button object in the viewer and look at the Properties panel. You will see the properties of the button object. To change any of these simply type or select a new value.

Step 3

Change the Button's text. Scroll down until you find the Text property and enter into the box below - Click Me. The Button now says "Click Me"

The Blocks Editor – From the design click on

Step 4:

Open the Blocks Editor.

Blocks Editor is the place your app gets its functionality. This is the place where you "write" the program.

The first problem with using the Blocks Editor is that it runs as a desktop app but it needs a download each time you run it. When you click on the "Open the Blocks Editor" button aJavadownloadis initiated. You may well discover that your browse or operating system pops up messages saying its dangerous to download programs and other similar warnings. Ignore them all and when given any choices make sure you select Open or Run rather than Save.

The download has toexecutefor you to see the Blocks Editor.

Eventually is should open and you should see something like:

The Blocks palette has three tabs –

Built-In, My Blocks and Advanced.

Step 5: Select MyBlocks to view your components.

In general you will always find that a UI component has:

  • a set of green event blocks
  • a set of blue action blocks
  • a set of purple value blocks.

Step 6: Drag the Button1.Click into the Block editor.

Step 7: What we would like to do is to set the TextBox's content to say "Hello World" when the button is clicked. Drag the setTextBox1.Text into the Button1Click.

Step 8: using Built-in blocks (predefined methods)

Select Text and drag the block that appears to the clump and connect it with the To socket. Set to “Hello World” FINISHED.

Step 9: CONNECTING TO A DEVICE.

You can run the program on a real Android device connected to the machine you are working on via a USB cable or you can use theemulator.

To run your program on the emulator simply click the "New emulator" button:

It is important that you wait until the emulator is showing the usual welcome screen before you try to useit.

If you have never used an Android before you start it off by dragging the green padlock symbol to the right of the screen.)

All you have to do to see yourapplicationin action is to click the Connect to Device button. When you do this you will see a list of devices that you can select to install your program on. If you have any real Android devices connected these will be in the list as well as the emulator.

If you now select the emulator your app will be downloaded to the emulator and all you have to do is run it as you would any app installed on an Android device.

Notice that it takes time to download even a program this simple - be patient.

The deviceiconat the top of the screen shows yellow and an arrow while the app is downloading

and a steady green when the download has completed:

Once the download is complete you can move to the emulator and unlock it as if it was a real phone and you should see your app ready to use

In this case it isn't very exciting but it is the start of something very exciting. Click the button and see the message appear.

FIRST PROJECT

The image and sound files that you need are in the S Drive Gail Chapman Intermediate Programming Folder.

Hello Kitty Purr - This is very simple but it will teach you how to add an image and a sound. Then you can create your own.

Go to the website and follow the instructions. You can also watch the videos (with headphones!)