Day 1: Variables / Bouncing Ball
Getting Started
Go to the MIT App Inventor 2 website and log in using your Google account
Click on "My Projects" on the top and then press the New button.
Name the new project Day1
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
Follow the link to set up the Android Emulator
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
Under the Drawing and Animation section of the Palette, click and drag Canvas from the Palette into the Viewer.
Select Canvas1 on the Components window (it should be under Screen1)
Under the Properties window click BackgroundColor and select Blue
Connect the Emulator as shown below
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.
What happened on your Emulator?
Under the Properties window change Canvas1's Width and Height to 200px and click "OK".
What happened on your Emulator?
Under the Palette's Category Drawing and Animation, drag Ball onto the Viewer's Canvas1. Place the ball anywhere on the Canvas.
What happened on your Emulator? Ball1 should now be under Canvas1 on the Components window
Select Ball1 on the Components window and change the speed property to 10.0. Watch your Emulator when you press enter!
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:
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.
Look on the left side. You should see a list of our Components: Canvas1, Ball1, and Screen1.
Click on Ball1. A list of "Blocks" will appear. By fitting blocks together we make that component "do" things.
With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.
Next, click Ball1 on the side again. Drag the call Ball1.Bounce block and snap it into when Ball1.EdgeReached
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
Change Ball1's Interval to 500
Change Ball1's Interval to 100
Change Ball1's Interval to 10 (leave it here)
Speed
Change Ball1's Speed to 100
Change Ball1's Speed to 1 (leave it here)
Heading
Change Ball1's Heading to 90
Change Ball1's Heading to 45 (leave it here)
Radius
Change Ball's Radius to 20
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.