Download presentation
Presentation is loading. Please wait.
Published byPaulina Nelson Modified over 6 years ago
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!
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.