1.
Youth-Led Tech Curriculum
Day 21: App Inventor Basics
Content Goals: Youth will learn the components of building an app and will
start building their own app.
Leadership Goals: Team-building activities with a focus on communication
Materials: Worksheet
10:00 AM Sign-in
Use the online attendance sheet to mark students as present and
note any issues.
10:05 AM Mood Check/Icebreaker Question
It’s important to start every session with an opening activity, such
as a Mood Check-in, where students state their mood on a scale of
1-10. We often pair this with an icebreaker question that each
student answers.
10:15 AM Screamer
In a circle, people look at ground, then on "heads up" look into
someone else's eyes. If 2 people are looking at each other, they
scream and are both out. Continue to see who is last - hilarious.

2.
2
10:45 AM App Inventor Basics
The Designer
The Designer allows you to choose functionality and to change the
look and feel of your app. It has four parts: Palette, Viewer,
Components, and Properties.
Properties.
With the Palette, you choose your components (buttons, phone
calls, texting, camera, location sensors, and more). Whatever you
want your app to do, just drag from the Palette to the Viewer. The
Viewer organizes your components, and shows you what they will
look like on the phone. The Components section lists all the
components in your app, in the order they appear in the Viewer.
You can click the components to rename or delete. There’s also a
Media section, which you can use to upload images and audio.
With Properties, you customize the components. Click the
component, and you can change the color, text, height, visibility,
and more.
Blocks
The Blocks are the back-end, where we tell the app what to do.
Each component from the palette has a set of blocks that you can
use to change the properties of each block, and add new
functionality to your app. There are also blocks that are built in,
and come with every app.
11:10 AM Designer: Set up the components

3.
3
Use the Designer to create the user interface – the design of your
app. When you are done, it should look something like the picture
below.
To build that user interface, drag these components from the
Palette into the Viewer, and change their properties.
Component
type
Palette
group
What you will
name it
Purpose/
Properties
Label User
Interface
headerLabel The name of
the app/ set
text to “Hip
Hop History”,
set
background
color to red,
set text color
to white, set
width to fill
parent
Label User
Interface
titleLabel holds the
name of the
musical
genres (e.g.,
blues, funk)
you’ll be
featuring/ set
text to “Genre”

4.
4
Label User
Interface
locationLabel holds the
name of the
location/ set
text to
“Location”
Button User
Interface
PlayButton clicks to play
audio and
show the
image of the
genre/ set
width and
height to 50px
Vertical
Arrangement
Layout Vertical
Arrangement
Give some
layout design/
drag the
titleLabel and
put it inside,
then the
LocationLabel
inside
Horizontal
Arrangement
Layout Horizontal
Arrangement
Give some
layout design/
set width to fill
parent, then
drag the
PlayButton
inside and the
vertical
arrangement
(they should
be side by
side)
WebViewer User
Interface
WebViewer1 Shows the
map/ Set
width to fill
parent, and
height to
300px
Label User
Interface
yearLabel Holds the year
of the genre/

5.
5
set text to
“Year”
Slider User
Interface
Slider1 Slide to
change
content/ set
width to
300px, set
min value to 1,
set max value
to 5, set
ThumbPosition
to 1,
Player Media Player1 Plays Audio
12 NOON Lunch
1:00 PM Avoiding 21
Get into a circle, the group is going to count around the circle up to 21.
The person who is forced to say 21 is “out”. Each person can say one,
two, or three numbers in a row. For example, 1st Person “1,2”; 2nd
Person “4,5,6” 3rd Person ,“7”, etc.
1:20 PM Typing club
1. Log on to http://youthledtech.typingclub.com
2. Allow youth to practice/develop their typing skills. This
could be a useful time for facilitators to catch up on
paperwork or setup for the next activity
3. Facilitators can track the students progress to make sure
that they are actually on the right site
2:10 PM Break
2:20 PM Upload Media
Remember, our app traces musical genres that laid the foundation
for Hip Hop by displaying an image representing each genre and
sampling a piece of music from that genre. To play the music and
show the image, you need to upload them into your app.
You add the media elements by clicking Upload.
Click here to download the audio and images used in this tutorial,
but as noted at the beginning, you can always change these
elements to fit your project’s focus (or your sense of music

6.
6
history!).
Blocks: Let’s Program
So…we want content to change when the user moves the slider.
But what content do we want to change? We want the image,
audio, location, and time period to change. How does the app
“hold”all that information? With variables and lists.
What’s a Variable?
Variables are ways to store values to use later. A global variable is
a variable that can be accessed anywhere in the code. Global
variables are created using the “initialize global name” block found
in the Variables drawer.
This block allows you to create a new variable, to which you can
assign any value:
This block provides a way to get any variables you may have
created.
Once a variable (v) is selected, the user can attach a new block
and set (v) to a new value.
What’s a List?
A list is a way to organize multiple variables or items.
Why Would We Use a List?
For each time period in our app, we want the image, location, title,
and time period to change. We need a way to group and order all
those items.

7.
7
A list allows us to organize each piece of information, and move up
and down the items.
We want the time period to change, so let’s start with that list first.
Start by creating a variable, and name it yearList. Then attach a
“make a list”block (from built-in text), click the dark blue square to
add a total of 5 items. Then connect a text block (from text) into
each socket.
Then type in the years (as listed in the image). Make sure that the
content is in order.
Now create a list for each piece of content that you want to
change. The content needs to appear in the same order in every
list.
Lists – Year, Genre, Audio, Image, Location, Map:
Year list – list years : 1920, 1920, 1960, 1980, 1990
Genre list – lists the different genres of music : Blues, Jazz, Funk,
Rap, Gangsta Rap
Audio list – list the names of the music files : blues.m4a, jazz.m4a,
funk.m4a, rap.m4a, Grap.m4a
Image list – list the names of the png files : blues.png, jazz.jpeg,
funk.jpeg, rap.jpeg, gRap.jpeg
Location list- list the name of the locations: Deep South USA, New
Orleans, Atlanta, New York, Los Angeles
Map list- list the URLs of Google Maps of the locations. You get the
URL by going to Google Maps, typing in a location, then clicking the
X next to the city name. Next go down to the settings gear in the
bottom right, click the Share option and by checking the Short URL
you get these URLs:
https://goo.gl/maps/JG7QP
https://goo.gl/maps/TG6EK
https://goo.gl/maps/Ze5yv
https://goo.gl/maps/Crv5q
https://goo.gl/maps/5DYNY
If you click these links, you will see the map in Google Maps. These
are the URLs we used, but you should encourage your students to
go to Google Maps, and type the location. If you wanted to use
different locations, you do the same steps, just type in cities you
would prefer. Your completed list should look like this:

8.
8
Navigating the List: The Index
The index tells you where you are in the list. So if the index is 3,
then it is referring to the year 1980.
If the index is 5, then it is referring to the year 1900′s. Pretty
simple, right?
Connecting the Components to the List
Now that we have multiple lists, we need to connect the lists to the
components in the Designer. First we need to think about when the
index will change. Which action or event will cause the information
to change?
There are many events that could trigger the information to
change, for example a button clicking or even a timer. In this app,
we will be using the slider to navigate among all the content. So
let’s look into the Slider component…
We want the YearLabel to select an item from the YearList.
First grab the set YearLabel.text block – because we want to
change the text.
Next clock Lists from built in, and grab a select list item block.
The select list item block will have two empty sockets – list and

9.
9
index. For list, we want to connect the corresponding yearList. To
do this, we go into variable, grab a get block and click the drop
down to select global yearList.
Earlier, we introduced the index, which lets you know where you
are in the list. If we typed 2, it would go to the second item. But for
this app, we want the index to change when the user moves the
slider. In App Inventor, we call this the thumb position. The thumb
position lets you know where on the slider you are.
Let’s click the slider component, grab the light green
Slider1.ThumbPosition, and connect to the index socket.
For every label component, we want the content to come from the
same index in each list, so for each line we will use
“Slider1.ThumbPosition” for the index.
It should look like this…
Connect the Rest
For all the labels (yearLabel, titleLabel, locationLabel), we want to
change the text.
For the Play button we want to change the image, so we click on
our Play Button component and select set PlayButton.Image to
…then connect the select item. The list will be the imageList.
For the Player we want to change the source, so click the player
component and drag out the set Player.Source to and follow the
same steps as above. What list are you going to connect to?
For webviewer.1, we want to change the URL. Click the
component and look for WebViewer1.GoToUrl. Follow the same
steps as above.

10.
10
Almost Done! But let’s play some music…
Finally, when the PlayButton is clicked, we want to hear a sample
of music from that time period. We already connected the audio
files to the player source, but we did not yet tell the app when to
start playing the audio.
Player
What do we want to happen? Click the button and the audio
plays…
So select the PlayButton from the components, then grab the
when PlayButton.Click block. Then select the player component
and grab the call Player.Start block (it should be purple). Connect
these two. It should look like this:
Now Test Your App!
On your phone, download the AI Companion app. Click Connect,
then AI Companion. A QR code should pop up, and scan the QR
code or type in the code.
You can also download the app, by clicking Build. You can either
use the QR code or you can download the app, and email to
yourself.
Remix it with different information!

11.
11
3:40 PM Thunder Props reflection
1. Everyone log on to your Twitter account
2. Today we are going to give props to our peers in the
#youthledtech program
3. We have created a prompt for you to fill in on your Twitter
account and on 3 we will all send our tweets at the same
time.
a. PROMPT: “My app will address_______ because
___________ #youthledtech”
b. Make sure they use the hashtag so that we can view
all of the tweets
4. READY??
5. After you read the prompt give students 1 minute to
complete and tell them to raise their hand once they have
typed their message. Tell them “DO NOT hit send until I say
so.”
6. Once everyone has constructed their tweet then count down
3, 2, 1, SEND!!
7. Read a few tweets from the screen and then do a live
Thunder clap.
3:55 PM Sign out
Make sure each youth is accounted for.

12.
12

13.
13