Imagens animadas em um aplicativo da web do Node.js

04/Jun/2014
PDF (272 KB)
 

Viswanath Rao

GBS SME, Telecom Billing, IBM

Acesse IBM Bluemix
Esta plataforma em nuvem é abastecida com serviços gratuitos, tempos de execução, e infra-estrutura para ajudá-lo a criar e implantar rapidamente o seu próximo ou aplicativo móvel ou na web.

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

 

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

 
  1. Faça login no Bluemix.
  2. Clique em Catalog.
  3. No catálogo do Bluemix, em Boilerplates, clique na placa NODE JS WEB STARTER .
  4. Clique em Create application.
  5. 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

 
  1. Clique em qualquer lugar no fundo branco da placa do aplicativo recém-criado.
  2. No painel do aplicativo, clique no botão VIEW GUIDE .
  3. Na guia aberta à direita, clique em 2. Download the starter application package.
  4. 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

 
  1. Faça login no DevOps Services com o seu ID IBM.
  2. Clique em CREATE PROJECT.
  3. 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.
  4. 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.
  5. Clique em CREATE.
  6. No projeto recém-criado, clique em EDIT CODE.
  7. Use File > Import para importar e expandir o arquivo ZIP padrão no projeto: Screenshot of importing a local code ZIP file into a DevOps Services project

    Clique para ver a imagem maior

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

Leia:Desenvolver os aplicativos Bluemix no Node.js com o DevOps Services Web IDE

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.

  1. No projeto DevOps Services, clique em manifest.yml na árvore de código do projeto.
  2. Clique no botão DEPLOY na parte superior da página.
  3. Insira e envie suas credenciais ao Bluemix: Screenshot of the dialog in DevOps Services where you enter Bluemix credentials for deployment

    Clique para ver a imagem maior

  4. 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.

Screenshot of the selection of available boilerplates in Bluemix

Temas relacionados:Node.jsJavaScriptDojo Toolkit

Incluir um comentário

Observação: elementos HTML não são suportados nos comentários.


1000 caracteres restantes

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Cloud computing
ArticleID=975652
ArticleTitle=Imagens animadas em um aplicativo da web do Node.js
publish-date=06042014