Let's Program Our Apps!

Continued!

May 20 :: P1• P3 • P5 May 21 :: P2• P4

May 27 :: P1• P3 • P5 May 28 :: 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! (Advanced Wrap-Up)

25 Points!!!

PLEASE NOTE: After JUNE 2, late typing assignments will NO LONGER be accepted!!!

Typing:

1. Log in to typing.com

2. Click LESSONS

3. On LESSONS Tab, Click ADVANCED: Advanced Wrap-Up :: 25 Points (this is due Friday, May 28)

4. Begin Typing (Tip: if you have missed any typing assignments, please DO THIS LESSON (ADVANCED: WRAP UP) FIRST!

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!

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.

DONE EARLY? WANT SOME EXTRA CREDIT???

CREATE A NEW APP!

How to Start a new project:

In code.org, click on PROJECTS at the top left of your screen


Scroll down to "Start a New Project" and click on APP LAB

Begin designing and coding your app!


TO GET EXTRA CREDIT...USE THE FOLLOWING CRITERIA...

TO GET 25 EXTRA CREDIT POINTS...

  • FIVE (5) Screens minimum (Yes! FIVE!)

  • At least ONE (1) photo per screen

  • Text (header AND information text on each screen)

  • Coding the app (each screen is clickable!)

  • Submit form BELOW with link to app!

ALL ITEMS MUST BE ON THE APP TO GET CREDIT & IT CANNOT BE THE SAME AS THE ORIGINAL APP PROJECT!

ALSO...

MAKE IT A MEANINGFUL APP...

  • SCHOOL/STUDENT RELATED

    • Elective choices

    • Teen health

    • Class help/Instruction

    • How to app

    • Mental health --depression, anxiety, drug and alcohol abuse, suicide​

    • Physical health--sleep, eating right/ eating disorders, hygiene, puberty, sex and STDs, screen time​

  • COMMUNITY RELATED

    • Global Warming​

    • Recycling and trash ​

    • LGBT issues​

    • Child Hunger/Poverty​

    • Crime (app for stop the violence or crime stoppers or neighborhood watch?)​

    • School Counceling

  • Cyber Citizenship?

    • Cyberbullying​

    • Cyber safety​

    • Netiquette​


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

SUBMITTING THE LINK TO YOUR EXTRA CREDIT 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!

To submit your EXTRA CREDIT app, we need the link!

Click the Link to Form Button to submit your information!

Once completed, click SUBMIT on the form

Don't forget to give ALL ELEMENTS MEANINGFUL NAMES!

Don't forget to use debugging practices!

Keep in mind:

  • Try to include 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?

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