1. Introduction to App Inventor 2 ASFA AP CS Principles
Adapted from David Wolber
University of San Francisco

2. App Inventor is a visual "blocks" language 
for programming Android apps. 

3. This is an App Inventor app. Can you tell what it does?
Ask students to discuss this with those next to them. The app auto-responds to texts and speaks them aloud. Mention what a textbox is and the fact that the auto-response can be customized by user.

4. How about an app to vote by text?
Mention "if" and how it can be used to add artificial intelligence (logic) to any degree of complexity.
Make connection to voting on tv shows like dancing with the stars.
Could you make the app send a particular response to a particular number (e.g., your mother)?
How about an app to vote by text?

5. What can you build with App Inventor?
Games
Android, Where's my car?
Text Processing Apps
Quizzes
Web Enabled Apps
Location Aware Apps
Broadcast Hubs

6. Why Learn App Inventor? Software is in every walk of life.
Programming is becoming part of many jobs
Explore mobile computing
Practical Skills
web, e.g., what is an API?
math
media
Creativity, entrepreneurship, idea formulation 
Problem-Solving skills

7. Hello Purr App

8. Getting App on to the Tablet
Finish creating app online
Select Build->App(save .apk to my computer)
Plug tablet in to computer
Copy .apk file from Downloads folder on computer to Download folder on tablet
Now you can unplug tablet
Go to “My Files” on tablet and open the Download folder
Click on the .apk file you just copied to tablet and select “Install”
When it finishes installing, select “Open”

9. Getting images and sounds for your apps
Use jpeg images – google images is a great source
Use mp3 or wav sounds – sound bible and purple planet are both good sources of free open use sound files
Sound files need to be small
Total app size < 5 Meg

10. Wooly Willy App

11. Wooly Willy App
Add Buttons for selecting paint color

12. Wooly Willy App
Arrange with Layout Component

13. Wooly Willy App
3) Add behaviors

14. Wooly Willy App
Add Touch event handler

15. Wooly Willy App
Add Drag event handler

16. Wooly Willy App
Change dot size

17. Drawing Canvas App Extensions
Change dot and line sizes
Add more colors
Change backgrounds
Use pictures of your friends …

18. To use your own phone/tablet:

19. Soundboard App

20. What have we learned so far?
How to create an app
design
code (blocks editor)
using: sounds, images, buttons
drawing canvas

21. Now what? Share our projects Get our picture to use in our apps
Make our first game – Mole Mash

22. Mole Mash App

23. New Concepts in Mole Mash
image sprites
timers and the Clock component
procedures
picking random numbers between 0 and 1
text blocks

24. The first components Several components are familiar:
A Canvas named "MyCanvas". This is the area where the mole moves.
A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole.
A Button named "ResetButton".

25. Timers and the Clock component
You need to arrange for the mole to jump periodically, and you'll do this with the aid of a Clock component.
 name it MoleTimer
TimeInterval to 500 milliseconds
 TimerEnabled is checked.

26. Image Sprite
Sprites are images that can move on the screen within a Canvas.
 Set these properties for the Mole sprite:
Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial.
Enabled: checked
Interval: 500
Heading: 0
Speed: 0.0
Visible: checked
Width: Automatic
Height: Automatic

27. Define two procedures:
MoveMole moves the Mole sprite to a new random position on the canvas.
UpdateScore shows the score, by changing the text of the ScoreLabel

28. Build the MoveMole procedure
Build the MoveMole procedure. The completed definition should look like this:

29. Set up MoleTimer to call MoveMole each time the timer fires, by building the event handler like this:

30. Here's how score and UpdateScore should look:
Here's how score and UpdateScore should look

31. Add a Mole Touch Handler
The program should increment the score each time the mole is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for Mole that:
Increments the score.
Calls UpdateScore to show the new score.
Makes the phone vibrate for 1/10 second (100 milliseconds).
Calls MoveMole so that the mole moves right away, rather than waiting for the timer.
Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

33. Reset the Score
One final detail is resetting the score. That's simply a matter of making the ResetButton change the score to 0 and calling UpdateScore.

34. Complete Program
Here's the complete MoleMash program:

35. Ladybug Chase App

36. What You'll Build
With the Ladybug Chase app shown in Figure 5-1, the user can:
Control a ladybug by tilting the device.
View an energy-level bar on the screen, which decreases over time, leading to the ladybug's starvation.
Make the ladybug chase and eat aphids to gain energy and prevent starvation.
Help the ladybug avoid a frog that wants to eat it.

37. Using multiple ImageSprite components and detecting collisions between them.
Detecting device tilts with an OrientationSensor component and using it to control an ImageSprite.
Changing the picture displayed for an ImageSprite.
Drawing lines on a Canvas component.
Controlling multiple events with a Clock component.
Using variables to keep track of numbers (the ladybug's energy level).
Creating and using procedures with parameters.
Using the and block.

39. Creating the Components
Create a Canvas:
name it FieldCanvas
Width - "Fill parent"
Height  pixels.
Place an ImageSprite on the Canvas:
naming it Ladybug 
Picture property to the (live) ladybug image.
 Interval  - 10
 Heading - we will change it in the Blocks Editor.
Speed - also set the Speed property in the Blocks Editor.

40. The ladybug's movement will be controlled by an OrientationSensor, which detects how the device is tilted.
Clock component to check the device's orientation every 10 milliseconds (100 times per second) and change the ladybug's Heading (direction) accordingly. We will set this up in the Blocks Editor as follows:
Add an OrientationSensor, which will appear in the "Non-visible components" section.
Add a Clock, which will also appear in the "Non-visible components" section, and set its TimerInterval to 10 milliseconds.

41. The UpdateLadybug procedure makes use of two of the OrientationSensor's most useful properties:
Angle, which indicates the direction in which the device is tilted (in degrees).
Magnitude, which indicates the amount of tilt, ranging from 0 (no tilt) to 1 (maximum tilt).

43. Displaying the Energy Level
We will display the ladybug's energy level with a red bar in a second canvas. The line will be 1 pixel high, and its width will be the same number of pixels as the ladybug's energy, which ranges from 200 (well fed) to 0 (dead).
Adding a Component
In the Designer, create a new Canvas, placing it beneath FieldCanvas and naming it EnergyCanvas. Set its Width property to "Fill parent" and its Height to 1 pixel.

44. Creating a Variable: Energy

45. Drawing the Energy Bar

47. Starvation

49. Adding an Aphid ImageSprite rename to Aphid Properties :
Picture - aphid image
Interval -10
Speed - 2, so it doesn't move too fast for the ladybug to catch it.

50. Having the Ladybug Eat the Aphid
To handle what happens when the ladybug and aphid collide, let's create a procedure, EatAphid, that does the following:
Increases the energy level by 50 to simulate eating the tasty treat.
Causes the aphid to disappear (by setting its Visible property to false).
Causes the aphid to stop moving (by setting its Enabled property to false).
Causes the aphid to move to a random location on the screen. (This follows the same pattern as the code to move the mole in MoleMash).

52. Detecting a Ladybug–Aphid Collision

53. The Return of the Aphid

54. Add Frog Sprite
On the FieldCanvas
Speed 1
Interval 10

55. Having the Frog Chase the Ladybug

56. Having the Frog Eat the Ladybug

57. Restart Button

58. Now test your app!