SDEV-Lab 9 Web Services Solved

In this lab, we will use a REST API to create webpage to display today's weather. You will edit the template (below) which includes all of the files necessary to work with REST. 

NOTE: This lab is due next week, right before recitation.
Download the template and make sure you extract the files before using them.
Est. Time ⏱
0 minutes
Lab Overview

Mark Complete Expand

For today's lab, you will be completing the starter weather.html web page so that it can access the DarkSky API and display today's weather and the 6 day future forecast. All of the necessary html code has been provided for you. All you have to do is complete the javascript at the bottom of weather.html. You can see an example of a completed weather.html web page below.


 
 
1. Set up A DarkSky Account

Mark Complete Expand(10 Minutes)

In order to access DarkSky's weather inforamtion, you'll need to create a free account. Note, the free account only allows you to make 1,000 API calls per day. This is more than enough for today's lab, but be aware if you decide to work with DarkSky or other API's on your group project, these API's will have similiar restrictions. If your code makes a lot of automated API requests (say in a for/while loop), you may quickly run out of API requests while testing your app!

1. Register at DarkSky.net
 
Head over to the registration page and enter in your email & password information to register for a new account.

2. Login and Find Your API Access Key
 
After you login you'll find your API access key (Please note the one in the image is invalid/old. Don't use it! It won't work!). Make sure to either keep this tab open or save your "Sample API Call" URL. We'll be using it later on in our weather.html's javascript code.
2. Make API Requests

Mark Complete Expand(20 Minutes)
In this section, we'll cover how your javascript code will make a request to the DarkSky API

 
1. Make a DarkSky API Request with Ajax and Jquery
$(document).ready(function() {
    var url =''; //Place your DarkSky API Call Here
    $.ajax({url:url, dataType:"jsonp"}).then(function(data) {

    })
})
var url = ''
Inside of the single quotes '', you'll need to add the API URL you saved from DarkSky. This is listed in the "Sample API Call" as https://api.darksky.net/forecast/[key]/[latitude],[longitude]
$.ajax({...
To access DarkSky's data, we'll use ajax to make a call to our url for json information. The key part here is that our call will return a json object called data. The data object will include the current weather and future weather information listed by the hour or day. Checkout a sample response here
2. Display Your Weather Data
$(document).ready(function() {
    var url =''; //Place your DarkSky API Call Here
    $.ajax({url:url, dataType:"jsonp"}).then(function(data) {
        console.log(data);//Review all of the data returned
        console.log("Current Temp: " + data.currently.apparentTemperature);//View Today's Temp
        console.log("Tomorrow's High: " + data.daily.data[1].apparentTemperatureHigh);//View Tomorrow's High
    })
})
console.log(data);
To review all of the data provided by DarkSky, we'll print it out to the console. Open your Web Browser and you can see all of the fields loaded into our JSON data. The main fields we will be concerned with our are currently (the curren weather) and daily (an 8 day forecast of weather information).
data.currently.apparentTemperature
To access the current weather information, we'll need to use the following format: data.currently.FIELD_NAME. In this example, we are retrieving the current temperature.
data.daily.data[1].apparentTemperatureHigh
To access the future weather information we'll need to access the daily field's data array. The data array contains 8 days of information (starting with today's information). In the example, we are grabbing the estimated high temperature for tomorrow which means we'll need to use index [1] (index 0 is the current day's information).
Complete List of Data Point Fields
DarkSky provides far more information than what we'll need for today's lab. To see all of the types of information you can retrieve, checkout the documentation's complete list of data point fields here
3. Working with Unix Timestamps
$(document).ready(function() {
    var url =''; //Place your DarkSky API Call Here
    $.ajax({url:url, dataType:"jsonp"}).then(function(data) {
        console.log(data);//Review all of the data returned
        console.log("Current Temp: " + data.currently.apparentTemperature);//View Today's Temp
        console.log("Tomorrow's High: " + data.daily.data[1].apparentTemperatureHigh);//View Tomorrow's High
        var unix_time = data.currently.time;//Retrieve the current timestamp
        var javascript_time = new Date(unix_time * 1000);//Convert the unix time stamp to javascript
        console.log(javascript_time);
        console.log(javascript_time.getDay());
    })
})
unix_time * 1000
DarkSky provides the timestamps for each weather forecast datapoint, but we can't use this information as-is. This is because DarkSky returns a Unix timestamp (in seconds) but in javascript our Date class works in milliseconds! So to convert the Unix timestamp, we need to multiply it by 1,000.
console.log(javascript_time);
The complete timestamp will list the provided date and time.
javascript_time.getDay()
If we want to pull out individual parts of our timestamp, we'll need to use the various get() methods provided by the Date Class. In this example we are using the .getDay() method which returns the day of the week. As you can see, the value returned is a number between 0 & 6, where 0 represents Sunday and 6 represents Saturday.
Complete List of Date Methods
If you want to learn more about working with Javascript Dates, check out W3Schools tutorial here
3. Updating the weather.html

Mark Complete Expand(40 Minutes)

In order to display the information from the DarkSky API call in weather.html, you will have to write some javascript to dynamically fill in the weather values (e.g., Precipitation, Humidity, etc.)

1. Make an DarkSky API request to retreive the weather information

Retrieve the following information from the DarkSky API:

1. image_today : This should display an image for today's weather.
      You will have to match the data.currently.icon to an image in the /img directory

2. icon_today : This should display the value of data.currently.icon

3. temp_today : This should display the current temperature (i.e., data.currently.temperature).

4. thermometer_inner : Modify the height of the thermometer to match the current temperature.
      You will have to modify the CSS in the <style tags at the top of the weather.html file.
      (i.e., #thermometer_inner { width: 95%; height: 20%; margin:2.5%; background: red; position:absolute; bottom:0;})
      If the temperature is 32 F, then the thermometer will have a height of 32%.  Please note,
      this thermometer has a lower boundary of 0 and upper boundary of 100.

5. precip_today : This should display the current probability for precipitation and should be
      listed as a % (i.e., data.currently.precipProbability).

6. humidity_today : This should display the current humidity as a %.

7. wind_today : This will display the current wind speed.

8. summary_today: This will display the current summary for the day's weather.
                                
2. Process the daily forecast for the next 6 days
    For the next 6 days you will need to add a new card listing:

    1. The image icon for the day's weather

    2. The temperature high

    3. The temperature low
              
Each card should use the following format:<div class="col-2"
  <div class="card"
    <img class="card-img-top" src="Change to include the path of the image based on API data" alt="Card image caption"
      <div class="card-body"
       <h5 class="card-title"<!-- List Day of the Week Here --
        <p class="card-text"High:<!--List Temperature High -- 

         Low: <!-- List Temperature Low --
 


      </div
   </div
</div

HINT: - Make sure to use string concatenation to add the html code for the daily weather cards. This should be set to the innerHTML for the 6_day_forecast div.