Adv T

Topic APPLICATION DESIGN
Class De-constructing Advanced App Creation into sequential process

Description elements. Kids create first real-world app using code and design
to gain creation confidence.
Class ADV-T
Class time 45 mins
Goal ● Introduction to the process of creating real world apps
Resources ● Teacher Resources

Required ○ Code.org login: It is advisable for teachers to create 2
or 3 dummy gmail ids of their choice beforehand and
share the same with trial class students for smooth
code.org login
■ Username: democlas21gmail.com
■ Password: 123456
○ Earphones with Mic
○ Notepad and Pen
● Student Resources
○ Code.org login
■ Username: democlass@gmail.com
■ Password: 123456
○ Earphones with Mic (Optional)
○ Notepad and Pen
Class structure Warm Up 5 Mins

Teacher-Led Activity 20 Mins
Student-Led Activity 15 Mins
Wrap-Up 5 Mins
Start the video call from H2H
Class Steps Say Do
© 2018 - WhiteHat Education Technology Private Limited.

Note: This document is the original copyright of WhiteHat Education Technology Private Limited.
Please don't share, download or copy this file without permission.
1
Step 1: Ask the student to get into
Warm up Fullscreen mode.
(5 mins)
Hi, my name is_____, may I know
your name?
Today we will learn to make a

mobile app.
What do you typically do using Encourage students to share

your parents phone? examples
Sample Answer: Youtube video,

Games, Music, Click pictures
For example: Camera is an app,

which lets you take pictures, Music
is an app which lets you play music
We create APPS for a purpose.
Today, we will create an app to

change the color of a screen when
a button is pressed.
Step 2: Our big goal is APP CREATION.

Teacher-Led There are 4 steps we will follow to
Activity do this.
(10 mins)
Step 1: Define a Purpose: Click this icon in the bottom left

What the app should do. of the screen and
Step 2: Design the App: Copy Paste the Steps into Chat
window for Student to see
2
We select the design components
we want in our app
Step 3: Code the App:
Use required code blocks
Step 4: Run the App:
Run the app and check if it works
Now, let's do it.
Step 1:Define a Purpose:
What did we say is our Ask the student this question.

purpose for the app? Prompt the student to reply with
purpose of the app.
When I click the button the

color of the screen should change
to my favorite colour “green”.
Which means:
A: When I click the button
B: Color of the screen should
change to green.
What are examples of things Ask the student this question

that work on buttons?
To switch on/off a light, we

press a switch button
Similarly, for TV switch on off, we
use the power button on
Remote/TV
So, Step 1 is now complete.
I will share screen and show you

the rest
3
Teacher Initiates Screen Share
Teacher Activity 1: APP LAB
It will prompt for sign-in
Login using
It is advisable for teachers to

create 2 or 3 dummy gmail ids
of their choice beforehand and
share the same with trial class
students for smooth code.org
login
Username:
democlass6@gmail.com
Password:
123456
Press CREATE NEW to start new Press in the

app project top menu bar.
Step 2: Design the App Design Mode

Choose the design elements we
want.
This is our design environment, Goto Design Mode on top left

4
Explain panels as shown in the
image below.
● Mobile Screen
● Design Toolbox

5
The design elements we will use
are SCREEN and BUTTON.
We already have a screen which

we will use and
1. Drag Button on Screen
From the DESIGN TOOLBOX,
select and drag BUTTON and drop
into the MOBILE SCREEN.

6
Step 3: Code the App Toggle to Code Mode
We use code blocks that we want.
1. Goto Code Mode
Explain panels as shown in the

This is how our CODING image below:
ENVIRONMENT looks like, ● ToolBox
● Workspace
Now there are 2 ways in which we

can write our program or code.
1. Block Based Coding

In this type of coding the
commands are already present in
the form of blocks you just have to
drag and drop commands.This is
easier and faster way of code.
2. Text Based Coding

In this type of coding you have to
type the commands. This is how
most programmers program by
typing the program.
In this course we will be learning

both the methods of coding initially
we will start with block coding and
then when you feel confident we
can switch to text so that you can
code like professional
programmers.
7
Let me show you how we can
switch between Block Mode and
Text mode.
I am going to first code in blocks

and then in text.
Select required code blocks from

the TOOLBOX PANEL and drag
them into the WORKSPACE area.
Based on our purpose:

8
● A: When I click the button
● B: Color of the screen
should change to green. To see the full list of all events,
scroll in the Toolbox area.
2. Drag and Fit:

○ Drag the
onEvent block
○ Drag the
setProperty block
For a computer to understand it,

we need to translate the purpose of
the app into computer code
“When” in english translates into

“OnEvent” in coding language
9
“Change” in english translates into
“SetProperty” in coding language
So, we have dragged exactly these

two code blocks.
Now, set proper values in the

blocks.

10
“When I click the button” 3. Change the values of
Now reads as parameters as shown from the
“onEvent, button1 is click” drop-down list.
“Change Color of the screen to

green”
now reads as
“setProperty,to screen1
background-color to green”
We are done with the Step 3 which

is coding part

11
Step 4: Run the App
Run the app
click to run
Now, click the BUTTON on screen

4. Click the Run and press the
to see it work. Button on mobile screen to see
the code working
Wow! Did you see the app works

and it changes the screen color.

12
Now lets me delete all the blocks
and write the code in text. Lets see
how it works.
Drag all the blocks back to
ToolBox to clear the workspace
click on and click on
on Top Right Corner to Switch to
Text Mode. on Top
Right Corner to Switch to Text
Mode.
Type the same code.
You see as I am typing the onEvent("button1", "click",

instructions the code shows me function( ) {
options, this feature is called setProperty("screen1",
autocomplete, this helps "background-color", "red");
programmers to program });
faster.you can press the down
arrow key to choose from the
options.
Since textmode is more strict than

block mode you have to follow the
rules of the javascript language.
See here- the yellow triangles
indicate warning which means we
have not put a semicolon.
A semicolon tells the computer that
code line ends here as the

13
computer executes the code line
by line.
Exactly like how a period or a full

stop indicates the end of a
sentence in english language,
similarly even computer languages
have grammar rules which are
called Syntax.
We will learn more of this in detail

along the course
Okay now lets run and see if the Click the Run and press Button
app works. on mobile screen to see the
code working.
In coding “Function” means “do this”, it is a way of telling the computer to do

something.
so
OnEvent: When
Function: Do this
setProperty: Change.
This code in text form reads exactly what our purpose is-
When button1 is clicked Do This
Change screen1 background-color to green

14
Teacher Stops Screen Share
Did it work? What colour did the

mobile screen turn into?
Green?
Yes! It worked.
Now, please do all this at your end

and change the colour of a screen
to one of the following
Red/Blue/Yellow.
Key points to remember
PURPOSE: When button is

clicked, change screen colour
DESIGN: Drag button
CODE: When button1 is clicked;

change screen1
background-color to COLOR
Now reads as:

“onEvent, button1 click”
“setProperty, screen1
background-color green”
Run: to see it work
Now it’s your turn.

15
Teacher Reference 1
-YOUTUBE TUTORIAL
Teacher can Refer to this
tutorial and generate
APPETIZE LINKS for trial
students. This is one time job
as links once generated don't
expire and can be used for all
trial classes.
Teacher Activity 2 -ANDROID

APPS
Teacher Activity 3 -APPETIZE

Teacher is expected to Signup
using their gmail.
Teacher is expected to go
through the Teacher
Reference 1 Youtube Tutorial
and Create Appetize links for
all apps from Teacher Activity
2 & 3 to share with the
students via Chat
● Ask Student to press ESC key to come back to panel

● Guide Student to start Screen Share
● Teacher gets into Fullscreen

16
Step 3: In the Student Panel, click the link Student Activity 1 - APP LAB
Student-Led for the Activity 1
Activity Guide the student to complete
(10 mins) this activity.
I want you to code in block Let the student code in Block

mode for now as this is your mode only
first class and as we progress
we will learn to code in text.
It will prompt for sign-in

Copy Paste the Login and
Password in chat window
Login as
Username:
democlass@gmail.com
Password:
123456
Use the email and password I

As student does the activity, use
shared with you on chat window to
encouraging remarks like
login.
“Great”, “You are doing good”
“Good Job”.
Student to repeat all 4 steps

above and do exactly the entire
activity with their selected colour
Guide the student as required

using the steps above.

17
Great Job! Now that you have built
an app, give it a Name and Share
it. To do this:
1. Click Rename and

name your project.
2. Click Share to share

your project. Copy
the project link and
paste it in the Project
Link Field on the
student panel and
click Submit Button.
Ask the student to Copy the

project link and paste it in the
Project Link Field on the
student panel and click Submit
Button.
This app is not downloaded. To
convert this app into
downloadable app we need to
perform a few more steps which
you will learn in the course
ahead.
However, the link of your app

will be shared with your parents
via email. Don't forget to open
the link on any mobile to see
how it appears.

18
Excellent! Your app is working.
Teacher Guides Student to Stop Screen Share
You did really good. You Press the star icon to award a
deserve a star star
Step 4:
Wrap-Up
(5 mins) Let me tell you a surprising fact,
along the course we are going to
make more advanced apps and
games , space simulations , 3D
Models and publish them on
google play store and apple
appstore under your name so
that people all around the world
can download them. Do you
know as many as 149 countries
download apps from google play
store and apple appstore each
day.

19
Student Activity 2 - PLAYSTORE
+APPETIZE LINKS
Goto Activity 2 to see the many
Let the student see the
apps created by other students
playstore list of apps
published on Play Store.
published
I am going to share 2 apps links via
To get the kid excited SHARE
chat. You can checkout these app
Any 2 Appetize links with the
in your browser
student via chat to get the
Are you ready.
students checkout 2 apps.
Short Description about the apps:
More Appetize links can be
shared if time permits
This is the same app we created

Note: Only one Appetize link
and along the course you will learn
should be open at one time.
how to make it installable and
publish on playstore.
This app is like whatsapp which

lets you chat with your friends
anywhere in the world
This is an accurate simulation of

sun and earth system. You will see
the sun is 15Million Km from earth
20
and therefore earth takes 365 days
to complete one revolution.
Move th earth using your cursor
and you can calculate the days in
year it would take for one complete
revolution.
I am sure you have played

cross-and-zero game, this is the
same app and it is connected to
cloud this app lets you play tic tac
toe with anyone across the globe.
Not just apps let me show you

Chatbots with Artificial Intelligence Student Activity 3 - CHATBOT
created by students for themselves SHOWCASE
You will also learn to design 3D Prompt the student to type a

Space Models like 3D Launch few questions on the chatbot
Vehicles, 3D Satellites etc let me eg.
show you one of those. Who created you
This is the 3D Models of ISROs What is your name
CHANDRAYAAN LAUNCH Which sports do you like
VEHICLES. What is your favorite book

21
Student Activity 4 - 3D
CHANDRAYAAN LAUNCH
VEHICLES
Click .
How did you like the class today?
What are the 4 steps to build

an app successfully?
1. step 1: Purpose of the app

.
2. step 2: Design the App
3. step 3: Code the App
4. Run the app: to see it working
You have been really excellent and

remarkably engaged in this class. I
Press the star icon to give a star
am pleased. You get one more
star.
We will do interesting coding as we

go along in this course.
Hope you had fun. See you in the

next class.

22
Bye!
Teacher Clicks
Additional Okay Great! Additional Activity 1 - APP LAB

Activities Ask the student to follow your
We can successfully change the instructions as the student
color of the screen when button is makes the following changes
pressed,
What if I want to change the screen
color to any random color every
time the button is pressed.
I will guide you to do the same.
1. Goto and
Drag
block and drop it at the

place where you selected
color from in setproperty
block
2. Now Goto
and
Drag
and drop it at r in the rgb

block.

23
Let me explain what we did.
1.The rgb block stands for mix of

RED+GREEN+BLUE shades and
the values we put are shades of
red green blue and the last number
is transparency.
2.The randomNumber lets the

computer selects any number
within the range you provide it.
In computer every color has 256

shades so here what we did is we
let the computer choose any shade
of red from 0 to 255 using
randomNumber block so we get
random shade of RED everytime
we click the button.
We are keeping shades of green

and blue the same default values
and also the transparency is set
default 0.5.
Now lets run and click the button

as many times as possible to see
what happens.
click to run

24
Click the Run and press Button
on mobile screen to see the
code working
Additional Activity 2 - APP LAB

Ask the student to follow your
You are doing great! instructions as the student
makes the following changes
To make the button look great in
your app lets make some design
modifications to the button.
Go back to Mode and

click on the button to see it
properties.
Make the following changes to the

button properties.
1.
Change the button text to

Click Me! to make it appealing this
will make the user curious to press
it to see what happens when the
button is pressed.
2.

25
Change the border radius to 20 this
will give your button circular look to
make it look more advanced when
you open the app on mobile phone.
click to run
Click the Run and press Button

on mobile screen to see the
code working
The link of your app will be
shared with your parents via
email. Don't forget to open the
link on any mobile to see how it
appears.

26
Activity No. Name of the Link
27
Activity
Teacher Activity 1 APP LAB https://studio.code.org/projects/applab/new
Teacher YOUTUBE https://youtu.be/e9IipmBbtlQ

Reference 1 TUTORIAL
Teacher Activity 2 ANDROID APPS https://drive.google.com/drive/folders/1plNVpqc

_hKh7EPhq7I3cDfv5DOoC4xsf?usp=sharing
Teacher Activity 3 CREATE https://appetize.io/

APPETIZE LINKS
Student Activity 1 APP LAB https://studio.code.org/projects/applab/new
Student Activity 2 PLAYSTORE+APP https://play.google.com/store/apps/developer?i

ETIZE LINKS d=WHITEHAT+EDUCATION+TECHNOLOGY
Student Activity 3 CHATBOT https://bot.dialogflow.com/82e2fc96-1906-4bd8

SHOWCASE -a9d2-84a17f04ea54
Student Activity 4 3D https://www.tinkercad.com/things/lriqDFOnu7A

CHANDRAYAAN
LAUNCH VEHICLE

28

Adv T

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Adv T

Încărcat de

Drepturi de autor:

Formate disponibile

Topic APPLICATION DESIGN

Class De-constructing Advanced App Creation into sequential process

Class time 45 mins

Goal ● Introduction to the process of creating real world apps

Resources ● Teacher Resources

Class structure Warm Up 5 Mins

Start the video call from H2H

Class Steps Say Do

© 2018 - WhiteHat Education Technology Private Limited.

Today we will learn to make a

What do you typically do using Encourage students to share

Sample Answer: Youtube video,

For example: Camera is an app,

We create ​APPS ​for a purpose.

Today, we will create an app to

Step 2: Our big goal is​ APP CREATION.

Step 1: Define a Purpose: Click this icon in the bottom left

Now, let's do it.

Step 1:Define a Purpose:

What did we say is our Ask the student this question.

When I click the button the

What are examples of things Ask the student this question

To switch on/off a light, we

So, ​Step 1 ​is now complete.

I will share screen and show you

Teacher Activity 1: APP LAB

It will prompt for sign-in

It is advisable for teachers to

Press ​CREATE NEW ​to​ ​start new Press in the

Step 2​: ​Design the App Design Mode

© 2018 - WhiteHat Education Technology Private Limited.

© 2018 - WhiteHat Education Technology Private Limited.

We already have a screen which

© 2018 - WhiteHat Education Technology Private Limited.

1. Goto ​Code Mode

Explain panels as shown in the

Now there are 2 ways in which we

1. Block Based Coding

2. Text Based Coding

In this course we will be learning

I am going to first code in blocks

Select required code blocks from

Based on our purpose:

© 2018 - WhiteHat Education Technology Private Limited.

2. Drag and Fit:

For a computer to understand it,

“​When​” in english translates into

So, we have dragged exactly these

Now, set proper values in the

© 2018 - WhiteHat Education Technology Private Limited.

“Change Color of the screen to

We are done with the Step 3 which

© 2018 - WhiteHat Education Technology Private Limited.

Now, click the ​BUTTON ​on screen

Wow! Did you see the app works

© 2018 - WhiteHat Education Technology Private Limited.

Type the same code.

You see as I am typing the onEvent("button1", "click",

Since textmode is more strict than

© 2018 - WhiteHat Education Technology Private Limited.

Exactly like how a period or a full

We will learn more of this in detail

In coding “Function” means “do this”, it is a way of telling the computer to do

We create APPS for a purpose.

Step 2: Our big goal is APP CREATION.

So, Step 1 is now complete.

Press CREATE NEW to start new Press in the

Step 2: Design the App Design Mode

1. Goto Code Mode

“When” in english translates into

Now, click the BUTTON on screen

PURPOSE: When button is

DESIGN: Drag button

CODE: When button1 is clicked;

Run: to see it work

Student to repeat all 4 steps

1. Click Rename and

2. Click Share to share

4. Run the app: to see it working

and drop it at r in the rgb

1.The rgb block stands for mix of

2.The randomNumber lets the

Click the Run and press Button