Thunkable Recap

Hello Again!

It’s been a while!

We will do a quick recap of what we’ve covered so far to

bring you up to speed.
Final Project

We are still going to be working on our final projects.

I am going to get you to share your final projects with me

so I can look at them.

I will show you how to share your final projects at the

end of this lecture.
Thunkable

● We are using this program to make apps.

● https://thunkable.com
● Use your CTYI account to log in.
● CTYI Google Account
Your CTYI Google Account

The username is your first name, followed by a dot (.)

followed by your last name, followed by @ctyi.org

The password for everyone is CTYI2020

 X

Make sure you click Sign in

with Google
The Tutorials sidebar:
Thunkable comes with a bunch of
built-in tutorials that give you a
step-by-step guide of how to make
certain app.
You can close this by pressing the ‘<’
button.
The Phone view:
The phone in the center of
the screen lets you preview
how your app will look.
The Components Palette:
This holds all of the different
elements, or ‘Components’
you can place inside your
app.

Try adding a Button to

your app by dragging it
from the components
into the Phone!
 You will now see the Button
show up in you App’s
components.
This area shows you
everything that you have
added to your app.

You can delete the button by

clicking the Bin beside it.
The Properties-
Every Component has a set
of properties.
Does any know, what is a
property?
(and I’m not talking about
houses!)
The Properties:
This describes the
characteristics of a
component, such as how it
looks, acts, etc.
Try to change the text
inside the button. What
property do we need to
change to do this?
The Component Name:
Even though the button
contains the text ‘Click
Me!’, its name is still
‘Button1’. This is because
the name of a component
and the text inside are
different things!
If you want to rename a
component, click on the
pencil button.
Simple and Advanced
properties:
You can see that there are
tabs for both Simple and
Advanced properties. 99% of
the time you’ll be using
Simple properties.
Simple properties:
Scroll through the Simple
properties and take a look at
what you are able to change
with the button.
Play around with these
options.
Try to do this every time you
use a component for the first
time- it will help you see
what you are able to do.
Components

We looked at the different

components in Thunkable and how
to use them.

Does anybody remember, what does

‘User Interface’ mean?
User Interface

● The user interface (UI) is like the stage of the play - everything
the user is meant to see is part of the UI.
● Button: You can click this to make something happen.
● Label: Lets the app display text.
● TextInput: Lets the user input text into the app.
User Interface

● ListViewer: Lets you show a list of

items. The user can click on one
of them to pick it.
● WebViewer: Lets you add a web
browser into your app. This lets
the user view websites and be
able to click on different pages.
User Interface

● Switch: Lets the user choose

from a yes/no option.
● Slider: Allows the user to
select from a slider.
● Alert: Lets you display an alert
to the user (pictured).
Layout
This contains components
that will help you arrange
you2 app in a more neat
manner.
Layout
Navigators: These let you change how
the user moves through your app.

Tab Navigator: Lets you navigate the app

using a tab on the top of the screen.

Stack Navigator: Lets you open each

screen like a page on a stack of sheets

Drawer Navigator: Lets you open a

drawer on the side of the screen where
you can choose screens.
Layout
To add a navigator
or Screen to your
app, you have to
drag it into the app
components, not
the phone preview.
Layout
Screen: Each separate page of
your app will be a separate
Screen.

You use a navigator to get

around the screens of your app.

Once you add a Navigator, you

can add screens to it by
dragging them into the
navigator component in the
components window (red box)
Tab Navigator in the App Components and on the phone. The name of each
screen becomes the name written on each tab. Here there are three
screens. Notice that each screen is set inside the Tab Navigator component.
Layout

Row: Lets you arrange a number

of components in a row, one
under the other.

Column: Same thing, but lets you

place components side-to-side
instead.
Layout

You can use Rows and

Columns in interesting
ways together.

Experiment with adding

Row and Column
components and try
adding other components
within them.
Voice
This section lets you add sound or voice capabilities

to your app.

Sound: Lets you play a sound file, such an MP3. Used for sound effects, music,
etc.

Text To Speech: Makes the app read out some text.

Speech Recogniser: Allows the app to interpret the user’s speech as text.

Assistant: Lets you use an electronic assistant (like Siri) in your app.

Translator: Lets you translate text from one language to another.

Image

This lets the app display visuals and pictures.

Image: Lets you add a picture into your app.

We will now use the image component.

Drag one into your phone. You will notice that you can see an
icon with no actual picture. This is because we need to tell the
phone which image file to display.

Open Google Chrome and find any picture from Google

Images. Then, save it to your computer.
Image

This lets the app display visuals and pictures.

Image: Lets you add a picture into your app.

We will now use the image component.

Drag one into your phone. You will notice that you can see an
icon with no actual picture. This is because we need to tell the
phone which image file to display.

Open Google Chrome and find any picture from Google

Images. Then, save it to your computer.
Image
To save a picture from Google Image,
find the picture you want and click on
it to make it bigger. If you save the
small image (known as the thumbnail),
the quality will not be good.

Right click on the picutre and select

‘Save Image As…’

Make sure you don’t select ‘Save Link

As…’ as this will save the whole
website.
Image
To add the file you just saved to Thunkable,
scroll the app components down until you
see the Files area.
Scroll
Down
Here you can click ‘Choose a File’ and find
your file where it was saved on the
computer, or you can drag the file from the
bottom right of the screen into the area.
Drag
This
Image

Once the image has been added from your computer to Thunkable,
you will see its name in the Files list.
Image

To actually attach the image file to the Image component, click on

the image and find the Picture property.

Select the file you want to display

from the dropdown menu and
click it.

Adjust the Height and Width

components if the image is the
wrong size or stretched.
Screens

You can add multiple screens into your app by pressing the +
button.

You can then switch between them by clicking on their name.

Blocks
 This white space is where you will place your
Blocks View blocks.
Every screen has a different set of blocks.

You can press the + and - buttons here to

zoom in or zoom out your blocks view.
 You can see a
bunch of
headings on the
Blocks View
left, eg. Control,
Logic, etc.
These are types
of blocks you
can use in your
app.
The most
important ones
are the grey
ones at the
bottom!
Blocks
Those first sections are the default blocks.
Ignore these for now. They are first but
you won’t be using them the most.

The gray blocks at the bottom are for

your components.

You will be using the gray ones the most.

 Blocks

Notice that I have a Button and a Label in my app. You

can see that there is a Button and a Label section in my
Blocks view. There is a section for each component in
your app.
Block Colours

The Colours of the Blocks actually

mean something. They give you a
hint as to what the block is used
for.

● Yellow: The block is an ‘Event

Listener’.
● Green: The block is a property.
● Purple: The block is a function.
Yellow Blocks - Event Listeners

You always need an Event Listener when you want some kind of action to
occur in your app - the Event Listener is what determines when the action
occurs.

Any block that we put inside here will activate

when Screen1 opens.
Green Blocks - Properties

There are two types of

green blocks: Set and Get.

What is the difference?

SET lets you change a

property.

GET only lets you see the

property.
Purple Blocks - Functions
Functions are like a set of instructions, but combined into one
command.

Try adding this block into your app

Variables
Variables This is like a box that stores information. The
information can be a number, a word, a
sentence, anything.

The most important thing is that it can

CHANGE. This is vital for keeping track of
score, position of character, anything that
CHANGES.
This is an example of a variable called ‘myScore’
Variables in Thunkable

Click on the ‘Variables’

drawer in Thunkable to see
the Variables blocks.
 Creating a variable

Use the ‘initalize’ block to create a new variable.

Here I’ve created a variable called ‘my name’. I’ve made it equal
to ‘Hristo’.

I’ve created a box labelled ‘my name’ and put ‘Hristo’ inside it.
‘App’ variables

These are stored directly in the app’s files.

Not good for really big variables (such as lists)

as it will make the app take up a lot of space.
‘Stored’ variables

These are stored directly in phone’s database.

Better than ‘app’ for big variables.

‘cloud’ variables

These are stored on the internet.

It lets you access the same variable on

multiple different phones.
Changing variables ‘Set’ lets you change the variable to a
specific value.

‘Change’ lets you increase or decrease

the variable by a certain number (only
works if the variable contains a
number!)

There is also an Event Listener which

activates when the variable changes.
Lists in Thunkable
 Lists

Lists are a very important part of making apps.

We’ve learned how to create Variables.

These allow you to store just one piece of

information.
 Lists

However, you will often need to store LISTS of information.

Can you think of any apps that may need to use lists?
The Youtube App
Messenger Apps
Video Games
Lists

Lists are like variables where instead of just one

piece of information, we have a whole list of
information inside the bucket.

List
Lists

The List-related blocks in Thunkable

can be found in the blue ‘Lists’
drawer.
Making Lists
You can make a list the same way you would any
other variable.

Use the ‘initialize’ block in the Variables drawer/

Filling Up Your Lists

When you’ve made your List Variables, you need to

actually fill them up.
List Indexes

How do we know at what position we

currently are in the list?

We use what’s called an ‘Index’ variable.

This is like a counter that tells you where you

are currently in your list.
List Indexes

In this list, what is the index of the first

question?

What about the third question?

List Indexes

The index of the first question is 1.

The index of the third question is 3.

List Indexes

Here is a list with four names, and the indexes.

1
2
3

4
 Getting something from a list at a certain Index

Say we want to get the Item in a List at the position of the

index.

For instance, if we want the first, second, third, etc. item.

If our index is one, we will get the first item, if it is two, we

will get the second item, etc.

How do we do this?
Getting the List Value at
a Certain Index

The block we need is:

‘In list ___ get #’

Getting the List Value at a Certain Index

The List Variable List Index

goes here. Variable goes
here.
Getting the first item from a list and putting
it in a label
For next time...

I want you to work on your final project.

You can find many tutorials online:

https://community.thunkable.com/c/thunkable-cro
ss-tutorials

https://www.youtube.com/channel/UCHDDjy-6nb
gwdrJpSZIfCOA/videos
 Sharing a Project

You will email me your project so I can check it.

Go to https://mail.google.com and sign in to your CTYI

account.
 Sharing a Project

Click on Compose.
 Sharing a Project

Click on Compose.

In ‘Recipients’, type my email: [email protected]

Sharing your Thunkable Project

Back in Thunkable, open the project you want to

share.

Click on Share.
Sharing your Thunkable Project

Click on ‘Generate Link’

Then click on ‘Copy’

Sharing your Thunkable
Project

Then paste the link

to the project into
the email.

Finally, click ‘Send’

to send it to me.
Homework

Work on your Thunkable Project.

Send me the link so I can provide you with feedback.

These lectures will be available online,

Final Project Design Document

This is in your Google Docs.

https://docs.google.com

Open this up and use it as a guideline to make your

app.

You can even edit it if you want.

DESIGN DOCUMENT
●It expresses the core idea of the app.

●It must be nice and short, so keep it to 2/3

pages.

●This is like a business plan, but for an app.

WHAT IS IT?

● It expresses the core idea of the game.

● Keep it to 2/3 pages.
● This is like a business plan, but for an app. It is
used to pitch the app to investors/publishers.
 WHAT SHOULD YOU PUT IN IT?
● Introduction (what is the name?)
● Description (how will someone use the app?)
● Key features (camera, high scores, multiplayer, touch controls,
etc)
● Category (where it will be in the app store)
● Platform
● Concept art.
INTRODUCTION

● This will sell the app to the reader.

● Try to describe the app in an exciting manner.

DESCRIPTION

● In a few paragraphs or a page, describe the app to the

readers as if they are the user.
● Use the "you" tense.
● Try to make this section a narrative of the user’s
experience.
● Describe exactly what the user does and sees.
KEY FEATURES
● This is a bullet point list of items that will set this
app apart from others and show people how it
will improve their lives/make it interesting to
use.

● It's a summary of your app.

CATEGORY

● Broad Category:
○ sports, productivity, game, etc
PLATFORM

● You should also indicate which platform

you will release the app for.
CONCEPT ART

●If you have any sprites, backgrounds, etc,

include them here.

●Draw some pictures, on paper or using

Paint that will show how your app will look.
Homework

Work on your Thunkable Project.

Send me the link so I can provide you with feedback.

These lectures will be available online,