Using a Third Party API
The time will come when you'll need data from a source you don't own. This how to will present the scenario of accessing a third party's API from a Redwood app. We'll show an example of accessing an API from both the client side and the server side.
We're going to build a simple weather app that will display the current weather in the user's zip code (we'll assume only zip codes in the United States of America to keep the example code as simple as possible). To do this we'll get the current weather from the OpenWeather API and display it on the only page of our app, the homepage. The final app could look something like this (if you apply a little more styling on top of the basic version we'll build):
If you just want to skip to the code, you can get the repo for both the client and server implementation here: https://github.com/redwoodjs/cookbook-third-party-apis You will still need a valid API key from OpenWeather, so don't skip the Setup steps below!
Setup
You'll need to create a free account on OpenWeather to get an API key. You'll be able to make 1,000 calls per day, which is more than enough for our sample app (with enough left over that you can release this as a private weather station for your family and friends).
Once you've created your account and verified your email address, go to the API keys tab and copy your default key:
(That's not a real key so don't even think about trying to steal it!)
For some reason it can take up to 30 minutes for OpenWeather to enable your API key, so while we're waiting for them let's see what a sample API call will return: https://samples.openweathermap.org/data/2.5/weather?zip=94040,us&appid=439d4b804bc8187953eb36d2a8c26a02
{
"coord": {
"lon": -122.09,
"lat": 37.39
},
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10d"
}
],
"base": "stations",
"main": {
"temp": 280.44,
"pressure": 1017,
"humidity": 61,
"temp_min": 279.15,
"temp_max": 281.15
},
"visibility": 12874,
"wind": {
"speed": 8.2,
"deg": 340,
"gust": 11.3
},
"clouds": {
"all": 1
},
"dt": 1519061700,
"sys": {
"type": 1,
"id": 392,
"message": 0.0027,
"country": "US",
"sunrise": 1519051894,
"sunset": 1519091585
},
"id": 0,
"name": "Mountain View",
"cod": 200
}
Good ol' faithful JSON. Let's see, what can we use here to display on our site? How about the name
of the city that the zip is in, the main.temp
(listed here in Kelvin, so we'll need to convert) and then under the weather
key we have an array with a main
that lists the current conditions in english. How about that icon
? Turns out OpenWeather has some we can use! Just take the icon code and use it in a URL like http://openweathermap.org/img/wn/10d@2x.png
If enough time has passed your real API key may be activated. You can try seeing the weather in the geographic center of the US (make sure to append your API key to the end of this URL): https://api.openweathermap.org/data/2.5/weather?zip=66952,us&appid=
If it's still not ready let's start working on the app and hopefully it will be by the time we're done. You can always use the sample URL and forever see the unchanging weather in Mountain View, California.
Create the App
We'll start our app the way we start all Redwood apps:
yarn create redwood-app weatherstation
cd weatherstation
yarn rw dev
That will open a browser to http://localhost:8910. Let's create a landing page:
yarn rw generate page home /
If you like typing you can use the full command
yarn redwood generate page home /
The browser should have refreshed with a message about where to find our new homepage, web/src/pages/HomePage/HomePage.js
. Let's open that up and create a form so the user can actually enter their zip code:
import { Form, TextField, Submit } from '@redwoodjs/forms'
const HomePage = () => {
const onSubmit = (data) => {
console.info(data)
}
return (
<Form onSubmit={onSubmit} style={{fontSize: '2rem'}}>
<TextField
name="zip"
placeholder="Zip code"
maxLength="5"
validation={{ required: true, pattern: /^\d{5}$/ }}
/>
<Submit>Go</Submit>
</Form>
)
}
export default HomePage
This gives us a very simple form and some validation that the user is entering a 5 digit zip code. If you open your Web Inspector and click Go you should see the zip code appear in the console:
Now let's talk to the API and get some data for real. We can do that in one of two ways:
- Have the client (React app running in the browser) talk to the API directly
- Have our own server (or serverless function, in the case of Redwood) talk to the API, and have the client talk to our server.
We'll build out an example of both types of integration below.