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…
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
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
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
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
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
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
y la instalación de las dependencias
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
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.
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
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
http://localhost:3000/visitas En este caso tenemos que ver una página como la siguiente
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
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)
Finalmente llegarás a algo parecido a esto
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
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
por cierto, editamos guardado.jade para que haga algo ^^
y ver vervisitas.jade para que muestre los mensajes
probando, probando
Desarrollo… listo! Ahora al arrancar a aplicación podremos navegar y ver el funcionamiento completo
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
Tras esos cambios, nos aseguramos que estamos en el directorio del web rol y lanzamos el emulador
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
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 =)
Y cuando acaba la publicación… podemos probar el servicio desde la URL de producción
y dejar nuestro mensaje desde producción!!!!!
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/