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/

Codemotion, windows 8 tour, windows 8 camps…

¡¡¡Eventosssss!!!

En Sevilla, Barcelona, Madrid, Bilbao y Valencia estaremos mis compañeros, algunos partners destacados en Windows 8 y yo con los eventos de Windows 8 Tour y Windows 8 Camps.

Registro: http://msdn.microsoft.com/es-es/hh854952?ocid=eml-n-es-loc-W8-Q3

En los Windows 8 Tour tendremos varias sesiones donde mostraremos Windows 8 y cómo es el desarrollo de aplicaciones y las herramientas. La agenda:

10-11. Intro a la plataforma

11-12. Desarrollo de aplicaciones

12-12:15 Café para ir asimilando lo que hemos visto

12:15-13:15 Experiencias Enriquecidas (tiles, notificaciones, contratos…)

13:15-14:15 Monetización de aplicaciones

 

En los Windows 8 Camps, el contenido será eminentemente práctico y será recomendable que te traigas tu portátil. Si tenías pensado NO asistir para hacer los laboratorios por tu cuenta… me temo que no hay planes a corto plazo de colgar los laboratorio… así que vente!!! sin excusas! =)

Te lo tienes que traer con Windows 8 consumer preview, Visual Studio 11… te lo contamos todo en la página de registro =)

Por otro lado, este sábado 24/3/12 estaremos en el codemotion en Madrid, personalmente tengo un taller para geeks el sábado a las 10:30. Veremos cómo hacer una aplicación node… luego le añadiremos el framework MVC Express y tocaremos un par de plantillas para finalmente subirlo al cloud en Windows Azure.

Tras el evento subiré una guía de cómo se hizo, pero si asistes al codemotion te recomiendo que te traigas un portátil para ir haciendo el laboratorio. Aunque haya muchos conceptos que ir aclarando… es MUY fácil de hacer y de un plumazo vas a poder trastear con varias tecnologías.

Si vienes, trae el SDK de Azure para node instalado y los emuladores de Windows Azure, lo puedes encontrar todo en la página del producto. Y si traes una suscripción de prueba de Windows Azure activada, mejor que mejor, así despliegas en el cloud 😉

Si no vienes… lo publicaré tras el taller para que puedas trastear desde casa

 

Happy Hacking!

PD -> Los chicos de Plain estarán con nosotros en algunas ciudades =) http://geeks.ms/blogs/ilanda/archive/2012/03/21/windows-tour-y-windows-camps.aspx

Hola Metro en JavaScript para Windows 8

Puedes descargar las herramientas, la versión consumer preview del sistema operativo y ejemplos desde la página de windows 8 para desarrolladores

 

Let’s Go!!

Arrancamos Visual Studio 11 y empezamos con una plantilla de proyecto en blanco para JS. Nos va a pedir una licencia de desarrollador, cuando le confirmamos que queremos una e introducimos nuestros datos, nos abre la plantilla del proyecto.

Empezamos con la plantilla en blanco, como al abrirla no tenemos ni idea de lo que significa, de cuál es el punto de entrada, de que significa ese “use strict” … ¿?

 

image

… pues sin que sirva de precedente me leo la documentación de la plantilla que referencia en el archivo ^^

http://msdn.microsoft.com/en-us/library/windows/apps/hh758331.aspx 

Y a grandes rasgos, lo que explica es esto:

Archivos del proyecto

default.html

  La página principal de la aplicación. Un HTML5 con referencias a las librerías de WinJS y a las librerías por defecto de la aplicación (default.css y default.js)

image

default.js

Es el code behind, donde tenemos el código que va a ser ejecutado al arrancar la aplicación. Es el punto de entrada de la aplicación, al referenciarlo solo tiene una llamada a función anónima que se ejecuta sola.

Me explico… cuando en Javascript declaramos una llamada anónima, normalmente va como parámetro en una función, para que se ejecute automáticamente, como por ejemplo actuando de callback

   function miFuncion (1,2, function() { ….. } );

Pero si la declaramos entre paréntesis, estamos declarándola y ejecutándola en la misma sentencia.

    ( function ( ) { console.log(‘hola’); } ) ( );

Y podríamos incluirle otras funciones dentro, propiedades, asignar valores de retorno… y en definitiva construir un objeto/módulo… ¿no?

image

Pues esta es la estructura aproximada que vamos a utilizar en Windows8 con Javascript, ahora con el ejemplo veremos los cambios, pero no tiene mucho misterio =) Si quieres leer sobre el tema, busca sobre el module pattern en JavaScript

En esa función que vemos, se obtiene una referencia a la propia aplicación   var app = WinJS.Application, se hacen un par de tareas relacionadas con la gestión de eventos de la aplicación (onactivated, oncheckpoint), se gestiona cómo se ha activado la aplicación (launch) y se arranca con app.start()

Podríamos decir que el default.js, es el main de nuestra aplicación metro en JS

default.css

  La plantilla de estilos. prácticamente vacía con 4 media queries predefinidas para que pongamos nuestros estilos

 

Entonces… ¿el ciclo de eventos?

Con la estructura de la aplicación definida tenemos que ver dónde meter nuestro mensaje de hola mundo y cómo mostrarlo en el HTML, hay otra página que nos cuenta cómo funciona el ciclo de eventos, pero a grandes rasgos, lo que nos viene a decir es:

activated. WINRT activado

loaded. Se ha cargado el DOM

ready. … pues eso… ready

checkpoint… pasamos a suspendido

unload… a punto de ser descargada

 

Hola Metro

En base a lo que hemos comentado, para hacer el Hola Metro se me ocurren varias opciones

Capturar el evento onReady para que llame a una función que meta en alguna “clase” /módulo y que se muestre el hola mundo en algún elemento del DOM… pero realmente no quiero que sea automático, quiero que el usuario pulse… así que lo descarto.

En lugar de capturar un evento de la aplicación, capturar alguno de un evento del DOM y que llame a una función JS y ponerla en línea en el HTML… ok… pero el código en línea s para gente triste y yo soy un espíritu alegre

En lugar de capturar un evento de la aplicación, capturar alguno de un evento del DOM y que llame a una función JS definida en un módulo… oh yeah!  ESTA es la opción que escojo.

 

Tras trastear en diferentes aplicaciones de ejemplo, me crezco y me decido a intentarlo. Lo primero es aplicar crear una función que se ejecute automáticamente. Me creo saludos.js y empiezo. El “use strict” es una funcionalidad de ECMAScript 5 que hace más “estricto” el Javascript, por ejemplo no permitiéndonos declarar variables sin ‘var

image

Luego vamos a registrar el contenido de esa función en la aplicación. Según la ayuda en MSDN El primer parámetro es el nombre del namespace… escojo Saludetes

image

y el segundo parámetro una colección de miembros en formato JSON, en nuestro caso, solo hace falta uno, el método saludar

image

y dentro de la función… una implementación de DOM y JavaScript de las de toda la vida

image

Bien… ahora me voy al .html e incluyo varias cosas. Una referencia a saludos.js que acabo de crear, un botón para iniciar la acción y un span que actuará de label

 

image

Y compilo

 

image

… y al hacer click…

image

 

funciona! ^^

 

Para cerrar la aplicación:

pulso la tecla de inicio y vuelvo al visual studio para parar la depuración

la cierro arrastrando hacia abajo desde el margen superior

la cierro desde el menú izquierdo

 

No ha sido tan difícil como parecía, verdad? Espero que haya podido servir como referencia para ese primer ‘hola metro’ que tengáis que hacer en Win8 con JS

 

Happy Hacking!