App Inventor Workshop

App Inventor 2

URL: ai2.appinventor.mit.edu or appinventor.mit.edu/explore/

CANNOT BE USED ON Microsoft Explorer

App Inventor is a cloud-based tool, which means that you can build apps right in your web browser. This website offers all of the support that you'll need as you learn how to build your own apps. The App Inventor software, or "service" is all on the web. AND—that same computer can display the emulator, live testing (how the app will work and act) or you

can use an Android device.

App inventor Consists of the Designer and the

Blocks Editor

App Inventor Designer

Design the App’s User Interface by arranging both on and off-screen components.

App Inventor Blocks Editor

Program the app’s behavior by putting blocks together.

Resources for App Inventor 2

Three starter apps: Talk to me, Ball Bounce, and Digital Doodle are tutorials available as handouts and as a video. These

beginner tutorials will teach students the basics of programming apps for Android.

App Inventor is free. Teachers get support and tips for using App Inventor.

If YouTube is blocked, see the videos on Vimeo instead of YouTube.

Features that make MIT App Inventor a good learning investment for students includes the variety of programing skills available. The logic of events and actions are typical skills for any programming class.

Samples of the variety of events that App Inventor includes are:

Video Games Camera

Multiple Screen SMS Texting Location Sensor

GPS Clocks and Timers Drawing Canvas

Data Storage Accelerometer

MIT App Inventor has contests, blogs, and support.

The Main Page for App Inventor has information for setting up the computer, creating the app, tutorials, library of helps, special link for teaching, and forums.

I Can Make Money Building Apps!!! Let your club write individual apps to raise money.

Selling personal apps to make money for your club is a great way to get students motivated to be entrepreneurial and keep engaged. This app could

1. Play your favorite audio file and display your favorite picture

2. Invite someone to the Prom

3. Display a motivational image and play a motivational audio file

4. The key is each app is personal to the client. Of course to use the app, the client must be using an Android device.

The resources from MIT App Inventor are easy to use and include many different projects. I especially like the great

stepby-step instructions plus some tutorials include videos.

Samples of MIT App Inventor tutorials include:

Magic 8-ball Mini Golf Where’s My Car

MoleMash Space Invaders Map It

PaintPot Pizza Party with Fusion Tables StockQuotes

Youtube has a number of very good App Inventor tutorials—just make sure you are watching App Inventor 2 tutorials. I especially like the David Wolber tutorials. He has written over 40 tutorials but all of them are not App Inventor 2 videos.

Examples of apps written are:

Parents can track their kids on bus rides home from school. Created by students K-8

Reading Log for Kids, written by high school students

Learn by State-Idaho, app with quizzes and map information about Idaho, written by high school student

App to determine which foods during lunch could impact students with allergiesTime magazine featured an article about middle school students who created an app to encourage more recycling in their community.

Students Featured in TIME For Kids created an app to encourage more recycling in their community.

Eighth-graders in New Hampshire created an app that could navigate the cafeteria. Won the Verizon’s App Challenge

PlayMyFavoriteTune: An app with music and image

Created by Dennis Garner

This step-by-step picture tutorial will guide you through adding music to an app.

To get started, go to App Inventor on the web (will not work with Microsoft Explorer).

Go directly to ai2.appinventor.mit.edu, or click the orange "Create" button from the App Inventor website.

Log in to App Inventor with a gmail (or google) user name and password.

Start a new project.

Name the project "PlayMyFavoriteTune" (no spaces!)

Type in the project name (underscores are allowed, spaces are not) and click OK.

You are now in the Designer, where you layout the “user interface” of your app. This app requires a button to play the music, a picture, the audio file, and the media player functionality. Let’s begin with the button. Make sure a picture and the audio file is available.

Add a Button

Our project needs a button. Click and hold on the word "Button" in the palette. Drag your mouse over to the Viewer. Drop the button and a new button will appear on the Viewer.

Connect App Inventor to your phone for live testing Connect to the on-screen emulator or to your android device. If you are not sure how this is done, refer to tutorial 1 TalkToMePart1.

Select the menu Connect at the top of the screen and select Emulator or AI Companion.

Change the Text on the Button On the properties pane, change the text for the Button. Select the text "Text for Button 1", delete it and type in "Play". Notice that the text on your app's button changes right away.

Change the button name to Play Make sure the Play (command) button is selected in the Viewer. The Play button will have a green bar around it. With the Play button selected, Click on Rename at the bottom of the Components Panel and select Rename. Rename the button to Play.

The file is saved automatically. I love the Cloud.

Before the app is tested, it would be a good idea to add a stop button so the entire song doesn’t have to play every time the app is tested. The process is exactly the same as the play button.

1. Drag a button on the Viewer (give it a name and text for the button).

2. Rename the button

3. Key in the text for the button Stop

1

Add a Player Media component to your app Adding a song to an app requires three steps in the Designer.

1. Select the Media drawer and drag the Player onto the Viewer. (It is a hidden component so it will appear at the

bottom of the viewer.

2. Upload the song to the app.

3. Attach the song to the Player

Go to the Media drawer and drag out a Player component. Drop it onto the Viewer. Notice that it drops down under "Non-visible components" because it is not something that will show up on the app's user interface. It's more like a tool that is available to the app.

Two steps are still needed in the Designer. The steps include loading the mp3 media song. Step 2 includes attaching the

song to the media player.

Select Upload File from the bottom section of the Components Panel.

When the file the file is uploaded, the song appears in the media just below the components window.

Browse to the location of the song you want to upload to your app. Be careful of the type of file you select. MP3’s are

the standard for most music players. I suggest you only use MP3’s.

After you have selected the song and uploaded it. The song will appear in the Media Window.

The Block’s screen will add activity to the event. The next process is to attach the song to the media player.

Select Source from the Properties button select the song, the OK.

Review The screen is complete except the image. Currently the screen has two buttons. The music file was loaded. The app has also loaded the player Media and attached the file to the Player.

Now the events.

Switch over to the Blocks Editor

It's time to tell your app what to do! Click "Blocks" to move over to the Blocks Editor. Think of the Designer and Blocks buttons like tabs -- you use them to move back and forth between the two areas of App Inventor.

The Blocks Editor The Blocks Editor is where you program the behavior of your app. There are Built-in blocks that handle things like math,

logic, and text. Below that are the blocks that go with each of the components in your app. In order to get the blocks

for a certain component to show up in the Blocks Editor, you first have to add that component to your app

through the Designer.

Make a button click event (Play button)

Select the Play from the Blocks panel. Click and hold the when Play Click. Drag the element to the third panel or work area. This is the block that will handle what happens when the button (play) on your app is clicked. It is called and

“Event Handler”.

Select the Play Button from the Blocks

Select the When Play1 Click and drag it to the action screen

Program the Play action

The action that is needed for the app is when the button (Play) is clicked, Player1 (Media) should play.

Select the Player from the Blocks drawer, then select the “cal Player1 Start” and drag it into the click event handler. Notice that the shape of the action matches the shape inside the event handler.

Save. Oh yea, this is the cloud.

The stop action also needs to be programed and then the app can be tested. Again the two steps include creating the event. Then give the action.

Follow the same procedure:

1. Select Stop Button from the Blocks

2. Select When Stop Play Click and drag it on the action area.

3. Select the Player Button from the Blocks

4. Select Call Player 1 Stop and drag it into place.

This app should have two events. One to start the player and one to stop the player. As shown below.

Test the app. When the play button is clicked the music will play. When the Stop button is clicked the music stops.

Notice that if the play button is pressed again, the music will start over.

This app will be better when we add a pause button. The process is almost exactly the same as the above process except for adding the Pause process.

Switch to the Designer Screen

Create a new button. Name it Pause, make the text pause.

Switch to the Blocks Screen

1. Select Pause Button from the Blocks

2. Select When Pause Play Click and drag it on the action area.

3. Select the Player Button from the Blocks

4. Select Call Player 1 Pause and drag it into place.

Add an image to the app. An image is not necessary but will dress up the app. You can use any image you would like. Big images are slow to load

and will not always stay in proportion. The problem with images is that all devices don’t have the same size of screen. If you know the device for this app, look on the internet to find the screen dimensions in pixels and then make your image that size.

Add the Image

The concept for adding an image is similar to adding music.

1. Click on Image from the User Interface drawer and drag it to screen 1.

2. In the Media below the Components section, select Upload File and load the image.

3. Make sure the image1 is selected and then insert the picture In the Properties.

Test your app.

Share or package your app.

Ideas similar to PlayMyFavoriteTune

Tutorial Music and Picture: I Can Make Money Building Apps!!!

Selling personal apps to make money for your club is a great way to get students motivated to be entrepreneurial and keep engaged. This app could

5. Play your favorite audio file and display your favorite picture

6. Invite someone to the Prom

7. Display a motivational image and play a motivational audio file

8. The key is each app is personal to the client. Of course to use, the client must be using an Android device.