Follow air traffic with a Flight Status and Tracking app built on Bluemix

22 July 2014
PDF (408 KB)
Share:
Photo of Hemant Kanago

Hemant Kanago

Application Architect, IBM GBS AIS: Portal & Social

@HRKTweet on Twitter
Follow me on G+
Find me on LinkedIn

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

This flight-tracking application overlays the real-time location of flights that approach a particular airport on Google Maps. I built it using a mashup of Bluemix services and external third-party APIs, including the Flight Status by Airport API, Google Maps API, and weather data, to create a unique system of engagement. Flight Tracker is primarily a hobbyist application, but the idea and technical implementation can be applied to business scenarios.

To build this application, you need these third-party APIs:

  • The FlightStats Flex APIs service, which gives you access to flight information, including the position (latitude and longitude), estimated and actual departure and arrival times, airplane type, flight delays, and airplane speed.
  • The Google Maps Javascript API service, which helps you build customizable maps and data visualizations.

This application demonstrates the ease of combining Bluemix API capabilities with a wide range of external third-party APIs to create a mashup.

What you need to build a similar app

 

Step 1: Fork this application

 

Click this article's Get the code button and fork the project on DevOps Services:

  1. Click EDIT CODE (enter your DevOps Services credentials if you're not already logged in).
  2. Click FORK on the menu to create a new project.
  3. When you see the prompt, name your new project and click SAVE to create a copy of the code into your project and a Git repository.
  4. Connect Eclipse to the Git repository and download the code to your local drive.

Step 2: Connect to your DevOps Services project with EGit in Eclipse

 

You can interact with the code of your Git project from within Eclipse by using the EGit plug-in. To get started:

  1. Install EGit in Eclipse. Refer to these documentation details.
  2. Copy the Git URL.Screen capture showing the Git URL
  3. In Eclipse, select File>Import
  4. In the Import window, select Git>Projects from Git and click Next.
  5. Select Clone URI and click Next.
  6. Paste the copied Git URL in the URI field. Enter your Jazz.net user ID and IBM ID password in the Authentication section. Click Next: Screen capture that shows creating your project in Eclipse
  7. Select the branches that you want to work on and click Next.
  8. Update the Local Destination of the cloned repository, if needed, and click Next.
  9. Click Finish.

The project is now created in Eclipse. The application code can be modified or enhanced with more function. Commit any changes and push them to the DevOps Git repository:

Screen capture of the newflightapp folder

Now you can push the application to Bluemix by using either the Cloud Foundry (cf) command-line tool or DevOps Services and the IBM continuous delivery pipeline. You could also install the Bluemix plugin for Eclipse and push the app directly to Bluemix. Refer to Deploying apps with IBM Eclipse Tools for Bluemix. I used the cf command-line tool.

Step 3: Manage the application lifecycle with the Cloud Foundry (cf) command-line tool

 

One way to deploy a web application into the Bluemix environment is from the command-line interface. From there, you can manage deployments, start and stop applications, and more. To begin:

  1. Download and install the Windows 64-bit version of the Cloud Foundry file from GitHub.
  2. Verify the installation:
    C:\Users\IBM_ADMIN>cf -version
    cf version 6.3.0-053b818-2014-07-14T21:30:59+00:00
  3. Use these commands to log in to Bluemix:
    C:\Users\IBM_ADMIN>cf api https://api.ng.bluemix.net 
    Setting api endpoint to https://api.ng.bluemix.net...
    OK
    	
    API endpoint:   https://api.ng.bluemix.net (API version: 2.2.0)
    Not logged in. Use 'cf login' to log in.
    	
    C:\Users\IBM_ADMIN>cf login
    API endpoint: https://api.ng.bluemix.net
    	
    Email> hrktech@gmail.com
    	
    Password>
    Authenticating...
    OK
  4. Push application files in your local environment to your selected Bluemix application. For more information, see the Bluemix documentation.

Step 4: Push the application to Bluemix servers

 
  1. Use the Cloud Foundry CLI cf push command to push the WAR file that is created from the Eclipse project onto Bluemix. In this case, <application name> is the unique name for your application:
    cf  push  <application name>  -p  c:\<path>\newflightapp.war
  2. After you see a success message, log in to your Bluemix dashboard. The new application can be verified by clicking the link (http://<application name>.mybluemix.net/) displayed there.

You have other alternatives for managing and deploying applications to Bluemix. For more information, see the Getting Started with IBM Continuous Delivery Pipeline for Bluemix and Getting started with IBM Bluemix and DevOps Services using Java documentation.

Developing the flight status and tracking application

 

The flight-tracking application code contains a Java™ class that consumes an XML feed from the Flight Track by Airport API service. The API returns a list of flights that are approaching a specific airport in or near real time. The XML response data that is returned by the service contains data such as the flight coordinates, speed of the airplane, departure airport, and arrival airport. The data is parsed by using a DOM parser, and part of the retrieved data is formatted into JSON output. This JSON data is used in a JavaServer Pages (JSP) file to create the user interface that displays flight location on the map by using JQuery and the Google Maps API.

Here's how it works. The Flight Track by Airport API service provides a service URL, which requires a FlightStats App ID and App Key to be passed as parameters. The ID and key are uniquely assigned after registration. The airport code is appended to the URL based on user click or selection of airport:

https://api.flightstats.com/flex/flightstatus/{protocol}/v2/{format}/airport/tracks/{Airportcode}/arr?appId=<yourId>&appKey=<yourKey> …. / maxFlights=10

The flightstat.java file, which is in the imported project in Eclipse in the src folder, contains the flightQ(String ac) method. This method accepts the airport code as a parameter and is appended to form a valid URL. By passing the parameter maxFlights=10, the URL limits the number of random flights in the response to 10:

    URL url = new 
        URL("https://api.flightstats.com/flex/flightstatus/rest/v2/xml/airport/tracks/"+ac+"/arr?
        appId=<yourId>&appKey=<yourkey>&includeFlightPlan=false&maxPositions=1&maxFlights=10");

The API response contains details of 10 flights that are arriving at the selected airport. This response XML is read with a DOM parser and traversed to get its elements:

URLConnection conn = url.openConnection();
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document doc = builder.parse(conn.getInputStream());
NodeList nodes = doc.getElementsByTagName("flightTrack");
buffer.append("[");
  for (int i = 0; i < nodes.getLength(); i++) {
	Element element = (Element) nodes.item(i);

The elements in the XML response are appended by using StringBuffer to create a JSON-formatted data output that's returned by the method flightQ(String ac). This snippet of JSON-formatted data shows one flight:

{
"flightNumber": "AA10",
"lat": 36.0161,
"lon": -107.2828,
"description": "<b>Flight Number: AA10</b><br/>
                <b>Departure Airport Code: LAX</b> <br>
                <b>Arrival Airport Code: JFK</b></br> 
                <br>Speed : 584 miles/hour</br>
                <br>Longitude : -107.2828  Latitude : 36.0161</br>"
}

The WebContent folder contains the JSP file flightTrack.jsp, which creates the Google Map user interface with the JQuery function $(document).on. It then calls the initialize() method, which centers the Google Map at 40 degrees latitude and -30 degrees longitude with a zoom level of 3. The map is displayed at the <div> id "map_canvas".

$(document).on("pageinit", "#map_page", function() {
		initialize();
	});
	function initialize() {
		
		directionsDisplay = new google.maps.DirectionsRenderer();
		var mapCenter = new google.maps.LatLng(40.00, -30.00);
		var myOptions = {
			zoom : 3,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			center : mapCenter
		}
map = new google.maps.Map(document.getElementById('map_canvas'),
				myOptions);

In the JSP code, calling flightQ(String ac) returns the JSON-formatted String data that is assigned to a JavaScript variable. The data is looped through to mark each flight's location on the map, by using the Google Maps API. See the next example. (For more information, see to the related documentation and sample code on the Google Developers site.)

......
flightstat f = new flightstat();
String json = f.flightQ(aircode);
.......
var markers = <%=json%>;
.......
Var gmarkers = [];
for (i = 0; i < markers.length; i++) {
 	var data = markers[i]
	var myLatlng = new google.maps.LatLng(data.lat, data.lon);
	var marker = new google.maps.Marker({
		position : myLatlng,
		map : map,
		title : data.flightNumber
	});
	(function(marker, data) {
	//Attaching a click event to the current marker
	google.maps.event.addListener(
		      marker,"click",
			function(e){
			   infoWindow.setContent(data.description);
	      	      for ( var j = 0; j < gmarkers.length; j++) {
			gmarkers[j]
			.setIcon('http://google.com/mapfiles/ms/micons/red-dot.png');
		       }
	            marker.setIcon('airplane_tourism.png');	
	            infoWindow.open(map, marker);
	         });
	gmarkers.push(marker);
	})(marker, data);
      }
}

The flight coordinates data (latitude and longitude) mark the location of a flight on Google Maps. A click event is added that displays the speed of the plane, flight number, and arrival and destination airport. For example, this screen shows the flight details when a user clicked the red marker icon that represents current flight location on the map.

Screen capture of map that shows flight location and details

The following image shows an overview of the Bluemix Flight Status and Tracking application.

Diagram of the Bluemix-Flight stats and tracking mashup application

Conclusion

 

This article demonstrates the ease of creating and deploying applications to Bluemix by using its built-in capabilities and integrating with external API services to create a unique system of engagement. The FlightStats API service provides many more services that can be used in interesting ways to create new applications. A similar thought process and technical implementation can be applied to other client-specific APIs and business use cases.


RELATED TOPIC:Systems of engagement

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing, Web development
ArticleID=978044
ArticleTitle=Follow air traffic with a Flight Status and Tracking app built on Bluemix
publish-date=07222014