22 Abr 2016

¿Te sientes Solo? Hagamos un chat con Node y Angular !!

Seguro que te pasa como a mi.

Te sientes solo y no tienes amigos con quienes hablar. Tratas de conectarte a ICQ y todos tus amigos ya se mudaron a otras aplicaciones, entras a IRC y los únicos que se dignan a hablarte son BOTS sin sentimientos.

Y si hacemos un chat ?

Para ello, usaremos 3 componentes: Node.js, Angular y una librería de node para websockets llamada sockjs.

 

El proyecto se compondrá de 2 archivos

  • server.js: que contendrá la lógica del servidor
  • chat.html: que tendrá la presentación y la lógica del cliente integrada.

 

Empecemos

 

Para nuestro servidor

[snippet id=»66″]

La magia sucede en la linea 6, donde se crea el handler de sockjs.

En la siguiente linea se configura el evento generado cada vez que un nuevo usuario se conecta. La función entrega el objeto conexión que es almacenado en una lista. Cada vez que se registra una conexión, se envía un saludo.

En el evento de recibir un mensaje por parte de un usuario (Linea 11), se recorre la lista de conexiones y a cada usuario se le envía un mensaje con el mensaje, usuario que origina y fecha de recepción.

Finalmente, para el evento de desconexión (Linea 16), se envía a todos los usuarios una advertencia de que el usuario ha abandonado el chat.

Las últimas 3 lineas crean el servidor y vinculan la ruta ‘/chat’ al handler de sockjs .

 

Luego el cliente

[snippet id=»67″]

Gran parte de este archivo contiene estructura HTML para el formateo de los datos y CSS para el estilo.

Las partes importantes son:

  • Lineas 65-66 donde se incluyen las librerías de cliente de sockjs y angular
  • Linea 69 donde conectamos el cliente con el servidor
  • Linea 70 a 82 donde definimos el controlador de angularjs. Iniciamos la lista que almacenará los mensajes, definimos el método ‘sendMessage’ que enviará nuestros mensajes al servidor y finalmente, nos subscribimos al evento de recepción de mensajes-.
  • Linea 88 donde por medio de la directiva «ng-controller» vinculamos el controlador de angularjs con la presentación.
  • Linea 102 donde recorremos los mensajes y los dibujamos

Fácil, cierto?

Si quieres revisar el código, puedes explorarlo en nuestro repositorio:

https://github.com/cristiansalinas/33SurChat

Si quieres ver el programa terminado, entra a chatear con nosotros:

http://chat.33sur.cl

 

Nos vemos !

 

14 Mar 2016

Microservicios en Javascript – Parte I

Ultimamente se ha hablado mucho de microservicios. Pero, ¿Qué son los microservicios?.

En palabras simples, el concepto se refiere a un estilo o patrón de arquitectura de software donde la lógica se distribuye entre procesos independientes que se comunican entre si por medio de APIs agnósticas.  Las características de estos procesos es que son pequeños, no tienen dependencias entre sí y se enfocan en realizar tareas pequeñas y específicas.  En la práctica, cada uno de estos procesos podría estar escrito en un lenguaje diferente o residir en una maquina diferente.

¿Cuales son las ventajas de una arquitectura como esta?

Generalmente cuando iniciamos un proyecto, el desarrollo es realizado por un equipo encargado de la totalidad del código. A medida que el código se hace más grande y requiere modificaciones, éstas van adquiriendo mayor complejidad y cada alteración se transforma en un riesgo. El proyecto se vuelve dependiente del equipo en cuestión y dependiendo de las decisiones originales, el proyecto puede o no ser escalable.

Una arquitectura de microservicios nos permite dividir las responsabilidades fácilmente, llegando al punto, en casos extremos, de tener un equipo por cada servicio. Las alteraciones, al ser realizadas dentro de un contexto de partes independientes, son mas simples y por defecto, en caso de requerir escalar el sistema, los servicios se pueden distribuir en distintas máquinas. La integración de nuevos servicios es trivial.

Una aplicación

No existe mejor manera para entender e ilustrar los conceptos que ponerlos en práctica. Para ello vamos a construir una pequeña pero funcional aplicación utilizando Node.js para el servidor y AngularJS para el cliente.

Las bases

Para construir la aplicación, necesitamos tener instalado Node, Yeoman y Bower, que son respectivamente :

  • Un framework en Javascript orientado a eventos para crear aplicaciones de red
  • Una aplicación para crear bases y maquetas de proyectos
  • Un gestos de dependencias

 

Existen muchas maneras de instalar Node, dependiendo del sistema operativo que tengas. Las distintas alternativas están enumeradas en su página Web (http://Node.js).

Una vez que tenemos instalado Node, Yeoman y Bower se pueden instalar por medio de la interfaz de comandos:

npm install -g yo

npm install -g bower

Una vez que tenemos todo instalado, procedemos a la instalación del generador de Yeoman para proyectos sobre un framework de microservicios para Node llamado Seneca.

(Si quieres aprender lo básico de Yeoman, aquí hay un artículo útil  http://www.33sur.cl/maqueteando-proyectos-rapidos-en-js/)

 

npm install -g yo generator-seneca

 

Y para generar la base del proyecto, basta con crear un directorio, acceder al mismo y ejecutar el siguiente comando:

yo seneca

 

Esto va a crear una estructura de directorios como esta:


test-seneca
|
|-- client  (Lógica cliente en angularJS)
| |-- css
| |-- js
| |-- partials
| |-- index.html
|-- server (Lógica de microservicios en el servidor sobre Node)
| |-- api.js
|-- test
| |-- functional
|-- bower.json
|-- package.json
|-- server.js

 

Con el comando:

npm start

Se puede iniciar la aplicación de prueba generada por yeoman. Para poder verla, es posible acceder por medio del navegador con la URL http://localhost:4000 y deberías ver una pantalla como esta:

Captura de pantalla 2016-03-13 a las 5.01.08 p.m.

 

En el siguiente artículo, investigaremos el funcionamiento de la aplicación de ejemplo y crearemos nuestra propia API

 

28 Feb 2016

Maqueteando proyectos rápidos con Yeoman

¿Has tenido que cumplir con plazos ridículos para generar una maqueta que te permita capturar una oportunidad de negocios?  ¿Que tal esos benditos demos construidos en base a requerimientos entregados por un comercial drogado que siempre salen mal y son reemplazados en último momento por una PPT?

Hay que reconocer que nada vende tan bien como un prototipo funcionando, lo cual no solamente nos da la oportunidad de sorprender al potencial cliente (o a nuestros jefes), sino que nos permite capturar requerimientos y hacer una mejor gestión de expectativas.

La comunidad lo ha entendido así y últimamente han surgido muchas herramientas para hacer maquetas y prototipos funcionales de proyectos con diversas configuraciones.

Una de mis alternativas favoritas es Yeoman, herramienta que te permite realizar maquetas rápidas de aplicaciones web en diferentes lenguajes y con diferentes configuraciones.

Generadores

La base de Yeoman son los generadores. Pero, ¿Que es un generador? Dentro de este contexto, son patrones funcionales que le dicen a yeoman como debe ser construido el proyecto. Estos «planos» incluyen la estructura de directorios del proyecto, conectores a bases de datos, diversas tecnologías, patrones de extensiones, comandos personalizados, buenas prácticas y otros.

Entre los generadores mas populares podemos encontrar:

  • Angular-Fullstack: Generador para aplicaciones de Javascript full stack. Es decir, aplicaciones donde la tecnología detrás de cada una de sus capas es javascript (MongoDB, Express Framework, AngularJS, Node.js).
  • Loopback: Generador de aplicaciones para IBM Loopback.
  • AspNET: Generador de aplicaciones para ASP.NET 5
  • JHispter: Genera una base de aplicaciones Java con Spring, JPA y AngularJS.

 

Actualmente existen sobre 3500 diferentes generadores.

Un Ejemplo

Para ver la potencia de yeoman y sus generadores, vamos a instalar el generador Javascript Fullstack y generar una aplicación completa y funcional en cosa de minutos.

Es necesario tener instalado Node.js y MongoDB. Hay varias maneras de instalar estos componentes, enumeradas en sus respectivas páginas para distintos sistemas operativos.

Una vez instalados, necesitamos instalar Yeoman, dependencias y el generador seleccionado por medio de la interfaz de comandos:
npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack

Necesitamos crear un directorio para el proyecto de ejemplo

mkdir pruebayeoman

Para generar el proyecto, tenemos que ingresar al directorio e invocar el generador

cd pruebayeoman
yo angular-fullstack prueba

Yeoman te hará unas preguntas iniciales para configurar el proyecto:

  1. Quieres usar javaScript o coffeeScript para la programación de la lógica de negocios?
  2. Html o Jade como lenguaje de templates?
  3. Css, Sass, Stylus o Less para el estilo?
  4. ngRouter o uiRouter como manejador de rutas de AngularJS?
  5. Quieres Twitter Bootstrap integrado para el diseño de la UX?
  6. Quieres Ui Bootstrap integrado para el comportamiento de la UX?
  7. Quieres usar Mongoose para modelar los datos sobre mongoDB?
  8. Quieres un sistema de autenticación de usuarios?
  9. Quieres incluir Oauth con Facebook, Twitter o Google?
  10. Usarás Socket.io?

 

Una vez contestadas todas estas preguntas, Yeoman instalará las dependencias requeridas. Puede tardar algunos minutos en la descarga.  Vale mencionar que el generador no solo instalará muchas dependencias y generará una estructura de archivos bastante comprensible (Ej. El directorio «client» tiene la lógica del cliente en HTML y AngularJS, El directorio «server» tiene la lógica del API en node.js, express y mongo) sino que también, varios archivos de utilidad entre los cuales se encuentran:

  • .gitignore: Archivo ignore para GIT
  • package.json: Gestión de dependencias de Node.js
  • bower.json: Gestión de dependencias de AngularJS
  • gruntfile.js: Descripción de tareas automatizadas para Grunt

 

Y archivos de pruebas por defecto para codificar tus pruebas.

Una vez finalizado el proceso de creación y descarga, podemos iniciar el servidor con el comando

grunt serve

Cuando la aplicación se inicie, abrirá automáticamente una página del navegador y te dará acceso a la aplicación, junto con algunos ejemplos de sus funcionalidades.

Captura de pantalla 2016-02-28 a las 4.19.03 p.m.

 

 

Captura de pantalla 2016-02-28 a las 4.18.48 p.m.

La documentación para el generador y sus comandos personalizados se encuentra aquí.

Ahora, con un mínimo de configuraciones extras, tenemos una excelente base para comenzar nuestro demo, prototipo o MVP.