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.
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.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?