Skip to content

workbook.md

Latest commit

 

History

History
184 lines (138 loc) · 6.18 KB

workbook.md

File metadata and controls

184 lines (138 loc) · 6.18 KB

Workbook

Task 1 - Initialise the environment

  • Download the code
  • Switch to the branch project
  • Change to the sub-directory project
  • Amend the NASA API_KEY
  • Rename nd032-c2-functional-programming-with-javascript-starter/project/.env-sample environment file to .env
  • Change demo key to DEMO_KEY
  • Initialise yarn
  • Test the application

Task 2 - Architecture

  • Breakdown the architecture
  • Draw a diagram overview
  • Change application port
  • Set up button onscreen

Task 3 - Add a new Express Route

  • Update the diagram for the new architecture
  • Add a route for the Rover API
  • Test the new route

Index.js Overview

Task 4 - Add Rover functionality

  • Reuse the existing code hierarchy of client.js
  • Mirror the original apod route code
  • Added renderRover, AppRover functions
  • Put some test html onscreen using the functions

Updated Architecture

Task 5- Update Client.js - Onscreen display and fetch

  • Retrieve information using fetch API
  • Display information from the fetch API
  • Add console.log/onscreen info to show Rover fetch
  • Test the fetch - show information/parse information

Fetch Architecture

Task 6- Rover fetch

  • Update the fetch to use the Rover route
  • Update the application to use the Rover object

Task 7- Fetch Async/Await

  • Duplicate the updateStore function to call the renderRover function

Fetch Update Architecture

  • Update the server/index.js to return the json data
  • response object holds the res.json value - line 3
  • Changed the fetch to return the res.json - line 4
  • pass the response variable back as an object i.e enclose in braces - line 8
    1 app.get('/rover', async (req, res) => {
    2     try {
    3         let response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${process.env.API_KEY}`)
    4             .then(res => { return res.json() })
    5
    6         console.log(`Response: ${response.photos[0].id}`)  
    7    
    8         res.send({ response })   
    9     } catch (err) {
   10         console.log('error:', err);
   11     }
   12 })
  • Update the public/client.js
  • add new variable mars - line 2
  • Retrieve a json object - line 5
  • update the store with the reponse object appended to mars - 6
  1 const getImageOfTheDayRover = (state) => {
  2     let { mars } = state
  3     
  4     fetch(`http://localhost:8080/rover`)    
  5         .then(res => res.json())     
  6         .then(mars => updateStoreRover(store, { mars }))      
  7 }
  • The index.js returns an object labelled response
  • Parse the object using dot notation e.g.
  • Variable - mars
  • Object - response
  • Array - photos
  • Element - id
  mars.response.photos[0].id
  • Render information for the Curiosity Rover in the html
  • Test the fetch - show information/parse information

Task 8 - User Interface

  • Rover Dashboard minimum information
Field JSON Example
Launch Date launch_date photos[0].rover.launch_date
Landing Date landing_date photos[0].rover.landing_date
Status status photos[0].rover.status
Available photos img_src photos[0].img_src
Date the most recent photos were taken earth_date photos[0].earth_date

Example code to render the information

const ImageOfTheDayRover = (mars) => {
    if (!mars) {
        getImageOfTheDayRover(store)
    }
    
    return (`
            <p>Testing Mars Rover</p>
            <p>Mars ID: ${mars.response.photos[0].id}</p>
            <p>Mars launch date: ${mars.response.photos[0].rover.launch_date}</p>
            <p>Mars landing date: ${mars.response.photos[0].rover.landing_date}</p>
            <p>Mars status: ${mars.response.photos[0].rover.status}</p>
            <img src="${mars.response.photos[0].img_src}" height="350px" width="100%" />
            <p>Mars image date: ${mars.response.photos[0].earth_date}</p>
    `)
}

Task 9 - TBC

  • Display the information for three Mars Rovers (Curiosity, Opportunity and Spirit)
  • Add an Alert for each Mars Rover to indicate it has been selected
  • Setup new html for page
  • Add fancy html

Task X - Rubric

  • Use Pure functions to organise logic

  • Use of const/let correctly

  • Use of array methods correctly

  • Use of Higher order functions - use at least 2

  • App must use a Node/Express backend. Following npm package:

  • Express
  • Body parser
  • Dotenv
  • ImmutableJS
  • Immutable JS

Set up Immutable js for this project. For this project we are using a script for the CDN version. You should see the script referenced in index.html.

  • Rover Dashboard minimum information
  • Launch Date
  • Landing Date
  • Status
  • Most recently available photos
  • Date the most recent photos were taken
  • Create an interative UI
  • Create appealing page with mobile first styling
  • Incorporate the apod image in the styling.
  • Add the Mars weather embed code.
  • Add a wind graph at the location of the rover.