Neste artigo, aprenda a desenvolver um aplicativo em JavaScript para simular o transporte público e conectá-lo a um servidor usando a estrutura da web Node.js. Para mostrar a você como esse aplicativo pode ser útil no futuro, nós mostramos como conectar o seu aplicativo ao BLU Acceleration, que proporciona a capacidade de processar e avaliar uma grande quantidade de dados de um sistema de transporte público em pouco tempo.

Obtenha o código

O que é necessário para o aplicativo

• Experiência em JavaScript – Conhecimento de loops, condicionais, módulos, estruturas e bibliotecas como o jQuery.
• Uma base em SQL, CSS3, Bootstrap e HTTP – Entenda consultas SQL simples (usadas para conectar e recuperar dados do BLU Acceleration para a API do jQuery e o JavaScript). Familiaridade com métodos de solicitação e resposta, como GET ePOST (usado para a comunicação entre o Node.js e o JavaScript).
• Conexão à Internet – Acesso ao DevOps Services.

Etapa 1. Crie um novo aplicativo no Bluemix

O Bluemix suporta a linguagem de programação Java, JavaScript, Ruby on Rails, entre outras. Neste exemplo, é criado um tempo de execução Node.js para simplificar o desenvolvimento no lado do servidor e o processo de implementação e para melhorar a interação com outros serviços, como o BLU Acceleration.

1. Faça login para ver um painel, que dá informações sobre a conta do usuário. Clique em Criar um aplicativo e selecione o serviço apropriado – neste caso, o tempo de execução Node.js.

2. Neste momento, é possível acessar a documentação sobre o serviço, que explica as funções e como ele pode ser usado. Clique em Create App e especifique um nome e nome do host.

Após a conclusão do processo, é possível ver o serviço em execução e pronto no painel. Clique no aplicativo para ver a sua visão geral.

3. Inclua o BLU Acceleration, que fornece armazenamento de banco de dados, análise de dados e outras funções. Na página de visão geral do projeto, clique em Add a service e procure BLUAcceleration na seção Big Data. Selecione-o clique em Create and Add to App, selecione o projeto e dê um nome para essa instância.

4. Para integrar o DevOps Services ao seu aplicativo, clique em Add Git Integration na parte superior da página de status do aplicativo. Marque a opção Populate the repository with the starter application package and deploy it to the application e clique em Continuepara continuar. Para acessar os arquivos do aplicativo, clique em CODE.

Etapa 2. Configure o Node.js para receber a conexão ao BLU Acceleration

Essa etapa tem várias partes.

1. Trabalhe com o DevOps Services

Não é preciso instalar nada no seu computador para fazer esse aplicativo funcionar. Depois de sincronizar com o DevOps Services, é possível trabalhar em grupo e confirmar as suas alterações no repositório.

1. Para criar uma cópia do aplicativo na sua conta do DevOps, clique em bussimulator e em Edit code > FORK. Especifique um nome válido para o projeto DevOps e abra-o.

2. No projeto bifurcado, edite o arquivo manifest.yml para mudar o nome do aplicativo para o nome do aplicativo – willbus criado anteriormente neste exemplo.

3. Para implementar o seu projeto, clique em DEPLOY (ao lado do botão FORK). Agora o seu aplicativo está executando o projeto de simulador de ônibus. A próxima etapa é configurar o BLU Acceleration.

2. Configure o BLU Acceleration

Para fazer esse aplicativo executar na sua instância (usando o mesmo arquivo utilizado neste projeto de amostra):

• Abra database/tables.dll no DevOps e copie o conteúdo para a área de transferência.
• Clique em Manage > Work with tables e cole o conteúdo copiado da área de transferência para criar as tabelas a serem preenchidas com os dados do projeto.

• Clique em Manage > Load Data, selecione o esquema BLU e selecione um nome de tabela para garantir que os dados sejam carregados. Depois que você clica em Load Data, selecione um dos arquivos CSV que se encontram na pasta do banco de dados e carregue-o de acordo com o seu nome (por exemplo, LINE.CSV para a tabela LINE). Repita essa etapa com todas as outras tabelas.

Nesse ponto, seu aplicativo está executando da mesma forma que é executado neste projeto de amostra. No restante deste artigo, os detalhes das instruções refletem o projeto de amostra (o backend, o frontend e a conexão do nó ao BLU Acceleration.)

3. Atualize o arquivo package.json

Quando você cria o node.js a partir do tempo de execução, o arquivo package.json é criado.

Em dependencies, a chave a seguir é incluída para possibilitar o acesso no DB2®.

"ibm_db" : "~0.0.1",

As ocorrências de “jade” são alteradas para “ejs.”

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

EJS e JADE são mecanismos de modelo usados pelo Node.js Express para desenvolver páginas da web por meio do servidor:

• EJS inclui a lógica do JavaScript diretamente e importa valores para cadeias de caracteres de código HTML.
• JADE é uma linguagem de modelagem completa, com a sua própria sintaxe e documentação.

Os dois mecanismos de modelo funcionam bem com o cliente e são muito utilizados em aplicativos Node.js. Escolhemos o EJS porque ele é semelhante ao HTML simples e marcas HTML.

4. Faça alterações no app.js

O App.js é o documento JavaScript mais importante em um aplicativo Node.js. Ele controla o comportamento do servidor usando a estrutura Express, uma estrutura fácil de usar para aplicativos da web direcionados por eventos (em tempo real). Para atualizar o seu aplicativo para usar as configurações utilizadas no aplicativo de amostra, faça as seguintes alterações:

1. Mude view_engine para ler ejs em vez de jade.
2. Crie uma variável e exija que o ibmdb comece a trabalhar com o DB2 no projeto.
3. Na linha 36 do node.js básico, localize o comentário TODO, que fornece a variável service, que recupera as informações de serviço para se conectar ao banco de dados.

4. Inclua o código a seguir para concluir a preparação no lado do servidor para receber um POST do lado do cliente.

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. Configure os arquivos do lado do cliente

Para receber os dados recuperados a partir do BLU Acceleration e do DB2 no aplicativo de amostra, usamos o código a seguir para enviar uma solicitação de POST para o servidor, para iniciar a simulação (usando jQuery):

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

O simulador de ônibus envia um objeto JSON para recuperar informações do banco de dados. O objeto contém chaves como HTML para especificar o nome da tabela, columns para especificar as colunas a serem escolhidas a partir da consulta e extras, usados para as condições (JOIN nos dados e cláusulas WHERE). Essa abordagem geral ao acesso a dados pode ser customizada para diversas simulações.

Na versão do simulador de ônibus, na linha 13 do arquivo public/js/database.js, é possível ver $.post dentro do retorno de chamada de outro $.post. Esse código faz com que a página carregue todo o conteúdo do banco de dados antes de carregar a animação.

Etapa 3. Realize o desenvolvimento de backend dos objetos JavaScript

O código do backend está localizado no arquivo bussimulator/public/js/controller.js. Ele é objetivo: contém o código e os objetos que são usados no frontend, que é abordado na etapa seguinte. A figura a seguir mostra um diagrama de classes simples referente ao controller.js.

 

O código contém cinco objetos: Line, Stop, Bus, Person e Event. O sistema foi desenvolvido de forma orientada a objetos para que seja mais fácil entender o que está acontecendo dentro do código e proporcionar um controle melhor dos elementos e objetos dentro do sistema.

O objeto Line inclui variáveis e uma função reset. Esse objeto representa o caminho real dos ônibus. Cada Line tem um array de objetos stop e bus. Um Line deve ter um intervalo, que armazena o intervalo entre o horário de partida dos ônibus. Ao criar um novo Line, é necessário fornecer um id, um nome e um intervalo como parâmetros — por exemplo, var line1 = new Line(001, “Bloor St”, 20). No backend, o código é semelhante à listagem a seguir.

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();
	}

}

Quando uma nova linha é incluída, a próxima etapa é incluir pontos de ônibus na linha. Os objetos Stop armazenam id, nome, local e passageiros. A localização de cada ponto de ônibus é definida em porcentagens. Por exemplo, se um Line tiver três Stops, o primeiro ponto de ônibus estará localizado a 0% do tamanho da linha; o segundo ponto estará posicionado a 50% da linha e o último, a 100% da linha. A variável passengers é um array que armazena objetos Person, que fornece a origem e o destino de cada passageiro.

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);
	}
}

O objeto bus contém informações sobre os passageiros, a linha atual, o ponto atual e sua capacidade máxima. Novamente, o array passengers armazena objetos Person, e a função reset é responsável por parar e mover os ônibus de volta para a posição inicial, que é no primeiro ponto. Contém vários outros métodos, como changeColor, showPeople, addPeople etc., que são explicados nos comentários logo acima de cada função.

O objeto Event trabalha de forma semelhante a um planejamento para o simulador. Esse objeto obtém um horário, uma ação e um ônibus. Por exemplo, suponha que você deseja mover o primeiro ônibus de uma linha e um ponto para outra, depois de cinco segundos. O código referente a esse evento é new Event(“00:05”, goToNextStop, line.buses[0]) – , em que line.buses[0] é o ônibus que você deseja mover, que está vinculado a uma linha.

Uma lida rápida no restante do código dá uma noção de como os objetos são vinculados e de como o frontend pode usar os objetos. O controller.js é a base do simulador. Antes de começar a desenvolver o código do frontend, é necessário entendê-lo. É possível fazer o download do código completo a partir do repositório do DevOps Services.

Etapa 4. Desenvolva o frontend no Bootstrap e na API do jQuery

A estrutura Bootstrap é usada para desenvolver o frontend. A API do jQuery é usada para os efeitos e a animação no simulador.

A interface do simulador de ônibus está dividida em três partes principais: tela, timer e barra lateral. A tela mostra as linhas e ônibus. O timer no canto superior direito pode ser controlado com os botões Start, Pause e Stop. Na barra lateral, é possível incluir linhas e pessoas e ver algumas informações sobre a simulação.

Para incluir linhas no simulador, acesse a guia Line. Os pequenos círculos e números acima delas representam os pontos e o número de pessoas em cada ponto. Os pequenos quadrados e os números dentro deles representam os ônibus e o número de pessoas dentro de cada ônibus. Para remover uma linha do simulador, clique no X ao lado do nome da linha.

Para incluir pessoas em cada ponto das linhas de ônibus no simulador, acesse a guia People. É possível alterar o tráfego em cada segmento da linha clicando nela. Para ver as informações referentes a cada ônibus, como número de passageiros, ponto atual e tempo até o próximo ponto, clique no ônibus.

Para iniciar a simulação, clique em Start. É possível seguir os eventos de simulação na guia Home. Ela mostra a lista de eventos, com o horário e a ação de cada ônibus. É possível pausar, retomar e parar a simulação. Além disso, é possível incluir linhas no simulador ou remover linhas dele.

Neste exemplo, a animação é baseada em uma lista de eventos. Cada evento está relacionado a um horário, um ônibus e uma ação específica a ser realizada. Quando uma nova linha é incluída na tela, atribui-se um horário de partida a cada ônibus dessa nova linha, e esses eventos são colocados na lista de eventos. Quando a simulação é iniciada, ela começa a verificar para determinar se o horário do simulador é igual ao horário do primeiro evento. Se o horário é igual, a ação do evento é realizada, e o próximo evento referente ao ônibus em questão é agendado.

As duas ações são ir para o próximo ponto e voltar para o terminal. Na primeira ação, o ônibus passa algum tempo no ponto atual, enquanto as pessoas entram e saem. Depois disso, ele vai para o próximo ponto. A velocidade depende do tráfego no segmento da linha. A segunda ação acontece quando o ônibus está no último ponto. Ele fica nesse ponto enquanto as pessoas saem e, em seguida, volta para o terminal.

Para incluir o estilo e a animação no seu aplicativo, copie os seguintes arquivos para o seu projeto e copie os arquivos do Bootstrap e jQuery nas pastas css e js, mantendo a estrutura de diretório:

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

Conclusão

O IBM Bluemix inclui todas as ferramentas necessárias para desenvolver um simulador de sistema de transporte público online, nem necessidade de instalação de software local. O IBM DevOps Services fornece o ambiente necessário para colaborar com um grupo nesse projeto. Essa configuração torna o processo de desenvolvimento muito objetivo.

***

Artigo escrito em colaboração com os seguintes engenheiros de software: Yuka Kyushima, César Henrique Barnabé e Eduardo Domene.