CT 245: Android Mobile Apps Lab 1: Variables/Bouncing Ball ...

CT 245: Android Mobile Apps

Lab 1: Variables/Bouncing Ball

Getting Started 1. Go to the MIT App Inventor 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 AppInventor 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 (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

Open the Blocks Editor and Start Your Emulator 1. Press the Open the Blocks Editor button and load the block editor. 2. Once the Block Editor Window is open click the New Emulator button and hit when prompted to start the emulator. 3. Click the Connect to Device.. button and select your emulator from the drop down.

4. Once it connects, minimize the Block Editor (leave it open) it and go back to the component window in your browser.

Let's Start 1. Under the Basic section of the Palette, click and drag Canvas from the Palette into the Viewer. 2. Select on Canvas1 on the Components window (it should be under Screen1) 3. Under the Properties window click BackgroundColor and select Blue

4. What happened in your emulator?

5. Under the Properties window change Canvas1's Width and Height to 200px

6. What happened in your emulator?? 7. Under the Palette's Category Animation, drag Ball onto the Viewer's Canvas1. Place the ball anywhere on the Canvas. 8. What happened in your emulator?? Ball1 should now be under Canvas1 on the Components window. 9. Select Ball1 on the Components window and change the speed property to 10.0. Watch your emulator when you press enter!

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

The Blocks Editor When working with the app inventor, it is important that we leave the blocks editor open. If you have to go back to work with components, minimize the blocks editor but leave it open.

We don't want the 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. Previously, we minimized the blocks editor. Bring to back up into view now. 2. Look on the left side. You should see a list of our Components: Canvas1, Ball1, and Screen1. If you don't see these things, click the My Blocks tab on top.

3. Click on Ball1. A list of "Blocks" will appear. By fitting blocks together we make that component "do" things. 4. With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.

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

6. Finally, click My Definitions on the side bar and drag and snap the value edge piece into the call Ball1.Bounce

7. What is happening on your phone? 8. Minimize the blocks editor (leave it open in the background) and go back to your component viewer.

Making Stuff Happen Do the following. Each time you make a change, see what happens on your phone.

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.

Making an App for Your Phone 1. Make sure the blocks editor is still open 2. Make sure your phone or emulator is connected to the blocks editor 3. On the components page, click the Package for Phone button 4. Select Download to Connected Phone (this works for the emulator too) 5. Wait a really long time 6. When the window pops up, click OK. 7. Close the Blocks Editor

8. Close your internet browser (everything saves automatically) 9. Look at your phone and open the app drawer. 10.

Search for "Day1" and run it.

11.

Congratulations, you made your first app!

Challenge Stuff Here are some hard things to try to do. If you don't want to try any of these, or are finished Thinking person's challenge: 1. After having done all of this, can you imagine a game that might use some of the ideas you learned today? (soccer? what else?) Some what challenging: 1. Can you change the color of Ball1? 2. Can you change the color of Canvas1? 3. Can you change the shape of Canvas1 to be a rectangle rather than a square? 4. Can you change the shape of Canvas1 to be the same size as the screen? Really Challenging: 1. Can you add another Ball and make it bounce at the same time as Ball1? Really REALLY SUPER challenging: 1. Can you make two balls that bounce off walls AND each other?