Thomas Proffen

thomas@orcsgirls.org Please check in at www.orcsgirls.org/class

Mars Explorer

Advanced App Lab Camp

December 28 - 30, 2020

​

Day 1

Check-in at www.orcsgirls.org/class

Google Meet

Google Meet

Class links at www.orcsgirls.org/class

Rules

• Treat each other and the volunteers with respect. Unruly behaviour will not be tolerated and you will be disconnected.
• Please have your microphone muted unless you are speaking.
• If you have a questions, please ask in the chat first and a volunteer will help.
• Do not spam the chat.

​

Introductions

Welcome to our online clamp.

​

Thomas Proffen - thomas@orcsgirls.org

​

​

This is an Advanced Camp

Things to remember

​

• You got this!
• Do not give up if somethings seems hard in the beginning.
• Ask questions.
• All of us ‘google’ things all the time.
• Nobody writes code that works right away.
• Debugging can be frustrating, but it is super sweet if things work in the end.
• Have fun!

Mars

• Distance from Sun: 141.6 million mi
• Orbital period: 687 days
• Day: ~24 hours, 39 minutes long
• Gravity: 3.711 m/s²
• Length of day: 1d 0h 37m (sol)
• Average temperature: -81F
• Atmosphere: mostly carbon dioxide, some water vapor
• Moons: Phobos, Deimos

​

Source: NASA, Wikipedia

Launched: 2020-07-30 Will land: 2021-02-18*

Launched: 2011-11-26 Landed: 2012-08-06

Activity 1 - Mars Rover Info App

• Using what you learned in the App Lab introduction, create a Mars Rover information app.
• Create a button for each rover.
• Once clicked, go to a new screen and display rover information.
• Add more features like a ‘Back’ button, sounds or more information screens.
• Make it pretty.

​

Breakout Rooms - Activity 1

Visit www.orcsgirls.org/class

Goto

​

​

​

​

Enter password (given in chat)

Disconnect from this session

Click button for your breakout room

Blocks vs. JavaScript

Watch the demo

APIs and Web Requests

An application programming interface (API) is a computing interface that defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.

Wikipedia

​

Let’s look at a specific example of an API returning fun facts about numbers for our next app.

Step 1

• Check the documentation of the specific API - http://numbersapi.com/
• The link http://numbersapi.com/12 will return a fun fact about the number 12

Step 2

• Check the documentation for startWebRequest in App Lab (under Data)

​

Activity 2 - Fun with numbers

• Create a number facts app using http://numbersapi.com/
• Enter number, run webrequest, upon answer update text field.

​

Breakout Rooms - Activity 2

Visit www.orcsgirls.org/class

Goto

​

​

​

​

Enter password (given in chat)

Disconnect from this session

Click button for your breakout room

Sharing

THANK YOU SO MUCH FOR ATTENDING

​

www.orcsgirls.org

​

contact@orcsgirls.org

Congratulations

You made it through Day 1 😎

​

Big thank you to our

Volunteers, partners and sponsors.

Thomas Proffen

thomas@orcsgirls.org Please check in at www.orcsgirls.org/class

Mars Explorer

Advanced App Lab Camp

December 28 - 30, 2020

​

Day 2

Check-in at www.orcsgirls.org/class

Recap - Fun with numbers

• Create a number facts app using http://numbersapi.com/
• Enter number, run webrequest, upon answer update text field.

​

Curiosity Rover

Cameras

Driving

Front Hazard Avoidance Camera (FHAZ)

Rear Hazard Avoidance Camera (RHAZ)

Navigation Cameras (NAVCAM)

​

Science

Chemistry and Camera (CHEMCAM)

Mars Hand Lens Imager (MAHLI)

Mars Descent Imager (MARDI)

Mast Camera (MAST)

​

​

​

https://mars.nasa.gov/msl/spacecraft/instruments/summary/

NASA Open API

Retrieving the latest photos from Curiosity Rover using the URL

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/latest_photos?api_key=DEMO_KEY

​

• Note link includes the rover name (here curiosity)
• The last name before the end or ? is called endpoint - here latest_photos
• After ? parameters are given as key=value pairs - here api_key
• The api_key is like a password controlling access
• The DEMO_KEY allows 30 requests/hour and 50 requests/day
• In the breakout you receive a different key allowing 1000 requests/hour
• You can sign up for your own API key once the camp is over at https://api.nasa.gov/

Exploring answer from the API

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/latest_photos?api_key=DEMO_KEY

​

?

JSON

JSON (JavaScript Object Notation) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).

​

Wikipedia

• Goto www.orcsgirls.org/class
• Click on JSON Formatting Tool
• Paste the output from the API call into the tool.
• Enjoy the pretty formatting :)

latest_photos is an array!

JSON Quiz

In a separate window or on a separate device, visit

​

kahoot.it

​

and enter the PIN you see on the shared screen.

Using response in JavaScript

• The JavaScript command info=JSON.parse(content) converts the JSON formatted string stored in content into the JavaScript variable (object) info.
• It preserves the ‘tree’ structure.
• Examples
• info.latest_photos[0].sol
• info.latest_photos[0].camera.name
• info.latest_photos[3].img_src
• How many photos?
• info.latest_photos.length

​

Retrieving the latest photo from Mars

Watch - you will make your own in the breakout session

Activity 3 - Mars Explorer App 1

• Create an app to display the latest Mars photo - just like the app we just made.
• Extension ideas
• Show more information such as camera name or number of pictures.
• Show number of pictures (length)
• Change the URL to see latest image from Spirit rover
• Allow user to select rover (create url from user input)
• Allow user to browse through pictures (use image links from all array elements retrieved)

​

​

​

Breakout Rooms - Activity 3

Visit www.orcsgirls.org/class

Goto

​

​

​

​

Enter password (given in chat)

Disconnect from this session

Click button for your breakout room

Sharing

THANK YOU SO MUCH FOR ATTENDING

​

www.orcsgirls.org

​

contact@orcsgirls.org

Congratulations

You made it through Day 2 😎😎

​

Big thank you to our

Volunteers, partners and sponsors.

Thomas Proffen

thomas@orcsgirls.org Please check in at www.orcsgirls.org/class

Mars Explorer

Advanced App Lab Camp

December 28 - 30, 2020

​

Day 3

Check-in at www.orcsgirls.org/class

Run the app you made yesterday.

​

Notice any difference?

NASA Open API

Retrieving the latest photos from Curiosity Rover using the URL

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/latest_photos?api_key=DEMO_KEY

​

• Note link includes the rover name (here curiosity)
• The last name before the end or ? is called endpoint - here latest_photos
• After ? parameters are given as key=value pairs - here api_key
• The api_key is like a password controlling access
• The DEMO_KEY allows 30 requests/hour and 50 requests/day
• In the breakout you receive a different key allowing 1000 requests/hour
• You can sign up for your own API key once the camp is over at https://api.nasa.gov/

Using response in JavaScript

• The JavaScript command info=JSON.parse(content) converts the JSON formatted string stored in content into the JavaScript variable (object) info.
• It preserves the ‘tree’ structure.
• Examples
• info.latest_photos[0].sol
• info.latest_photos[0].camera.name
• info.latest_photos[3].img_src
• How many photos?
• info.latest_photos.length

​

Learning more about the NASA API

NASA Open API - photos endpoint

Retrieving the specific photos from Curiosity Rover using the URL

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?api_key=DEMO_KEY

&camera=FHAZ&earth_date=2020-12-10

​

• Change the endpoint to photos
• Specific camera and earth_date - note the & to separate parameters
• Note the top level keyword changed, so you need to change the variable name
• info.latest_photos[0].img_src to info.photos[0].img_src

Quiz

• What sol (Mars day) was June 12, 2020 ?

Activity 4 - Mars Explorer App Deluxe

• Start from yesterday’s app and change endpoint to ‘photos’ and provide a date in API link. Remember to change the variable name!
• Expand the app to allow the user to enter a desired date and camera.
• Show additional information.
• Add next/prev buttons to look through photos.
• Make the app pretty and ready to share.

​

Add features in stages and test!

Be ready to share your final app 😎

​

Breakout Rooms - Activity 4

Visit www.orcsgirls.org/class

Goto

​

​

​

​

Enter password (given in chat)

Disconnect from this session

Click button for your breakout room

Showcase

Where to go from here?

Keep coding 👩‍💻👩🏾‍💻👩🏿‍💻👩🏼‍💻

• Expand the Mars Explorer App
• Try the other APIs listed on the startWebRequest help page - e.g make a weather app
• Links remain on the camp webpage

Perseverance landing Feb 18, 2021

• Watch the API webpage and expand your app to explore images from the new rover.
• Email a screenshot of your app with a cool Mars Photo from Perseverance to mars@orcsgirls.org Be featured on social media, win a prize :)
• ‘Reunion’ meeting in March - stay tuned.

Upcoming classes

www.orcsgirls.org/online

Tuesday’s from 4:00pm to 5:30pm

www.orcsgirls.org/club

THANK YOU SO MUCH FOR ATTENDING

​

www.orcsgirls.org

​

contact@orcsgirls.org

Congratulations

You did it!

​

Big thank you to our

Volunteers, partners and sponsors.