Trial Class – Advanced Batch – Class 4,5 and 6

Topic: Introduction to App Design

Objective Introducing the child to the basics of App creation process. Child
should be able to create a basic real-world App using the App Lab on
code.org

Class Time 45 minutes

Resources Ensure that both the teacher and the student are ready with the
Required resources mentioned below. Please check with the student at the start
of the class if he or she has the following details:
Teacher Resources
○ Earphones with Mic
○ Notepad and Pen
○ Code.org login:
■ Username : codelqdemo@gmail.com
■ Password : Demo123
● Student Resources
○ Earphones with Mic (Optional)
○ Notepad and Pen
Class structure Warm Up / Ice- Breaker: 4 minutes
Introduce the Topic for Today: 3 minutes
Teacher-Led Activity: 20 minutes
Student-Led Activity: 15 minutes
Wrap-Up: 3 minutes

Warm Up Session
Objective: To make the child comfortable at the beginning of the class. Also understand
how much the child knows about computer

The teacher could ask questions like

- what is the name of the child? Which school does he go to?
- What are the child’s hobbies?
- Does he know how computer works?
- Does he play games on the phone or computer?

Introduce the Topic for Today

Tell the child that:
- Today we are going to learn how to make basic phone apps. What do you
typically do using your parents phone?
- Do you use it to click pictures or listen to music?
- Do you know that camera is an app which helps you click pictures, similarly
music player is also an app which lets you play music
- There are many such apps and our phones are full of these, which help us
perform some task or the other
We create APPS for a purpose. Today, we will create an app to change color of screen
when a button is pressed.
Teacher Led Activity – 20 minutes
Our big goal is APP CREATION. There are 4 steps we will follow to do this.

Click the chat icon in the left panel of the screen and Copy Paste the Steps into Chat
window for Student to see

Step 1: Define a Purpose - What should the App do?

Step 2: Design the App - We select the design components we want in our app and
arrange them as per the layout which we want. In real life a designer usually prepares this
on a design software and then the coder codes for it
Step 3: Code the App - Use required code blocks to attain the desired functionality of the
app
Step 4: Run the App - Run the app and check if it works Now, let's do it.

This icon indicates that the teacher should get into a QnA mode with the child
where the teacher gives some cues to the student to direct the child to the right answers

Step 1:Define a Purpose:

What did we say is our purpose for the app?

When I click the button the color of the screen should change to my
favorite colour – say “green”.
Which means:
A: When I click the button
B: Color of the screen should change to green.

I will share screen and show you the rest

This icon indicates that the teacher should start a screenshare

Teacher to initiate screen share

Teacher tells the student the following
Press CREATE NEW to start new
app project
Teacher does the following
Teacher Activity – Trial Class: APP LAB
It will prompt for sign-in. Login using the
following credentials:
- Username : codelqdemo@gmail.com
- Password : Demo123
Step 2: No step 2 says “Design the App”.
Choose the design elements we want. Once on the page, Press

This is our design environment, in the top menu bar.

Design Mode

Goto Design Mode on top left

Explain panels as shown in the

image below.

● Mobile Screen
● Design Toolbox

The design elements we will use 1. Drag Button on Screen

are SCREEN and BUTTON.

We already have a screen which

we will use and

From the DESIGN TOOLBOX,

select and drag BUTTON and drop into
the MOBILE SCREEN.
The moment we will click on this
button, the colour of the screen witll
change.

This concludes our mobile design.

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.
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.

Now we come to Step 3. Toggle to Code Mode

Step 3: Code the App

This is how our CODING

ENVIRONMENT looks like,
1. Goto Code Mode
Now there are 2 ways in which we
can write our program or code. Explain panels as shown in the
image below:
1. Block Based Coding ● ToolBox
In this type of coding the Workspace
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.

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:
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. This is what
is called a Computer Program.

“When” in english translates into

“OnEvent” in coding language. So
this tells the computer what needs
to be done when a particular event
happens.

“Change” in english translates into

“SetProperty” in coding language.
This will tell the computer what
needs to be done when the button is
clicked.

So, we have dragged exactly these

two code blocks.

Now, set proper values in the blocks.

Change the ID to “Button 1” as that is the name of our button.

“When I click the button” 3. Change the values of parameters

as shown from the drop-down list.
Now reads as
“onEvent, button1 is click”

“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

Step 4: Run the App

Now, click the BUTTON on screen to

click to run
see it work.
 4. Click the Run and press Button on
mobile screen to see the code working

When you clicked the “Button” what
happened?
Wow! Did you see the app works
and it changes the screen color.
Now let me delete all the blocks and
write the code in text. Lets see how it
works.
click on on
Top Right Corner to Switch to Text
Mode.
Drag all the blocks back to ToolBox
to clear the workspace and click on
on Top Right
Corner to Switch to Text Mode.
Type the same code.
onEvent("button1", "click",
function( ) {
setProperty("screen1",
"background-color", "red");
});

You see as I am typing the

instructions the code shows me
options, this feature is called
autocomplete, this helps
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 langauge, like
here the yellow triangles indicate
warning which means we have not
put semicolons. semicolons tells the
computers that code line ends here
as the computer executes the code
line by line.

Just the way how a period or full

stop indicates the end of
sentence in English language. So
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

apps works

Click the Run and press Button on

mobile screen to see the code
working

so
OnEvent:When Function:
Do this setProperty: Change.

This code in text form this reads exactly what our purpose is.
When button1 is clicked Do This
Change screen1 background-color to green
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. Lets design your own app and use a
button to change the colour of the screen to blue.

Student Led Activity: 15 minutes

● Ask Student to press ESC key to come back to panel

● Guide Student to start Screen Share

● Teacher gets into Fullscreen
In the Student Panel, click the link Student Activity 1 - APP LAB
for the Activity 1.
Guide the student to complete this
This will require you to sign-in. Use the activity.
email and password I shared with
you on chat window to login.
Copy Paste the Login and
Share the login details with the child Password in chat window
and ask him to login: - Username :
- Username : codelqdemo@gmail.com
codelqdemo@gmail.com
- Password : Demo123
- Password : Demo123

Guide the student through the 4 steps we

listed above one by one, and help the
child finish it slowly.

As student does the activity, use

encouraging remarks like “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

Now that the activity is complete,

guide the child to share the app.

Great Job! Excellent! Your app is

working.

Now that you have built an app, give

it a Name and Share it. To do this:
 1. Click Rename and name
your project.

This app is not downloaded as to

convert this app into
downloadable app we need to
perform 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.

Teacher Guides Student to Stop Screen Share

Wrap - UP
Wow. You did really well and I am very happy with the way you picked up
coding so fast. Let me give you a star for this. You really deserve it.

The app which you made today is not available on play store right now. But
during this course we will make apps which you can download from the
playstore.

How did you like class today?

Ask some questions to the student about the class today and
prompt him with help if required.

What are the 4 steps to build an app successfully?

Step 1: Purpose of the app

Step 2: Design the App
Step 3: Code the App
Step 4: Run the app: to see it working
You have been really excellent and very well focused in the class. I hope
you really liked it. We will do interesting coding as we go along in this
course. Hope you had fun. See you in the next class.

Bye!