Lesson 10

Interacting with the world

Weather in our app

One final feature we might want to integrate to our app is something that connects our quiz to the physical world. In Britain, the weather is ever changing, so why don't we offer our users an extra incentive to complete the quiz if it's raining?

We can use an API called Forecast.io to connect to live weather, and then use some JavaScript logic to make a decision about how rainy the weather is. If you search for "weather forecast API" you should find this in the first five results:

There are hundreds of other services that we could add to our app - and now that we've seen how powerful the idea of an API is, feel free to explore and add any others that you can think of!

http://developer.forecast.io

On this page you'll see that there a whole host of ways to access weather data. We're already using JavaScript in our app so it makes sense to get the data in JSON format. You'll need to sign up with your email address, so just click 'register' at the top of the page. Fill in your email and create a password, and you should then see an API link that looks like this:

https://api.forecast.io/forecast/004c891d3227671408bc5f081431dee0/37.8267,-122.423

This appears as an example on the home page. Within this link is your API key, as well as a latitude and longitude. When you click on the link you should see something like this:

This is the JSON weather data for LA. What we can do is connect to this page, and then print out the description of the weather to our user. Then if it's raining, we can give them an encouraging message. The first thing we need to do is to change the location. To find the latitude and longitude of a place you'd like to get the weather for we can use a tool called LatLong:

http://www.latlong.net/

Just search for a city name and replace the two numbers at the end of your Forecast.io link. We're going to go for Hull!

https://api.forecast.io/forecast/004c891d3227671408bc5f081431dee0/53.745671,-0.336741

Next, to integrate this data into our app, head back to the editor and to your index.html. We need to add a section where the weather information will appear, so at the end of our final section, just add the following line:

To make the weather text look nice, we might want to add some margin to the top of the section. In our style.css we can add some. Just type the following line at the bottom of your style.css:

We can now target this section and include our weather data. Click on your "script-1.js" file and scroll right to the bottom of the file. To connect to the API we can use a jQuery function called "ajax". Using the URL that we already have, type the following lines (with your own Forecast.io link):

This should connect to the weather API and then give us an alert with the current description of weather conditions. Now that we have this in an alert, we just need to change the code slightly to input this into our weather section on our index.html page. To do this, we can use another jQuery function called html, which we saw in last week's tutorial. We can also add a bit of text around the description, to make it more friendly.

Finally, we want to print an encouraging message if it's raining. For this, we can use some logic in our JavaScript. It will look something like this:

Feel free to customise as much as you like! The power of programming is that you can test lots of things with the logic we explored last week. Our final weather API code should look like this:

HTTPS

One of the reasons we've chosen to use forecast.io for our weather API is because they support HTTPS, which stands for Hypertext Transfer Protocol Secure. It's a secure way of transferring information, making it much more difficult for anyone who might be listening in!

API Key

The reason you have to register to use Forecast.io is so they can keep track of how many API requests you're making. An API key is a great way to do this, as they can count the number of times each developer is checking the weather.

JSON

The data that we get back from forecast.io is in a format called JavaScript Object Notation. It's a standard format of data on the web, and because we're already using JavaScript to add functionality to our quiz it's really easy for us to integrate this data into our app!

index.html

script-1.js

the web page

New Window