2.E.1: Weather App
Last updated
Last updated
Know how to send an HTTP request and handle response data in a frontend app
Know how to send an AJAX request and load response data in a React app
Know how to chain promises with multiple AJAX calls
Know how to read API documentation to use a new API
We will build a weather app that shows the latest weather forecast for a city that a user enters.
Fork and clone the
to access Open Weather's free weather API. After confirming your email you will receive an API key to use to make API requests. This can take up to 24 hours so please do this during pre-class.
Create an input field where users can input the city they would like to check the weather for. Provide instructions on the page so users know to enter a city name in the input.
When a user inputs a city name, use to retrieve the weather in that city and display it to the user. The app should update the weather when the user inputs a new city or submits the same city again.
To install to make requests, run npm i axios
and import Axios from the relevant component.
We will send GET requests because we are retrieving and not creating or updating any data.
Notice the API URL uses to customise the API call. We specify query parameters in key-value pairs separated by =
, where we separate each key-value pair with &
.
When developing with APIs, feel free to console.log
API responses to understand the format of the response before writing code logic. See below code example for an illustration.
We will need to use to translate location names to coordinates before querying the current weather data API. You may find it helpful to chain promises with .then
syntax.
To chain multiple asynchronous function calls with .then
, we can return the promises of the subsequent function calls in their .then
callbacks instead of creating a nested .then
. See example below for illustration.
We may find it helpful to specify metric
units for the units
parameter of the API. This will return all temperature values in Celsius instead of Kelvin.
Consider displaying the relevant icon next to the weather. Open Weather returns an icon code with weather info and we can retrieve the relevant icon using and an HTML img
tag.
console.log
response to understand response formatWe can console.log
the response to the API request to understand its format before we try to parse data from the response.
The logging revealed that the data I want is in response.data[0]
.
Promise syntax is flexible, and there are preferred and less-preferred ways of handling promises. Rocket prefers we only have 1 level of nesting for chained promises for readability.
We should never need more than 1 level of nesting for .then
s. This makes our code harder to read, because the .then
execution flow becomes non-linear.
We can return the promise returned by the 2nd axios.get
in its .then
callback, and obtain the result of that promise in the subsequent .then
. This allows us to have only 1 level of nesting.
Submit a pull request to the main
branch of Rocket's Weather App repo and share your PR link in your section Slack channel.
.then
callbacks accept both values and promises as return values. If a previous .then
callback returns a promise, the subsequent .then
callback will receive that promise's resolved value as a parameter. Read more on .then
behaviour in .
In addition to the current weather, display a daily forecast, represented by hourly data to the user in tables. You may find the helpful.
Render the forecast data in a graph instead of a table. You may find React chart libraries like helpful.
If you would like to deploy your app to the internet, follow Vitejs GitHub Pages .
Here is and a for this exercise. You can do better!
console.log
can help us reveal the format of an API response. Source: Rocket Academy