Desarrollo de una aplicación con MEAN.JS

Standard

Este es el primero de una serie de vídeos en los que vamos a explicar paso a paso cómo desarrollar una aplicación web desde cero basada en el stack MEAN (MongoDB, Express, AngularJS y NodeJS).

Como comenté en el artículo anterior, la aplicación que vamos a desarrollar es la gestión de un proceso de ventas, donde vamos a tener un maestro de clientes, un maestro de productos, un módulo para generar pedidos de ventas y un panel de control donde poder consultar y comparar en tiempo real las ventas realizadas en el mes actual y en el mes anterior.

Para desarrollar nuestra aplicación vamos a utilizar Yeoman y el generador mean.js. Con este generador vamos a conseguir tener la estructura de nuestra aplicación correctamente configurada y lista para empezar a programar en cuestión de segundos.

Tal y como podemos leer en la sección Getting Started de la documentación de mean.js, los pasos a realizar son los siguientes:

  1. Instalar Yeoman: npm install -g yo
  2. Instalar el generador mean.js: npm install -g generator-meanjs
  3. Generar nuestra aplicación: yo meanjs
  4. Ejecutar nuestra aplicación: grunt

Antes de ejecutar la aplicación recuerda haber arrancado una instancia de MongoDB.

En siguientes vídeos iremos viendo cómo desarrollar los distintos módulos de nuestra aplicación.

 

Aplicación Demo MEANJS

Standard

Hace un tiempo comencé a desarrollar manualmente la siguiente aplicación con el stack MEAN.

Cuando comencé a desarrollarla no existían los generadores que hoy día existen para Yeoman, ni los frameworks proporcionaban las funcionalidades que hoy día proporcionan. Como hemos visto en artículos anteriores, es conveniente saber escoger aquellas herramientas que mejor se adapten a las características que necesitan nuestros proyectos. Sin duda alguna, si actualmente tuviera que comenzar este mismo proyecto, lo haría ayudándome de otras herramientas en lugar de desarrollarlo manualmente.

En próximos artículos explicaré cómo desarrollar esta misma aplicación con mean.js.

Demo ApplicationGitHub

Desarollo de un API REST con Sails.js

Standard

En el artículo anterior explicamos cómo desarrollar un API REST con MongoDB, NodeJS y Express desde cero. Vimos que desarrollar un API desde cero es un proyecto sencillo aunque puede resultar tedioso. También hemos comentado en artículos anteriores que cuando tenemos que desarrollar un nuevo proyecto es muy importante conocer y analizar qué herramientas son las más apropiadas para su desarrollo y elegir aquéllas que mejor se adapten a las características de nuestro proyecto.

La productividad es un factor muy importante en el proceso de desarrollo de software. Por este motivo, teniendo en cuenta el factor productividad, en este artículo quiero introducir el framework Sails.js, que nos va a facilitar y a agilizar el proceso de desarrollo de un API REST.

 

Descripción de Sails.js

Según la propia página web oficial de Sails.js:

Sails.js facilita el desarrollo de aplicaciones Node.js empresariales. Ha sido diseñado para imitar el patrón MVC de frameworks como Ruby on Rails, pero con soporte para los requisitos de aplicaciones modernas: data-driven APIs con una arquitectura escalable y service-oriented. Es especialmente bueno para el desarrollo de chats, cuadros de mando en tiempo real o juegos multijugadores.

 

Una de las cosas que nos permite Sails.js, entre muchas otras, es el desarrollo de forma sencilla y rápida de un API REST. Por eso considero que puede ser una herramienta muy importante del stack de software que comentamos en el artículo desarrollo de aplicaciones web modernas.

 

Creación de un API con Sails.js

En este artículo iba a escribir varias secciones para explicar la creación de un API con Sails.js, pero como es un proceso tan sencillo y tan rápido voy a explicarlo en esta única sección. Ejecutando únicamente un par de instrucciones e insertando una única línea de código conseguimos desarrollar el mismo API que desarrollamos en el artículo desarrollo de un API REST con MongoDB, NodeJS y Express, pero con más funcionalidades:

Como vemos, en primer lugar generamos nuestro proyecto mediante el comando sails generate new MyApi –no-front-end y después generamos nuestro API para la entidad Message mediante el comando sails generate api message.

Finalmente tenemos que definir las propiedades de nuestra entidad, la cual se compone únicamente de la propiedad text. Por lo tanto, abrimos el fichero api/models/Message.js y definimos sus propiedades:

 

Base de Datos en Sails.js

Sails.js utiliza el ORM Waterline, que es desarrollado y mantenido por el mismo equipo de desarrollo de Sails.js.

Waterline dispone de adaptadores para conectarse a varias bases de datos (MySQL, PostgreSQL y MongoDB, entre otras). También podemos hacer que almacene los datos en disco o en memoria (no recomendado para producción), con lo cual podríamos probar nuestras aplicaciones sin necesidad de tener instalado un gestor de base de datos.

Por defecto, Sails.js está configurado para utilizar el local disk adapter (almacena los datos en un directorio temporal de nuestro sistema de ficheros). En el fichero config/connections.js están definidas nuestras conexiones a base de datos y en el fichero config/models.js se define qué conexión queremos que nuestras entidades utilicen por defecto. Cuando definimos cada una de nuestras entidades podemos especificar qué conexión queremos que utilice. Si no especificamos ninguna entonces Sails.js utilizará aquella que esté definida en config/models.js.

 

Probando el API

Para probar nuestro API previamente tenemos que arrancar nuestra aplicación ejecutando la siguiente instrucción:

Una vez arrancado el servidor podemos utilizar la extensión POSTMAN de Chrome para hacer peticiones a nuestro API.

Si queremos obtener todos los mensajes, lanzaremos una petición GET a la URL http://localhost:1337/message:

blog-ch2-empty-collection

Si queremos agregar un nuevo mensaje, lanzaremos una petición POST a nuestro API:

blog-ch2-post

Y si nuevamente consultamos nuestros mensajes enviando una petición GET, obtenemos la siguiente información:

blog-ch2-collection

 

Relaciones entre Entidades con Sails.js

Otra característica que Sails.js incorpora al generar nuevas APIs y que supondría bastante trabajo si tuviéramos que desarrollarlo manualmente es la gestión de relaciones entre entidades.

Para explicar las relaciones entre entidades vamos a utilizar el ejemplo que utiliza el equipo de Sails.js en su propia documentación. El ejemplo que vamos a ver se basa en una relación uno a muchos, en el que las entidades van a ser Pet y User y donde un usuario va a poder tener un número indefinido de mascotas.

En primer lugar, generamos nuestro API para la entidad Pet:

Y la definimos tal y como lo hacen en la documentación de Sails.js:

A continuación creamos nuestro API para la entidad User:

Y la definimos con las siguientes propiedades:

Arrancamos nuestra aplicación ejecutando la instrucción sails lift y probamos nuestro API con POSTMAN lanzando las siguientes peticiones a nuestro servidor:

Petición POST para crear un usuario

blog-ch2-rel-insert-user

 

Petición GET para obtener una lista de usuarios

blog-ch2-rel-list-users-pets-empty

Petición POST para crear una mascota

blog-ch2-rel-insert-pet

 

Cuando creamos una nueva mascota introducimos el código del usuario al que pertenece la mascota.

Petición GET para obtener una lista de usuarios

blog-ch2-rel-list-users-with-pets

Automáticamente nuestro API nos devuelve las mascotas asociadas a cada usuario.

Petición GET para obtener un usuario

blog-ch2-rel-list-one-user-with-pets

Petición GET para obtener una mascota de un usuario

blog-ch2-rel-list-one-user-one-pet

Si nos fijamos en la URL vemos cómo relacionamos las entidades para obtener la mascota con el ID igual a 1 del usuario con ID igual a 1.

 

Conclusión

En este artículo hemos visto que el desarrollo de un API REST con Sails.js es muy sencillo y muy rápido. Simplemente ejecutando un par de instrucciones de Sails.js podemos crear la estructura de nuestra aplicación y un API. A partir ahí sólo tenemos que definir las propiedades de nuestras entidades y sus relaciones.

Además, Sails.js ofrece muchas más características de las que hemos visto en este artículo, como notificaciones en tiempo real, gestión de la seguridad y un ORM que nos permite trabajar indistintamente con varios gestores de bases de datos, entre muchas otras características.

Hemos podido comprobar cómo el hecho de seleccionar Sails.js en lugar de desarrollar un API desde cero como hicimos en el artículo anterior, ha ayudado a que obtengamos un notable aumento de productividad.

En siguientes artículos seguiremos viendo herramientas que pueden ayudarnos en el desarrollo de nuestros proyectos.

Desarrollo de un API REST con MongoDB, NodeJS y Express

Standard

En el anterior post analizamos un stack que hoy en día considero muy interesante para el desarrollo de aplicaciones web modernas. En este stack el front-end estaba formado por AngularJS para el desarrollo de la aplicación de escritorio, y por Ionic para el desarrollo de la aplicación móvil. Sin embargo, el back-end podía tener ciertas variantes, en función de las necesidades de la aplicación.

También comentamos la importancia de saber elegir el framework o las herramientas más adecuadas para el desarrollo de nuestros proyectos, ya que éstas nos pueden ofrecer un notable aumento de productividad y nos pueden ayudar a desarrollar aplicaciones robustas.

Sin embargo, considero que para sacar provecho a estos frameworks o herramientas conviene saber qué es lo que hacen internamente. El back-end de nuestro stack, entre otras cosas, nos ofrece un API que se encargará gestionar nuestros datos. En este artículo vamos a analizar cómo crear manualmente un servidor que nos ofrezca un sencillo API. En posteriores artículos veremos cómo podemos utilizar herramientas que nos ayudarán a desarrollar nuestro propio servidor de forma mucho más rápida, robusta y con más funcionalidades que si desarrollamos nuestro propio API desde cero.

 

Objetivo

El objetivo de este artículo es desarrollar un API REST muy sencillo con NodeJS y Express con el fin de mostrar lo sencillo, aunque tedioso, resulta esta tarea. El API simplemente permitirá insertar mensajes en una colección MongoDB y recuperar un listado con todos los mensajes existentes en la colección.

Se puede descargar el código fuente desde la siguiente ubicación:

GitHub Source Code

O se puede clonar y arrancar la aplicación ejecutando las siguientes instrucciones desde la línea de comandos:

A continuación se explica cómo desarrollar el API desde cero.

 

Instalación de paquetes NodeJS

El primer paso que vamos a hacer es crear y entrar en el directorio en el que vamos a desarrollar nuestro proyecto. Una vez dentro de nuestro directorio de trabajo instalaremos con npm los siguientes paquetes:

  • expressnpm install express. express es el framework más popular en Node para desarrollar aplicaciones web.
  • express-generatornpm install -g express-generator. Si no lo tenemos instalado ya, tendremos que instalarlo globalmente. express-generator lo utilizaremos para generar rápidamente el esqueleto de nuestra apliación.
  • mongoosenpm install mongoose –save. Finalmente instalaremos mongoose que es el ORM que utilizaremos para acceder a nuestra base de datos MongoDB.

En resumen, ejecutaremos los siguientes comandos dentro de nuestro directorio de trabajo para instalar los paquetes que necesitamos:

 

Generar la aplicación

Una vez tenemos instalados todos los paquetes que necesitamos, lo que vamos a hacer es generar nuestra apliación express. Estando dentro de nuestro directorio de trabajo simplemente ejecutamos el comando express y éste generará la estructura de nuestra aplicación.

A continuación tenemos que instalar los paquetes que necesita express, para lo que ejecutamos la instrucción npm install.

Finalmente, arrancamos nuestra aplicación, ejecutando el comando npm start.

En resumen, desde nuestra consola ejecutaremos los siguientes comandos para generar y ejecutar nuestra aplicación web:

Si una vez arrancado nuestro servidor accedemos a la dirección http://localhost:3000 la aplicación nos mostrará una página de bienvenida a express.

Opcionalmente, como nuestro servidor lo estamos desarrollando para gestionar un API, podemos eliminar los ficheros que no necesitamos y  que los ha creado el generador de express para servir páginas web: podemos eliminar el contenido del directorio public y podemos eliminar el directorio views.

 

Conexión con la base de datos

Para conectarnos a la base de datos creamos el directorio db y dentro de este directorio creamos el fichero index.js. En este fichero simplemente creamos la conexión a la base de datos (la cadena de conexión deberíamos almacenarla en un fichero de configuración, pero por simplificar y no alargar el artículo la definimos directamente en el código):

Posteriormente modificaremos el fichero app.js para establecer la conexión con la base de datos (líneas 7 y 13):

 

Crear las entidades

A través de Mongoose vamos definir el esquema de nuestras entidades. En este ejemplo sólo vamos a tener una entidad lo más sencilla posible llamada Message. En nuestro directorio base de trabajo vamos a crear el directorio models, y dentro de éste vamos a crear el fichero message.js:

 

Crear los controladores

En nuestro directorio base de trabajo vamos a crear el directorio controllers, y dentro de éste vamos a crear el fichero message.js. En el controlador es donde vamos a definir las acciones que se van a poder realizar a través del API con nuestra entidad. En este caso, con el fin de simplicar, sólo vamos a definir dos acciones:

  • list: devuelve un listado de todos los mensajes almacenados en nuestra base de datos, sin ningún filtro.
  • create: Inserta un nuevo mensaje en la base de datos.

 

Crear las rutas

En nuestro directorio base de trabajo vamos a crear el directorio routes, y dentro de éste vamos a crear el fichero message.js. En este fichero vamos a definir los métodos del controlador que se van a ejecutar en función de la petición realizada por nuestra aplicación web:

 

Finalmente, modificaremos el fichero app.js para agregar las rutas que hemos definido en el fichero anterior (líneas 6 y 14):

Probar el API

Finalmente sólo nos falta probar que nuestro API funciona correctamente. Lo correcto sería probarlo mediante una batería de tests, utilizando el paquete superagent, por ejemplo, pero como el objetivo de este artículo simplemente es ver cómo se desarrolla el API, no vamos a explicar cómo desarrollar los test.

Manualmente podemos probar nuestro API mediante una extensión para Chrome llamada POSTMAN. La primera vez que hagamos un GET de messages el API nos devolverá una colección de mensajes vacía:
blog-ch1-empty-collection

Si queremos agregar un mensaje nuevo, tenemos que utilizar el método POST y enviar como parámetros el mensaje que queremos crear:

blog-ch1-post

Finalmente, si volvemos a consultar la colección, utilizando nuevamente el método GET, obtendremos una lista de objetos JSON que contendrá únicamente el mensaje que hemos agregado anteriormente:

blog-ch1-collection

Conclusión

Hemos visto que la creación de un API con NodeJS y Express sin la utilización de ningún otro framework específico es un proceso sencillo aunque tedioso. Hay muchas características que necesita implementar un API y que no hemos tratado en este artículo, pero que conllevarían más o menos tiempo desarrollarlas, como pueden ser las relaciones entre entidades, la gestión de la autenticación, la gestión de la autorización, etcétera.

En siguientes artículos veremos cómo podemos abordar el desarrollo de un API mediante la utilización de frameworks o herramientas que nos van a ayudar a ser más productivos.

 

Realtime JavaScript Stack: nodejs + express + mongoose + socket.io + angularjs

Standard

There is a good realtime JavaScript stack, composed by nodejs + express + mongoose + socket.io + angularjs, and I’m going to explain how to integrate these pieces of software to develop a simple web application. The application that I have developed is called VoteExpress, and through this application users are able to vote the team that they think that will win the next Brazil World Cup 2014. When a user votes for a team, every users connected to the page will be notified in realtime that someone has voted that team, and a pie chart will be automatically updated with the new results.

Demo ApplicationSource Code

We can bootstrap our application with the following skeleton: https://github.com/jlmonteagudo/node-express-moongose-min-bootstrap  This skeleton is based on the excellent project developed by Madhusudhan Srinivasa project: Nodejs Express Mongoose Demo, that use best practices developing nodejs web applications.

This is the main tree folder of the skeleton project:

  • app
    • controllers
    • models
  • config
    • config.js
    • db-fixture.js
    • express.js
    • routes.js
    • socket-io.js
  • public
  • server.js

 

The Back End

The back end will manage RESTFUL requests, and these requests will be done by an AngularJS application on the front end, which will be located in the public folder.

The only entity that our application will manage is Team. To manage this entity we only have to create its Schema, its controller and its routes.

Inside the app/models folder we will create team.js, where we will define our model through Moongose (Mongoose Quick Start):

 

 

Next, we will create a controller in the folder app/controllers:

 

 

In the controller we define the actions that we will do with our models. list will return a JSON of all the teams with its scores, and update will update the score of the team and will notify about this to all the clients connected to the application.

Finally we have to define the routes in the file config/routes.js:

 

The Front End

The front end is an AngularJS application that is located in the public/js folder. Its tree folder is as follow:

  • controllers
    • team.js
  • directives
    • chart.js
  • services
    • socketio.js
  • app.js

In app.js we only define the routes:

 

 

In the controller we get all the teams that are inside the database, and we define the function vote that will be invoked when someone votes for a team. In the controller also is defined what to do when the server notify that a team has been updated. Here is the controller code:

 

 

We have defined a directive to render the chart (through Google Visualization API):

 

 

So, to render a chart inside a view we only have to insert the following code:

<chart></chart>

and that tag will render a Pie Chart through the Google Visualization API using the JSON document got from the server.

Finally, I have defined a service (services/socketio.js) that will be used to manage socket.io connections. The code is based on this article  http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

 

Conclusion

As we have seen, this is a simple stack that we can use to create our real time applications. In the JavaScript ecosystem there are another systems that allow us to develop this kind of applications, but I think that this one is very flexible.

There are many alternatives to the stack that I have proposed in this article, and two of them that I think that are very interesting are sails.js and Meteor. Maybe I will translate the VoteExpress demo developed in this article to sails and meteor, so we can compare its features.

 

Disclaimer

There are some things in the code that I don’t like and I think that there would be a better way to code. I would be happy if you could propose a better solution.

The first one is that I have defined the socketIO variable as global in the voteExpress/config/socket-io.js file. I know I could pass the socketIO paramater to config/routes and from here to each controller, but I didn’t like the solution.

The second one is related to Angular. I have used Pines Notify, to notify that someone has voted for a team, and I call to it as a JQuery method inside the controller: $.pnotify({title: ‘Vote’, text: ‘+1 vote for ‘ + team.name }); I know that it is a bad practice to update the DOM from the controller, and that it is much better to do that through a directive. Do you have any sugestion to solve this subject in a better way?

Emitir video con tu dispositivo móvil con Node.js, Express.js y Socket.IO

Standard

En este post quiero mostrar lo sencillo que puede ser desarrollar aplicaciones que procesen información en tiempo real mediante la utilización de Node.js y websockets. En concreto, como ejemplo para esta demostración, he desarrollado una aplicación que captura vídeo a través de la cámara de tu dispositivo móvil y lo emite a través de una página web.

La aplicación está publicada en Heroku, una plataforma de cloud computing que permite publicar tu aplicación gratuitamente. Puedes probar la aplicación en la siguiente dirección: http://jlmonteagudo-cam.herokuapp.com/

El código fuente de la aplicación lo he subido a github y se puede acceder desde la siguiente URL: https://github.com/jlmonteagudo/jlmonteagudo-cam

 

Estructura de la aplicación

La aplicación está estructurada en tres piezas distintas:

- Página web que emite el vídeo: Esta página captura vídeo a través de la cámara de tu dispositivo móvil y lo envía mediante web sockets a un servidor. Utiliza el método getUserMedia de los navegadores para capturar el vídeo.

- Servidor: El servidor simplemente se encarga de recibir los frames que envía la página que emite el vídeo y hace un broadcast de estos frames a otra página web.

- Página web que visualiza el vídeo: Esta página web simplemente visualiza los frames enviados por el servidor.

 

Gráficamente la estructura sería la siguiente:

 

 

Emit.html

La página emit.html es la que se encarga de capturar el vídeo a través del dispositivo móvil y lo envía al servidor. El código principal de la página es el siguiente:

El script primero comprueba si el navegador implementa el método getUserMedia, y en caso afirmativo al tag video se le asigna el flujo de datos que el navegador captura de la cámara del dispositivo:

A continuación el script configura la librería Socket.IO para conectarse al servidor al que tiene que enviar las capturas de vídeo. La función que se encarga de enviar las capturas de vídeo es la siguiente:

Para enviar las capturas de vídeo al servidor, el script utiliza un elemento canvas, que se crea a través de JavaScript, en el cual se dibuja cada segundo lo que el elemento video está emitiendo en ese momento:

Display.html

La página display.html es muy sencilla y lo único que hace es conectarse al servidor y mostrar en un elemento img aquellas capturas que le llegan a la página a través de websockets:

Servidor

El servidor está desarrollado con Node.js y es muy sencillo de implementar. Simplemente tenemos que crear una aplicación con el framework Express.js e importamos una librería que implementaremos a continuación (streamingService). Esta librería será la encargada de configurar Socket.IO para recibir las capturas de vídeo y distribuirlas a todos los clientes conectados al servidor. El código del servidor (casi en su totalidad generado por Express.js) es el siguiente:

Y por último, así es cómo quedaría la implementación de la librería streamingService:

Como vemos, toda información que le llega al servidor, la librería hace un broadcast de esa misma información a todos los clientes. Otro punto a tener en cuenta es que Heroku, al igual que otras plataformas cloud computing, no soporta el uso de websockets, por ello es que hay que especificar que Socket.IO realice el transporte a través de xhr-polling.

Consideraciones

La cantidad de información que transmite esta solución de emisión de vídeo es relativamente elevada, ya que cada frame que emite la página emit.html al servidor pesa alrededor de 50K. Hemos configurado el sistema para que envíe únicamente un frame por segundo, ya que emitir más de 50K por segundo sería demasiado pesado. Es por esto que para probar el sistema es recomendable que el dispositivo que emite el vídeo esté conectado a una red ADSL o de alta velocidad y no a través de 3G, ya que de lo contrario la emisión no funciona correctamente.

Conclusión

Como hemos podido comprobar, las posibilidades que nos ofrece Node.js y Socket.IO son muy interesantes, y la combinación de ambas herramientas nos permite desarrollar aplicaciones que procesen información en tiempo real de forma muy sencilla.

Scroll infinito con Javascript y Grails

Standard

Estoy actualizando www.dondeviajamos.com. Uno de los cambios que quiero hacer es relativo a la navegación, donde voy a reemplazar el clásico sistema de paginación por un sistema de scroll infinito, estilo Twitter. El scroll infinito se basa en que cuando un usuario visualiza la página y llega al final de la misma, ésta realiza automáticamente una petición AJAX al servidor para que éste le proporcione más registros. Estos registros serán procesados mediante Javascript para presentarlos en un formato de visualización determinado.

He estado intentando utilizar algún plugin que ya existiera, pero ninguno se ha adaptado fácilmente a mis necesidades, por lo que finalmente he decidio desarrollar el scroll infinito de forma manual. Es realmente sencillo, así que voy a explicar rápidamente cómo podemos implementar este sistema.

Codificación de la parte del servidor

El primer punto que necesitamos es que el servidor nos proporcione los nuevos registros en formato JSON. Esto es realmente sencillo con Grails:

En el código anterior vemos que si el navegador solicita un documento HTML entonces simplemente retorna el listado de registros, y si el navegador solicita JSON entonces renderiza un objeto JSON a partir del mismo listado de registros. ¿Cómo sabe el controlador si tiene que devolver HTML o JSON? Si la solicitud es del siguiente tipo /destino/list entonces el servidor devuelve HTML. Si la solicitud es del siguiente tipo /destino/list.json entonces el servidor devuelve JSON.

Codificación de la parte del cliente

En primer lugar, tenemos que saber si el usuario ha hecho scroll y ha alcanzado el final de la página. Esto podemos saberlo mediante el siguiente código Javascript:

El siguiente paso es que cuando el usuario alcance el final de página entonces se realice una petición AJAX al servidor para que éste proporcione más registros. Para hacer la petición AJAX utilizaremos JQuery:

Al método GET sólo hay que pasarle tres parámetros: la URL del servidor, los parámetros que queremos enviar al servidor, y una función callback que se ejecutará una vez el servidor ha devuelto la información. El código Javascript completo de dondeviajamos quedaría del siguiente modo:

Como vemos, es realmente sencillo implementar con Javascript un sistema de navegación basado en scroll infinito, sin necesidad de la utilización de plugins de terceros. Si alguien quiere que aclare algún punto que no ha quedado lo suficientemente claro, no tiene más que dejar un comentario.

Tablas Profesionales con JQGrid

Standard

Puedes ver la demo de las tablas en la siguiente dirección: http://jlmonteagudo.cloudfoundry.com/team

Puedes descargarte el código fuente en la siguiente dirección: jqgrid

En muchas de las aplicaciones web que desarrollamos tenemos la necesidad de mostrar la información en forma de tabla. Existe un plugin desarrollado con jQuery que podemos utilizar en nuestra aplicación para este propósito, independientemente del lenguaje de programación que utilicemos en nuestro servidor. El pugin en cuestión se llama jqGrid, y lo vamos a utilizar en combinación con Grails, como ya viene siendo habitual.

Una característica importante de jqGrid que cabe destacar es que no sólo permite mostrar información, sino que  permite agregar registros nuevos a la base de datos, consultarlos, actualizarlos y borrarlos.

jqgrid2

Quiero comentar que hoy en día ya existe un plugin para Grails que permite la utilización de jqGrid de forma sencilla. Sin embargo, he preferido demostrar el uso de jqGrid directamente porque, además de ser muy fácil utilizarlo, no estás supeditado a las actualizaciones del plugin de Grails para poder utilizar las últimas funcionalidades de jqGrid. Así, en el momento de escribir este post, la versión actual del plugin de Grails utiliza la versión 3.8 de jqGrid, pero la versión actual de jqGrid es la 4.1.1.

Para integrar jqGrid en nuestra aplicación Grails lo primero que tenemos que hacer es descargárnoslo desde su sitio web. Una vez descargado y descomprimido, tenemos que copiar los ficheros del directorio js (directorio i18n incluido) al directorio web-app/js de nuestra aplicación Grails. Lo mismo tenemos que hacer con el directorio css, copiamos los ficheros de la carpeta css de jqGrid al directorio web-app/css de nuestra aplicación Grails.

También nos tenemos que descargar uno de los muchos temas que puedes encontrar en la web jQuery UI, con el cuál conseguimos darle al grid un look & feel determinado. Una vez descargado y descomprimido el tema lo único que nos faltaría hacer sería copiar el contenido del directorio css, al directorio web-app/css de nuestra aplicación Grails.

A continuación, para utilizar el grid en una determinada página, tenemos que ir al GSP en cuestión y agregar las siguientes hojas de estilo:

Por otra parte tendríamos que agregar los siguientes ficheros JavaScript:

Y finalmente el siguiente código JavaScript:

En este fragmento de código se configuran una serie de parámetros (documentación oficial de las opciones) del grid. Uno de los más importantes es el parámetro URL, donde se le asigna al grid una dirección desde donde éste obtiene la información que tiene que presentar.

En nuestro controlador Grails necesitamos una closure que busque en la base de datos la información y que la devuelva en formato JSON, que es el formato que hemos definido mediante el parámetro datatype del grid. A continuación se muestra la closue, cuyo código se basa en el código del plugin jqGrid de Grails:

Esta closure recoge los parámetros enviados por el grid, y a partir de estos parámetros realiza la consulta en la base de datos.

En la aplicación mostrada existe un segundo grid más avanzado que, además de consultar la información de la base de datos, permite realizar operaciones CRUD sobre la entidad a representar. Este segundo grid tiene una barra de herramientas en su parte inferior a través de la cuál se pueden crear nuevos registros, actualizarlos y borrarlos. Además, en la cabecera, este grid contiene unos controles a través de los cuales se puede filtrar la información que se presenta. Para ver todas estas funcionalidades se recomienda revisar el código fuente que se adjunta más arriba.

Desarrollo de un Chat con Grails y Ajax Push

Standard

Puedes ver la demo del chat en la siguiente dirección: http://jlmonteagudo.cloudfoundry.com/chat

Puedes descargarte el código fuente en la siguiente dirección: chat

Muchas de las aplicaciones con interfaces ricas que actualmente tenemos que desarrollar requieren actualizaciones automáticas, es decir, el servidor envía información al cliente, y éste actualiza los datos de su interfaz de forma automática. Este tipo de actualizaciones actualmente suelen llevarse a cabo a través de AJAX, y con AJAX podemos utilizar dos sistemas de comunicación diferente, pull y push.

Mediante pull, es el cliente quien solicita información al servidor, que puede estar programado para esta solicitud la realice cada cierto periodo de tiempo. Mediante push, el cliente se subscribe a un canal, y cada vez que éste se actualiza el servidor envía automáticamente la información a todos los clientes subscritos al canal.

Con este post quiero demostrar cuán sencillo y rápido es desarrollar un sistema con comunicación AJAX Push y con Grails. Una aplicación de chat nos sirve perfectamente para este cometido, ya que un cliente envía información al servidor y éste automáticamente envía esa misma información a cada uno de los clientes subscritos al canal.

Vamos a ver cómo con unas pocas líneas de Groovy, con el plugin Atmosphere de Grails y con un poco de Javascript podemos crear una aplicación de chat. Toda la documentación del plugin puedes consultarla en la siguiente dirección: https://docs.google.com/View?id=dfdr5d2x_14ccbgm8dm

Una vez creada la aplicación de Grails tenemos que instalar el plugin Atmosphere, que es un framework que nos permite establecer una comunicación Ajax Push:

A continuación creamos un controlador que sólo necesita declarar una closure, en nuestro caso la closure broadcast. El plugin Atmosphere inyecta a todos los controladores de la aplicación el objeto Broadcaster, que como vemos en la aplicación se encarga de difundir un mensaje a todos los clientes subscritos al canal /atmosphere/chat (tan sólo con una línea de código):

Por otra parte, creamos un servicio en el que declaramos una propiedad estática llamada atmosphere, y dos closures onRequest y onStateChange:

Lo importante aquí es saber que cuando algún cliente invoca la closure broadcast del controlador, se desencadena la ejecución de la closure onStateChange del servicio. Como vemos, esta closure llama el método javascript callback del cliente, que a continuación veremos cómo se define.

Finalmente, tenemos la siguiente página gsp, que es la que mediante Javascript envía la información al servidor y procesa la información recibida por el servidor:

En esta página son tres las cosas que tenemos que tener en cuenta:

  • Al cargarse la página el cliente se conecta automática al canal /atmosphere/chat:

  • Al pulsar el botón Enviar, mediante Javascript se genera un mensaje JSON (que contiene el usuario que ha escrito el mensaje, así como el mensaje en sí), y se envía el JSON al servidor:

  • Finalmente, cuando el servidor envía información al cliente, se ejecuta la función Javascript callback, que proceso el mensaje JSON y lo agrega al div llamado chat.

Esta aplicación es extremadamente sencilla y en ningún momento pretende explotar todas las funcionalidades que el plugin ofrece, pero sirve para poder ver el tipo de aplicaciones que pueden desarrollarse con este framework.

Publicando una aplicación Grails en Cloud Foundry

Standard

En un post anterior publiqué información acerca de la publicación de una aplicación Grails en una plataforma de cloud computing. En este post voy a comentar lo sencillo que supone desplegar la misma aplicación (Gestión de Encuestas, http://encuestas.cloudfoundry.com) en Cloud Foundry.

A mediados de Abril de 2011 VMware anunció la disponibilidad de su plataforma PaaS, una plataforma que facilita en gran medida la publicación de aplicaciones Java, Rails y Node.js en la nube. Lo bueno de esta plataforma es que el desarrollador no se tiene que preocupar de otra cosa que no sea el diseño y la programación de su aplicación, ya que CloudFoundry no exige al programador adaptar su aplicación a la plataforma.

De momento, VMware permite testear su plataforma sin coste alguno, ya que actualmente se encuentra en fase beta. Para poder publicar tus aplicaciones en Cloud Foundry tienes que solicitar gratuitamente una cuenta en la web http://www.cloudfoundry.com/ y en unos días recibirás un mail con tus datos de acceso.

Una vez tienes tu cuenta, tienes varias opciones para poder interactuar con la plataforma. Puedes gestionar tus aplicaciones con el IDE STS, o bien directamente a través de un command line que puedes descargarte. Si tu aplicación está desarrollada con Grails, existe un plugin que te permite interactuar con la plataforma a través de la línea de comandos de Grails. Tengo que decir que tuve problemas a la hora de subir la aplicación a través del plugin de Grails, así que tuve que hacerlo a través del command line de Cloud Foundry.

Creo que, una vez más, SpringSource, de la mano de VMware, ha demostrado que se sabe adaptar mucho más rápido a las necesidades del mercado que los estándares de la plataforma Java (JEE7 tendrá soporte para la nube), ofreciendo soluciones que facilitan el trabajo del desarrollador.