MIT APP INVENTOR 2 SETUP

You can set up App Inventor and start building apps in minutes. The Designer and Blocks Editor run completely in the browser (aka the cloud).

To set up at home following today's workshop, click here for the direct link to the complete MIT App Inventor 2 Setup, and click here to set up live testing with an Android device

App Inventor Setup

Connecting App Inventor to the Emulator

In this workshop, we will test our apps in real-time using an onscreen emulator on our desktop computers. Using the emulator requires the program called “aiStarter” which permits the web browser to communicate with the emulator.

10 minutes

1. Open Chrome or Firefox as your web browser. App Inventor 2 does not work with Internet Explorer
2. Open the folder, MIT App Inventor Tools: Start Menu > All Apps > M > MIT App Inventor Tools
3. Open the program "aiStarter."
4. Sign into your individual Google Account provided to you.
5. Click here to open App Inventor in your web browser. Allow the program to access your Google Account.
6. In App Inventor, create a new project: Projects > Start New Project, and name your project Ball_Bounce.
7. In App Inventor, connect your project to the emulator: Connect > Emulator, and wait for the emulator to start up. This will take several minutes.
8. When a window resembling a phone screen appears, do not exit but instead minimize any extra black windows. As a first-time user, you will be asked to update the emulator ("Your Companion App is out of date"). Click "OK" to complete the update. Click "OK" to install the application. When the update finishes, click “DONE” (not “OPEN”).
9. Click the application icon on the emulator's phone screen.
10. In App Inventor, re-connect your project to the emulator: Connect > Emulator, and wait for the emulator to start up. This will take less than a minute.

BALL BOUNCE GAME APP

In this game app, you will make a Ball bounce around on the screen.

Ball Bounce Setup

To preview what your app’s screen (or user interface) will look like, you need to click and drag components onto the Viewer pane in the middle of the App Inventor Designer. You can change the properties of a component such as color, size, and behavior.

10 minutes

1. Click here to open your Ball_Bounce project, if you closed App Inventor. The environment you see first on your screen is called the “App Inventor Designer.”
2. From the left-side “Palette” pane, drag out a Canvas: Drawing and Animation > Canvas, and drop it onto the screen featured in the middle “Viewer” pane.
3. In the right-side “Properties” pane, turn off the “Scrollable” setting by unchecking the box.
4. In the “Components” pane, select the Canvas you created. Properties pane will change. Click the “Height” setting, and set the Height property to “Fill parent,” and click "OK." Repeat for the “Width” setting.
5. From the Palette pane, drag out a Ball: Drawing and Animation > Ball, and drop it onto your Canvas. Change the Ball’s size by altering the “Radius” setting in the Properties pane. We suggest starting with Radius 15

Ball Bounce Programming Part 1 of 2

Speed and Heading

Program the behavior of your app by putting blocks together in the App Inventor Blocks Editor. Remember that you have a live connection between your development environment App Inventor, and your emulator. Test while you build!

15 minutes

1. Open the “Blocks Editor” by selecting the “Blocks” tab in the upper-right corner of the Designer.
2. In the left-side “Blocks” pane, select the Ball you created. In the Viewer pane, you will see the Ball’s blocks.
3. Create an event when a user makes a gesture with their finger to “fling” the Ball: drag-and-drop block when Ball1.Flung from the blocks, and onto your right-side workspace. When a fling gesture is made on the Ball, the “heading” property (0-360 degrees) returns the Ball's heading of the fling in degrees above the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen
4. Set the Ball’s heading and speed: drag-and-drop setter blocks, set Ball1.Heading and set Ball1.Speed onto your workspace.
5. Snap together the event handler block with the two setter blocks.
6. Set the Ball’s speed to be the same as the fling’s speed: hover over “speed” in the event handler. Drag-and-drop block get speed, and plug it into set Ball1.Speed.
7. Similarly to above, set the Ball’s heading to be the same as the fling’s heading.

Notes:

• Mustard yellow blocks are event handler blocks that specify how the phone should respond to certain events. Event handler blocks always use the word “when.”
• Purple blocks are command blocks that are placed in the body of event handlers. A command is a block that specifies an action when the event is triggered.
• Green blocks are setter blocks that are commands that change the value associated with the property.

Ball Bounce Programming Part 2 of 2

Bouncing Off Edges

Up until this point, flinging your ball across the screen results in the ball getting stuck on the side. To make the ball bounce off the edge of the screen, we can program a new event.

5 minutes

1. In the Blocks pane, select the Ball you created.
2. Create an event when the Ball reaches an edge: drag-and-drop block when Ball1.EdgeReached do.
3. Add an action when the Ball reaches an edge: drag-and-drop block call Ball1.Bounce.
4. Snap together the event handler block with the command block.
5. Add the edge value for the bounce method: hover over “edge” in the event handler. Drag-and-drop block get edge, and plug it into call Ball1.Bounce.
6. Congratulations! You’ve completed the Ball Bounce game app! When you fling the ball, it should bounce off the edges of the Canvas.

If you have extra time, experiment with your new game app!

Change the color of the ball based on how fast it is moving or which edge it reaches

Scale the speed of the ball so that it slows down and stops after it gets flung

Give the ball obstacles or targets to hit

Introduce a paddle for intercepting the ball, like a Pong game