Name(s)_______________________________________________ Period ______ Date ___________________

App Development Planning Guide

Project Description

For this project you will work with a partner. Together you will create an app that teaches your classmates about any
topic you both find interesting. Along the way you’ll learn how to use many of the features of App Lab as well as skills
that will help you when building more apps throughout this class.

You will submit

● Your final app
● This completed project-planning guide

App Requirements
● Uses at least three screens
● Includes examples of images, audio, and text
● A clear and easy to navigate user interface
● Clearly communicates information about your topic
● Code is cleanly written and free of errors

Steps
● Collaborate with your partner to pick a topic you are both interested in
● Interview classmates to identify what they already know about the topic
● Design your app’s user interface using this planning guide
● Design and program your app in App Lab
● Collect feedback from your classmates and update your app
● Share your final app with the class

Investigate and Reflect Phase

Step 1. Brainstorm Topic Ideas: Your app can teach your classmates about any topic you and your partner agree on.
Your topics could be a hobby, something you’ve always been interested in, a piece of your personal history, or just
something you think your classmates should learn more about.

Write down three ideas for a topic that you brainstorm individually.

Zainab Jalloh Eleni Atnafu

Music Swimming
Traveling Beach
baking Movies
Step 2. Choose One Topic: Now talk through your ideas with your partner. Together pick a topic both of you are
interested in teaching your classmates about. Explain in a few sentences what would be covered. For example, if your
topic is basketball, you would write a few sentences explaining that you would cover the rules and the origin of the
sport.

Our Topic: Swimming different types of swimming : freestyle, backstroke,butterfly etc.. The rule from

freestyle and backstroke swimmers may as they reach the wall somersault. In butterfly swimmers must touch

the wall with both hands simultaneously before executing back. In wadi sura in south West Egypt a 10,000

year old rock was found with a picture of stick figures swimming.

Step 3. Interview Your Classmates: To design your app you’ll need to understand your users. For this project your
user is your classmates, and you’ll need to understand what they already know about your topic.

Find two classmates and talk to them about your topic for a couple minutes. Then fill in this table

Name What do they already know about your What do they need or want to learn about
topic? your topic?

Markeith Hines That it take a lot of practice to keep getting Anything

better and better

Isaac That swimming is a race and you try and get nothing
Organista first place

Design Phase

Step 4. Create a Program Specification: Based on your research you identified requirements for what your app
must teach your classmates. On the next page you should draw a specification that shows how your app will actually
run to meet those requirements. This means you should include all the buttons, text, and images that the user will be
able to use. Write notes or draw arrows showing how different user interface elements should work. For example, if
clicking a button takes me to another screen, I should draw an arrow from that button to the drawing of the screen.

2
3
4
Building Phase

Step 5. Start Building Your App: Work with your partner to build your app. Along the way make sure you:
● Use the program specification you drew as a starting point, but it’s OK to update as you go.
● Use pair programming
● Use your debugging skills to check that your app is working

Before you begin to code, fill out the chart below for any Event Handlers in your program:

Element ID Action What happens?

“dogButton” “click” A picture of a dog appears

The background of the screen changes to green

Home screen Click image

playSound Click Plays a sound of water

setProperty Button width 10

screen1 click Second page after the homescrean

Change background color add text and buttons to interact.

Screen2 click Third screen after the first can also chang color image, text and
botton

Image Click play Visual presentation of topic

Text input Click playbotton An area to display text, to visually show work.

Use the chart to guide you in adding programming statements to your program.

5
Testing Phase

Step 6. Testing & Feedback: You will need to test your app to make sure it works as expected. To do that find at least
two classmates to use your app.

● Ask students to read through your program specification and requirements

● Ask them to use the app and test out the different behaviors included in your specification
● Write down anything you noticed them finding confusing or broken
● Ask them to share anything they recommend improving

Name Things that could be improved based on Improvements this person recommends
watching them use the app

The code needs to be improve, and the process Is to improve our coding skills because it was
eleni of how everything come together. basic.

The user recommends mor engagement in our

The design in general needs to be improve for app because the app was more informative.
Zainab example the button and the art so it can be
more fun and things for user to interact with.

Step 7. Pick Improvements: Pick at least one improvement you plan to make to your app based on feedback you
collected from your classmate.

Improvement 1: I added color and buttons for the user to interact with.
Improvement 2 (Optional): Step 8: Complete Your App: Finish your app!
My code was incorrect so i corrected it.

6
 screenshots code

onEvent("homescreen", "click", function( ) {

playSound("sound://category_background/ocean_waves.
mp3", false);
setProperty("button2", "width", 100);
});

onEvent("screen1", "click", function( ) {

setScreen("screen1");
});
playSound("sound://category_background/ocean_waves.
mp3", false);
setProperty("button2", "width", 100);

Reflection

Question 1: Provide a written response that:

● describes the overall purpose of the program
● describes the functionality of your app
● describes the input and outputs of your app
(Approx 150 words)
The title of the app is Swimming the purpose of the app to inform people about the history of summing, the
type of swimming and the rules of swimming. The functionality of the app is the code and design me an eleni
work on which consist of the background color the text we add and the picture to visually show our topic.
The punt of the app is the button that the user need to touch or click the button for it to function or activatefor
example the first button the user need to click is the play button to start the app. The output of the app is the
visuall representation of output on the computer is the the computer that is use to create or add picture and
the color or data we use to build the app, i think the code we use should be consider because it wat we use
to build the app.

7
Question 2: This project was created using a development process that required you to incorporate the
ideas of your partner and feedback from your classmates. Provide a written response that describes one
part of your app that was improved through input from EITHER your partner or feedback you received from
classmates. Include:
● Who specifically provided the idea or recommendation
● What their idea or recommendation was
● The specific change you made to your app’s user interface or functionality in response to the
recommendation
● How you believe this change improved your app
(Approx 150 words)

Eleni specifically provided the idea or recommendation that their need to be a pictur representative of our topic, The
code needs to be improve, and the process of how everything come together, and the design in general needs to be
improve for example the button and the art so it can be more fun and things for user to interact with. I watch a youtube
video to improve the code of the app, and find a image that can represent the topic. So the recommendation the user
asked for is for the image and color to improve the app and i add moe bottont to improve the app for the user to interact
are the specific change you made to my user interface or functionality in responded to the recommendation. I believe
this change improved my app because it add more color and it more presentable for user to user to use, more
informative it is clear on point.

8
Rubric

Category Extensive Evidence Convincing Limited Evidence No Evidence

Evidence

User Interface User interface User interface User interface is on a The screen is blank.
Screens includes at least includes two single screen.
three screens screens.

User Interface The user can easily The user can easily The user can easily The user cannot
Navigation navigate between all navigate between navigate between navigate between
screens. most screens. some screens. screens.

User Interface The app includes at The app includes at The app includes at The app includes no
Elements least one example least one example of least one example of text, images, or
each of: two of the following: one of the following: audio.
- Text - Text - Text
- Image - Image - Image
- and audio. - And audio - And audio

Code Code runs without Code runs with a few Code does not run or Code is blank.
errors errors. has a lot of errors.

Element IDs Screen elements all Screen elements Some screen Screen elements do
use meaningful IDs. mostly use elements use not use meaningful
meaningful IDs meaningful IDs IDs.

App Topic Topic is clearly Topic is somewhat Topic is not App appears to be a
communicated and clearly communicated well. random collection of
explained. communicated and elements with no
explained. clear topic.

App Development Planning guide is Planning guide is Planning guide has a Planning guide is
Planning Guide: fully completed. mostly completed. few parts empty.
completed..

Written Response 1: Response accurately Response mostly Response is not Response does not
describes the describes the complete, but does address the prompt
purpose, purpose, describe the in any way or is
functionality, and functionality, and purpose, blank.
inputs/outputs of the inputs/outputs of the functionality, or
app. app. inputs/outputs of the
app.

Written Response 2:. Response fully Response mostly Response is not Response does not
describes an idea or describes an idea or complete, but does address the prompt
recommendation recommendation describe some of the in any way or is
provided by a partner provided by a partner work with a partner. blank.
/ peer and how it / peer and how it
improved the app. improved the app.