Let's Program Our Apps!

May 13 :: P1• P3 • P5 May 14 :: P2• P4



Expectations:

C: CONVERSATION...Mute your mic when not speaking and have camera on as much as possible

H: HELP...Raise your hand by clicking the "Raise Hand" Button, or by inserting the emoji and/or type “raise hand” in the chat

A: ACTIVITY...Work on the assignment/Complete tasks on time

M: MOVEMENT...Stay in the Teams meeting and be present (But don't forget to stretch and use eye safety tips!)

P: PARTICIPATION...Use thumbs up and thumbs down for a yes or no response. Ask and Answer questions in the chat area or verbally when appropriate.

S: SUCCESS...Succeed in a virtual space together!

Typing.com ASSIGNMENT! (5 Minute Typing Test!)

Typing:

1. Log in to typing.com

2. Click TESTS (On the top right ...next to Lessons)

3. On TESTS Tab, Click 5 Minute Typing Test (this is due Friday, May 14! NOTE: You will be taking 2 tests THIS WEEK!)

4. Begin Typing (Please DO NOT DO THE NEXT LESSON! It will RESET if you do!)

If you are finished or waiting, work on Clever!

  1. Students click on the Clever icon on the desktop

  2. Sign in using the username & password (same as logging into computer)

  3. Click on the square that says iReady

  4. Continue until time is up!

Lessons have been assigned to them based on their diagnostic test results both in Math and Reading. Within each lesson are brain break games. The district is pushing a goal of 45 minutes per week on Online Lessons in ELA and 45 minutes per week in Math to close the gaps found in the diagnostic. Math and ELA are providing some of that time during the week, but not all.

CODE.ORG!

Let's SIGN IN!

WHAT ARE WE LEARNING: App Development....Programming and App development!

WHY IS IT IMPORTANT: Investigating working code and make simple modifications to understand how it works is vital in creating a well written app. Knowing a number of concepts and vocabulary around what programs are especially important!

HOW WILL MY TEACHER KNOW WHAT I LEARNED: You will begin to code the app we have been developing!

ASSIGNMENT: Coding our apps!

Due: June 2 :: 100 Points!

WHAT IS THE APP WORTH?

  • THREE (3) Screens minimum = 30 Points (10 points per screen!)

  • At least ONE (1) photo per screen = 15 points (5 points per photo!)

  • Text (header/information text on each screen)= 15 points (5 points per screen with text)

  • Coding the app (each screen is clickable!) = 30 points (10 per click)

  • Submit form (coming soon) with link to app! = 10 points!

TOTAL 100 POINTS!!!!!

Go to code.org

Select SIGN IN on the top right corner


Enter your fresnou.org email and password

Or Click Continue with MicroSoft


If you are on MY DASHBOARD...

Scroll down to find MY COURSES...

Click CSP Unit 3 - Intro to App Design ('20-'21)

Click LESSON 9

Click 1


Click CONTINUE

You will continue to complete your app!

PAGE 2:

The app that we built the GUI (Graphic User Interface...all the images and screens) should now be available to you!

Remember you can toggle back between CODE mode and DESIGN mode if you need to change elements!

Continue working on your app

You will add code to the workspace for EACH screen!

Don't forget to use debugging practices!

Keep in mind the requirements for the app:

  • 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

DON'T FORGET...

As you add code...TEST the APP! (Click Run!)

Did it do what you wanted it to do?

EXAMPLE

Remember this page from Lesson 7?

Do This:

  • Run this program to see how it works.

  • Add code to the program so that the "Go Back" button takes the user back to the home screen

YOUR APP SHOULD ALSO DO THIS!



NEED MORE HELP...WATCH THE VIDEO BELOW!

SUBMITTING THE LINK TO YOUR APP!

Even if you are not done coding!

LET'S SHARE A LINK...

On the top LEFT corner, click the SHARE button!

A box will pop up

Copy the link and paste it in the form below!

In order to submit you app, we need the link!

Click the Link to Form Button to submit your information!

Once completed, click SUBMIT on the form

NEED HELP SHARING YOUR APP? ...WATCH THE VIDEO BELOW!

PLEASE CONTINUE TO BUILD/CODE YOU APPS!

DONE EARLY? PERHAPS ADD ANOTHER SCREEN or IMAGE to YOUR APP?

Debugging Strategies

Keep your code clean

  • Use clear, meaningful IDs for your elements

  • Keep your code organized in chunks that do the same thing

  • Use comments to explain your code

  • Write code using blocks


Run your code

  • Run your code a lot, every time you add a command or two

  • Slow down your code with the speed slider. Watch how it runs closely

  • Use console.log to get output. Add extra output statements throughout your code to get feedback on what parts are running.


Use classmates and resources

  • Talk out the problems with a partner or classmate

  • Compare your code to examples that you know work

  • Read documentation to know how a block is supposed to work

  • Hand trace your code to track what's happening.


Documentation: a written description of how a command or piece of code works or was developed.

Comment: form of program documentation written into the program to be read by people and which do not affect how a program runs.

Once you are done, please give a thumbs up in the chat!