Paginación con AngularJS y ngTable – Parte 8

Standard

En este vídeo adaptamos nuestro cliente AngularJS para mostrar los datos en forma de tabla, de tal modo que se puedan hacer llamadas a nuestro API en el servidor para que los datos los recibamos y los representemos de forma paginada.

Para adaptar nuestra aplicación tan sólo tenemos que modificar dos ficheros. El primer fichero que tenemos que modificar es el controlador customers.client.controller.js. Vamos a inyectar la dependencia ngTableParams, y vamos a crear un objeto de este tipo:

Al objeto ngTableParams le pasamos los dos párametros que hemos definido previamente y el objeto ngTableParams lo insertamos en el $scope de nuestro controlador.

Y el segundo y último fichero que tenemos que modificar es la vista list-customers.client.view.html. En el tag table tenemos que pasar como parámetro el objeto ngTableParams que hemos insertado en el $scope de nuestro controlador:

Y por último, en ng-repeat vamos a cambiar la variable customers por $data:

Con estos cambios ya tendríamos adaptado nuestro cliente para que pudiera mostrar y obtener información de forma paginada.

Puedes descargarte y ejecutar la aplicación a través de las siguientes instrucciones:

Github

Paginación con MongoDB – Parte 7

Standard

En este vídeo vemos cómo adaptar nuestro API de forma que nos permita paginar, filtrar y ordenador los registros de nuestra base de datos.

Tal y como estaba funcionando hasta ahora nuestra aplicación, cuando obteníamos el listado de clientes, el servidor nos devolvía todos los registros de clientes existentes en nuestra colección. Con la adaptación que vamos a hacer a nuestra API, vamos a poder obtener un número determinado de registros, vamos a poder hacer búsquedas y vamos a poder ordenarlos.

Como vemos en el vídeo, para realizar estas operaciones vamos a utilizar un plugin existente para Mongoose llamado mongoose-middleware, que nos facilita las tareas de paginar, filtrar y ordenar. Además, el código resultante es muy claro y fácil de entender.

Tras instalar el plugin, vamos a tener que inicializarlo agregando la siguiente línea en el fichero server.js:

 

A continuación modificaremos el método list del controlador app/controllers/customers.server.controller.js para dejarlo de la siguiente forma:

A partir de ahora podemos hacer el siguiente tipo de llamadas a nuestro API:

  • Obtener sólo dos registros: http://locahost:3000/customers?count=2
  • Obtener sólo dos registros de la segunda página: http://locahost:3000/customers?count=2&page=2
  • Obtener aquellos clientes cuyo nombre contenta la palabra siete: http://locahost:3000/customers?filter[name]=siete

En próximos vídeos veremos cómo integrar el módulo ng-table con la nueva API que hemos definido.

 

AngularJS y ng-table – Parte 6

Standard

Cuando creamos nuevos módulos mediante el generador MEAN.JS, la vista que se encarga de mostrar el listado de nuestras entidades lo hace en forma de lista. Sin embargo, en según qué casos, resulta más funcional representar la información en forma de tabla. Lo que vamos a ver en este vídeo es cómo instalar el plugin ng-table y cómo utilizarlo para representar nuestras entidades en forma de tabla.

 

Al final del vídeo vamos a ver que, en realidad, no obtenemos ninguna ventaja especial por el hecho haber utilizado el plugin ng-table en lugar de haber utilizado HTML estándar para representar nuestra tabla; sin embargo, en próximos vídeos veremos cómo ng-table nos permite paginar la información en el lado del servidor, filtrar la información y ordenarla. Si esta funcionalidad quisiéramos implementar sin la utilización de un plugin como ng-table, veríamos que sería bastante más costoso que utilizando un plugin.

Existen varias alternativas a ng-table, como pueden ser Smart Table o ng-grid, y pueden ser tan válidas como ng-table.

Finalmente, en el vídeo se comenta que para poder implementar la paginación y el filtrado en el lado del servidor, previamente vamos a tener que adaptar nuestro back-end para que permita paginar y filtrar. En el siguiente vídeo veremos cómo adaptar nuestro API para que nos permita realizar estas operaciones.

Puedes descargarte y ejecutar la siguiente aplicación a través de las siguientes instrucciones:

 

Gestión de un módulo MEAN.JS – Parte 5

Standard

Cuando creamos un nuevo módulo a partir del generador mean.js, el generador nos crea una entidad que sólo tiene la propiedad name. En este vídeo vamos a ver cómo agregar nuevas propiedades a nuestra entidad y cómo gestionar estas nuevas propiedades de forma que cuando trabajemos con nuestra entidad, todas estas nuevas propiedades se almacenen y se recuperen de la base de datos.

 

Gestión del back-end

Por la parte del back-end, simplemente vamos a tener que modificar el fichero app/models/customer.server.model.js, que es el fichero en el que definimos el esquema de nuestra entidad. El esquema quedaría definido de la siguiente forma:

Gestión del front-end

Por la parte del front-end, sólo vamos a tener que modificar el controlador de nuestro módulo customers, y sus vistas. Dentro del controlador sólo tenemos que modificar el método create, que quedaría definido de la siguiente forma:

Y en las vistas iríamos definiendo las nuevas propiedades que hemos creado anteriormente. Así, por ejemplo, la vista create-customer.client.view.html quedaría definida de la siguiente manera:

En siguientes capítulos mostraremos cómo mejorar la visualización de la información mediante la utilización de tablas para representar el listado de nuestras entidades.

Stack MEAN – Funcionamiento Interno – Parte 4

Standard

En este vídeo vamos a explicar el funcionamiento interno de una aplicación web basada en el stack MEAN (Mongoose, ExpressJS, AngularJS, NodeJS).

 

El fichero en el configuramos el framework web es config/express.js. En este fichero, por una parte definimos el directorio donde vamos a alojar nuestros ficheros estáticos:

y por otra parte definimos las rutas de nuestra aplicación:

En el fichero app/core.server.routes.js se define la ruta principal de nuestra aplicación, que va a ser una página html, y básicamente va a ser la única página html de nuestra aplicación (a parte de la página de error interno 500 y la de recurso no encontrado 404). Sólo vamos a necesitar una única página html porque estamos desarrollando una aplicación SPA (Single Page Application), las cuales se ejecutan sobre una única página web. app/core.server.routes.js está definido de la siguiente forma:

que indica que cuando alguien acceda a la ruta principal de nuestra aplicación /, entonces se ejecute la acción index del controlador core. El controlador app/controllers/core.server.controller.js está definido de la siguiente forma:

que indica que se envíe al navegador la página index (app/views/index.server.view.html), que es la página principal de nuestra aplicación. Dentro de esta página es donde se ejecuta nuestra aplicación AngularJS.

Posteriormente, por cada módulo nuevo que generemos a través del generador y mediante la instrucción yo meanjs:crud-module module-name el generador nos va a generar dentro del directorio app/routes un nuevo fichero de rutas. Así, cuando en su día generamos el módulo customers, el generador nos creó el siguiente fichero:

donde se definen las rutas para nuestro servicio web REST para customers.

De esta forma, cuando un usuario esté trabajando con nuestra aplicación web, a la hora de acceder a los datos de nuestro back-end, AngularJS va a hacer peticiones a las rutas definidas en nuestros módulos. Para hacer estas peticiones, AngularJS va a utilizar un módulo que incorpora por defecto llamaado $resource, que es una factoría que nos permite interactuar con servicios web REST.

 

Creación de un módulo con MEAN.JS – Parte 3

Standard

En este vídeo vemos cómo crear un módulo con el generador MEAN.JS. La creación del módulo nos va a generar tanto la parte del back-end como la del front-end.

La aplicación que vamos a desarrollar se compone de cuatro módulos: customers, products, sales y dashboard. En este vídeo vamos a ver cómo crear con el generador la estructura inicial del módulo customers, y en vídeos posteriores iremos viendo paso a paso cómo desarrollar cada una de las funcionalidades del módulo.

Demo Application

Estructura de una aplicación MEAN.JS – Parte 2

Standard

En este vídeo vamos a comentar por encima la estructura de una aplicación MEAN desarrollada con el generador MEAN.JS.

En el directorio raíz de nuestro proyecto, el fichero principal es server.js, que es el fichero en el que se establece la conexión con la base de datos MongoDB, desde donde se lanza la configuración del framework express, desde donde se lanza la configuración de la seguridad y desde donde se arranca el servidor para que escuche en un puerto determinado.

En el directorio app, tenemos el código relativo a nuestro back-end. El código del back-end está configurado por tipo de fichero, de esta forma, vamos a tener todos nuestros controladores dentro del directorio controllers, la definición de nuestras entidades van a estar dentro del directorio models, y de la misma forma vamos a tener nuestros ficheros en los directorios routes, tests y views.

Finalmente, dentro del directorio public/modules vamos a tener cada uno de los módulos que generemos (por ejemplo, clientes, productos, pedidos, etc) y cada uno de estos módulos va a contener su propio directorio controllers, services, tests, views, etc.

En definitiva, utilizando el generador MEAN.JS obtenemos de forma muy rápida una estructura con la que empezar a trabajar en nuestros proyectos y con todas las tecnologías que intervienen en nuestro proyecto de forma correctamente integradas entre sí.

En siguientes capítulos veremos cómo ir desarrollando paso a paso nuestra aplicación de DEMO:

Demo Application

Desarrollo de una aplicación con MEAN.JS – Parte 1

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.