1. Lesson 5 – Repetition / Loops
MIT App Inventor
Lesson 5 – Repetition / Loops

2. Agenda Conditionals / Control Structures Boolean Operators if if else
if elif else
Boolean Operators
NOT
AND OR

3. Canvas Grid for animation and graphics
Uses (x,y) coordinates to locate objects
(0,0)
(0,400)
(300,0)
(300,400)

4. Canvas components coordinates provided to event handler
In this case the action is to Draw a Circle on the same canvas
can have multiple canvas objects

5. Controlling Objects
A separate canvas and sprite can be used as a game controller.
The value of draggedSprite is True when the sprite is being dragged

6. Lab 5 – Paint the Puppy
Objective Create an interactive drawing program.
Components
Canvas
Concepts
Responding to user input
Touched
Dragged
Algorithms
Increment / Decrement of variables

7. Clocks Used for 2 REASONS Determine current Time or Date
Clocks - non-visible components
Used for 2 REASONS
Determine current Time or Date
Use Now() method to determine the current timestamp
Cause events to occur at regular intervals
Enable the Timer property (true or false) and set the Interval property (milliseconds)
You can have one or MORE clocks in a single app.
Clocks are often used in games to control the frequency of animations, updates, timers (playing time etc..).

8. Randomness
App Inventor has various methods of generating Random values
In the next lab we will move ImageSprites to Random locations within a Canvas.

9. ImageSprite
An image sprite is an animated object that can interact with a canvas, balls, and other image sprites.
contained by a canvas
react to touches and drags
interact with other sprites and the edge of the canvas

10. ImageSprite Sprite Movement Speed property to 10 (pixels)
amount of movement per interval
Interval property to 5 (milliseconds)
frequency of movement
Heading property to 180 (degrees)
Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down.
Enabled property to True
You can change these and other properties to modify the image sprite's behavior.

11. Lab 6 – Mole Mash Plus Objective Create an interactive game.
Components
Canvas
ImageSprite
Clocks
Concepts
Responding to user input
Touched
Randomness
Game levels and difficulty
Algorithms
see lab handout

12. Loops – Counted / For Loop
variable value
loop counter
no break option

13. Loops – For Loop Example
How many iterations?
Value of varTotal
Before Loop?
After Loop?

14. Lab 7 – Investments
Objective Create an future investment calculator to determine the value of compound interest investments.
Components
Screens – Multiple
Concepts
Loops – For Range (Counted)
Algorithms
see lab handout (exponential relations)

15. Loops – Conditional Loop
Condition is checked at the beginning of every iteration
Very flexible
No loop variable

16. Conditional Loop - Example

17. Lists Heterogeneous Indexed from one (1) Many methods avail
Good habits
use clearly defined variable names
removing all values
set the variable with an empty "make a list" block

18. Lab 8 – Looping with Colour
Objective Create a fun graphical application.
Components
Canvas
Ball
Concepts
Loops – For Range (Counted)
Lists – random colour from a list
Algorithms
see lab handout (exponential relations)

19. Lab 9 – Know your Elements
Objective Create a science-based quiz game involving knowing the most abundant elements on Earth.
Components
Notifier
Concepts
Maintaining parallel lists
Algorithms
see lab handout

20. List Picker User Input Component
Predefined selection of possible values
Drop down list

21. Lab 10 – Tip Calculator
Objective Create an application to calculate each person's equal share of the restaurant (or any) bill including a tip for service.
Components
ListPicker
Concepts
Improving user input data quality and overall UI
Algorithms
see lab handout

22. Audio 2 non-visible components for audio: Player Sound
play an audio or video file ( many formats available ) or to vibrate the phone
the name of the media file is specified in the Source property
methods include: start(), stop(), pause()
Sound
play a short audio file

23. Video
Videoplayer
Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format
file is set with the Source property
methods include:
Start()
Pause()
SeekTo(number of millisecs)
GetDuration()
Note:
Video files should be < 1 MB
The overall size of an app is set to a max of 5 MB

24. Playing Music? - Example

25. Lab 11 – Music Maker
Objective Create a xylophone application that can be used to record and playback music.
Components
Sound
Clock
Concepts
Parallel list processing
Resetting timers – Controlled event processing
Algorithms
see lab handout

26. Storage Types
An application needs to remember information as it is being used by a user.
There are two storage areas for applications :
volatile storage
storage that exists only while the application is being used
non-volatile storage
storage that will exist between uses of the application

27. "Database" storage
App Inventor is able to store variables or lists in locally on the phone or on a web server.
Local storage
TinyDB component
Cloud Storage
TinyWebDB component

28. Lab 12 – Quiz Maker
Objective Create an application to generate quizzes for students.
Components
TinyDB
Concepts
Storage and Retrieval of data
Algorithms
see lab handout

29. Animation - Edge Detection
<ball/sprite>.EdgeReached (number edge) The edge argument tells which edge was reached.
(0,0)
(0,400)
(300,0)
(300,400)
edge 1
edge -1
edge 4
edge 3
edge 2
edge -4
edge -3
edge -2

30. Edges You can detect when an object meets the edge of a canvas.
bounce method is available for edge events
edge value can be checked

31. Collisions Collisions can be detected by either object.
eg. Ball is colliding with a paddle imageSprite
Note that the heading is changed to simulate a bounce

32. Lab 13 – AndyPong
Objective Create an pong style game with a control pad for the paddle and various difficulty levels.
Components
Sprites
Concepts
Collision detection
Edge detection
Simulating bounces or providing direction to objects
Game levels
Algorithms
see lab handout

33. Live App Exploring Computer Science
Purpose of the Application
To respond to declining enrolment in Computer Science, Technology and Business courses.
Create an free app that can be used as an interactive gateway for Computer Studies, Business Studies, and Technology courses in Ontario High Schools.
Audience
Students, parents, teachers, guidance

34. Live Apps Exploring Computer Science
The application includes information about available courses along with extra information such as competitions. The app also includes an interactive game called "MythBusting Computer Science". Just go to Google Play and search for: "Explore Computer Science"

35. Resources Sample Code Tools - prepare apps for Google Play
tAIR – the App Inventor Repository:
Tools - prepare apps for Google Play
AppToMarket – available from
Marketizer – available from

36. Resources
Books

37. Resources
App Inventor Site – Explore
Forums
Curriculum Resources

38. Resources - Gallery
Project Sharing

39. Futures Java Bridge Use in CS Education likely to increase
AI components wrapped in a JAR file to enable a transition from AI to full Android SDK development using Eclipse and Java
Use in CS Education likely to increase

40. Futures – AI Summit News
Embed the Blocks Editor into the browser
Remove need for phone drivers – wireless app development
Services - notifications like twitter (long running apps)
Video Capture and play back
New Flung method for Sprites
Blocks to text and Text to Blocks
Support for team programming

41. Thanks
I continually update my materials and will make them available at any time.
Website
Teaching resources
Available in a non-linked directory on my website
Directory Name: app-inventor-resources