Develop a public transportation system simulator with Node.js and the dashDB service

Add a warehouse database and analytics tools to your app on IBM Bluemix

01 July 2014
PDF (672 KB)
Share:
Wilton Cesar Pelicari

Wilton Cesar Pelicari

Software Engineer

Follow me on Twitter

Yuka Kyushima

Yuka Kyushima

Software Engineer

Google+

César Henrique Bernabé

César Henrique Bernabé

Software Engineer

Follow me on Google+

Eduardo Domene

Eduardo Domene

Software Engineer

Follow me on Google+

Learn how to build a JavaScript app to simulate public transportation and connect it to a server using the web framework Node.js. To show you how this app can be useful in the future, we show you how to connect your application to BLU Acceleration (now known as dashDB), which provides the ability to process and evaluate a large amount of data from a public transport system in a short time.

IBM Bluemix makes cloud programming easy. It provides you all tools necessary to start developing handy applications on the cloud, such as this public transportation simulator.

What you need for your application

 
  • JavaScript background— Knowledge of loops, conditionals, modules, frameworks, and libraries such as jQuery.
  • SQL, CSS3, Bootstrap, and HTTP foundation— Understand simple SQL queries (used to connect and retrieve data from dashDB to the jQuery API and JavaScript). Familiarity with request-response methods as GET and POST (used to communicate between Node.js and JavaScript).
  • Internet connection— Access to DevOps Services.

Step 1. Create a new application on Bluemix

 

IBM Bluemix™ supports the Java™ programming language, JavaScript, Ruby on Rails, among other languages. In this example, a Node.js runtime is created to simplify the server-side development and deployment process, and to improve the interaction with other services, such as dashDB.

  1. Log in to see a dashboard, which gives information about the user account. Click Create an Application and select the appropriate service — the Node.js Runtime in this case. Image shows Create an Application step
  2. At this point, you can access the documentation about the service, which explains the functions and how it can be used. Click Create App and specify a name and a host name. Image shows accessing service documentation step
    After the process is complete, you can see the service running and ready on the dashboard. Click the application to see the application overview.
  3. Add dashDB, which provides database storage, data analysis, and other functions. On the project overview page, click Add a service and search for dashDB in the Big Data section. Select it, click Create and Add to App, select the project, and give this instance a name. Image shows adding dashDB step
  4. To integrate DevOps Services with your application, click Add Git Integration at the top of the application status page. Check the Populate the repository with the starter application package and deploy it to the application option and click Continuecontinue. To access the application files, click CODE. Image shows integrating DevOps Services with your application step

Step 2. Set up Node.js to receive connection with dashDB

 

This step has several parts.

1. Work with DevOps Services

 

You don't need to install anything on your computer to make this application work. After you have synchronized with DevOps Services, you can work in a group and commit your changes to the repository.

  1. To create a copy of the application on your DevOps account, click bussimulator, then Edit code > FORK. Specify a valid name for your DevOps project and open it.
  2. On your forked project, edit the manifest.yml file to change the application name to the name of the application previously created —willbus in this example. Image shows step to edit the manifest.yml file to change the application name
  3. To deploy your project, click DEPLOY (next to the FORK button). Your application is now running the bus simulator project. The next step is to set up dashDB.

2. Set up dashDB

 

To make this application run on your instance (using the same file used in this sample project):

  • Open the database/tables.dll on DevOps and copy the content to the clipboard.
  • Click Manage > Work with tables and paste in the copied content from the clipboard to create the tables to be filled with the project data. Image shows step to create tables to be filled with the project data
  • Click Manage > Load Data, select the BLU schema, and select a table name to ensure that data is loaded. After you click Load Data, select one of the CSV files found in the database folder and load it according to its name (for example, LINE.CSV to the LINE table). Repeat this step for each of the other tables. Image shows Manage > Load Data step

At this point, your application is running as it is running in this sample project. For the rest of this article, the details in the instructions reflect the sample project (the back end, the front end, and the connection of the node to dashDB.)

3. Update the package.json file

 

When you create the node.js from the runtime, the package.json file is built.

Image shows package.json file creation

Under dependencies, the following key is added to enable access on DB2®.

"ibm_db" : "~0.0.1",

The occurrences of "jade" are changed to "ejs."

"jade" : "*" to "ejs" : "*"

EJS and JADE are template engines used by Node.js Express to build web pages through the server:

  • EJS adds JavaScript logic directly and imports values to strings of HTML code.
  • JADE is a full templating language with its own syntax and documentation.

Both template engines work well with the client, and both are quite popular on Node.js applications. We chose EJS because it is similar to plain HTML and HTML tags.

4. Make changes to app.js

 

App.js is the most important JavaScript document in a Node.js application. It controls the behavior of the server by using the Express framework, an easy-to-use framework for event-driven (real-time) web applications. To update your application to use the settings used for the sample application, make the following changes:

  1. Change the view_engine to read ejs, rather than jade.
  2. Create a variable and require ibmdb to start working with DB2 on the project.
  3. On the line 36 on the basic node.js, find the comment TODO, which provides the variable service that retrieves service information to connect with the database. Image shows TODO comment
  4. Add the following code to finish the server-side preparation to receive a POST from the client side.

    Click to see code listing

    db2 = services['BLUAcceleration-10.5.3 Rev. A Build 0.1'][0].credentials; //It will get specific credentials to log in your BLU Acceleration
    var connString = "DRIVER={DB2};DATABASE=" + db2.db + ";UID=" + db2.username + ";PWD=" + db2.password + ";HOSTNAME=" + db2.hostname + ";port=" + db2.port; //String built, required by ibmdb module.
    
    /* app.post receives 2 parameters:
     * '/' -> path that will receive the post.
     * function(ibmdb, connString, db2.username) -> The callback
     * function. It will receive the ibmdb variable, the connString
     * created and the db2.username that changes according to Bluemix.
     *
     * It will connect on db2 once a post method is sent by the
     * client-side using $.post jQuery function.
     *
     * A JSON object can be received by the client-side the req.body
     * object. this function is written to receive objects named table,  
     * columns and/or extras.
     */
    
    app.post('/', function(ibmdb, connString, db2.username){
    	return function(req, res){
    		ibmdb.open(connString, function(err, conn) {
    			if (err ) {
    				res.send("error occurred " + err.message);
    			} else {
    				var extra;
    				if(req.body.columns){
    					query = req.body.columns.join(", ");
    				} else {
    					query = '*';}
    					
    				if(req.body.extra){
    					extra = req.body.extra;
    				} else {
    					extra = '';
    					};
    				query = "SELECT " + query + " FROM " + db2.username + "." + req.body.table + " " + extra; //Change this query according to your application.
    				conn.query(query, function(err, tables){
    					if ( !err ) {
    						res.json(tables);
    					} else {
    						res.send("error occurred " + err.message);
    					}					
    				});
    			}	
    		});	
    	};
    });

5. Set up the client-side files

 

To receive the data retrieved from dataDB and from DB2 in the sample application, we used the following code to send a POST request to the server to start the simulation (using jQuery):

$.post('/', {JSON}, function(data){ //do something });

The bus simulator sends a JSON object to retrieve information from the database. The object contains keys such as table to specify the table name, columns to specify specific columns to be chosen from the query, and extras, which is used for the conditions (JOIN data and WHERE clauses). This general approach for data access can be customized for different simulations.

On the bus simulator version in line 13 of the public/js/database.js file, you can see $.post inside the callback of another $.post. This code makes the page load all of the database content before it loads the animation.

Step 3. Perform back-end development of JavaScript objects

 

The back-end code is located in the bussimulator/public/js/controller.js file. It is straightforward; it contains the code and objects that are used in the front end, which is covered in the next step. The following figure shows a simple class diagram for controller.js.

Image shows simple class diagram for controller.js

The code contains five objects: Line, Stop, Bus, Person, and Event. The system was developed in an object-oriented manner to make it easier to understand what is happening inside the code and to provide better control of the elements and objects inside the system.

The Line object includes variables and a reset function. This object represents the actual path for the buses. Each Line has an array of stop and an array of bus objects. A Line must have an interval, which stores the interval between the departure time for the buses. When creating a new Line, an id, a name, and an interval must be given as parameters — for example, var line1 = new Line(001, "Bloor St", 20). On the back end, the code looks like the following listing.

var Line = function(id, name, interval){
	this.id = id;
	this.name = name;
	this.interval = interval;
	this.stops = [];
	this.buses = [];
	this.onSim = false;
	}
	this.reset = function(){
		this.onSim = true;
		for (var i = 0; i < this.buses.length; i++)
			this.buses[i].reset();
	}

}

When a new line is added, the next step is to add stops to this line. The Stop objects store an id, name, location, and passengers. The location of each stop is defined in percentages. For example, if a Line has three Stops, the first stop is going to be located at 0 percent of the size of the line, the second stop is positioned at 50 percent of the line, and the last one at 100 percent of the line. The passengers variable is an array that stores Person objects, which gives the origin and destination for each passenger.

var Stop = function(id,name){
	this.id = id;
	this.name = name;
	this.location = undefined; //in %
	this.passengers = [];

	/* Show people at stop */
	this.showPeople = function(){
		$("#stop_" + this.id + "_people")
		.html(this.passengers.length);
	}
}

The object bus contains information about the passengers, the current line, the current stop, and its maximum capacity. Again, the passengers array stores Person objects, and the reset function is responsible for stopping and moving the buses back to their start position, which is on the first stop. It contains many other methods, such as changeColor, showPeople, addPeople, etc., which are explained in the comments just above each function.

The Event object works similar to a schedule for the simulator. This object gets a time, an action, and a bus. For example, assume you want to move the first bus from a line, one stop to another, after five seconds. The code for this event is new Event("00:05", goToNextStop, line.buses[0]) - , where line.buses[0] is the bus you want to move, which is linked to a line.

A quick look through the rest of the code gives you an idea of how the objects are linked and how the front end can use the objects. The controller.js is the base for the simulator. Before you begin developing the front-end code, you need to understand it. The full code can be downloaded from our DevOps Services repository.

Step 4. Perform front-end development on the Bootstrap and jQuery API

 

The Bootstrap framework is used for front-end development. The jQuery API is used for effects and animation on the simulator.

The bus simulator interface is divided into three main parts: canvas, timer, and sidebar. The canvas shows the lines and buses. The timer at the upper-right corner can be controlled with the Start, Pause, and Stop buttons. In the sidebar, you can add lines and people, and you can see some simulation information.

To add lines to the simulator, go to the Line tab. The little circles and the numbers above them represent the stops and the number of people at each stop. The little squares and the numbers inside them represent the buses and the number of people inside each bus. To remove a line from the simulator, click the X on the side of the line name.

Image shows adding lines to the simulator

To add people to each stop on the bus lines in the simulator, go to the People tab. You can change the traffic in each segment of the line by clicking on it. To see the information for each bus, such as number of passengers, current stop, and time to next stop, click the bus.

Image shows adding people to the simulator

To start the simulation, click Start. You can follow the simulation events on the Home tab. It shows the event list with time and the action for each bus. You can pause, resume, and stop the simulation, and also add more lines or remove them from the simulator.

Image shows starting the simulation

In this example, the animation is based on an event list. Each event is related to a time, bus, and specific action to be taken. When a new line is added to the canvas, it is assigned a departure time for each bus of this new line, and these events are put on the event list. When the simulation begins, it starts checking to determine whether the time of the simulator is equal to the time of the first event. If the time is equal, the action of this event is performed and the next event for this bus is scheduled.

The two actions are to go to next stop and back to terminal. For the first action, the bus spends some time at its current stop as the people are getting on and off. After that, it drives to the next stop. The speed depends on the traffic on this segment of the line. The second action happens when the bus is at the last stop. It stays at that stop as people are getting off, then it goes back to the terminal.

To add the style and animation to your application, copy the following files to your project and copy the Bootstrap and jQuery files in the css and js folders, maintaining the directory structure:

  • bussimulator/public/css/style.css
  • bussimulator/public/js/animation.js
  • bussimulator/views/index.ejs

Conclusion

 

Bluemix includes all the tools necessary to develop a public transport system simulator online, with no need to install local software. IBM DevOps Services provides the environment required to collaborate with a group on this project. This setup makes the development process really straightforward.


BLUEMIX SERVICES USED IN THIS TUTORIAL:

  • SDK for Node.js runtime makes it easy to develop, deploy, and scale server-side JavaScript apps.
  • dashDB adds a warehouse database and various analytics tools to your application.

RELATED TOPICS:Node.jsJavaScriptjQuery

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=Big data and analytics, Cloud computing
ArticleID=976219
ArticleTitle=Develop a public transportation system simulator with Node.js and the dashDB service
publish-date=07012014