Exercise: Mobile App Development Class 7

Exercise Handout of Mobile App Development

Students have the choice to create any one of the following projects:

Option 1: Find My Book

This app allows the user to check the availability of the books.
1. Visit https://studio.code.org/users/sign_in and sign-in with your CSN credentials by clicking on
“Continue with Microsoft”.
2. After signing in, you will be redirected to the “untitled project screen”. Here you can see a
mobile mock-up on the left-hand side and coding workspace on the right.
3. Enter the name of the app-FindMyBook (or any name of your choice that reflects the purpose of
the purpose)on the top left corner by clicking the Rename button.
4. Design the layout of the app by adding different screens in a way that following requirements
are covered:
a. The app should have a title screen which displays the name of the app and has a
relevant UI element that allows the user to enter the app.
b. A screen showing different sections. There should at least be two sections with
appropriate UI control that allows the user to visit the particular section.
c. Each section should display at least four books (images) relevant to that section.
d. Each book should have a button. When the user clicks the button, it shows whether the
book is available or not.
e. In case if the book is available, the colour of the button changes to “Green” and the text
on the button changes to “Available” when the button is clicked.
f. In case the book is not available, the colour of the button changes to “Red” and the text
on the button changes to “Unavailable” when the button is clicked.
g. There should be an appropriate UI control that allows the user to navigate back and
forth through the sections and the title screen.
h. When the user clicks on the image of the book, it shows the detail about the book such
as the name of the book and its cost.
i. Make sure to add appropriate sounds when different UI controls are clicked in the app.
j. There should be different beeps to indicate the availability and non-availability of the
books.

Option 2: Train Schedule

This app allows the user to check the schedule of train to a particular destination.
1. Visit https://studio.code.org/users/sign_in and sign-in with your CSN credentials by clicking on
“Continue with Microsoft”.
2. After signing in, you will be redirected to the “untitled project screen”. Here you can see a
mobile mock-up on the left-hand side and coding workspace on the right.
3. Enter the name of the app-TrainCheck (or any name of your choice that reflects the purpose of
the app)on the top left corner by clicking the Rename button.

The City School/Academics/Computing Curriculum/Class 7/2020-2021 Page 1 of 3

Design the layout of the app by adding different screens in a way that following requirements are
covered:
a. The app should have a title screen which displays the name of the app and has a
relevant UI element that allows the user to enter the app.
b. A screen showing different cities, allowing the user to enter a particular city and view
different destinations relevant to that city. The app should have at least two cities.
c. Clicking on a particular city, should navigate the user to a screen that shows different
destinations particular to that city.
d. There should be at least four destinations that the user can select from
e. Each destination should have a button. When the user clicks the button, it shows
whether the train is available to that particular destination or not.
f. In case if the train is available, the colour of the button changes to “Green” and the text
on the button changes to “Available” when the button is clicked.
g. In case the train is not available, the colour of the button changes to “Red” and the text
on the button changes to “Not-Available” when the button is clicked.
h. There should be an appropriate UI control that allows the user to navigate back and
forth through the cities and the title screen.
i. When the user clicks on the image of a particular destination, it shows different details
such as ticket price, discount offers, timings etc.
j. The information label should appear in different colour for available and unavailable
trains.
k. Make sure to add appropriate sounds when different UI controls are clicked in the app.
l. There should be different beeps to indicate the availability and non-availability of the
train.

Option-3 Food Offers

This app allows the user to view the food offers by different restuarants.
1. Visit https://studio.code.org/users/sign_in and sign-in with your CSN credentials by clicking on
“Continue with Microsoft”.
2. After signing in, you will be redirected to the “untitled project screen”. Here you can see a
mobile mock-up on the left-hand side and coding workspace on the right.
3. Enter the name of the app-Food Offers (or any name of your choice that reflects the purpose of
the app)on the top left corner by clicking the Rename button.
Design the layout of the app by adding different screens in a way that following requirements are
covered:
a. The app should have a title screen which displays the name of the app and has a
relevant UI element that allows the user to enter the app.
b. A screen showing different restaurants, allowing the user to enter a particular
restaurant and view different offers. The app should have at least two restaurants.
c. Clicking on a particular restaurant should navigate the user to a screen that shows
different food offers particular to that restaurant.
d. There should be at least four offers that the user can select from.
e. Clicking on a particular food offer, allows the user to view whether it is available or not.

The City School/Academics/Computing Curriculum/Class 7/2020-2021 Page 2 of 3

f. In case if the offer is available, the colour of the button changes to “Green” and the text
on the button changes to “Available” when the button is clicked.
g. In case the food offer is not available, the colour of the button changes to “Red” and the
text on the button changes to “Not-Available” when the button is clicked.
h. There should be an appropriate UI control that allows the user to navigate back and
forth through the cities and the title screen.
i. When the user clicks on the image of a food offer, it shows different details such as offer
price, discount offers, timings of delivery etc.
j. The information label should appear in different colour for available and unavailable
offers.
k. Make sure to add appropriate sounds when different UI controls are clicked in the app.
l. There should be different beeps to indicate the availability and non-availability of the
food offers.

The City School/Academics/Computing Curriculum/Class 7/2020-2021 Page 3 of 3