phase 1:problem identification · problems • •identification and explanation of the use of ict...

24
Item 3_Project... identification and explanation of software and hardware requirements related to ICT problems identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification of the App idea, purpose and audience 3. Identification of the requirements related to the problem - think about all the apps you use and which ones have a social impact restate the problem in your own words. a. identify fundamental cause of a problem or to represent related elements of a problem that need to be jointly addressed in the digital solution b. what is required in the solution. Why? c. what are the mandatory constraints? d. what will be produced as a solution? e. how will it be used? f. What are the needs and purposes of the Client (Teacher) g. 1. Identification and clarification of the problem 2. Identification of the App idea, purpose and audience Phase 1:Problem identification Tuesday, 4 June 2019 1:39 PM M3 Apps for Good Page 1

Upload: others

Post on 14-Jul-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Item3_Project...

identification and explanation of software and hardware requirements related to ICT problems

identification and explanation of the use of ICT in society.•

1. Identification and clarification of the problem2. Identification of the App idea, purpose and audience3. Identification of the requirements related to the problem

- think about all the apps you use and which ones have a social impact

restate the problem in your own words.a.identify fundamental cause of a problem or to represent related elements of a problem that need to be jointly addressed in the digital solution

b.

what is required in the solution. Why?c.what are the mandatory constraints?d.what will be produced as a solution?e.how will it be used?f.What are the needs and purposes of the Client (Teacher)g.

1. Identification and clarification of the problem

2. Identification of the App idea, purpose and audience

Phase 1:Problem identificationTuesday, 4 June 2019 1:39 PM

M3 Apps for Good Page 1

Page 2: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

identification and explanation of software and hardware requirements related to ICT

problems•

identification and explanation of the use of ICT in society.•

1. Identification and clarification of the problem2. Identification of the App idea, purpose and audience3. Identification of the requirements related to the problem

- think about all the apps you use and which ones have a social impact

What is an app? – App is short for application which is another name for a computer program. Usually, when people talk about apps they are referring to programs that run on mobile devices, such as smart phones or tablet computers.

Apps can also be used to solve social problems, perhaps you:• want to reduce the amount of things we throw away• feel powerless because you’re getting stopped by the police or being bullied • are struggling at school because you’re not getting enough sleep and can’t get up on time.

Task 1

Complete this grid individually to help you think of social issues you are concerned about.

Something that I would like to be different my local community or my life

Bullying (Cyber, Physical, Emotional)

Something that I wish more people knew about or understood better

That bullying isn't just a select few people, it effects a wide and different variety of people. Also, that it is a common story that the bullied become the bully's.

There isn't enough knowledge for victims of bullying on how to receive help. (I.e.

School - Dean / Councillor / Chaplain, •Workplace - Manager, •Public- Police , Kids helpline•Online - Social Media (Report feature)•

Inconsequential - no immediate physical threat.•Emotional •Discrimination•Mockery•Phyiscal (Immediate consequences)•Verbal•Racial•

The nature of bullying varies:

Someone I know that I worry about (explain the situation without mentioning names – respect the person’s privacy)

I worry about students and the things that are effecting, and also them not knowing how to get a resolution.

1. Identification and clarification of the problemTuesday, 11 June 2019 9:04 AM

M3 Apps for Good Page 2

Page 3: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Someone I don’t know that I worry about (this could be a group of people)

Students

One way you would most like to change the world

Eradicate all bullies

Use this grid to explore the issues you are particularly interested in:

Issue Details of problem How an app could help

Bullying There is a widespread issue of people not get along (I.e. Bullying)

Decrease the incidence of bullying in our society also helping victims to get real responses.

1. Identification and clarification of the problemrestate the problem in your own words.a.identify fundamental cause of a problem or to represent related elements of a problem that need to be jointly addressed in the digital solution

b.

what is required in the solution. Why?c.what are the mandatory constraints?d.what will be produced as a solution?e.how will it be used?f.What are the needs and purposes of the Clientg.safety - application of safe work practices and procedures relevant to use of ICTh.ethical and legal issues relating to application development, e.g. mature themes and contenti.protection of intellectual property with copyrightj.social issues relating to application development, e.g. online gaming, online gambling games, violent content in games, debate surrounding the effect computer games have on adolescent development

k.

M3 Apps for Good Page 3

Page 4: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

identification and explanation of software and hardware requirements related to ICT problems

identification and explanation of the use of ICT in society.•

1. Identification and clarification of the problem2. Identification of the App idea, purpose and audience3. Identification of the requirements related to the problem

Review the issues you are particularly interested in:

Issue Details of problem How an app could help

App Idea and Purpose

The 5Ws

Whenever you read a headline news story in a paper there are several key areas they focus on to make sure the whole story is covered.

This technique can help you map your problem to make sure you’ve got the whole story.

Who are the people affected by the problem?1.

What is the situation in which the problem occurs?2.

When do they experience the problem?3.

Where do they experience the problem?4.

Why do they experience the problem?5.

2. Identification of the App idea, purpose and audienceTuesday, 4 June 2019 12:13 PM

M3 Apps for Good Page 4

Page 5: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Task 1: Map the 5Ws

Divide your individual problem / issue into the 5W's

Your Problem = Description

WHO

WHAT

WHERE

WHEN

WHY

Task 2: Mini Elevator Pitch

Now that you have refined your problems you can quickly frame them into potential product ideas with a mini ‘elevator pitch’.

This is a very short, clear description of your idea as a whole.

….A good way to think about it is, if you had 30 seconds in an elevator with a potential investor or famous celebrity, how could you quickly tell them about your idea?

I am developing a [web/native/hybrid/Facebook platform] app to help [our target audience] to [solve a problem] [with secret sauce].

TASK: Explanation

Think of where and when the problem occurs - what platform do you think would suit the problem best? A web app, a native mobile app, a hybrid app or a Facebook app/social web integration?

6.

Think of your target audience – who does the problem affect?7.

Include the problem in a short summary.8.

Think of a potential feature that would help solve the problem and make your solution special.

9.

This is just a starting point so don’t worry about getting it perfect yet - the specifics of these initial ideas are very likely to change as you progress through the process.

M3 Apps for Good Page 5

Page 6: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Case study: Buzzer Buddiez

Our team is developing [a native mobile app] to help [students] [who have studied late and are likely to oversleep because they hit snooze on their alarm clock] [to wake up on time with the help from friends and family].

Task 3 Market Research

Finding Similar AppsFill in the information below on the apps that you find during your research. For each app you find, you’ll need to identify who the target users might be, what you liked about the app (and therefore might use for inspiration in your own) and what you didn’t like.

Suggested places for students to search:

Apps Created by Students1. Verizon winners

2. Trisha Prabhu created “ReThink”. Helps prevent cyberbullying by making users think before

sending a meantexthttps://youtu.be/oGuvpB4r_tU3. Verizon App Challenge 2014 winning team from Kennewick, WA created “Safe and Sound”.

Helps teens copewith depression

https://youtu.be/klL2AMmVUf04. Technovation 2016 MS winning team California Coders: “Loc8Don8”. Finds donation sites and

tracks severaltypes of charitable donations.

https://youtu.be/HYLvaojZ0Q0Code.org Public Gallery•

Mobile app classes or competitions like:Mobile app stores like Apple App Store or Google Play•Apps for Good•Technovation•Verizon App Challenge•General web search using Google or Bing•

Try phrases like “app competition” or “apps for social good”•Include your state name for local ideas or competitions•Android market place: Google Play store https://play.google.com/store•iOS Apple App Store http://www.apple.com/iphone/from-the-app-store/ •Facebook App Center https://www.facebook.com/appcenter •

Fill in the table

Name of AppWhat it does

Who is the target user?How are their needs met?

I liked... I didn’t like...

Brainstorming App Ideas

Brainstorm with your team potential ideas for your app. When you’ve found an idea that the team can agree on, document it here. Focus on the minimum set of features that will allow you to prototype and test your core idea.

Team App Idea:

Apps used for Inspiration:

App Name and URL Features

M3 Apps for Good Page 6

Page 7: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

M3 Apps for Good Page 7

Page 8: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

identification and explanation of software and hardware requirements related to ICT problems

identification and explanation of the use of ICT in society.•

1. Identification and clarification of the problem2. Identification of the App idea, purpose and audience3. Identification of the requirements related to the problem

What app will you be developing?

Other keywords you may need to know:

Device e.g. mobile phone, tablet computer

Operating system: system software that manages computer hardware and software

resources and provides common services for computer programs e.g. Windows, iOS, Linux

Platform: mobile operating system e.g. Android, iOS, Windows

HTML: Hypertext Mark-up Language - the authoring language used to create documents on the World Wide Web. HTML defines the content of the web page.

CSS: Cascading Style Sheet – defines the appearance of the web page

JavaScript: a programming language commonly used to create interactive effects within web browsers

Toolkit– the tools that a device (phone/tablet) might offer the user

Location services (GPS etc)

Purchase channel – ability to pay online via a mobile device or using an app on the device to pay e.g. Apple Pay

Touch screen and internal sensors – see below

Multi-media (audio, video, camera etc)

Notifications - a short text message sent to a smartphone and tied to an installed app

Connect – phone call, text, internet access

Sensors that you may find on a mobile device

GPS – Global Positioning System – this allows your exact location to be determined

Accelerometer – Measures movement and orientation

Gyroscope – Measure changing angle in 3D and helps the accelerometer to be more accurate

Light sensor – allows the ambient light level to be determined so that the screen

3. Identification of the requirements related to the problemTuesday, 4 June 2019 1:52 PM

M3 Apps for Good Page 8

Page 9: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Light sensor – allows the ambient light level to be determined so that the screen brightness can be adjusted.

Magnetometer – for finding magnetic north – good for directions etc

Possibly temperature and humidity sensors

Categories of app

Type Explanation Pros Cons

Web app e.g. TfL bus departures app

Written in HTML, CSS and JavaScript. Web apps can be used through internet browsers on phone, mobile and tablets.

Relatively easy to code. Everyone can view them (without having to download them onto their phone/tablet) as long as they have a browser and internet connection. This means they can be used on any platform, e.g. Android, iOS (Apple), Windows.

They can be slow and they don’t have access to native features of the phone, for example camera features or Global Positioning System (GPS)

Native app e.g. Angry Birds

Native apps are developed for a particular platform, i.e. the operating system of the device that you download it onto (Andriod, iOS, Windows).

They are very fast, and you have full access to all the phone’s native features that a normal web app might not have, for example the camera.

Native apps use the native language the phone works with. It can be very costly creating native apps, very difficult to learn, and very hard to maintain. When you release an update, you have to update the app separately for iOS, Android and Windows.Hybrid

app e.g Tripcase

Hybrid apps combine the best of both worlds. If you don’t have the time or money to create a native app for each platform, you can put your web app code into a ‘mobile framework’, and

You only need to learn HTML, CSS and Javascript. The app can have flexibility across devices, while also accessing the native functions of your phone.

Hybrid apps are still slower than native apps, and it can be tricky trying to figure out what mobile framework to use

3. identification of the requirements related to the problema. identify and explain the proposed technical details of the final product:

hardware required - to generate user experiencei.porting to different devices, e.g. personal computers, gaming consoles, portable devices, robotic devices and components

ii.

Type of input and output devices need to be considered when designing software. eg touch or keyboard

iii.

Hardware

functional - input, process, outputi.software required - to generate user experience; os; skills needed; codingii.

Software

M3 Apps for Good Page 9

Page 10: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

software required - to generate user experience; os; skills needed; codingii.relationship between front/back end development exploring concepts such as local, cloud or server-side processing

iii.

issues relating to developing software to suit a range of devices, e.g. iOS and Android devices, consoles, robots, desktops and laptops

iv.

will you need to develop user guides/technical documentation and ‘how-to’ documents to assist clients

v.

how will you beta and final testingvi.

M3 Apps for Good Page 10

Page 11: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

analysis of ICT problems to identify solutions•

synthesis of ICT concepts and ideas to plan solutions to given ICT problems•

communication of ICT information to an audience using visual representations and

language conventions and features

application of software and hardware concepts, ideas and skills to complete tasks in

ICT contexts

Specify what needs to be produced1.

Identify sources and assets2.

Outline the UI/UX3.

Sketch a storyboard4.

- with your partner, quickly review your problem identification so that you have it clearly in

mind before you start this phase

1. Planning and Specifying the solution

Specify what do you need to produce?a.

Example App TypesIn the following levels you see several different example apps. They will give you an idea of what the UI (User

Interface) could look like for apps with different goals.

For each example app:

Click through the example to get a feel for how it functions.•

In your activity guide, make a note of any features or UI elements you find and what they are used for.•

Discuss with your groups how that app and any of its UI features could be applied to your chosen topic.•

A Note About FunctionalityThese apps are prototypes; they allow a user to interact with the design without worrying about the underlying

functionality. For example, when you take use the Quiz App, each question will always respond the same way,

regardless of which answer you choose.

By focusing on an interactive prototype first you can learn a lot about how users might use your app before

investing too much energy in making it actually work.

From <https://studio.code.org/s/csd4-2019/stage/10/puzzle/2>

Phase 2: Planning and applyingTuesday, 4 June 2019 1:40 PM

M3 Apps for Good Page 11

Page 12: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Identify the content and assets you have? What is their source?a.Outline what the user interface and user experience will be like?b.

UI Elements:The following is a table of some of the UI elements that are available in App Lab. For each element, discuss with as a team what you think it does and how you might use it in your app. Write it down in the Intended Use column.

UI Element Intended Use

Example “What’s for Lunch?” wireframe:

M3 Apps for Good Page 12

Page 13: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Suggested Screens:

Reminder: There must be at least one screen per student in the team.

App Type Example Suggested Screens

Decision Making

Can I recycle this? Home/about us●

Questions / answers●

Answer page●

List Management

Homework reminder Home/about us●

List of items●

Add item●

Remove item●

See all items that have been done●

Quiz Spanish Helper Home/about us●

Questions / answers (sequential)●

Tracking results●

Compare results with others ●

Crowdsourcing Which recycling bins are full?

List of locations ●

For each location you can do something - Reporting, checking in

Personal Summary page ●

Global summary page did everyone do●

Our App’s Screens

Based on the app you plan to develop, and the suggested screens on the first page of this guide, identify all of the screens that you’ll need to design. For each screen, write a brief description and include a list of all of the other screens that it will need to link to.

Screen Description Links to

M3 Apps for Good Page 13

Page 14: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

sketch out each of your apps screens

iPhonePaper Pro...

M3 Apps for Good Page 14

Page 15: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

synthesis of ICT concepts and ideas to plan solutions to given ICT problems•

production of solutions that address ICT problems•evaluation of problem-solving processes and solutions, and recommendations made.•

Plan the solution1.Synthesise success criteria2.Produce the Solution3.Evaluate the process and the product4.

- with your partner, make a list of the things you will need before you start producing a solution

1. Plan the Solution

- list the tasks that you need to complete, time needed and due date.

Eg

Task Time needed Due date

Compile the list of questions and answers 20 mins 29-5

Test Plan 20 mins 29-5

Make new metaverse experience 2 hrs 7-6

Test 20 mins 7-6

Evaluation 1 hr 7-6

- list the support resources that you will need to use to complete the product

Eg- list of questions and answers- Metaverse help video- this experience [https://studio.gometa.io/discover/me/31913867-64b3-4b1d-a3fc-53c9ea2c5eed ]- testers

2. Test plan

Test Number

Test Expected Results(What you think will happen?)

Actual Result(What actually happened?)1. start app first screen will appear

2. press answer1 Taken to correct response

Phase 3: Producing and Evaluating SolutionTuesday, 4 June 2019 1:41 PM

M3 Apps for Good Page 15

Page 16: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

2. press answer1 button

Taken to correct response screen3. press answer 2

buttonTaken to correct response

screen4. press answer 3 button

Taken to correct response screen5. selfie selfie uploaded

6.

7.

8.

4. Implement the solution in Metaverse and test against your test plan

Build your App

Signing InYour students can sign in to their Code.org accounts by following these steps:

Go to https://code.org/join.1.

Type in their section code: PRXYYZ.2.

Choose their display name.3.

Type in their secret words.4.

Click the "Sign in" button.5.

From <https://studio.code.org/teacher_dashboard/sections/2205284/login_info>

Practice Building Digital prototype

https://studio.code.org/s/csd4-2018/stage/12/puzzle/1

Work Through:

Design Mode: https://studio.code.org/docs/concepts/app-lab/design-mode/index.html

Video: Introduction to Design Mode https://studio.code.org/s/csd4-2018/stage/12/puzzle/3

Creating a digital prototype https://studio.code.org/s/csd4-2018/stage/12/puzzle/4

M3 Apps for Good Page 16

Page 17: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Adding more text: https://studio.code.org/s/csd4-2018/stage/12/puzzle/5

Adding images: https://studio.code.org/s/csd4-2018/stage/12/puzzle/6

Adding buttons: https://studio.code.org/s/csd4-2018/stage/12/puzzle/7

Design Mode Elements: https://studio.code.org/docs/concepts/app-lab/design-mode/design-mode-elements/index.html

Making a Search Box: https://studio.code.org/s/csd4-2018/stage/12/puzzle/9

Checkboxes: https://studio.code.org/s/csd4-2018/stage/12/puzzle/10

Finishing Touches: https://studio.code.org/s/csd4-2018/stage/12/puzzle/11

Mocking Up Your AppNow that you have some practice laying out elements in App Lab, you can start working on mocking your own app. With your group, divvy up the screens so that everyone is working on a different screen.

Assigning ScreensUsing your paper prototypes as a guide, divide the screens up evenly among your group members. Each studentshould be assigned at least one screen. If there are additional screens left, consider grouping similar screens together to assign to a single member.Give each screen a name that will be used in the app. Screen names can contain only letters and numbers - nospaces, punctuation, or other special characters.

Choose a Screen NameEach screen needs to have a unique (within the app) and descriptive name. The screen name can only contain letters and numbers - no spaces, punctuation ,or other special characters.Screen Name : ___________________________

Screen Name Team Member

M3 Apps for Good Page 17

Page 18: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

NamespacingIn the next lesson you will combine all of your team members' screens into one app. To make sure that the IDs on

one page don't conflict with another you'll need to include a unique namespace for your page. This will be

something you add to the beginning of every id so that your element ids don't conflict with others when you

merge everyone's screens together. Your namespace should be the ID of your screen with an underscore at the

end. For example, if you are making the home page, you might use "home_" as your namespace - leading to ids

such as:

"home_title"•

"home_loginButton"•

"home_logo"•

Setting the NamespaceA namespace is a unique string of text that you will add to all of your element IDs. This way to make sure that theelements you create don’t conflict with those created by your teammates. As long as everyone on your team uses adifferent namespace, when it comes time to combine all of your screens into one app you won’t have to worry aboutconflicting IDsOne good way to come up with a namespace is to combine the name of your screen with an underscore ( _ ). Forexample, if your screen name is account and you have an input box for the user’s first name, your ID for that inputbox would be account_firstName .

Screen StyleBecause you'll be dividing the work up, you'll want to do some planning ahead of time to decide on a common

look and feel for your pages. For example, you'll want to agree on things such as:

Where do navigation buttons go?•

What colors will you use for backgrounds, text, and buttons•

What's the general style and layout?•

Re-design your Screen and Tracking IDsAs you design your screen, sketch each element in the frame on the right, write its ID in the table on the left, andconnect the two with a line.

M3 Apps for Good Page 18

Page 19: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Design Mode Elements

M3 Apps for Good Page 19

Page 20: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Design Mode allows you to place a number of different types of User Interface (or UI) elements on the screen. Many of these elements can be used to take input from your user.

Choosing Good IDs

Each UI element in your app needs an ID that you can refer to later. Good IDs are meaningful, descriptive, and unique.

For example, if you have many buttons in your program, you will want to give each an ID that describes what the button does.

"button1" and "button2"•

So, instead of this:

"homeButton" and "saveButton" or•"buttonHome" and "buttonSave" or•"home_button" and "save_button"•

You might make IDs that tell you not only that it's a button, but what you intend the button to be used for, like:

Rules About IDs

are case-sensitive.•

In making descriptive and meaningful IDs there are some rules about IDs you need to know. IDs...

M3 Apps for Good Page 20

Page 21: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

are case-sensitive.•cannot contain spaces.•must begin with a letter (A-Z or a-z) and may be followed by any number of digits and letters.•can contain hyphens ("-"), underscores ("_"), colons (":"), or periods (".").•

Case-sensitive?

This means there is a difference between "HomeButton" and "homeButton" (notice the Capital H on the first one).

These differences seem annoying at first, but you get used to it, and actually appreciate the fact that the computer requires such precision.

Capitalization (known as "camelCase") -- "aCamelcaseNameMightLookLikeThis"•Underscores (known as "snake_case") -- "some_people_like_to_use_underscores_to_separate_words"•Dashes (known as "kebab-case") -- "others-like-to-use-hyphens-or-dashes"•

There are a few common styles for capitalizing and spelling multi-word IDs:

Whatever you choose is up to you. It's your style. It just helps to be consistent.

From <https://studio.code.org/docs/concepts/app-lab/design-mode/design-mode-elements/index.html>

Mocking Up Your App

Start a new project: https://studio.code.org/projects

Make sure it is an applab project

The reason you do this is so that you can share your screen with your group later

Using your paper prototype, create a digital version of your screen using the Design Mode

elements you've learned about.

Do This

Rename the screen to match your namespace.•

Use the built-in elements to lay out your app screen, giving each a proper ID•

For example, if your namespace is home_ you might create IDs like:•

home_title•

home_login_button•

home_logo•

For any components of your app that can't be recreated with the built in elements you can either:

Redesign to utilize built in elements•

Find an image to use in place of your element•

Draw the element using your preferred image editor•

Make sure that you and your teammates are regularly looking at each other's designs to ensure consistent style

M3 Apps for Good Page 21

Page 22: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

From <https://studio.code.org/s/csd4-2018/stage/12/puzzle/13>

Combining Screens

Each member of your team is going to create their own copy of the app, with all of the team

members' screens imported in. This will be your copy of the app, and the copy that you will

start to add code to in the next lesson.

Collect all of the sharing urls for your team's pages•

You can find the share url by going back to the last level of the previous lesson, or by finding the screen in your projects directory

Import each of the screens, one at a time•

If you run into an ID error with one of the screens, discuss the issue with the screen's creator so it can be fixed and imported

Delete the default "screen1"•

Set the main screen as the default•

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/13>

Importing Screens

Please don't import screens to here. Use this as instructions only

From <https://studio.code.org/docs/csd/importing-screens/index.html>

Screen Import

In addition to adding new blank screens, you can import screens from "Import Screen..." To

import a screen from someone else, you'll need them to give you the sharing URL.

Note: Screens you import must not share any IDs with elements already in your app!

Do This

Another student has created a search results screen that you can import into your app.

Their app's share link

is https://studio.code.org/projects/applab/XkcpDVj8MJWQvUr9OSgIlA/

Select "Import Screen... from the screens dropdown.•

Copy and paste the above url into the import screens dialog.•

Select the screen you wish to import.•

Click Import to import the screen.•

Use the screens dropdown to switch between your Home, About, and Search screens.•

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/6>

Programming

Now lets add some code to make our prototypes work. Please only use the instructions below as

M3 Apps for Good Page 22

Page 23: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

Now lets add some code to make our prototypes work. Please only use the instructions below as guidance and use your project space.

Button Events

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/9>

For each screen of your app:

Find all of the button IDs•

For each button, add an event handler that watches that ID•

In each event handler, use setScreen() to move the the right screen•

Test it all out!•

Depending on the number of screens and buttons your app has, this can be a pretty

involved process. Make sure that you test your work often, using console.log() blocks to debug

any strange behavior with your app. When you think you've got the whole thing working,

compare your app with other members of your group to see if they work the same.

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/14>

Changing Screens

From <https://studio.code.org/docs/csd/changing-screens/index.html>

Changing Screens On Click

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/11>

Wire Up the Other Buttons

From <https://studio.code.org/s/csd4-2017/stage/13/puzzle/12>

Extension

Responding to User Input

From <https://studio.code.org/docs/csd/input-events/index.html>

5. Evaluate SolutionEvaluate the problem solving process and the product by writing a report on the process of making the product, including:

- process

M3 Apps for Good Page 23

Page 24: Phase 1:Problem identification · problems • •identification and explanation of the use of ICT in society. 1. Identification and clarification of the problem 2. Identification

- process

evaluate the application of your knowledge of software and hardware concepts, ideas and skills to complete the client’s request

• What was the problem you were trying to solve? Did your product solve the problem?

The problem was thoroughly/ effectively/ appropriately/ variably described from the user’s perspective because….

The problem was thoroughly/ effectively/ appropriately/ variably/ solved within these recognized constraints: ….

Existing solutions to similar problems were thoroughly/ discerningly/ effectively/ appropriately/ variably analyzed to identify possible solutions. The …. was the basis for the solution because…

The relationships between users, solutions and the components of solutions in similar problems was thoroughly/ discerningly/ effectively/ appropriately/ variably understood. This was because of …

evaluate the process of making the AR Game, including the difficulties you experienced and how they were overcome

The solution to the problem was thoroughly/ discerningly/ effectively/ appropriately/ variably visualized with creative skill to represent and communicate ideas, by….

Components of the solution were thoroughly/ discerningly/ effectively/ appropriately/ variably tested with conceptual models, using…

- product

evaluate the suitability of the the product for the desired audience

The solution was thoroughly/ discerningly/ effectively/ appropriately/ variably constructed, with the components of the preferred solution, using …

analyse the technical details of the product, including the style and format, image resolution and operation on the network

evaluate how well the product matched your initial concept as proposed to the client

The constructed solution was thoroughly/ discerningly/ effectively/ appropriately/ variably refined in response to alpha testing. The main refinement was…because…

In comparison, the final solution was better/ more effective/ closer to the intention than the first attempt because …

• Was using the problem solving process useful? Why/Why not?

• Was your solution or product useful and valuable; did it solves the defined problem or meets the identified need?• Is your solution or product well crafted, striking, designed with a distinct style but still appropriate for the purpose?

- make recommendations

list and explain recommendations or advice you would provide for others as they prepare ICT solutions for clients.

In future, it is recommended that the solution be refined further by:…This will ensure that….

• If you had to solve this problem again, what would you do differently?

M3 Apps for Good Page 24