APP Design (Day 2)

●
Review
●
Sprites and Graphics
●
Variables
●
Functions / Procedures
●
Mini-Project

1
 Review

Designer Blocks Editor

What are they for?

2
 Review

Designer Blocks Editor

●
Add components ●
Actions and
●
Layout of behaviors
components (eg. what should the
●
Component settings app do when the
(eg. font size) What are they for? user click a button?)

3
 Review

How to place component

horizontally...

...instead of vertically?

4
 Review

●
Place a “Horizontal
Arrangement”
component
●
Place other
components inside the
horizontal arrangement
component

5
 Review

What are these blocks

that starts with “when”?

6
 Review

●
App Inventor uses an “event
driven” programming language
●
“when” blocks are “events”
●
Runs the code inside the block
when the event happens

“When” button1 is clicked...

...run this set of code

7
 Review
“if” statements

Condition
if condition is true...

...do this...

...else do this instead!

if checkbox 1 is “checked” (ticked)

...set SpeechRate to 2 (fast)

...else set SpeechRate to 0 (slow)

8
 Review
Errors and Warnings

Warnings Errors
●
Something is probably ●
Something is definitely
wrong. wrong.
●
Click “Show Warnings” ●
You must fix this
to display a warning
sign next to the possible
problem
●
You should fix this

9
 Whack the Mole

●
Simple game, tap on the
“mole” to score points

●
Learn about graphics,
sprites

●
Learn about variables

●
Learn about functions

10
 Sprites and Graphics

To draw graphics in your

app, you first need a
Canvas...

...the default canvas size is quite

underwhelming, set a suitable Height and
Width for the canvas in the Properties panel.

Feel free to mess around with the other

settings if it strikes your fancy. 11
 Sprites and Graphics

Next, add in a sprite

Sprites
“Sprite” is a computing term for a
piece of 2D graphics that is
integrated into a larger scene.

In this case, the sprite is

integrated on top of the canvas.

12
 Sprites and Graphics
Your default sprite looks
like this... boring...
(this is just a placeholder)

Upload a cool image...

(...take your pick, my photo is available upon request)

...set the size of the sprite...

...then set the sprite to use

your uploaded image.

13
 Moving the Sprite
●
We want the sprite to jump to a random position
every few seconds
●
Easy enough to move the sprite, just need to
change its X and Y coordinates

●
...but remember that App Inventor is “Event
Driven”, code only runs when there is an event
to trigger it
●
What event can we use?

14
 Moving the Sprite

Use the “Clock” component...

(under “Sensors”)

Set the interval between

each firing of the “Timer”
event
(units is in milliseconds)

Non-visible component
(listed below the screen)
15
 Writing the Code
When the “Timer” event is triggered...
(...based on your earlier setting)

Change the X and Y

coordinates of the sprite

We’ll change the X and

Y coordinates to a
random integer

16
 Now YOU Try!
●
Challenges
– Random integer 1 to 100 won’t make full use of the
canvas, how can we utilize the full width and height
of the canvas?
– Hint: there are blocks providing the height and width
of the canvas and sprite
●
If you need to refer, these slides are available
at...
http://www.aposteriori.com.sg/projects
●
...don’t cheat and look at the solution on the
next slide. You gotta figure it out yourself!

17
 Challenge Solution

Maximum X coordinate is equal to

Minimum X
the canvas width minus the sprite
coordinate is 0...
width

Canvas Width

Sprite
Maximum X
Width 18
coordinate
 Keeping Scores
●
The score is a value that can change
●
In computer programming, we store
such values in a variable

Variables
Nearly all programming
languages have variables.

Variables can store numbers,

text, boolean, and many
more.

19
 Keeping Scores
Initialize: Set value at
start of program
3 basic operations
for every variable... Set: Set a value

Example usage Get: Get the value

Initialize score to 0
(Initialize is special, it doesn’t
need to be inside an event!)

Set score to 1. This needs to be in

an event.

Set the text in Label1 to whatever Global

value is is score. Needs to be in an Global variables are available for read
event. and write anywhere in the program.

Local
Local variables are only available
within a limited region of the program.20
 Keeping Scores
Initialize score to be 0 at
the start of the program

Whenever the sprite is

“Touched”...

...set the score to 1...

...then display it in the label This joins the string

(Don’t forget to add a label “Score :” to the actual
component first!) value of score. The
result will look like...

Score : 1
21
 Now YOU Try!
●
Challenges
– The score is set to 1 on each touch. How can we make
it increment on every touch? (ie. 1, 2, 3, 4)
– Add in a “Reset” button, and make it reset the score to
zero when pressed
– Immediately move sprite to random position on every
touch
●
If you need to refer, these slides are available at...
http://www.aposteriori.com.sg/projects
●
...don’t cheat and look at the solution on the next
slide. You gotta figure it out yourself!

22
 Challenge Solution
Set the score to
Whenever the sprite is “score + 1” Move the sprite
“Touched”... to a random
position

When Button1 is
clicked...

...set the score

to zero...

...and display it in the label

23
 Functions / Procedures
●
Functions are pieces of code that...
– Separated from the rest of the code
– Does something
– Optionally accept inputs or provide outputs
– Can be called by other pieces of code
●
May also be called
– Procedures (App Inventor uses this term)
– Subroutines (rarely used these days)

24
 Functions / Procedures
●
Why use functions?
– Minimize repetition!
Our current
program...

Repeated

Repeated

25
 Functions / Procedures
You can name your functions
whatever you want
This is a
function...

This one
too...

When we “call” the

function, the program
will run the code that’s
inside the function

26
 Functions / Procedures
Functions can also accept inputs and return an output

We named the input “a”.

Use the “gear” to add
(Note: “a” is a Local Variable. It is
or remove inputs
only available inside this function.

If the input is greater

than 9...

...return “Amazing!”...

...else return “Meh...”

The function output is We provide “score” as

used to set the label text the input to the function 27
 Challenges
●
Track both hits and misses
●
Increase the speed a little every time
you gain a point; the higher the score,
the faster the speed
●
Add in sound, vibration, graphical
effects

28
 Mini Project
School Map
●
Create an app that shows visitors and
new students the location of
classrooms, sports hall, etc on a map
●
Hint: Use a school map image as the
background of a canvas
●
Hint 2: Let the user select locations
using a Spinner

29