Day 1: Variables / Bouncing Ball

Getting Started

    1. Go to the MIT App Inventor 2 website and log in using your Google account

    2. Click on "My Projects" on the top and then press the New button.

    3. Name the new project Day1

    4. Click on Day1 to open it

Learn the Terms

The App Inventor window has four columns: Palette, Viewer, Components, and Properties.

  • Palette has the tools that are available to you.

  • Viewer will show you what your phone screen will look like (more or less)

  • Components will show what you have put on the viewer so far and will organize those components in a logical way. You will change the names of the components in this part of the window.

  • Properties is where you will define how your component will look and how it will respond in your app.

Find each before moving on

Set up the Android Emulator

    1. Follow the link to set up the Android Emulator

    2. Once it is installed on your computer it can be opened to show how your app inventor code would work on an Android phone.

Let's Start

  1. Under the Drawing and Animation section of the Palette, click and drag Canvas from the Palette into the Viewer.

  2. Select Canvas1 on the Components window (it should be under Screen1)

  3. Under the Properties window click BackgroundColor and select Blue

  1. Connect the Emulator as shown below

    1. You'll get a notice saying that the Emulator is connecting. Starting the Emulator can take a couple of minutes. You will see update screens like the following as the Emulator starts up.

  1. What happened on your Emulator?

  2. Under the Properties window change Canvas1's Width and Height to 200px and click "OK".

  1. What happened on your Emulator?

  2. Under the Palette's Category Drawing and Animation, drag Ball onto the Viewer's Canvas1. Place the ball anywhere on the Canvas.

  3. What happened on your Emulator? Ball1 should now be under Canvas1 on the Components window

  4. Select Ball1 on the Components window and change the speed property to 10.0. Watch your Emulator when you press enter!

    1. Ball1 should have moved slowly across Canvas1 until it reached the side. Ball1 is now stuck on the side of Canvas1.

The Blocks Editor

We don't want Ball1 to stay stuck on the side of the Canvas1. We want it to bounce off the walls. To do that, we need to work with the blocks editor. Here is what to do:

    1. You are in the Designer view at the moment and we want to get to the blocks editor. Click on the Blocks button in the top right hand corner to bring the blocks editor into view now.

    2. Look on the left side. You should see a list of our Components: Canvas1, Ball1, and Screen1.

    1. Click on Ball1. A list of "Blocks" will appear. By fitting blocks together we make that component "do" things.

    2. With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.

    1. Next, click Ball1 on the side again. Drag the call Ball1.Bounce block and snap it into when Ball1.EdgeReached

    1. Finally, click Variables on the side bar and drag and snap the get block into the call Ball1.Bounce. Click the drop-down arrow and the "edge" argument will appear.

If it takes you some time to find this block you may get an error message because the Emulator is not able to complete the command.

What happened on your Emulator?

Making Stuff Happen

Do the following. Each time you make a change, see what happens on your Emulator.

Interval

    1. Change Ball1's Interval to 500

    2. Change Ball1's Interval to 100

    3. Change Ball1's Interval to 10 (leave it here)

Speed

    1. Change Ball1's Speed to 100

    2. Change Ball1's Speed to 1 (leave it here)

Heading

    1. Change Ball1's Heading to 90

    2. Change Ball1's Heading to 45 (leave it here)

Radius

    1. Change Ball's Radius to 20

    2. Change Ball's Radius to 10 (leave it here)

Mess Around: Change any property of Ball1. Return them to the leave it here value when finished.