Ejemplo de NodeJS, Express y Azure en el codemotion

El sábado 24/3 tendré el placer de presentar un taller en codemotion, este post pretende ser una guía para los que no podáis venir al evento O=) o para que podáis seguirla paso a paso tras el taller.

En cualquier caso, si vienes a codemotion y no vienes al taller porque ya he publicado este post… te vas a perder unas cuantas explicaciones extra, a sí que ven!! 😉

Para poder seguir los pasos del taller, es necesario que descargues e instales un par de cosas:

Herramientas de Windows Azure para Node

Emulador de Windows Azure

Y para poder hacer el despliegue en Windows Azure puedes dar de alta una cuenta de evaluación gratuita

Como entorno de desarrollo puedes utilizar el que quieras (VS incluido), personalmente he optado por WebStorm de JetBrains, que trae soporte directo para node

Y por último, comentaros que aplicación que vamos a crear es un libro de visitas (original, eh?)

Empecemos a ver las diferentes piezas…

 

Node.js

Según sus creadores, node.js es una plataforma construida sobre el runtime javascript de Chrome para crear aplicaciones de red de forma fácil y escalable. Nodejs utiliza un modelo de Entrada/Salida sin bloqueos basada en eventos que lo hace ligero y eficiente, perfecto para aplicaciones en tiempo real con gran consumo de datos que corren en dispositivos distribuidos.

Ahí queda eso. algunas notas más

El Javascript que utilizamos para desarrollar en node es compatible hasta ECMAScript 3

El modelo asíncrono / orientación a eventos viene facilitado por la forma de trabajo en javascript donde estamos acostumbrados a pasar un callback y trabajar de forma asíncrona

 

Ejemplo de crear el servidor

El típico hola mundo de node pasa por crear un pequeño servidor escuchando en un puerto y atendiendo las diferentes peticiones. Me niego rotundamente a llamar a eso un servidor web, porque no es más que un socket y un proceso asíncrono de los clientes, pero ahí va…

 

image Vemos cómo se importan módulos, q es sintaxis puramente javascript, cómo se pasa una función como parámetro,…

Para ejecutarlo tendremos que escribir node.exe miarchivo.js en la consola (suponiendo q tengamos node.exe en el path del sistema)

Si accedemos desde un navegador a http://localhost:3000 veremos la respuesta

image

En node por defecto tenemos algunos módulos para trabajar, además de los que podemos descargar de la comunidad con el gestor de paquetes o los que podamos desarrollar nosotros mismos para nuestra aplicación.

Habilitando node en Windows Azure

Windows Azure es una plataforma como servicio, uno de los posibilidades que ofrece es que alojemos nuestras aplicaciones en datacenters de Microsoft para que puedan contar con los recursos del datacenter si fuese necesario.

Ese servicio de alojamiento en Azure nos ofrece una capa de gestión que se encarga de monitorizar la salud de nuestras aplicaciones y de subir y bajar el numero de instancias que necesitemos, reciclarlas si fuese necesario, actualizar el sistema operativo, etcétera… todo de forma transparente para el desarrollador.

Windows Azure esta basado en Windows Server 2008 R2 X64… y a diferencia de lo que algunos desarrolladores piensan, NO es una plataforma para aplicaciones .NET. Todo lo que puede correr sobre Windows Server 2008 puede correr sobre Windows Azure, como por ejemplo NodeJS, java, php o … .NET =)

A Azure tenemos que darle nuestra aplicación empaquetada y en caso de que fuese necesario, los intérpretes y librerías para poder ejecutar nuestra aplicación. En el caso de node, tendríamos que crear un paquete donde configurásemos una serie de comandos (una startup task) que instalen nodejs y un addin para el IIS al arrancarse la máquina virtual para nuestra aplicación.

Esta es una tarea trivial, de modo que está automatizada, solo tenemos que arrancar la consola de powershell de Windows Azure para nodeJS en nuestra máquina y ejecutar los siguientes comandos

image

Con este primer comando New-AzureService nodemotionweb hemos creado un servicio y las configuraciones para el cloud, ejecutando ahora Add-AzureWebRole añadiremos un rol de máquina Virtual para que actúe como frontal web

image

Cotilleando los archivos vemos lo siguiente

bin Contiene una serie de paquetes y un comando para que arranque las instalaciones al arrancarse la aplicación en el servidor en la nube… cotillead 🙂

server.js Es el punto de arranque de nuestra aplicación, Cuando arranque la aplicación en el cloud, va a ejecutar este archivo. (viene determinado en el web.config)

web.cloud.config y web.config son archivos de configuración. Aqui por ejemplo tenemos determinado que cuando despleguemos en el datacenter vamos a querer una instancia extrasmall compartida. Podemos cambiarlo para tener otros perfiles de máquinas dedicadas, diferente número de instancias, etcétera…

 

Vamos a probar a ver qué es lo que se ha generado, ejecutamos la aplicación en el simulador con el siguiente comando

image

image

PERFECTO! un hola mundo del que empezar a rascar! Tenemos la infraestructura básica montada y funcionando, ahora vamos a ir construyendo la aplicación

 

Express

Express es un framework MVC para nodeJS, permite construir aplicaciones web de una forma rápida, sencilla  y de forma estructurada. Vamos a instalar el módulo de Express y sus dependencias para nuestro proyecto. Para la instalación vamos a utilizar npm, el node package manager

Instalación de Express

image

Express va a ayudarnos a construir el andamiaje de nuestra aplicación, una vez instalado, tenemos que ejecutarlo para que nos cree la estructura básica de la aplicación. OJO una vez lo ejecutemos y se genere la aplicación base, tendremos que instalar algunas dependencias. Express utiliza algunos otros módulos de node para funcionar y tenemos q asegurarnos de que están presentes en nuestra aplicación

image

y la instalación de las dependencias

image

De entre las dependencias, cabe destacar Jade. Jade es un módulo para escribir las vistas en Express, si vienes del mundo .NET, esto podría ser equivalente a usar Razor en las vistas de ASP.NET MVC, un lenguaje que facilita el trabajo de la generación de las vistas, más adelante veremos cómo se utiliza

 

Flujo en una aplicación Express

Antes de ponernos a tocar código, vamos a invertir un momento en entender la estructura y el propósito de los archivos más importantes que nos ha generado Express

app.js  Punto de entrada de la aplicación, si lo abrimos, veremos que se registran rutas para las diferentes peticiones que se vayan a realizar en la aplicación web y que tras configuraciones y registros, se arranca el servicio. OJO vamos a desarrollar la aplicación sobre este app.js, pero antes de subirla a la nube, tendremos que renombrarlo a server.js o cambiar la configuración para que el que arranca sea este 😉

/routes A mi personalmente me gusta utilizar esta carpeta para guardar los controllers 🙂

/views Las vistas en JADE, cuando nuestros controladores hayan llegado al punto en el que tengan la respuesta para el cliente, apuntarán a la vista adecuada para mostrar esa información. Si abrimos alguno de los archivos JADE, vamos la sintaxis de la vista… en breve nos tendremos que crear un par de ellas. Layout es la master page

Empecemos!!

Nuestra aplicación va a ser un sencillo libro de visitas, donde los visitantes, podrán dejar su nombre y un mensaje para que se registre en el muro.

Necesitaremos:

tres vistas (un formulario de recogida de información en una, un gracias y el muro con los saludos en la otra)

una ruta nueva para la operación de recibir los datos

un controlador que se encargue de almacenar la información y de recuperarla, podríamos hacerlo en dos, pero hay muchas coas en el taller para mostrar y en el evento solo tenemos 45 minutos! 😉

 

Creando la aplicación…vistas

Para ir pudiendo probar lo que vamos haciendo, vamos a empezar por construir un par de vistas sencillo, ya lo iremos complicando cuando veamos que todo funciona. Vamos a la carpeta views y creamos dos archivos

inicio.jade   -   guardado.jade

(aun no vamos a hacer nada con ellos, pero los dejamos creado)

vervisitas.jade

image

 

Creando la aplicación…controlador

creamos un nuevo archivo visitas.js dentro de la carpeta routes y le añadimos un par de métodos que exportamos del módulo. Por ahora nos conformamos con que redirijan a la vista correcta, luego volveremos a ellos.

image

Creando la aplicación…rutas

Abrimos app.js, referenciamos nuestro recién creado controlador y registramos un par de rutas nuevas para ver que todas las piezas encajan

image

Probamos

Para probar, solo tenemos que ejecutar el app.js con node, por ahora no estamos metiendo azure en la ecuación, solo estamos probando una aplicación web en local, de modo que aun no nos preocupamos de los simuladores y demás.

Trabajando con WebStorm, podemos ejecutar desde el IDE, pero como estamos haciéndolo con powershell, pues vamos a nuestra consola y lo arrancamos.

Tras arrancarlo tenemos que hacer 2 peticiones desde el navegador:

   http://localhost:3000/visita No pasará nada porque no hemos redirigido a una vista, pero veremos el mensaje registrado en la consola

image

   http://localhost:3000/visitas En este caso tenemos que ver una página como la siguiente

image

Perfecto!! El monstruo esta vivo!!!  Ahora solo tenemos que complicar un poco la aplicación para que tenga un poco más de sentido 🙂

 

Complicando la aplicación… el formulario

Ahora si entramos con inicio.jade, para poder ir viendo el resultado según vas haciendo el formulario tendrás que editar la ruta por defecto en app.js y cambiarla a lo siguiente

image

y ahora te recomiendo que vayas generando el formulario poco a poco y viendo el resultado en el navegador. En JADE es importante la indentación y da lugar a una estructura jerárquica de etiquetas en el HTML. vete escribiendo tag y probando y experimentando con y sin jerarquía (siiiii, podríamos haber posicionado con css… pero entonces no se vería tan bien lo que pretendo que se vea de las jerarquías)

image

Finalmente llegarás a algo parecido a esto

image

Este formulario que hemos incluido en inicio.jade hace referencia a la ruta visita pero con un método POST. Nosotros lo teníamos con un método GET. Tenemos que editar el app.js para hacer este pequeño cambio

image

Complicando la aplicación…el almacenamiento

Ahora lo ideal sería recoger la información y guardarla en una BBDD y luego al consultar, recuperarla de la BBDD… si hacemos esto, me va a salir el taller más largo del mundo y no es la idea O=) Voy a utilizar un archivo de texto como almacén de los mensajes. ESTO NO DEBE HACERSE EN LA VIDA REAL, principalmente por 2 razones

  Es un cuello de botella, el acceso a disco es muy costoso

  No puedo compartir la información entre diferentes servidores de frontal

Pero esto es una demo, y para que se vea node funcionando con express en Azure…me vale, así que

image

por cierto, editamos guardado.jade para que haga algo ^^

image

y ver vervisitas.jade para que muestre los mensajes

image

 

probando, probando

Desarrollo… listo! Ahora al arrancar a aplicación podremos navegar y ver el funcionamiento completo

image image image

 

Publicación en el cloud

Prueba en el simulador

Antes de lanzarnos a publicar en el cloud, vamos a verificar que funciona localmente, para ello tenemos que hacer un par de cambios. El primero pasa por renombrar nuestro archivo de inicio app.js a server.js que es el que está esperando el rol para arrancar el servicio.

El segundo es establecer un número de puerto adecuado, vamos a dejar que la plataforma asigne, de modo que cambiamos en el server.js el puerto 3000 por process.env.port

image

Tras esos cambios, nos aseguramos que estamos en el directorio del web rol y lanzamos el emulador

image

Se nos abrirá una ventana de navegador (y si no, la abrimos nosotros) donde verificaremos que nuestra aplicación funciona. Una vez lo hayamos hecho y funcione… detenemos la simulación y nos preparamos poara subir a producción a un datacenter de azure!! =D

image

Importación de perfil cloud

OK! Para estos pasos es necesario que tengas activada una suscripción de indows azure. Si eres suscriptor MSDN, o emprendedor o partner de microsoft, tienes una cuenta con recursos mensuales gratuitos. Si no caes en esos grupos, tienes la opción de activar sin coste una cuenta de evaluación

Cuando tenemos la cuenta, hemos de importar a nuestro proyecto los detalles de la suscripción, así podremos subir la aplicaicón directamente desde la línea de comandos. Ejecutamos:

Get-AzurePublishSettings.  Esto nos llevará al portal de azure, donde haremos login y nos descargará un archivo con la configuración

Import-AzurePublishSettings <direccion del archivo> Este comando hará que la configuración de nuestra cuenta en la nube que acabamos de descargar esté disponible para el despliegue

Publish-AzureService -name nodemotion -location "North Europe" –launch  wooohoooo!! este es el comando del despliegue, le estamos diciendo que nos cree un nuevo servicio nodemotion en un datacenter al norte de europa y que lo arranque

El despliegue puede tardar unos minutos, tened en cuenta que se está aprovisionando la máquina, subiendo la aplicación, arrancando, etcétera…puede tardar unos 10 min en una conexión lenta, así que paciencia y un cafelito)

Además del feedback que veremos desde la consola, si queremos podemos conectarnos al portal de administración de azure para ir viéndolo de forma más gráfica =)

 

image

Y cuando acaba la publicación… podemos probar el servicio desde la URL de producción

image

y dejar nuestro mensaje desde producción!!!!!

image

 

Ahora podemos jugar todo el tiempo que queramos.. y cuando nos cansemos… para quitar el servicio de producción, ejecutaremos

Stop-AzureService y

Remove-AzureService

 

Si tienes cualquier duda, añade un comentario e intentaremos resolverla. Es una artículo largo y puede que me haya saltado alguna explicación importante… decídmelo!

Por lo demás, espero que os pueda servir de ayuda para empezar con alguno de todos los temas que tocamos en el taller

 

Happy hacking!!

 

PD: sisi, ha quedado larguito, pero es que son muchas cosas y no me gustaba partirlo en piezas 😉

PD2: recursos! aqui hay más laboratorios de node y azure… http://www.windowsazure.com/en-us/develop/nodejs/

Publicado por

2 comentarios sobre “Ejemplo de NodeJS, Express y Azure en el codemotion”

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *