Cometari Escape app

Escape Application developed by Cometari Dedicated Solutions together with Sabre ®.
An Inspirational air shopping map based application that uses a combination of search and intelligent APIs in a simple workflow. Search by budget, theme and region to explore possibilities of your next journey.

Escape – Application architecture.

The Escape app consists of two applications; one of them is middleware which is responsible for connecting to sabre web services and the other one is the adequate Frontend application.
The frontend of the Escape app is written as a single-page application using strictly JavaScript to simplify development. It is based on AngularJS framework in a client-side model-view-controller (MVC) architecture.
Apart from Angular application uses several other libraries and components such as jQuery, moment.js, Chart.js, Angular Google Maps and others. The skeleton of the app has been scaffolded using Yeoman generator toolset together with features from Bower controlling the .js dependencies and Grunt which provides a few useful tasks for smoother workflow. The layout of the app is based Bootstrap framework to create fully responsive user experience. The stylesheets for the layout has been written in Sass language that is the reason why to work with the development of the app npm installs Ruby based Compass interpreter to output the scripts into standard CSS.

Escape Application – detailed description and flow.

The flow through the application starts with the search view. There are several fields and options to be filled by the user.
The first one is the origin airport, which is a hybrid of a textbox and select box and provides AJAX based remote data loading of all airport codes. With each keystroke the server provides airport options and caches them on the client side. Then the user chooses appropriate dates and length of stay. The next parameter to be filled is Point of Sale – the select box here is filled by an Angular http request to Point of Sale Country Code Lookup supplemental API which retrieves a list of supported point of sale country codes and associated country names.

There are several additional options collapsed on the initial view. The user can indicate maximum fare, preferred theme, region and top destination indicator. Preferred theme is filled with options retrieved by a call to Travel Theme Lookup API. With the options selected the user can move to the actual search. Based on the parameters filled a call to the Destination Finder API is being made it retrieves a list of available destinations with overall lead fare. The response of the middleware provides also longitude and latitude of the destination airports. This data is used then to show the next view (without refreshing the page). When the data is successfully retrieved from the server, Angular service broadcasts this data to the map controller. At once all markers corresponding to all the destinations are shown on the map which recenters to fit all of them. Additional option of marker clustering has been introduced here to group the markers when they are cluttered close to each other.

Clicking on each cluster zooms in the area and shows the component markers. Clicking on each cluster triggers the window template with fare info and airport name to open (due to problems faced while working with Angular Google Maps this has been moved to a different template and therefore different controller – actions that are happening too ‘deep’ on the map are not controlled by Angular loop causing problems with handling the stability of the app). The marker window links to another panel which provides more info on the destination fares. Initially it shows the chart with pricing data for the dates selected. When the window is first opened it calls for data on seasonality for the specified destinations (The travel Seasonality API) and if the US has been selected as a point of sale it calls to Low Fare Forcast API to get the recommendation.
Each click on the chart bar provides data for the selected dates. By clicking ‘later’ beneath the chart a call to Lead Price Calendar is made which in response provides info on fares for further dates. Each time the user clicks the ‘later’ button the chart redraws the next two week pricing info but the call is made only for the first click per destination. For the selected date from the bar the user can then go to detailed flight info by clicking ‘View Flights’ info which based on the selection makes a call to the InstaFlights Search API and retrieves roundtrip flight itineraries for ten best deals.

AUTHOR: cometari
No Comments

Leave a Comment

Your email address will not be published.