Appinventor Programming: HelloKitty

Appinventor Environment

  1. Download a kitty image and her sound (contol+click on the link, and choose "Save Link As...").
  2. Log in to your wellesley.edu account.
  3. Connect your phone to a USB port on your computer.
  4. Open appinventor, which is hosted now by MIT, in a new tab or window.
  5. Click "Invent".
  6. Click to "My Projects", which should be empty at this point, since you have no appinventor projects yet.
  7. Click "New".
  8. Name your project HelloKittyYourName. So, my project will be named HelloKittyStellaK
That brings you to the Component Designer of the appinventor environment. At this point, click on Open Blocks Editor, on the top right of the Designer. You may need to answer some questions as the Blocks Editor starts. Do so. If all goes well, you will see a new window, looking like this:

From the Blocks Editor window, under Connect to Device choose the phone. (It appears as a String, starting with "HT" .) At this point you could choose to create a New Emulator and connect to it, instead of a real phone.

If you got to this point with no complains, your computer is set up to run appinventor. Are you ready to start programming your first app?

Working with the Designer

Go back to the Designer window.

Explore what you see:

  1. the Palette on the left of the window: contains all the possible components you can use to build an interface, grouped in categories like Basic, Media, Sensors and more. Today we will components from the three categories just mentioned.
  2. The Viewer, next to the Palette. Here you will see a rough indication of what your app will look like on your phone.
  3. The Components part that lists all the components your current project is using. Starts out with Screen1, which is added automatically when you start a new project. Notice how you can rename or delete a particular component.
  4. The Media part. Here you can upload images and sounds, to be used by the app, as we will do today for the Kitty app.
  5. The Properties part, which show the properties associated with the selected component in the components list. At this point, it shows all the properties associated with the Screen1 component.

Building the Kitty app interface

  1. Under the Components area, in the Basic group, click on Label and drag it into Screen1. Rename it to PetLabel (no spaces in the names of components.) Notice its properties. Change some of them, like the BackgroundColor, FontBold, FontSize, etc.
  2. Notice that those changes are shown on your connected phone right away! This is called live testing.
  3. Add a Button, to Screen1, which will hold the kitty image. Rename it to KittyButton. You may want to delete the text on it. You also want to give it an image, i.e. the kitty image, which will show right on it. To do so, you need to upload the image to the cloud.
  4. Under Media click Upload new... and browse around your file system to locate the kitty.jpg file. Click "Open" and then "OK". Now your image is uploaded on the Cloud, and you can use it as Image on the button. Since you are at it, upload the "meow.mp3" file as well.
  5. The label, together with the kitty image, should show on your phone's screen. Touch the image on the phone's screen. Anything happens?
  6. Add a Sound component to your app. You will find it under Media. Rename it to "MeowSound". Set its Source to the meow.mp3 file.

Working with the Blocks Editor

We use the Blocks Editor to add some behavior to our components. Go to the Blocks Editor Window. Click on My Blocks on the left. You will see five "drawers" there, one for each component in your app, and one for "My Definitions" (ignore this for now).

You want to add some behavior to the kittyButton. You want the button to respond to the user's click. Specifically, when the user clicks on the button, the meow sound should play.

Click on the KittyButton drawer, and then on the KittyButton.Click event. Click the MeowSound drawer, and then the MeowSound.Play method. Connect the two as follows:

Try to "pet" the kitty now. What happens?

Adding a Purr...

We will simulate the kitty purring with the phone's vibration. Can you figure out how to do this?

Can you detect the phone's shaking, and react to it by having the kitty meow? Hint: You need to use the accelerometer sensor to detect the phone moving.

Packaging the app

Your app will be working for as long as your phone is connected to your computer. This is because the app is not installed yet on your phone, it is merely playing on your phone while it is stored in the cloud: Appinventor is a Cloud Computing Tool.

To install the app on your phone, go to the Designer Window, and under Package for Phone choose Download to Connected Phone. This process may take a bit of time, however at the end, you should be able to see your first app installed on your phone, among the rest of the apps there. You can start it, stop it and delete it as you would with any other app.

Sharing the app

In the Designer Window, under Package for Phone choose Download to this Computer. An .apk file will be created. Upload this to a web accessible folder in a server (like the public_html folder in your cs account). Other people can open the app's URL in a browser, on their phone, and download it from there. They need to have their phone's Applications-->Unknown Sources box checked!