Build a Travel Guide App with Rakuten Rapid API Hosted Travel APIs – RadioStudio

Build a Travel Guide App with Rakuten Rapid API Hosted Travel APIs

By Shyam Purkayastha | Cloud Computing

May 21

Whenever we plan a trip, we usually look for travel recommendation related to the mode of transport and lodging. If it is an international trip then we look up a travel guide app for flights and hotels. However, there are other factors which can affect our travel experiences but are usually taken for granted. If you take into account the weather, then it is worthwhile to look at dates when the weather is fair, so as to avoid any delays or uncertainties. If you are an exploration freak, you might also want to get a glimpse of the popular places to visit and plan your trip accordingly.

More...



This post was originally published in Rakuten Rapid API blog.

By leveraging the rich set of travel APIs available in Rakuten Rapid API , we can build a travel guide app and add tons of features, specifically targetted towards the different genre of travelers. In this post, we are going to show you a glimpse of such an app that adds travel recommendation for weather and places, in addition to flight options.

So let’s dig in and build our travel guide app powered by Rakuten Rapid API.

If you haven’t done it already then you should sign up​​​​ for Rakuten Rapid API


Rakuten RapidAPI is the world’s largest API marketplace with 8,000+ third-party APIs and used by over 500,000 active deve​​​​lopers. 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!

For this app, we will be using three travel apis, namely the Skyscanner ,  Weather2020 and the Google Places API. Skyscanner and Weather2020 APIs are currently available as part of the Rakuten catalog.


The app source code is available in Github. You can clone it and follow along this post to build your own version of the travel guide app. Make sure that you have a Node.JS environment and follow the README guide to update the API keys.

The Travel Guide App Framework  

This app is built on Vue.js. Vue.js is one of the upcoming Javascript application frameworks gaining in popularity, along with Angular and ReactJS. 

The top-level application view of the travel guide app is composed of two main UI components

  1. Dropdown component- Displays the selection options for users to choose destination places for travel recommendation.
  2. Search component – Displays the information for flights, weather, and places based on user selection from the Dropdown component.

The Drop-down component allows the user to select the destination city. For this demo app, we have restricted the origin to Paris and the destination can be chosen based on a few cities in the state of New York in the US.

Clicking on the “Guide” button will spring the app into action and in a few seconds, it will throw up recommendations for flights, weather condition and places to visit.  

Let’s take a look at the various travel APIs that make this possible.

Fetching the Travel Recommendation for Flights

The flight recommendation is powered by the SkyScanner API. Based on the selection of destination city in the Dropdown component, the app makes an API call to Skyscanner to fetch the travel recommendation for flights for the next few days, between Paris and destination city.

src/components/Search.vue

getFlights() {
    var now = new Date();
    var outboundDate = (now.getYear() + 1900) + "-" + (now.getMonth() >= 9 ? (now.getMonth() + 1) : "0" + (now.getMonth() + 1));        
    var inboundDate = (now.getYear() + 1900) + "-" + (now.getMonth() >= 8 ? (now.getMonth() + 2) : "0" + (now.getMonth() + 2));
    var request = encodeURI("https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browsedates/v1.0/"
                        + this.city.country +"/" + this.city.currency + "/" + this.city.locale + "/" + this.flyOrg + "/" + this.city.airport + "/" + outboundDate) + "?inboundpartialdate=" + inboundDate;
    axios
      .get(request, {
        headers: {
          'X-RapidAPI-Key': this.apiKey
        }})
      .then(response => {
        this.onFlightFetched(response.data);
      });
},

The travel recommendation for flight is displayed with the carrier and price options.

Fetching the Weather Information

After the flight information is fetched, the app makes a call to fetch the next travel recommendation on the weather. Weather2020 powers the retrieval of weather information.

src/components/Search.vue

getWeathers() {
        var request = encodeURI("https://weather2020-weather-v1.p.rapidapi.com/city/e8ecee8ff60c478f8a36280fea0524fe/" + this.city.name +"," + this.state.abb);
        axios
          .get(request, {
            headers: {
              'X-RapidAPI-Key': this.apiKey
            }})
          .then(response => {
            this.onWeatherFetched(response.data);
          });
      },
onWeatherFetched(weathers) {
        this.weatherList = [];
        weathers.forEach((weather) => {
          this.weatherList.push({...weather});
        });
      },

Display of weather information serves as a handy feature in any travel guide app so that you can plan your itinerary based on the weather condition in the destination city.

Additional Travel Recommendation on Places to Visit

With the flight and weather information sorted, let’s look at yet another feature that can add some cheer to those curious exploroholicks.  A travel recommendation that accompanies a list of places to visit would be the perfect icing on the cake.

Google Places API is the best source for finding interesting places within a location.  It is part of the Google Maps and you must have a Google developer account to access it and then generate an API key for the app.

The Google Places API is made available in this travel guide app, by importing the vue2-google-maps module in main.js (src/main.js). It exposes the PlaceService API call to fetch places information for the destination city.

src/components/Search.vue

getGooglePlaces() {
        var service = new google.maps.places.PlacesService(document.createElement('div'));
        var request = {
          query: 'places+in+' + this.city.name,
        };
        service.textSearch(request, this.onGooglePlaceFetched);
      }

With this API, the travel guide app will display the highly rated places to visit along with their picture and address.

Putting It All Together

We have now covered the individual travel APIs that power this app.  Now let’s take a look at the top level code integration that makes the travel guide app tick.

main.js(src/main.js) is the entry point for the app. It loads the Vue framework, imports the App.vue(src/App.vue) module and configures the GoogleMaps library for invoking the Places API.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyBn96efi2cuvsNiE0DxFqWetigb0hti4bM",
    libraries: "places"
  }
});
new Vue({
  render: h => h(App),
}).$mount('#app')

Upon initialization, the App.vue loads and displays the Search component. The Dropdown component is embedded inside the Search component. 

/src/App.vue

 import Search from './components/Search.vue'
  export default {
    name: 'app',
    components: {
      Search
    }
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

To run the travel guide app, you must run npm install to install all the dependencies and update the keys for the travel APIs. Once done, run the command npm run serve to start the development server at

http://localhost:8080/ to experience the app from a browser.

Final Thoughts

You can also add more cities to the travel guide app to make it a perfect tourism app for a specific country. It’s just a matter of adding a few more data fields which will be used while calling the travel APIs.

Take a look at the data fields added for New York. 

src/components/Search.vue

states: [
{
    id: 1,
    name:'New York',
    abb: 'NY'
  },
],
citiesInUS: [
  [
    {
      name:'New York City',
      airport: 'NYCA-sky',
      country: 'US',
      currency: 'USD',
      locale : 'en-US'
    },
    {
      name:'Rochester',
      airport: 'ROCA-sky',
      country: 'US',
      currency: 'USD',
      locale : 'en-US'
    },
    {
      name:'Buffalo',
      airport: 'BUFA-sky',
      country: 'US',
      currency: 'USD',
      locale : 'en-US'
    },
  ]
],

You can add more destinations by adding a similar abbreviated format obtained from the skyscanner places API to provide more options to the users.  

Want to check out some more travel recommendation features for your travel guide app? How about getting a live feed of a popular place in the destination city!! With the webcams.travel API, this is possible too.  You can explore the categories in Rakuten Rapid API website to find more such interesting travel APIs to wow the end users of your travel guide app. 

We hope you enjoyed building this travel guide app as much as we did. If you have any queries, then we will be happy to discuss over comments below. We will be back soon with yet another interesting idea using the Rakuten Rapid API.

Credits

Source code : Galina Luca

Cover image

Follow

About the Author

Shyam is the Creator-in-Chief at RadioStudio. He is a technology buff and is passionate about bringing forth emerging technologies to showcase their true potential to the world. Shyam guides the team at RadioStudio, a bunch of technoholiks, to imagine, conceptualize and build ideas around emerging trends in information and communication technologies.

>
1 Shares
Tweet
Pin1
Share