Greetings all, today we’ll show you how to make a simple app using Rakuten RapidAPI. This will be an application we built and have been showcasing at our meetups and conferences. We call this application T.W.I.N as it uses Timezone, Weather, Image, and News API’s available through Rakuten RapidAPI. T.W.I.N. is a browser-based dashboard using 4 separate APIs on the Rakuten RapidAPI marketplace. It’s simple but there are a few things you should prepare ahead of time to replicate the same results quickly and easily.
What you need
- You should have some understanding of how API technology works.
We have a video walkthrough of the demo that we’ll include below but you can see it here if you like.
Here are the 4 APIs we used for T.W.I.N, all of which are available on Rakuten RapidAPI:
IPInfo: A free API to get IP information web service providing geolocation, hostname, organization and other data types. The ipinfo.io API returns a JSON response containing data fields describing the specified IP. The API supports JSONP callbacks and can provide additional information through a paid service, such as proxy detection, scraping prevention, and improved geolocation accuracy.
Bing News: Lets you send a search query to Bing and get back a list of relevant news articles.
AccuWeather: Provides hourly and Minute by Minute™ forecasts with Superior Accuracy™.
Unsplash: Beautiful, free photos. Gifted by the world’s most generous community of photographers.
This was written with a bootstrapped project already in hand. You should try and bootstrap your own project so that you can handle the API responses in a similar fashion.
- Outside of adding the necessary libraries, we’ll be putting all of our API call’s here in these getMyLocation, getWeather, getPhotos, getNews methods.
2. Rakuten RapidAPI currently has 2 SDKs that it uses for accessing APIs. One is NodeJS SDK and the other is a library to simplify rest called Unirest. We’re slowly phasing out Unirest instances but for now we need to install both for this tutorial. Follow the links above to install them and then require them in your code.
3. You may have noticed the third line calling instantiating a new instance of RapidAPI in a variable called rapid. We need to supply the parameters for the application we’re building but we can get them automatically from signing up, so lets do that now (it’s free!).
4. After signing up, navigate to your dashboard and either make a new app or use the existing default app. Under the app, there will be a ‘connect’ option that will show you how to add all the required parameters. The dashboard is still currently under a RapidAPI instance but we’ll be refreshing that in a few months. Your user credentials will still work.
Get My Location
1. So let’s work with getMyLocation() using IpInfo. You’ll have to log in to test the endpoint, so go ahead and do that now if you haven’t already.
2. You’ll see a code snippet on the right but lets click the test button for now and see what the response looks like.
3. Seeing that this all works, we’ll go back and copy the code snippet. Let’s just plug this into our favorite code editor and structure the result appropriately.
- assign result.body.city
- assign result.body.country
- then call the other methods using parent.getNews(parent), parent.getWeather(), and parent.getPhotos().Once we have the location, lets populate everything else essentially.
4. If you’ve got hot reloading on you should see the update to your page, otherwise refresh and check out the location in the empty window.
- Go ahead and copy the snippet and let’s edit it as follows.
- assign result.body.value.slice(0,5) (or any number of results that you want)
2. Refresh again and you’ll now see the news updated.
- In order to get the location for Tokyo we’ll want to use their getCurrentConditionsByLocationKey endpoint. But what’s a location key? It’s how the API identifies where we are looking. We get the location key using the searchCityWithCountryCode endpoint.
2.Just input your city, in our case ‘Tokyo’, and your country code, in our case ‘JP’, then test. In the response you will see the ‘key’.
3. With the key, we can now use the getCurrentConditionsByLocationKey endpoint to get the current weather conditions for this area.
4. So this next part we’ve done a few time already now. Lets again copy the snippet and edit it as follows.
5. First use the snippet for the searchCityWithCountryCode endpoint and then, the snippet from the getCurrentConditionsByLocationKey endpoint within it. Then take the last step of assigning the payload to the proper variables appropriately as we have done above.
6. After refreshing you should see the following:
- The final step is getting a photo to use for the background. For this step we’ll use the Unsplash API. This API requires that we go to the company’s developer page, register, and get an API key. This is an example of an API provider that is not fully integrated with the Rakuten RapidAPI platform. As you can see with the above API’s this step wasn’t necessary but in some cases you may have to perform this step in order to move forward.
2. After getting the Access Token, use the Search Photos endpoint and then the remainder of the steps are the same as previous. Test, the endpoint, copy, the snippet, and modify it to fit your needs.
3. After refreshing, you should now see a complete dashboard that looks like the following.
4. The above demo is available to view in video format. You can check it out below:
About Rakuten RapidAPI
Rakuten RapidAPI is the world’s largest API marketplace with 8,000+ third-party APIs and used by over 500,000 active developers. We enable developers to build transformative apps through the power of APIs. Find, test and connect to all the APIs you need in one place!
Build something today and tell us about it for a chance to be featured in our <Developer Showcase/>.
Come and join us!
Rakuten RapidAPI: https://english.api.rakuten.net/