Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Trabajando con datos en Sails.js

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

Sails.js es un framework Node.js prometedor, con un enfoque en la libertad y los valores predeterminados inteligentes. En este artículo veremos algunas de las funciones de datos que Sails proporciona de fábrica, para crear fácilmente aplicaciones complejas.


Por qué las velas son diferentes a otros marcos

La razón para elegir Sails la pone mejor el creador de las velas, Mike McNeil, "Sails se creó por necesidad" .v Muchos marcos que se ven a los lados, están diseñados casi para el lado académico, estos marcos generalmente fomentan las mejores prácticas y crean una plataforma para que los desarrolladores creen cosas más rápido o mejor.

Sails, por otro lado, fue creado para producción, no trata de proporcionarle una nueva sintaxis o plataforma, es una base sólida, pensada para crear 'trabajo de cliente' con velocidad. El contraste puede ser sutil, pero hay algunas diferencias claras.

Para ilustrar a qué me refiero, echemos un vistazo a Meteor. Meteor es probablemente la plataforma líder de JS en la actualidad, pero es un excelente ejemplo de un marco, por el bien de un marco. Ahora bien, esto no es malo, soy un gran defensor de Meteor, lo que quiero decir es que se propusieron crear un marco y lo hicieron bien. Mike, por otro lado, se propuso hacer que el trabajo del cliente sea más rápido. . Sails es solo un medio para llegar a un final.

En Meteor, casi todo se abstrae y se usa JavaScript más Meteor API para codificar todo. Mientras que Sails no pretende ser una plataforma nueva, entonces nada está oculto.

Se basa en Socket.io y en el popular marco Express, y usted tiene acceso a ellos en su totalidad, de forma nativa. ¿Estás comenzando a ver la diferencia?

Además, dado que Sails está orientado primero a la producción, está construido con múltiples opciones de escalado y seguridad.

Hay mucho de qué hablar, pero en este artículo me gustaría centrarme en cómo maneja Sails los datos, y cómo puede aprovechar algunas de las características más avanzadas de Sails para realizar algunas acciones geniales.


Instalación

En caso de que aún no tenga las velas instaladas, puede hacerlo a través de NPM ejecutando:


Socket.io y Express

Ahora hablemos un poco sobre Socket.io y Express antes de entrar en Sails. Hay una buena serie premium en Express de Andrew Burgess si está interesado, pero voy a consultar los conceptos básicos relevantes de ambas bibliotecas aquí:

Socket.io

Socket.io es una biblioteca de pub / sub, que se ejecuta tanto en el servidor como en el cliente, y les permite hablar a través de sockets web.

Un breve ejemplo podría verse más o menos así:

Este código comienza requiriendo la biblioteca socket.io, escuchando para una conexión, y luego cuando otro socket se conecta, le enviará un mensaje, dirigido al evento welcomeMessage, y finalmente pasará algo de JSON.

Luego, en el cliente escribirías algo como:

Aquí nos estamos conectando al servidor y escuchando el evento welcomeMessage que acabamos de crear. Como puede ver, es un servidor de publicación / suscripción bastante simple, que es bidireccional (el cliente también podría emitir mensajes para el servidor).

Ahora echemos un vistazo a Express:

Express

La forma más simple de una ruta Express podría ser algo como:

Esto define una ruta simple, de modo que cuando un usuario vaya a la dirección de su sitio e intente acceder a la página / users, se le presentará el mensaje "¡Hola de / usuarios!".

So Express es un framework para manejar solicitudes HTTP y Socket.io es una biblioteca de comunicaciones websocket. Sin embargo, lo que el equipo de Sails ha hecho es mapear internamente todas las rutas Express a Socket.io. Lo que esto significa es que puede llamar a cualquiera de las rutas HTTP a través de sockets web.

¡Ahora eso es genial! Pero todavía falta una pieza del rompecabezas y ese es el Sails Blueprints.

Sails le permite generar modelos al igual que en otros marcos, la diferencia es que Sails también puede generar una API RESTfull lista para producción para ir con ellos. Esto significa que si genera un modelo llamado 'usuarios', puede ejecutar inmediatamente consultas RESTfull en el recurso '/ usuarios' sin necesidad de codificación.

Si es nuevo en las API RESTful, es solo una forma de acceder a los datos, donde las operaciones CRUD se asignan a varios métodos HTTP.

Entonces una solicitud GET a '/ users' obtendrá a todos los usuarios, una solicitud POST creará un nuevo usuario, etc.

Entonces, ¿Qué significa todo esto?

Significa que tenemos una API RESTfull completa, asignada a Socket.io a través de Sails, ¡sin escribir una sola línea de código!

¿Pero por qué son mejores los enchufes para recuperar datos que una solicitud de Ajax? Bueno, además de ser un protocolo más sencillo, los enchufes se mantienen abiertos para la comunicación bidireccional, y Sails se ha aprovechado de esto. Sails no solo le pasará los datos, sino que se suscribirá automáticamente a las actualizaciones en esa base de datos, y siempre que se agregue, elimine o actualice algo, su cliente recibirá una notificación a través del socket web, informándole al respecto.

¡Es por eso que Sails es tan increíble!


Sails + Backbone

Sails + El siguiente tema que me gustaría tratar es la integración de Backbone, porque si no estás usando un framework de JavaScript, lo estás haciendo mal.Backbone

Con esto en mente, Sails y Backbone son la pareja perfecta. Backbone, como Sails, es extremadamente discreto, todas sus características están disponibles, pueden ser anuladas y son opcionales.

Si ha utilizado Backbone antes, entonces sabrá que se conecta de forma nativa con las API REST, por lo que, de manera predeterminada, puede sincronizar los datos en el front-end con su aplicación Sails.

Pero basta hablar por ahora, echemos un vistazo a todo esto en acción creando una aplicación de chat básica. Para comenzar, abra una ventana de terminal y escriba:

Esto creará una nueva aplicación y generará algunos archivos para nosotros. Puedes ver desde arriba, hay dos recursos diferentes que puedes generar; modelos y controladores. Si está familiarizado con el patrón de diseño MVC, entonces debe saber cuáles son estos, pero en resumen, los modelos son sus datos y los controladores tienen su código lógico. Así que vamos a necesitar dos colecciones, una para retener a los usuarios y otra para los mensajes.

Luego, para los controladores, necesitamos uno para manejar las rutas de la página, lo llamé 'principal', luego tenemos un segundo controlador llamado 'mensajes'. Ahora podría preguntarse por qué creé un controlador con el mismo nombre que nuestro modelo de mensajes. Bueno, si lo recuerdas, dije que Sails puede crear una API REST para ti. Lo que sucede es que, al crear un controlador en blanco con el mismo nombre que un modelo, Sails sabrá retroceder y crear una API REST para el recurso correspondiente.

Entonces, creamos un controlador para nuestro modelo de mensajes, pero no es necesario crear uno para el modelo de usuarios, así que lo dejé fuera. Y eso es todo lo que hay para crear modelos y controladores.

A continuación, configuremos algunas rutas.

Rutas

Las rutas son siempre un lugar seguro para comenzar, porque generalmente tiene una buena idea de las páginas que se van a crear.

Así que abra el archivo routes.js que está en la carpeta config, puede parecer un poco abrumador al principio, pero si elimina todos los comentarios y los agrega en las siguientes rutas, se quedará con algo como esto:

Tenemos una página de inicio, una de chat y luego dos páginas para manejar tanto las páginas de inicio de sesión como de registro. Los puse todos en el mismo controlador, pero en Sails, puedes crear tantos controladores como quieras.

Modelos

A continuación, echemos un vistazo al modelo de mensajes generados que se puede encontrar en "api> models> Messages.js". Necesitamos agregar las columnas necesarias a nuestro modelo. Ahora esto no es absolutamente necesario, pero creará algunas funciones de ayuda para nosotros que podemos utilizar:

Para el modelo de mensajes, comenzamos con la identificación del usuario al que pertenece este mensaje, un nombre de usuario, por lo que no tendremos que consultar esto por separado, y luego el mensaje real.

Ahora completemos el modelo del usuario:

Y eso es todo, solo tenemos los atributos de nombre de usuario y contraseña. El siguiente paso es crear nuestras funciones de ruta dentro del MainController.

Controladores 

Así que abra el MainController, que se puede encontrar en "api> controllers> MainController.js". Comencemos creando una función para cada una de las rutas que definimos anteriormente:

Si está familiarizado con Express, le complacerá ver que estas funciones son funciones de ruta Express estándar. Reciben dos variables, requieren la solicitud HTTP y res para crear la respuesta.

Siguiendo el patrón MVC, Sails ofrece una función para renderizar vistas. La página de inicio no necesita nada especial, así que simplemente rendericemos la vista.

Sails se inclina más hacia la convención que a la configuración, por lo tanto, cuando llame a res.view (); Sails buscará un archivo de vista (con una extensión .ejs por defecto) utilizando el siguiente patrón: 'views> controllerName> methodName.ejs'. Entonces, para esta llamada, buscará 'views> main> index.ejs'. También vale la pena señalar que estas vistas solo contienen la vista de partes específicas de la página. Si echa un vistazo a 'views> layout.ejs', verá una llamada en el medio para <% - body%>, aquí es donde se insertará su archivo de vista. Por defecto usa este 'layout.ejs' archivo, pero puede usar otros archivos de diseño simplemente pasando el nombre del diseño a la función res.view (), bajo la propiedad llamada 'diseño'. Por ejemplo: 'res.view ({layout: "other.ejs"});'.

Voy a utilizar el archivo de diseño predeterminado con un pequeño ajuste, voy a agregar jQuery, Backbone y Underscore. Entonces en el 'layout.ejs' <archivo justo antes de la etiqueta de cierre </head>, agregue las siguientes líneas:

Con eso en su lugar, ahora estamos listos para crear la página de inicio.

La página de inicio

Vamos a crear una nueva carpeta dentro de la carpeta de vistas llamada main, y dentro de nuestra nueva carpeta principal, crearemos un nuevo archivo llamado 'index.ejs'.

Dentro del archivo, solo crearemos un formulario de inicio de sesión y registro:

Bastante simple, solo lo esencial.

Las áreas de inicio de sesión y registro

Luego debemos agregar un poco de JS para comunicarnos con el servidor. Ahora bien, esto no será específico de Velas, solo enviaremos una solicitud de AJAX a través de jQuery al servidor de Sails.

Este código puede incluirse en la página o cargarse a través de un archivo JS separado. Por comodidad, solo voy a ponerlo en la parte inferior de la misma página:

Todo esto es solo JS y jQuery estándar, estamos escuchando el evento de clic en el botón de inicio de sesión, asegurándonos de que los campos de nombre de usuario y contraseña estén completos, y que publiquemos los datos en la ruta '/ login'. Si el inicio de sesión es exitoso, redirigiremos al usuario a la página de chat, de lo contrario, mostraremos el error devuelto por el servidor.

A continuación, creemos lo mismo para el área de registro:

Este código es casi idéntico, tanto que probablemente puedas abstraer toda la parte de Ajax en su propia función, pero para este tutorial está bien.

Ahora tenemos que volver a nuestro 'MainController' y manejar estas dos rutas, pero antes de hacerlo, quiero instalar un módulo Node. Vamos a necesitar un hash de la contraseña, ya que las contraseñas de texto plano no son algo bueno, ¡ni siquiera para la demostración! Encontré un buen módulo llamado 'contraseña-hash' por David Wood, que funcionará muy bien.

Para instalarlo, solo vaya a la raíz de su aplicación Sails, desde su terminal y escriba: npm install password-hash.

Una vez que se instala, vamos a abrir el MainController e implementar las dos rutas necesarias. Comencemos con el registro:

Es un poco detallado, pero todo lo que hacemos aquí es leer el nombre de usuario y la contraseña de la solicitud POST y asegurarnos de que el nombre de usuario no se haya tomado todavía. Usted puede ver que también estoy usando el hasher de contraseña que acabamos de instalar, es súper fácil de usar, simplemente pase la contraseña al método generate y lo reducirá usando un valor aleatorio.

También vale la pena mencionar que en cada ubicación posible en la que podemos encontrar un error o problema, estamos enviando un código de error HTTP y enviando un mensaje a través de un encabezado personalizado llamado "error" que, si lo recuerdas, estamos mostrando en un mensaje de alerta en la página de índice.

Otro punto digno de mención es el hecho de que estamos usando una función 'mágica' llamada 'findByUsername', esto es posible porque tenemos una columna de nombre de usuario dentro de nuestro modelo de Usuarios.

Finalmente, en la parte inferior puede ver si todo salió bien, estamos almacenando al usuario en una variable de sesión y devolviéndola con un código de estado predeterminado de 200, que le indicará a jQuery que la solicitud AJAX fue exitosa.

A continuación, escriba la función de inicio de sesión:

De nuevo, esto es muy similar a la función de registro anterior, estamos buscando un usuario con el mismo nombre de usuario que se publicó en el formulario y si encuentra uno, comprobamos si la contraseña coincide con el método de verificación del hasher. La razón por la que no podemos simplemente volver a cifrar la contraseña y pasarla a la función de búsqueda de modelos es porque hasher usa una sal aleatoria, por lo que si usamos la contraseña otra vez, sería igual a otra cosa.

El resto del código es el mismo; si todo sale bien, almacenamos al usuario en una sesión y lo devolvemos; de lo contrario, le devolveremos un mensaje de error.

El sistema de inicio de sesión ahora está completo y finalmente podemos pasar a la creación de la función de chat.

Construyendo la característica de chat

Como usaremos Backbone para recibir los mensajes, la función de ruta real será muy simple. Aquí está la función de chat completa:

Comenzamos comprobando si el usuario está conectado o no, si se retira, luego cargará la vista, pasándole el nombre de usuario que estaba en la sesión, de lo contrario, solo redirigiremos a la página de inicio.

Ahora creemos una nueva vista llamada 'chat.ejs' dentro de la carpeta principal. Ábrelo y creemos un formulario simple para publicar mensajes nuevos y un contenedor div para mostrarlos todos.

Entonces, para esta vista, solo usamos un HTML bastante estándar. Lo único que puede requerir alguna explicación es el código <% = username%>, este estilo de codificación no es específico de Sails, en realidad es la sintaxis de EJS. Esta sintaxis es muy similar a las etiquetas cortas de PHP. <% es el equivalente de <? en PHP y <% = es el mismo que <?= El primer fragmento de EJS le permite integrar el código JS estándar en la página, mientras que el segundo imprime el código dentro. Aquí solo imprimimos el nombre de usuario que pasamos desde el controlador.

El resto de nuestra función de chat será todo JavaScript. Para comenzar, echemos un vistazo a cómo escribiría la funcionalidad de chat utilizando Backbone estándar, y luego veremos cómo aprovechar los sockets web.

En la parte inferior de la página, agregue el siguiente JS:

Dado que Sails crea automáticamente una API que el Backbone entiende de forma nativa, no se debe escribir ningún código de servidor adicional, no es mucho más fácil que eso. De esto es de lo que estaba hablando cuando dije que Sails no estaba hecho para ser un 'marco'. No intenta hacer que use su propia sintaxis, sino que se hizo para hacer las cosas y, como puede ver, lo hace.

Para probarlo, abra una ventana de terminal y navegue a la carpeta de la aplicación Sails, luego escriba 'sails lift' para iniciarlo. Por defecto, se iniciará en http: // localhost: 1337. Ahora solo regístrese y publique algunos mensajes.

Para ver sus mensajes publicados, puede console.log la variable de mensajes, o mirarlo dentro de la consola del navegador. Ahora, lo siguiente que debemos implementar es una vista para que podamos ver los mensajes publicados en el navegador.

Comenzamos definiendo una vista, adjuntándola al div que creamos antes, luego agregamos un controlador de eventos en la colección para volver a representar el div cada vez que un nuevo modelo se agrega a la colección.

Se puede ver en la parte superior, tuve que cambiar la configuración predeterminada del subrayado para usar la sintaxis de EJS dentro de las plantillas, para usar la sintaxis de Moustache. Esto se debe a que la página ya es un documento EJS, por lo que se procesará en el servidor y no en Underscore.

Nota: No he encontrado el Regex para esto, ese crédito va a los documentos de Underscore.

Por último, en la parte inferior puede ver que creamos una nueva instancia de esta vista, pasando la variable de recopilación.

Si todo ha ido bien, ahora debería ver sus mensajes en el navegador, y debería actualizar cada vez que cree una nueva publicación.


Políticas de Sails 

Ahora puede haber notado que no estamos configurando el ID de usuario o el nombre de usuario cuando enviamos las publicaciones, y esto es por motivos de seguridad.

No quiero poner este tipo de control por parte del cliente. Si alguien tiene que hacer es modificar una variable de JavaScript para controlar la cuenta de otro usuario, tendrás un gran problema.

Así que, ¿cómo debería manejar esto? Bien, con las políticas de curso.

Las políticas son básicamente middleware, que antes de la solicitud web actual, donde podrás dejar, modificar o incluso redirigir la solicitud, según sea necesario.

Para esta aplicación, vamos a crear una política para nuestros mensajes. Las políticas se aplican a los controladores, por lo que incluso se pueden ejecutar en páginas normales, pero por este tutorial vamos a acaba con uno de nuestros mensajes modelo.

Crear un archivo llamado 'MessagesPolicy.js' dentro de la carpeta 'api> policies' e ingrese lo siguiente:

¿Por lo tanto, lo que está sucediendo aquí? Se puede ver esta función se asemeja a una función de la ruta normal, la diferencia es el tercer parámetro, que se llamará el siguiente middleware en la pila. Si eres nuevo en la idea del middleware, puede pensar de ella como una muñeca rusa de la jerarquización. Cada capa recibe la solicitud, junto con las variables de respuesta y pueden modificar según les convenga. Si pasan todos los requisitos, la capa puede pasarlo más lejos, hasta que alcanza el centro, que es la función de ruta.

Así que aquí estamos, comprobar si el usuario está logueado, si no es el usuario, nos muestre un error 403 y la petición termina aquí. De lo contrario, (es decir, el usuario está logeado) llamamos next(); a pase de. El código anterior es donde se inyectan algunas variables post. Estamos aplicando esto a todas las llamadas del controlador de 'mensajes' (básicamente el API), así que la acción y comprobar si esta solicitud es tratando de crear un nuevo mensaje, en cuyo caso añadimos los campos de post para usuario y id del usuario.

A continuación, abrir el archivo policies.js que se encuentra en la carpeta config y añadir en la política que acaba de crear. Por lo que el archivo debería parecerse a esto:

Con esto que para lugar, tendremos que eliminar todos los registros antiguos, ya que no tienen estas nuevas piezas de información. Por lo tanto, cerrar el servidor de velas (ctrl-c) y en el mismo tipo de ventana de terminal: rm - r .tmp para quitar la base de datos temporal que nos da una pizarra limpia.

A continuación, vamos a agregar el nombre de usuario a los mensajes reales, en el 'chat.ejs' cambiar la plantilla para:

Reinicie el servidor de velas (otra vez usando saills ascensor) y alta otro usuario nuevo para probarlo. Si todo está trabajando correctamente, podrá agregar mensajes y vea su nombre en el post.

En este punto tenemos una configuración bastante buena, buscar el post automáticamente usando el API y la columna vertebral, además contamos con algunos básicos de seguridad. El problema es que no actualiza cuando otras personas envían mensajes. Ahora puede solucionar esto mediante la creación de un intervalo de JavaScript y encuesta para las actualizaciones, pero que podemos hacer mejor.

Aprovechamiento de Websockets

Mencioné anteriormente que velas aprovecha la capacidad bidireccional de websockets publicar actualizaciones en los datos suscritos. Con estas actualizaciones, podemos escuchar nuevas incorporaciones a la tabla de mensajes y actualizar la colección en consecuencia.

Así que en el archivo de chat.ejs, vamos a crear un nuevo tipo de colección; un SailsCollection:

Ahora puede ser largo, pero es realmente muy simple, vamos a caminar a través de él. Empezamos añadiendo dos nuevas propiedades al objeto de la colección, uno para mantener el nombre de las velas 'modelo' y otro que sostenga la conexión de la web. A continuación, modificamos la función de sincronización, si está familiarizado con la columna vertebral, entonces sabrás que esta es la función que interfaces con el servidor cuando se llaman a las cosas tales como buscar. Generalmente, dispara las peticiones de Ajax, pero vamos a personalizarlo para la comunicación de la toma.

Ahora, no estamos utilizando la mayoría de la funcionalidad que ofrece la función de sincronización, principalmente porque no hemos agregado la capacidad para los usuarios para actualizar o eliminar mensajes, pero para estar completo, voy a incluir en la definición de función.

Echemos un vistazo a la primera parte de la función de sincronización:

Este código comprueba en primer lugar si cláusulas 'donde' fueron enviadas a través de, esto permitiría hacer cosas como: messages.fetch ({donde: {id: 4}}); para buscar sólo las filas donde el id es igual a cuatro.

Después de eso, tenemos un código que asegura que se ha establecido la propiedad 'sailsCollection'; de lo contrario, registramos un mensaje de error. Luego, creamos un nuevo socket y conectarse al servidor, escucha para la conexión con el evento on('connect').

Una vez conectado, nos solicite el índice de la 'sailsCollection' especificado en la lista actual de modelos. Cuando recibe los datos, usamos función de la colección para configurar inicialmente los modelos.

Bueno, hasta ahora, tenemos el equivalente del comando fetch estándar. El siguiente bloque de código es donde suceden las notificaciones push:

La acción que se está realizando (si estamos creando, actualizando o destruir un mensaje) puede encontrarse dentro de la actual msg, que está entonces dentro de la uri. Para obtener la acción, dividimos el URI en diagonales ('/') y tomar sólo el último segmento utilizando la función pop. Nos y luego intenta hacer coincidir con las tres acciones posibles de crear, actualizar o destruir.

El resto es estándar columna vertebral, ya sea agregar, editar o eliminar el modelo especificado. Con nuestra nueva clase casi completa, todo lo que queda es cambiar la actual MessageCollection. En lugar de ampliar la colección de la columna vertebral, es necesario extender nuestra nueva colección, así:

Además de extender nuestra nueva colección, vamos a hacer otro cambio para que en lugar de establecer la propiedad URL, ahora ponemos la propiedad sailsCollection. Y eso es todo allí está a él. Abrir la aplicación en dos diferentes navegadores (Chrome y Safari) y alta dos usuarios separados. Usted debe ver que publicada mensajes desde cualquiera de los navegadores Haz demostrados inmediatamente en el otro, sin votación, ningún problema.

Chat Screenshot

Conclusión

Velas es una bocanada de aire fresco, dentro de un desorden de Marcos. Comprueba su ego en la puerta y hace todo lo posible para ayudar al desarrollador en lugar de la marca. He estado charlando con los devs de velas y puedo decirles que hay más genialidad en la obra, y será interesante ver a donde va este marco.

Así que en conclusión, has aprendido cómo configurar, utilizar y proteger tus datos desde velas, así como a la interfaz con la biblioteca popular de la columna vertebral.

Como siempre, si tiene algún comentario, no dude en dejar abajo o Únete a nosotros en el canal de Nettuts + IRC ("#nettuts" en freenode). Gracias por la lectura.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.