Aplicaciones SailsJS y AngularJS con generator-angular-crud
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
[ { code: 'customer 1' }, { code: 'customer 2' }, { code: 'customer 3' } ] |
Pero nosotros la necesitamos de esta otra forma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ total: 1000, results: [ { code: 'customer 1' }, { code: 'customer 2' }, { code: 'customer 3' } ] } |
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:
- sails generate new <ApplicationName>
- cd ApplicationName
- sails generate api <EntityName>
- agregar propiedades a la entidad
- copiar el blueprint find.js
- npm install lodash –save
- actualizar el fichero config/models para habilitar el siguiente parámetro: migrate: ‘alter’
- actualizar el fichero config/cors para establecer los parámetros allRoutes: true y origin: ‘*’
- 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:
- npm install -g generator-angular-crud
- yo angular-crud: crea el esqueleto de nuestra aplicación
- yo angular-crud:feature <EntityName>: crea una nueva entidad
- Agregar propiedades a la entidad modificando el fichero: src/client/app/feature-name/services/feature-name.form.client.service.js
- Agregar columnas a la tabla HTML que visualiza las propiedades de nuestra entidad modificando el fichero: src/client/app/feature-name/views/list.html
- 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.
Ya te olvidaste de mean.js?
Buenas,
No es que me hay olvidado de mean.js. El caso es que considero que es más versátil este otro generador ya que no te ata a ningún backend. Aunque actualmente angular-crud está adaptado para trabajar con SailsJS, es muy fácil cambiar de backend (tengo pensado hacer adaptadores para algunos backends) y no te obliga a que utilices o implementes el tuyo propio.
Ya me han preguntado algo parecido. Puedes leer una respuesta más detallada en la siguiente URL: http://www.jlmonteagudo.com/2015/04/sailsjs-and-angularjs-applications-with-generator-angular-crud/#comments
se puede implementar Lumx como guía de estilo al generador angular-crud y de esa forma en vez de usar fromly-template-bootstrap usar formly-template-lumx el cual cuanta con una serie de opciones bien interesantes a parte de una increíble vista, muchas gracias por el extraordinario curso que estas desarrollando.
Hola Héctor,
Sería muy sencillo cambiar bootstrap por lumx. Sólo hay que instalar la dependencia con bower y modificar el fichero/services/ .form.client.service.js
Quizá en una futura versión del generador pueda hacer que el usuario seleccione el template con el que quiere trabajar.
Que tal Jose Luis!?, he seguido tus videos y estan muy buenos, en especial este ultimo, queria hacerte una consulta a ver si podrias echarme la mano…
Mi duda es.. «como hacer para que en un formulario se carguen datos de manera dinamica», por ejemplo….
si desarrollamos el modulo productos y ventas, a la hora de realizar una venta quisiera asociar la venta al identificador del cliente (una caja de texto donde se introduzca un numero y alli se vayan cargando todos los identificadores que contengan ese numero)
Gracias de antemano por la ayuda que puedas brindarme.
Hola maestro, gracias por el tuto, todo excelente excepto por dos problemas que me surgieron a ver si podes darme una mano:
1-Cada tanto queda colgado en «Please wait» hasta que apago y prendo el server sails, estoy usando mongodb
2-La aplicacion hace una especie de mirroring, seria; si accedo desde 2 computadoras a la pagina lo que se hace en una se hace en otra, ir al index, al escribir, absolutamente todo.
Alguna idea? Gracias!
Hola Federico,
El primer problema que comentar a mí también me ha pasado y en lugar de reiniciar Sails lo que hago es refrescar la pantalla del navegador con F5 y ya funciona correctamente. Este problema me ha pasado sólo en la fase de desarrollo, sin embargo, una vez creo que build en producción ya no tengo este problema. En cualquier caso tengo que revisar si veo la causa.
Respecto al segundo problema, quién provoca este comportamiento es el módulo browser-sync de Gulp. browser-sync permite que, cualquier cambio que hagas en tu código, puedas ver cómo afecta en los distintos navegadores que tengas abiertos. Esta opción puedes deshabilitarla en el fichero gulpfile.js:
Por ejemplo, si estables el valor de clicks a false, no se sincronizarán los datos en los distintos navegadores cada vez que hagas click.
Gracias por el comentarios Federico.
Que tal Jose Luis. Lo primero felicitarte por el tutorial, queria preguntarte si existe alguna forma de que generator angular crud o alguna otra herramienta, te genere los campos y los formularios a partir del modelo creado en Sails, en vez de ponerte dos por defecto.
Muchas gracias de antemano,
Un Saludo, y otra vez enhorabuena por el tuto.
Hola Francisco,
No conozco ninguna herramienta que genere los campos para los formularios a partir de los modelos de Sails. Lo estuve comprobando cuando hice el generador porque sí lo considero interesante, pero no encontré nada parecido y desarrollarlo podía llevarme algo de tiempo, y la verdad es que tengo muy poco tiempo libre.
Saludos y gracias.
Buenas tardes, Sr José Luis
Un videotutorial excelente, he realizado mis pruebas y hasta he creado una nueva entidad, quisiera saber si con esta herramienta puedo crear un sistema robusto para gestion de transito y transporte (ingresar usuarios, tramites, registro de conductores y automotor, multas y comparendos, acuerdos de pago, etc)?, otra duda que tengo es que me exigen una base de datos, pero veo que no funciona con base de datos (mongodb o mySQL), como la puedo implementar? para esto me recomienda sailsJS? Agradezco su colaboración.
Hola Camilo,
Bajo mi punto de vista, considero que tanto AngularJS en la parte front, como SailsJS en la parte back, te posibilitan el desarrollo de un sistema robusto. De la popularidad de AngularJS no cabe ninguna duda y, dentro de la plataforma NodeJS, SailsJS está ganando cada vez más y más popularidad.
Respecto a AngularJS, tengo que decirte que, personalmente, tengo dudas en comenzar hoy en día un desarrollo de gran envergadura, como parece que es el sistema que pretendes desarrollar. AngularJS está en un periodo de transición, y la versión 2 no es compatible con la versión 1.X. Si vas a desarrollar un sistema que tengas que mantener durante un periodo de tiempo relativamente largo, analizaría muy bien si Angular 1.X es la mejor opción. Discutir sobre las posibles alternativas a AngularJS 1.X, daría pié a un debate bastante extenso.
Respecto a SailsJS y las bases de datos que utiliza, SailsJS incorpora el ORM Waterline (https://github.com/balderdashy/waterline) que tiene un adaptador para MySQL (https://github.com/balderdashy/sails-mysql), por lo que no vas a tener ningún problema con trabajar con SailsJS y MySQL.
Saludos,
JL Monteagudo
Ok José Luis, te agradezco la respuesta, quedo en dudas respecto a AngularJS, que me podrías recomendar para realizar este desarrollo? he visto generadores de ReactJS pero la verdad no tengo mucha experiencia con estos stack ya que vengo de programar en PHP y este proyecto debe ser totalmente en JavaScript, otra cosa que quiero aclarar es si puedo hacer este proyecto totalmente en MongoDB ya sabemos que es una DB noSQL (no se si me sirva para el proyecto en su totalidad al ser no relacional). Gracias por su colaboración.
wow!…. My friend, congratulations… Esto si está bueno de verdad!, hace poco mas de unos 15 días que me estoy metiendo con sails, cada día me enamoro más de este framework, algo como ésto he estado buscando y cayó del cielo, tengo muchas dudas, quisiera saber si me puedes orientar:
1.- ¿Como configuro un servidor de producción, que herramientas de monitoreo, balanceo de carga u otro, es decir, como puedo saber que servidor colocar en un ambiente crítico.?
2.- Estoy decidido a asumir el reto de un requerimiento de desarrollo en ambiente de mas de 8000 peticiones concurrentes, sesiones de unas 5000 y unas 90000 transacciones al día, has sabido de como configurar los websocket con sails?
Hermano disculpa si te abrumo con las preguntas, pero es que de verdad tu post me sacó de muchas dudas del comportamiento de sails en el backend con el apiresful.
Gracias…
Hola Camilo,
Sobre qué te recomiendo en la parte front, es una pregunta que no es fácil de contestar ya que pueden haber muchos condicionantes dependiendo del proyecto en cuestión, además de que existen múltiples frameworks JavaScript y a veces la selección de uno sobre otro puede basarse en criterios un tanto subjetivos.
Los frameworks que yo considero actualmente más interesante son, AngularJS, ReactJS, Aurelia y EmberJS. Con el que he trabajado, y el que realmente conozco, es AngularJS, y el problema que encuentro es el que te he comentado en el comentario anterior. Respecto a Aurelia, aunque parece un framework prometedor, todavía no existe una versión estable que puedas utilizar en producción. Su creador es Rob Eisenberg y formó parte del equipo de Angular2. Creo que ReactJS puede ser el framework que actualmente menos cambios va a sufrir, por lo que creo que, a día de hoy, puede que sea la apuesta más segura. En cualquiercaso, antes de empezar a desarrollar tu proyecto con cualquier de éstos, analiza bien la situación de cada uno de ellos para valorar cuál es la mejor opción para tu proyecto.
Respecto a la base de datos, puedes trabajar con SailsJS y MongoDB sin ningún problema. Waterline tiene un adaptador para MongoDB.
Saludos,
JL Monteagudo
Hola,
Jose Luis, con respecto a estos tutoriales de Angularjs, veo que utilizaste el template de Mean.js, mas sin embargo tengo una duda con respecto al mismo, y es que actualmente ya viene listo con la autenticacion con passport lo cual me parece muy bueno, pero como podemos modificar este código para que funcione dicha autenticacion.?
De antemano gracias por la ayuda.
Hola Jaider,
Lamentablemente este generador no incorpora ningún sistema de autenticación. Sí entiendo que sería interesante incorporarlo e integrarlo con SailsJS, ya que ahorraría bastante tiempo a la hora de implementarlo.
Saludos,
JL Monteagudo
gulp serve-dev
[14:10:25] …..
[14:10:25] Task ‘seve-dev’ is not in your gulpfile
[14:10:25] Please check the documentation for proper gulpfile formatting
Tambien me sale este error… no entiendp por que
[CustomerManagementClient Error] [$injector:unpr] Unknown provider: CustomerFormProvider <- CustomerForm <- CustomerController http://errors.angularjs.org/1.3.17/$injector/unpr?p0=CustomerFormProvider%20%3C-%20CustomerForm%20%3C-%20CustomerController
Gracias José Luis.
Por favor, te agradecería que me ayudes: Generé los 2 módulos de Sails (antRest) y de angular (antCli) en ésta carpetas respectivamente. Con sails se me generó la tabla en la Base de Datos (PG), Angular me generó un módulo geográfico, pero al grabar me salio éste mensaje:
Error: [antCli Error] Cannot read property ‘summary’ of null .
Este término, sumary, lo encontré en : app/src/geografico/controllers/geografico.client.controller.js.
Gracias nuevamente, desde…
Quito.-Ecuador
«LA Mitad del Mundo»
Buenas hermano que tal me interesaría conectar GENERATOR-ANGULAR-CRUD con una aplicación que tengo desarrollada en laravel como podría hacer esta transición si no es mucha molestia mi api me genera un json pero no logro hacer que conecte ya verifique la ruta y nada que podría estar pasando