Full Stack Web Developer (Q1-Q2 2021)

Estimating read time ...
Edited 7th November 2021

OpenWeather - Working with APIs

In this section of the course I’d like us to spend time working with APIs from third-party providers and integrating them into our project site we’ve been building throughout this course so far, purely to gain experience working with APIs which will be beneficial if you desire to pursue a career in programming. Before we can directly integrate any API into our site, we must first establish a connection to an API, ensure we can retrieve and manipulate the data we desire and then program them via code.

From the first section we installed a tool called Postman which will aid us in all our API development work, and is the de facto standard within the industry when working with APIs.

I’d like us to integrate with OpenWeather and SendGrid. OpenWeather will allow us to retrieve the current weather for any provided location, and SendGrid will allow us to send emails via the cloud. To get started with their offerings, please create a free account with them each at OpenWeather and SendGrid.

For this section I’d like to place the focus on integrating with OpenWeather. I’d like you to place the current weather status anywhere on your project site we’ve been working on. To accomplish this, you’ll need to perform an API call when your page is loaded, get the current weather of a predefined location and then present the current weather on the page. The predefined location can be any location of your choosing, e.g. Lancashire, London, New York City etc. (Please see the ‘Current weather data’ API documentation at OpenWeather for integrating with.)

The above may seem complicated and you may be wondering where or how to begin. Not to worry, in the next section we will provide all the knowledge working with APIs but you’ll also need to read the specific API’s documentation for the technical details. Please see the next section for the details, which will make this task clearer.

Before you code the API into your site, I’d like you to trial and experiment with APIs using Postman. Using Postman enables us to use APIs before we’ve even programmed them into our site or application. (More details on Postman can again be found in the next section.)

If you’ve been able to build the OpenWeather API into your site’s code and return the weather for a predefined location today, I’d like you to advance this further. Instead of having the location predefined, I’d like you to create a form which allows the user to enter a city name. The weather for the provided city should then be presented. There are multiple ways we can achieve this, feel free to opt for the method you’re most comfortable with.

Please now read the next section for the details on working with APIs.


Arif Ullah

Developer & CEO