Aplicaciones SailsJS y AngularJS con generator-angular-crud

Estándar

En este vídeo vamos a ver cómo utilizando el generador generator-angular-crud vamos a poder crear nuevas entidades en nuestra aplicación AngularJS de forma muy rápida y cómo automáticamente vamos a poder gestionar estas entidades realizando operaciones CRUD.

generator-angular-crud está basado en el generador generator-hottowel de John Papa y utiliza las guías de estilo de John Papa para el desarrollo de aplicaciones AngularJS.

Para desarrollar una aplicación con generator-angular-crud, primero vamos a tener que desarrollar el backend y posteriormente el frontend. El backend vamos a desarrollarlo con el framework SailsJS, con el cuál vamos a desarrollar un API REST, y el frontend vamos a desarrollarlo con el propio generator-angular-crud.

Desarrollando el API REST con SailsJS

generator-angular-crud tan sólo crea la parte frontend de nuestro proyecto. Sin embargo, necesitamos un backend a través del cuál podamos almacenar nuestra información en la base de datos. Por ahora, generator-angular-crud está adaptado para que automáticamente se integre con un backend desarrollado con SailsJS. He decidido integrar el generador con SailsJS porque es un framework contrastado y con el que resulta muy sencillo y muy rápido desarrollar APIs REST.

Sin embargo, tenemos un pequeño problema al desarrollar nuestro API con Sails, y es que cuando obtenemos un listado de todas nuestras entidades, Sails nos devuelve un array de nuestros objetos, pero no nos devuelve el número de total de registros. La información del número total de registros es necesaria para poder paginar nuestras tablas correctamente, por lo tanto vamos a tener que sobreescribir el blueprint find para adaptar el comportamiento de Sails.

Por defecto, Sails nos devuelve la información de la siguiente forma:

Pero nosotros la necesitamos de esta otra forma:

Para poder conseguir este comportamiento, copiaremos el fichero sails/api/blueprints/find.js en ROOT_PROJECT/api/blueprints/find.js.

A continuación se exponen todos los pasos necesarios para crear nuestro API REST con Sails:

  1. sails generate new <ApplicationName>
  2. cd ApplicationName
  3. sails generate api <EntityName>
  4. agregar propiedades a la entidad
  5. copiar el blueprint find.js
  6. npm install lodash –save
  7. actualizar el fichero config/models para habilitar el siguiente parámetro: migrate: ‘alter’
  8. actualizar el fichero config/cors para establecer los parámetros allRoutes: true y origin: ‘*’
  9. sails lift

Con estos nueve sencillos pasos habremos creado nuestro API REST con SailsJS.

Desarrollando el frontend con generator-angular-crud

Para generar el frontend vamos a utilizar el generador generator-angular-crud, que nos va a crear la estructura inicial de nuestra aplicación y que nos va a permitir crear nuevas entidades que se van a representar en forma de tabla. Desde esta tabla vamos a poder crear nuevos registros, obtener listados de nuestros registros, modificarlos, borrarlos, filtrar los datos de la tabla en el servidor, ordenar y paginar los registros de la tabla. Todas estas opciones las tendremos disponibles automáticamente si utilizamos generator-angular-crud.

Los pasos para crear nuestra aplicación frontend son los siguientes:

  1. npm install -g generator-angular-crud
  2. yo angular-crud: crea el esqueleto de nuestra aplicación
  3. yo angular-crud:feature <EntityName>: crea una nueva entidad
  4. Agregar propiedades a la entidad modificando el fichero: src/client/app/feature-name/services/feature-name.form.client.service.js
  5. Agregar columnas a la tabla HTML que visualiza las propiedades de nuestra entidad modificando el fichero: src/client/app/feature-name/views/list.html
  6. gulp serve-dev: ejecuta nuestra aplicación

Con estos pasos habremos creado nuestro frontend.

Vemos que utilizando generator-angular-crud automáticamente tenemos a nuestra disposición un conjunto de operaciones que habitualmente solemos realizar con nuestra entidades y nos permite aumentar notablemente nuestra productividad al evitar tener que realizar operaciones repetitivas que suelen consumir bastante tiempo.

Aumenta tu Productividad con generator-meanjs-table – Parte 12

Estándar

En este vídeo vamos a ver cómo utilizando el generador generator-meanjs-table vamos a poder crear nuevas entidades en nuestra aplicación de forma muy rápida y cómo automáticamente vamos a poder gestionar estas entidades realizando operaciones CRUD.

Los pasos a realizar son los siguientes:

  1. Instalar el generador:
  2. Crear una nueva carpeta para nuestro proyecto y desde dentro de esta carpeta lanzar la siguiente instrucción:
  3. Crear una nueva entidad:

Por defecto el generador crea esta nueva entidad con una única propiedad llamada name. Para agregar nuevas propiedades a nuestro proyecto tendremos que modificar tres ficheros:

  1. Agregar las nuevas propiedades al esquema de Mongoose en el fichero app/models/module-name.server.model.js
  2. Agregar las nuevas propiedades al array de propiedades de angular-formly en el fichero public/modules/module-name/services/module-name.form.client.service.js
  3. Agregar nuevas columnas a la tabla HTML en el fichero public/modules/module-name/views/list-module-name.client.view.html

Aumenta tu Productividad adpatando tu Generador de Yeoman – Parte 11

Estándar

En el siguiente vídeo vamos a explicar cómo adaptar el generador de MEAN.JS para que automáticamente genere nuestros módulos en forma de tabla desde la que podamos filtrar, paginar y ordenar, así como crear, consultar, modificar y borrar registros en nuestra base de datos.

En posts anteriores hemos visto cómo desarrollar un módulo que nos permita hacer las operaciones básicas CRUD sobre nuestras entidades, para lo cual hemos utilizado el generador de MEAN.JS. El generador de MEAN.JS nos crea nuestro listado de entidades con una estructura similar a un blog, es decir, nos muestra un listado de todos los registros de nuestra base de datos ordenados por fecha de creación.

Sin embargo, es mucho más común que si queremos desarrollar un módulo que nos permita mantener nuestras entidades, éstas se muestren en forma de tabla y que desde esta tabla podamos realizar todas las operaciones básicas. En los posts anteriores hemos ido viendo cómo adaptar el código creado por el generador MEAN.JS con el fin de mostrar los registros en forma de tabla que nos permita filtrar, ordenar y paginar, así como visualizar, modificar y borrar los registros de nuestra base de datos.

Para mostrar los registros en forma de tabla y poder realizar las operaciones CRUD desde ésta, hemos tenido que adaptar tanto nuestro backend como nuestro frontend, y hemos podido comprobar que el trabajo que hemos tenido que realizar ha sido bastante costoso. Imaginad que tenemos que desarrollar una aplicación empresarial en la que intervienen varias decenas de entidades. Si tuviéramos que realizar estas adaptaciones para cada una de las entidades, el tiempo que emplearíamos en la realización de tareas repetitivas sería muy elevado.

Para evitar la realización de estas tareas repetitivas y para aumentar nuestra productividad, lo que podemos hacer ante esta situación es adpatar el generador que estamos utilizando, en nuestro caso MEAN.JS, para que genere nuestros módulos de la forma que más convenga y que mejor se adapte a las necesidades de la aplicación que tengamos que desarrollar.

Filtrar registros de una tabla con AngularJS y ngTable – Parte 10

Estándar

En este vídeo adaptamos nuestra tabla para que podamos filtrar los registros (en el lado del servidor) por los valores de cada una de las columnas de la tabla.

Para poder filtrar los registros tenemos que adaptar el backend y el frontend. Sin embargo, el backend ya lo adaptamos en su día en el tutorial 7 de esta serie: http://www.jlmonteagudo.com/2014/10/paginacion-con-mongodb-parte-7/ cuando implementamos el método list del controlador:

Modificar el frontend para permitir filtrar registros en nuestra tabla es muy sencillo. Lo primero que tenemos que hacer es agregar la propiedad show-filter=true al tag table, y agregar la propiedad filter={ ‘model-property-name‘: ‘text’ } al tag td de cada una de las columnas por las que queramos filtrar:

Simplemente agregando estas propiedades a nuestra tabla conseguimos poder filtrar los registros en el lado del servidor.

Ordenación con AngularJS y ngTable – Parte 9

Estándar

En este vídeo adpatamos nuestra tabla para que nos permita ordenar los registros por cada una de las columnas definidas en nuestra tabla.

Para poder ordenar los registros de nuestra tabla vamos a tener que adaptar tanto nuestra parte front-end como nuestra parte back-end. En la parte front-end vamos a tener que actualizar la vista donde tenemos definida la tabla de los clientes (public/modules/customers/views/list-customers.client.view.html), y donde definimos las columnas agregaremos la propiedad sortable. Así, la tabla nos quedaría definida de esta forma:

Una vez definida la tabla, ng-table nos va a permitir ordenar los registros haciendo clic sobre la cabecera de cada una de las columnas. Cuando hacemos clic sobre la cabecera, ng-table va a hacer una petición al API y le va a enviar los parámetros de ordenación. Estos parámetros va a tener que interpretarlos nuestro API para hacer la ordenación de los registros en la base de datos. Finalmente, así es cómo quedaría definido nuestro método list del controlador app/controllers/customers.server.controller.js:

Con estos cambios ya tendríamos adaptada nuestra aplicación para poder ordenar en el lado del servidor los registros de nuestra tabla.

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

 
Github

Paginación con AngularJS y ngTable – Parte 8

Estándar

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

Estándar

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

Estándar

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

Estándar

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

Estándar

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.