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/
¡¡¡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
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” … ¿?
… 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)
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?
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’
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
y el segundo parámetro una colección de miembros en formato JSON, en nuestro caso, solo hace falta uno, el método saludar
y dentro de la función… una implementación de DOM y JavaScript de las de toda la vida
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
Y compilo
 | … y al hacer click… |  |
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!