Let's Program Our Apps!

May 17 :: Asynchronous :: code.org

Please continue working on your apps or finishing any past due assignments!

If you need extra help... please send a private chat via TEAMS!



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!