Unit 3

App Development
In today's rapidly evolving digital landscape, the creation of mobile applications stands at the
forefront of innovation. These digital tools have seamlessly integrated themselves into the fabric
of modern life, offering solutions, entertainment, and connectivity at our fingertips. As the
demand for these technological marvels continues to soar, the need for skilled app developers
rises in parallel, opening up a world of opportunities for aspiring creators.

Welcome aboard as we set sail on an exhilarating journey into the realm of app development!
Allow us to be your trusted navigators through uncharted waters, guiding you through the
intricacies of crafting your very own digital masterpieces that have the potential to shape the
future of technology.

• Planning Your App: Blueprinting Your Digital Empire:

Just as a master architect meticulously plans every detail of their grand design, in the
planning phase, you will sketch the blueprints of your app empire. Dream expansively,
envisioning the soaring heights your creation will achieve. Outline its purpose, identify its
target audience, and envision the immersive experiences it will deliver.

• Designing and Coding Your App: Breathing Life into Your Vision
Harness the brush of creativity and the chisel of logic to breathe life into your vision. In
the design and coding phase, you will craft the user interface, sculpting an experience
that captivates and enchants users. With the precision of a virtuoso, you will infuse your
creation with functionality, intricately weaving lines of code that animate it into existence.

• Testing Your App: Refining Your Digital Masterpiece

Picture your app as a culinary creation, with each feature akin to a unique flavor waiting
to be savored. In the testing phase, you will invite eager taste-testers to sample your
digital feast. Observe as they navigate its pathways, relish its offerings, and provide their
palate's critique. Their feedback will serve as the seasoning that refines your
masterpiece to perfection.

As you embark on this thrilling expedition, remember that every challenge presents an
opportunity for growth, and every setback offers a valuable lesson. So, unfurl your sails, plot
your course, and allow the winds of creativity to propel you toward the horizon of app
development excellence. Your adventure into the world of app creation begins now!

1
Chapter 1: Foundations of App Development

Important concepts
• Understanding Elements in App Development
• Sequencing V/S Events Programming
• Screen Layouts
• Understanding the Coding Environment

Understanding Elements in App Development

In today's digital age, the demand for mobile applications is at an all-time high. From social
media platforms to e-commerce websites, mobile apps have become an integral part of our
daily lives. But have you ever wondered what goes into the
development of these apps? In this chapter, we will delve into
the foundation of app development, exploring key concepts
that form the backbone of creating successful mobile
applications.

Mobile apps are small software applications designed

to run on smartphones and tablets. They serve various
purposes, from entertainment to productivity, and have
become an essential part of our daily lives. Developing a
mobile app involves designing, coding, testing, and launching it
on app stores for users to download and use.

Popular Mobile Apps Categories

Mobile apps can be broadly categorized into different genres based on their functionality
and purpose. Some of the popular categories include:

• Entertainment Apps: These apps provide

users with access to a wide range of
entertainment content, such as images,
movies, TV shows, music, and games.
They offer a platform for users to relax,
unwind, and enjoy multimedia content
on their mobile devices.

2
 • Social Apps: Social media apps like Facebook, Instagram,
and Twitter enable users to connect with friends, family, and
the world at large. They facilitate communication, sharing of
updates, and networking in a virtual space, fostering
relationships and community engagement.

• Commerce Apps: Marketplaces like

Amazon, Flipkart, and banking apps like HDFC,
Yono by SBI, allow users to shop online, manage
finances, and conduct transactions conveniently.
These apps offer a secure and efficient platform
for e-commerce and financial services.

• Information Apps: Search engines, news aggregators,

and maps like Google Maps provide users with access to
valuable information and resources. They help users find
relevant content, stay updated on news and events, and
navigate their surroundings effectively.

Activity: Your Favourite Apps

Write down the names of your favourite apps along with what you use them for:

3
 UI/UX Interface

When it comes to creating a mobile app, there are two essential components that work
together to bring the app to life: frontend and backend development.

• Frontend: Design and Looks of the App. This is the part where we focus on the User
Interface (UI). We must think of the flow from one screen to another. This is the part
where we focus on User Experience (UX).

• Backend: What happens when a button is pressed? Coding for different elements is
done here to make sure the UI and the UX elements are implemented. Code.org has
Block-based coding, so this section is called Blocks.

Frontend is what the users see and should look good and be easy to use.

Backend does not need to look good but it should be reliable and fast.

4
 Components of an App - Active/Non-Active

Every app has different parts called components. These components are like buttons or
features you can tap on the screen. When you tap on them, things change on the screen.

For example, when you tap the play button, music starts playing. If you tap the pause button,
the music stops. These buttons are examples of components.

There are many things on the app screen. When you tap or click on them, some make the
screen change or show something new. These things are called Active Components. For
instance, buttons are active components because they do something when you tap them.
But what about the area around a button? Does anything happen when you touch it? These
parts of the app are called Inactive Components.

When you tap on a button that does something in an app, like in WhatsApp, you might be
moved to another screen in the app.

When creating an app, it's important to decide which parts of the screen will do something
when you tap them and what will happen when you interact with these active components.

5
 Activity: Interactive App Components

Look at the provided image of a mobile app interface

(WhatsApp) and the accompanying discussion on active
and inactive components.

Task 1: Active Components

• Identify at least three active components on the
WhatsApp screen.
• For each active component, describe what happens
when you click or touch it.

Write down your observation below:

Task 2: Inactive Components

• Find parts of the screen where nothing happens when you click, touch, or long-
press.
• List at least three inactive components and explain why they do not respond to
interaction.

Write down your observation below:

6
 Activity: Study/Observe the App

Examine the provided images of the YouTube and Google Pay mobile app interfaces.

1. YouTube

2. Google Pay

Personal Experience: Reflect on your usage of YouTube. Why do you use YouTube?
Think about what features or functions of the app attract you the most.

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

7
 Active Components in YouTube:

• Identify 3-5 active components within YouTube.

• Describe what happens when you click, touch, or long-press each component.

Write down your observation below:

Design Comparison: Google Pay vs. YouTube:

• Compare the design of Google Pay, focusing on payments, with YouTube,

primarily for entertainment.
• Discuss how the design elements differ in these two apps.

Write down your observation below:

8
 Design Variations Across App Categories:

• Analyze the design elements of social media apps like WhatsApp compared to
payment apps like Google Pay and entertainment platforms like YouTube.
• Highlight the differences in design approaches for these different types of apps.

Write down your observation below:

Sequencing V/S Events Programming

In the world of creating apps, there are two main ways things happen: following a specific
order or reacting to unexpected events. Events are like surprises that can happen at any
moment, and the app needs to respond to them.

For example:

• If a fire alarm goes off, everything stops, and people leave the building.
• When a school bell rings, the class pauses, one teacher exits, and another gets
ready to enter.

When we design apps, actions don't always happen one after the other. Instead, what
occurs next depends on what the user taps or clicks. Each tap or click is an event that
triggers a particular action in the app's code.

Screen Layouts

Have you ever wondered why some apps look so visually appealing and are easy to use,
while others seem cluttered and confusing?

9
 One of the most important parts of any App design and development is the graphical user
interface (GUI) and screen layout design. Many of the most widely popular Android Apps
are popular because of their Visual Design and Easy or Fun-to-use Interfaces.

Before we jump into designing apps, let's talk about screen layouts. Imagine if you're
building a house - you wouldn't just start putting up walls randomly, right? You'd have a
plan, a blueprint. The same goes for apps!

Let us see how to draw out the screens of the app.

Look at the boxes or circles for images and icons and lines to show text. You don't need to
get into too much detail at this stage. This technique is called wireframing, and the rough
sketch of all the screens in the app is called the wireframe.

Consider this example of the

wireframe of an app screen -

10
 Activity: Match the following

Look at the 3 images below. What kind of layout would the creator have done for each? Can
you match the layout?

Understanding the Coding Environment

A coding environment is like a workshop where you have all the tools and materials you
need to build something. In this case, it's a software application that provides
comprehensive facilities to computer programmers for software development.

www.code.org is going to be your coding environment for this unit.

11
 • Login to App Lab on Code.org.

• Explain its various parts- Run Screen, Workspace, and Tool Box.

• The Code tab is where you program elements of your app. The Design tab is where
you add elements to your app. The Data tab is where you collect and manipulate
data from your app.
• To use coding blocks, drag them from the “Toolbox” to the Workspace. To remove a
coding block, drag it out of the Workspace.
• To adjust the position of elements on your mobile screen, click and drag them while
in the Design tab.
• The screen width is 320 px and the height is 450 px. The position of elements is set
using x and y coordinates measured in pixels.
• When your mouse is on the screen it displays the location in pixels.
• The (0,0) position is the upper left corner of the screen.
• Positions are measured from the upper left corner of the element.
• In the upper right corner of the Workspace, the “ Show Text” button changes the
programming from blocks to text.

12
Let’s Practice

Fill in the blanks:

1. Developing a mobile app involves designing, coding, testing, and launching it on

app stores for users to download and use, which is collectively known as
________.
2. The frontend of a mobile app focuses on the ________ and ________.
3. Wireframing is a technique used to create a rough sketch of all the screens in the
app, known as the ________.

True or False:

1. Every part of an app screen responds to interaction, making them all active
components. __________
2. Sequencing programming and event programming are two distinct approaches to
app development. ___________

13
Chapter 2: Developing Your First App

Important concepts
• Exploring App Prototyping and Computational Thinking
• Game Development - Tappy Tap
• App Exploration and Customization Challenge

Exploring App Prototyping and Computational Thinking

In this chapter, let’s dive into the fascinating realm of creating apps from scratch, starting with
drawing wireframes and gradually progressing to building basic event-oriented apps using App
Lab on Code.org.

But first, let's break it down.

Imagine you have an idea for an awesome app. Maybe it's a game, a tool to help people
organize their schedules, or a platform to share stories with the world. How do you bring that
idea to life? That's where app prototyping comes in.

App prototyping is like sketching out the blueprint for your app before you start building
it. Just like architects draw plans for buildings, you'll draw wireframes for your app.

Wireframes are like rough drafts that outline the

structure and layout of your app. They help you
visualize how everything will fit together and how
users will interact with it.

But creating wireframes isn't just about drawing

pretty pictures. It's also about understanding
computational thinking concepts. Computational
thinking is like a set of problem-solving skills that
help you break down big problems into smaller,
more manageable parts. It's about thinking logically,
organizing your thoughts, and coming up with step-
by-step solutions.

As you create wireframes for simple apps, you'll start to think like a computer scientist. You'll
learn how to identify patterns, predict outcomes, and debug errors. And once you've got the
hang of it, you'll be ready to take the next step and build your own apps using App Lab on
Code.org.

14
Activity: Create a Wireframe
You have been tasked with designing ‘Tappy Tap App.’

In this app -

• Get users to click a moving blue dot as many times as they can
within a time limit
• Give the user a point for each accurate click on the blue dot
• Move the blue dot each time it is clicked

Decompose the problem

Decomposition is breaking a problem down into more

manageable chunks.

Programming an app for a mobile device can be a

daunting task to undertake.

Decomposing the problem helps us make the task less

daunting and more achievable

Imagine that your job is to make the first level of a new platform game. You might start by
decomposing the problem in the following way:

1. Create the layout of the level

2. Add a user-controlled character
3. Add enemies
4. Add score, timer, and power-ups

When you arrive at each decomposed step, you can

now decompose it further.

How might you decompose the ‘player movement’ step further?

5. Add left and right movement

6. Add a gravity effect
7. Add the ability to jump

15
Decompose the Tappy Tap App

Look at the requirements of the Tappy Tap App below.

How would you decompose the problem?

Here are the success criteria that you must meet when building the app:

● Must have a welcome screen, a game play screen, and a final score screen

Welcome screen:

● Must show logo and instructions on how to play

● Must have a button that activates the game play once it is clicked

Game play:

● Game must last 15 seconds before automatically moving to the final score screen
● There must be a blue dot and a red dot that the user can press
● When the blue dot is pressed, the score must increase by 1
● When the blue dot is pressed, the dot should move to a different place on the screen
● The red dot must also move to a different place on the screen when pressed, but the
score must decrease by 1

Final score:

● Must display the user’s score at the end of the game

● Must have a button to allow the user to return to the welcome screen

Start by writing down how you would decompose the task of building the Tappy Tap app, using
the criteria above to help you. There is no real right or wrong answer here, but we recommend
creating no more than five steps to start with.

Step Brief description

1.

2.

3.

16
 4.

5.

Use a different coloured pen, if you have one, when making any changes to your work following
the conversation with your classmates.

Based on the ideas, it's time to put your ideas into action. Your task is to create a wireframe for
Tappy Tap Game.

Remember, a wireframe is like a blueprint for the app. Share your wireframes with the class and
see how each group visualized their game.

17
Game Development - Tappy Tap
Start the project

• Log into App Lab using the login details given to you
• Browse to ‘Start a new project’
• Select App Lab
• Rename your project ‘Tappy Tap App’
• Add a button to the screen

Step 1: Design the home screen & game

screen

• Your task is to implement the design of the welcome

screen (don’t forget to rename ‘screen1’ as ‘welcome
screen’).
• Use your success criteria to help, as well as the
sketched design right.
• Explorer tasks:
1. Add a new game screen
2. Code the button to open the game screen
• You can add ‘Blue Dot’ and ‘Red Dot’ images on the
game screen or can customise the app by adding any
other element of your choice.
• Make sure to name every element that you are adding
on the screen. This will help you to easily code later.

Step 2: Adding Score Screen a.k.a. Last Screen

Design the Score Screen and try to be as creative as you can.

18
Step 3: Game Development
So far, you have:
● Created an app with three screens
● Added an event to a button that will move to the game screen when it is clicked
● Added a timeout to automatically move to the score screen after five seconds

Your code window should look like this:

19
 Now work through the following tasks to develop your game further.

Task Guidance Initial when complete

The blue dot Make sure that you are in Design mode
and have selected ‘Game’ from the
Add the blue dot to the drop-down menu.
game window and give it a
sensible id such as
“bluedot_game”.

Player score Go to the Variables menu and select the

following block:
We need a variable so that
we can make our program
hold and increment a score.

Create a variable and name

it ‘score’, setting the initial
value to 0.

Think about where in your

program ‘score’ should be
declared and set to 0.
Note: You may hear people refer to
creating a variable as ‘declaring a
variable’, as it has the same meaning.

onEvent

Add an onEvent into your

coding window, below the
code that you started with.

Change the properties so

that the id is linked to the
bluedot_game and the type
is ‘click’.

Increasing the score To do this, you will need a variable

assignment block as below, but will also
We need to increment the need to use the Math blocks.
score by one each time the
dot has been clicked.

20
You will need to tell the
program to overwrite ‘score’
with the current value of
score plus one:

score = score + 1

Hint: ‘x’ is the default value in the block.

Make sure that you change this to the
appropriate variable name.

Testing part 1 Add the following block of code directly

beneath the
Try running your game. score = score + 1 line of code:
Does the score increase?

We don’t know if our score

variable works, as we
haven’t yet written the code
to display the score on the Look at the bottom of your screen and
score screen. you should see the following each time
you click the blue dot:
In the Variable menu,
choose the
console.log(message) block
and place it below where
you are incrementing the
score.

Try running your program

and click the blue dot. You
will see the string ‘message’
appear every time you click
the blue dot.

Testing part 2 You will know that you have

successfully completed this step if when
We now know the onEvent you run your program, you see
works and that the numbers incrementing by one each
console.log block of code time you click the blue dot:
has been executed.

21
What can you change about
the console.log block so that
we can test that the score is
being increased each time
the blue dot has been
clicked?

Move the blue dot Use the following block and set the id to
‘bluedot_game’:
Our game isn’t very fun at
the moment, as the dot
doesn’t move when it is
clicked.

We already have an onEvent

for what to do when the dot
is clicked. Now we need to
tell the dot to move after the
score has been
incremented.

Find the setPosition block

from the UI controls menu.

Random movement To find the x and y coordinates of the

screen, click on the mobile phone
Your blue dot should have screen and move your mouse. You will
moved, but only the first see the range of x and y coordinates
time that you clicked it. This appear and change as you move your
is because the x and y mouse around the screen.
coordinates were set to 0.

Your screen has x and y

coordinates so that you can
customise where you would
like an object to be placed.

Under the Math menu, find

the randomNumber(1,10)
block. Replace the 0s for x
and y with two of these
blocks, as below:

22
Explorer tasks

• Add a red circle to the game screen using the Design window.
• Add an onEvent that has the same functionality as the blue dot, the only difference being
that the score should decrease by one when it has been clicked.
• Explore the properties of the setPosition and edit the width and height so that each time
the dots are clicked, they also change to a random size.

App Exploration and Customization Challenge

• Explore Additional Features: Take 5 minutes to brainstorm ideas for enhancing your
app. Consider features such as adding music, customizing the app's appearance, or any
other functionality that interests you.
• Choose a Feature: Select one feature from your brainstorming list that you're excited to
add to your app.
• Research and Implementation: Spend the next 5 minutes researching how to
implement your chosen feature using online resources or tutorials. Look for step-by-step
guides or examples that can help you understand the process.
• Implement the Feature: With the remaining 5 minutes, start implementing the chosen
feature into your app. Follow the instructions you found during your research and
integrate the feature into your existing app project.
• Test and Share: Once you've implemented the feature, test your app to ensure that the
new functionality works as expected. Then, share your app with friends and invite them
to play around with it.
• Gather Feedback: After your friends have interacted with the app, gather feedback from
them about their experience. Ask them what they liked, what could be improved, and if
the new feature added to their enjoyment of the app.
• Reflection: Take a moment to reflect on your experience during this activity. Document
any challenges you faced while implementing the new feature and any insights you
gained along the way.

Remember to have fun and be creative during this app enhancement challenge!

23
Reflection Questions:

• How does drawing sketches of an app help us understand how people will use it
later? Think about when you draw a map before going on a trip. How does it help
you plan your journey?
• What fun things could we add to a game called "Jump Jump" to make it more fun to
play? Imagine you're playing "Jump Jump" on your phone. What cool features or
surprises could be in the game to make you want to keep playing?
• Can you think of a way to change a shopping app to make it better for you? If you
could change how a shopping app works, what would you do to make it easier or
more fun to use?
• Why is it cool to try different apps and change them to fit what you like?
• Think about how fun it is to try out new games or apps. How does changing them to
be just the way you like make using them even better?

Exercise:

• Think about your favorite game or app. Now, imagine you're the boss and can
change anything you want about it! Write down three things you would add or
change to make the game or app even better for you. Then, share your ideas with a
friend and see what they think!

1. ______________________________________________________

2. ______________________________________________________

3. ______________________________________________________

24
Chapter 3: Project

Important concepts
• Building Quiz App
• Share and Gather Feedback
• Project Presentation
• Project Feedback
• Project Reflection

Building Quiz App

In this lesson, you'll create a quiz app from scratch, where you can make quizzes with text-based
and image-based questions. Not only that, but you'll also discover how to add scoring
mechanisms to keep track of points and share your app with others to get feedback.

But first, let's break it down.

Imagine being able to create quizzes on any topic you want, from history to animals to your
favorite movies. With your own quiz app, you can do just that! You'll learn how to design quizzes
with different types of questions, like multiple choice, true/false, or even questions with pictures.

Next, you'll dive into the world of coding and bring your quiz app to life. Discover how to write
the code that makes your app work, from displaying questions to calculating scores based on
the player's answers.

Once your quiz app is up and running, add scoring mechanisms to keep track of how well
players are doing. Whether it's awarding points for correct answers or deducting points for
wrong ones, you'll have full control over how your app calculates scores.

Finally, share your quiz app with friends, family, or anyone else you want to play it. By sharing
your app, you'll be able to gather valuable feedback to improve it even further.

Create your quiz app by following the steps-

Step 1: Create Quiz Wireframe

25
 • First, define the exact subject of your quiz. In this
example, the quiz is about space and will include
questions about solar systems, our sun, planets, etc.

• Write down the questions you’ll include and prepare 2 to

4 answers to choose from.

Write down your questions below:

26
 • Next, sketch a wireframe for their quiz app, including main screens like the start
screen, quiz screen, score screen, etc.

Create your wireframe below:

27
Step 2: Design Screens

• Design the screens as per your wireframe.

• Design the first four screens of their quiz app, including the start screen, quiz screen with
text-based questions, answer options, and a button to proceed.

Step 3: Create Image-Based Questions

• Try image-based questions into the quiz app.

• Create four additional questions using images and relevant answer options.

Step 4: Code the App

• Provide a brief overview of coding concepts needed for the quiz app.
• Add code the functionality for scoring, where correct answers earn points and wrong
answers deduct points.

Write down your coding concepts below:

28
Step 5: Complete the App

• Guide students to add a score screen displaying the total score.

• Include a button on the score screen to restart the game.

Project Presentation

Use the space below to write points that you will speak/talk about in your project presentation.

29
Project Feedback

Note down all the feedback you get from your classmates and others below. Mark the ones you
will actually change with a star!

Project Reflection
Write down how was your experience of making the Project.
• Did you enjoy coding?
• Did your program have lots of bugs? Were you able to solve all the bugs? Did
you ask for help from Teacher or friend?
• Were you confident about presenting? How could you have improved your
presentation?
• Which was the best feedback you got for your project. How did the feedback
make your project better?

30