Para auxiliar o desenvolvimento rápido de aplicativos, o IBM Bluemix™ fornece um padrão para vários tipos de aplicativos, incluindo os aplicativos da web do Node.js. Vou mostrar como usar o padrão Node.js com a tecnologia Dojo para animar uma sequência de gráficos em uma página da web, girando-os. Você customizará o código padrão no IBM DevOps Services e implementará o aplicativo modificado ao Bluemix de lá.

O que é necessário para começar

ID IBM e senha da conta;
DevOps Services vinculados ao ID IBM da conta do Bluemix;
Familiaridade com o desenvolvimento do JavaScript e o Dojo Toolkit.

Execute o aplicativo Obtenha o código

Etapa 1. Crie um aplicativo Node.js Web Starter no Bluemix

Faça login no Bluemix;
Clique em Catalog;
No catálogo do Bluemix, em Boilerplates, clique na placa NODE JS WEB STARTER;
Clique em Create application;
Digite um nome para o aplicativo na caixa de texto Name (todos os aplicativos do Bluemix compartilham atualmente o mesmo namespace, por isso o nome do aplicativo deve ser exclusivo).

Etapa 2. Download do código padrão

Clique em qualquer lugar no fundo branco da placa do aplicativo recém-criado;
No painel do aplicativo, clique no botão VIEW GUIDE;
Na guia aberta à direita, clique em 2. Download the starter application package;
Salve o arquivo ZIP no seu sistema local, mas não extraia o conteúdo.

Etapa 3. Importe o código padrão no DevOps Services

Faça login no DevOps Services com o seu ID IBM;
Clique em CREATE PROJECT;
Dê ao projeto o mesmo nome dado ao aplicativo Bluemix que você criou na Etapa 1 e escolha Use Jazz SCM para a localização do código. Caso queira, selecione o botão de opções Private se não desejar que o seu projeto seja público;
Selecione o botão de opções Deploy to Bluemix para que seja possível enviar posteriormente o código atualizado de volta ao Bluemix;
Clique em CREATE;
No projeto recém-criado, clique em EDIT CODE;
Use File > Import para importar e expandir o arquivo ZIP padrão no projeto:

Expanda a árvore do projeto no lado esquerdo da página e clique no arquivo index.ejs para abri-lo para edição.

Etapa 4. Customizar o index.ejs para a animação

“Quaisquer mudanças relacionadas a HTML podem ser customizadas diretamente no index.ejs e são refletidas imediatamente na página de entrada do aplicativo”.

O arquivo index.ejs é um modelo JavaScript — o ponto de partida do aplicativo da web. Esse arquivo é executado primeiro quando você abre o aplicativo em um navegador. Quaisquer mudanças relacionadas a HTML podem ser customizadas diretamente no index.ejs e são refletidas imediatamente na página de entrada do aplicativo. No index.ejs, você incorporará a tecnologia Dojo para animar imagens de sua escolha. Localize várias imagens em qualquer formato (JPG, PNG, etc.) que podem ser acessadas por meio de URLs (por exemplo, esta). Exclua todo o código existente no index.ejs; você não precisa dele. Dê uma olhada no arquivo index.ejs em meu projeto ImageRotator completo. A seguir estão as peças-chave. Inclua as APIs Dojo incluindo esta tag script:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
			djconfig="parseOnLoad: true">
    </script>

O Dojo acessa esta tag HTML por meio da API createSurface para exibir a imagem inicial:

<body>
     <div id="shape">
     </div>
  </body>

surface = dojox.gfx.createSurface("shape", 300, 300);

Crie um temporizador para girar a imagem em intervalos definidos:

t = new dojox.timing.Timer(300);
	t.onTick = function() {
             alterAndDraw ();
      }
	t.onStop = function ()  {
      }
      t.start();

Sempre que o tempo expirar, a posição da imagem mudará. Inverta o sentido quando a imagem chegar ao final da área de rotação.

rad = rad + radDx;
			cirX = cirX - cirDx;

				if (rad == 120) {

					radDx = -radDx;
					cirDx = -cirDx;

				} else if (rad == 10)	{

			             radDx = -radDx;
					cirDx = -cirDx;

			             getImage ();  // bring next image
				} 

		        draw ();
		        drawn=true;

Etapa 5. Implementar e executar o aplicativo

Depois de terminar as modificações no arquivo index.ejs, você estará pronto para enviar o aplicativo para o ambiente Bluemix, onde substituirá a versão padrão existente criada na Etapa 1.

No projeto DevOps Services, clique em manifest.yml na árvore de código do projeto;
Clique no botão DEPLOY na parte superior da página;
Insira e envie suas credenciais ao Bluemix:

Quando a implementação estiver concluída, abra a URL do aplicativo do DevOps Services e veja as imagens girarem em sequência. Como uma alternativa, é possível clicar na URL do aplicativo exibida na interface com o usuário do Bluemix.

Conclusão

O padrão do IBM Bluemix pode ajudar a alavancar o desenvolvimento do aplicativo Node.js da web. Todos os andaimes do aplicativo foram criados para você; o único arquivo que foi preciso alterar foi index.ejs. Não deixe de conferir os outros aplicativos padrão que o Bluemix oferece para facilitar o desenvolvimento móvel e na web.

Registrepara um teste gratuito no Bluemix

Viswanath Rao