Contenido


Animación de Imágenes en una Aplicación Web Node.js

Comments

Para contribuir al rápido desarrollo de aplicaciones, IBM® Cloud™ brinda modelos para varios tipos de aplicaciones, incluyendo aplicaciones web Node.js. Le mostraré cómo utilizar el modelo de Node.js con la tecnologíaDojo para animar una secuencia de gráficos en una página web al rotarlos. Usted personalizará el código del modelo en IBM DevOps Services y desplegará la aplicación modificada en IBM Cloud desde allí.

Lo que necesita para comenzar

Ejecutar la aplicaciónObtener el Código

Paso 1. Crear una aplicación de Node.js Web Starter en IBM Cloud

  1. Inicie sesión en IBM Cloud.
  2. Haga clic en Catálogo.
  3. En el catálogo de IBM Cloud, en Modelos, haga clic en la tarjeta NODE JS WEB STARTER .
  4. Haga clic en Crear Aplicación .
  5. Ingrese el nombre de su aplicación en el recuadro de texto Nombre .(Todas las aplicaciones de IBM Cloud actualmente comparten el mismo espacio de nombres, por lo tanto el nombre de su aplicación debe ser único).

Paso 2. Descargar el código del modelo

  1. Haga clic en cualquier lugar del fondo blanco de la tarjeta de su aplicación creada recientemente.
  2. En el panel de instrumentos de la aplicación, haga clic en el botón VER GUÍA .
  3. En la guía que se abre a la derecha, haga clic en 2. Descargar el paquete de aplicaciones de inicio .
  4. Guarde el archivo ZIP en su sistema local, pero no extraiga el contenido.

Paso 3. Importar el código del modelo a DevOps Services

  1. Inicie sesión en DevOps Services con el ID de IBM.
  2. Haga clic en CREAR PROYECTO.
  3. Otórguele al proyecto el mismo nombre que la aplicación de IBM Cloud creada en el Paso 1 y elijaUsar Jazz SCM para la ubicación del código.De manera opcional, seleccione el botón de selección Privado si no desea que su proyecto sea público.
  4. Seleccione el botón de selección Desplegar en IBM Cloud para que, posteriormente, pueda introducir su código actualizado en IBM Cloud.
  5. Haga clic en CREAR.
  6. En su proyecto creado recientemente, haga clic en EDITAR CÓDIGO.
  7. Utilice Archivo > Importar para importar y expandir el archivo ZIP del modelo en su proyecto: Screenshot of importing a local code ZIP file into a DevOps Services project
    Screenshot of importing a local code ZIP file into a DevOps Services project
  8. Expanda el árbol del proyecto en el lado izquierdo de la página y haga clic en el archivo index.ejs para abrirlo para su edición.

Paso 4. Personalizar index.ejs para su animación

Cualquier cambio relacionado con HTML se puede personalizar directamente en index.ejs y se refleja de manera inmediata en la página de inicio de la aplicación.

El archivo index.ejs es una plantilla de JavaScript — el punto de partida para su aplicación web. Este archivo se ejecuta por primera vez al abrir la aplicación en el navegador. Cualquier cambio relacionado con HTML se puede personalizar directamente en index.ejs y se refleja de manera inmediata en la página de inicio de la aplicación.

En index.ejs, incorporará la tecnología Dojo para animar imágenes de su elección. Ubique varias imágenes en cualquier formato (JPG, PNG, etc.) que se puedan acceder a través de URL (por ejemplo, esta).

Elimine todo el código existente en index.ejs; no lo necesita. Échele un vistazo al archivo index.ejs en mi proyecto ImageRotator completo. Las siguientes son las piezas clave.

Incluya las API de Dojo al añadir esta etiqueta descript :

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

Dojo accede a la etiqueta HTML a través de la API createSurface para mostrar la imagen inicial:

 <body> <div id="shape"> </div> </body>
surface = dojox.gfx.createSurface("shape", 300, 300);

Cree un temporizador para rotar la imagen a intervalos definidos.

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

Siempre que el temporizador finalice, cambia la posición de la imagen. Revierta la dirección cuando la imagen alcance el fin del área de rotación.

 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;

Paso 5. Desplegar y ejecutar la aplicación

Luego de haber modificado su archivo index.ejs, estará listo para introducir la aplicación al entorno de IBM Cloud, en dónde sobrescribirá la versión modelo creada en el Paso 1.

  1. En su proyecto de DevOps Services, haga clic en manifest.yml en el árbol de código de proyecto.
  2. Haga clic en el botón DESPLEGAR en la parte superior de la página.
  3. Ingrese y envíe sus credenciales de IBM Cloud: Screenshot of the dialog in DevOps Services where you enter IBM Cloud credentials for deployment
    Screenshot of the dialog in DevOps Services where you enter IBM Cloud credentials for deployment
  4. Al completar el despliegue, abra el URL de la aplicación desde DevOps Services y vea cómo sus imágenes giran en secuencia. Como alternativa, puede hacer clic en el URL de la aplicación mostrado en la IU de IBM Cloud.

Conclusión

Los modelos de IBM Cloud pueden ayudar a acelerar el desarrollo de la aplicación web Node.js. Toda la estructura de la aplicación fue creada por usted; el único archivo que debió modificar fue index.ejs. Asegúrese de revisar las demás aplicaciones del modelo ofrecidas por IBM Cloud para facilitar el desarrollo web y móvil.


Recursos para Descargar


Temas relacionados


Comentarios

Inicie Sesión o Regístrese para agregar comentarios.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Cloud computing
ArticleID=1019897
ArticleTitle=Animación de Imágenes en una Aplicación Web Node.js
publish-date=02272018