Si has estado al día, soy un gran defensor del desarrollo Node.js y la pila de desarrollo JavaScript. Anteriormente había escrito sobre el Pila Couchbase, Express, AngularJS y Node.js (CEAN) y modernización de la API backend con Hapi.jsuna alternativa popular a Express. Soy un gran fan de Angular, pero recientemente he estado explorando el cada vez más popular framework Vue.js.
Vamos a ver cómo crear una aplicación de pila completa utilizando la pila de JavaScript que consiste en Node.js, Hapi, Vue.js, y Couchbase NoSQL. Dado que todos los caracteres iniciales de las tecnologías son consonantes, no intentaré darle un acrónimo.
La aplicación que construyamos tendrá un modelo de datos semisimplista. Vamos a almacenar información sobre personas y direcciones y a configurar cómo se relacionan las direcciones con determinadas personas.
El backend Node.js con Hapi va a demostrar el uso de N1QL y las mutaciones de subdocumentos dentro de la base de datos. El Vue.js frontend nos dará una salida semi-atractiva hacia el trabajo con nuestra API.
Configuración de Couchbase para consultas y control de acceso basado en roles
Antes de que podamos empezar a desarrollar nuestra API RESTful que se comunica con nuestra base de datos NoSQL Couchbase, la base de datos debe estar configurada correctamente. Vamos a suponer que ya has instalado Servidor Couchbase 5 o superior.
Con Couchbase listo para funcionar, necesitamos crear un Bucket para guardar nuestros datos. Este tutorial hará referencia a un Bucket llamado ejemplopero en realidad no importa mientras seas coherente.
El Cubo no necesita ninguna configuración especial para este ejemplo.
Con el Bucket disponible, necesitamos crear un usuario con permiso para trabajar con el Bucket. Para obtener información sobre la creación de control de acceso basado en roles (RBAC), echa un vistazo a un artículo anterior que escribí titulado, Proteja sus datos NoSQL con el control de acceso basado en roles de Couchbase. La cuenta necesitará Lector de datos, Redactor de datosy Seleccionar consulta roles. Esto nos permitirá realizar operaciones CRUD contra la base de datos, así como ejecutar consultas N1QL.
Por último, debemos preparar un índice para que admita consultas N1QL.
En un entorno de producción querrás crear un índice para cada consulta que desees ejecutar. Para nuestro ejemplo, vamos a utilizar un índice primario que es un índice de prototipado.
Ejecute la siguiente consulta para crear el índice:
|
1 |
CREATE PRIMARY INDEX ON `example`; |
El índice primario nos dará la comodidad de poder ejecutar cualquier consulta sobre nuestro Bucket a costa del rendimiento. Los índices personalizados darán un rendimiento mucho mejor.
En este momento podemos empezar el desarrollo.
Desarrollo de un backend web con Node.js y Hapi Framework
Con Couchbase listo, podemos empezar a desarrollar la aplicación Node.js con Hapi. Si has visto mi artículo anteriormucho del material se mantendrá. Sin embargo, este ejemplo va a ser un poco más exhaustivo en lo que respecta a lo que Node.js y Couchbase pueden hacer.
Asumiendo que tienes Node.js instalado, necesitamos crear un proyecto fresco. Desde la CLI, ejecuta lo siguiente:
|
1 2 |
npm init -y npm install hapi joi couchbase uuid --save |
Los comandos anteriores inicializarán un nuevo proyecto e instalarán la aplicación hapi para Hapi.js, el paquete joi para la validación de datos, el paquete couchbase para interactuar con Couchbase, y el paquete uuid para generar cadenas únicas.
A continuación, cree un app.js que contendrá todo nuestro código Node.js. Para empezar, añade lo siguiente al archivo app.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const Couchbase = require("couchbase"); const Hapi = require("hapi"); const Joi = require("joi"); const UUID = require("uuid"); const server = new Hapi.Server(); const cluster = new Couchbase.Cluster("couchbase://localhost"); cluster.authenticate("demo", "123456"); const bucket = cluster.openBucket("example"); server.connection({ host: "localhost", port: 3000, routes: { cors: true } }); bucket.on("error", error => { throw error; }); server.start(error => { if(error) { throw error; } console.log("Listening at " + server.info.uri); }); |
El código anterior importará nuestras dependencias, se conectará a nuestra instancia de Couchbase utilizando la información que habíamos especificado en el paso anterior y configurará nuestro servidor Hapi para que funcione en https://localhost:3000.
Cuando definimos nuestra información de conexión, elegimos habilitar el uso compartido de recursos entre orígenes (CORS). Esto permitirá que nuestra aplicación Vue.js se comunique con la aplicación Node.js aunque estén operando desde puertos diferentes. Más información sobre CORS con Hapi se puede encontrar en un artículo anterior que escribí.
En este punto podemos empezar a definir las rutas de los endpoints a nuestra API.
El objetivo es crear datos para personas y direcciones dentro de Couchbase. Dado que actualmente no existen datos para estas dos categorías, tiene sentido empezar con endpoints que realicen la creación de datos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
server.route({ method: "POST", path: "/person", config: { validate: { payload: { firstname: Joi.string().required(), lastname: Joi.string().required(), type: Joi.string().forbidden().default("person"), timestamp: Joi.any().forbidden().default((new Date).getTime()) } } }, handler: (request, response) => { var id = UUID.v4(); bucket.insert(id, request.payload, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } request.payload.id = id; response(request.payload); }); } }); |
El código anterior creará un endpoint que acepta peticiones POST. Suponiendo que la carga útil JSON enviada con la solicitud cumple los criterios de la lógica de validación, la acción manipulador se utilizará. Se generará un identificador único y la carga útil se guardará con el identificador creado. En caso de éxito, la carga útil con el id se devolverá al cliente.
Se puede utilizar una lógica similar al crear direcciones:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
server.route({ method: "POST", path: "/address", config: { validate: { payload: { city: Joi.string().required(), state: Joi.string().required(), type: Joi.string().forbidden().default("address"), timestamp: Joi.any().forbidden().default((new Date).getTime()) } } }, handler: (request, response) => { var id = UUID.v4(); bucket.insert(id, request.payload, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } request.payload.id = id; response(request.payload); }); } }); |
La lógica de validación para las direcciones es un poco diferente, pero todo lo demás sigue siendo igual. Esta misma lógica puede aplicarse a prácticamente cualquier punto final de creación con solicitudes POST.
Con los documentos disponibles en Couchbase, podemos intentar consultarlos. Tiene sentido crear una consulta especializada que encuentre persona documentos o dirección documentos. Para ello utilizaremos N1QL.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server.route({ method: "GET", path: "/addresses", handler: (request, response) => { var statement = "SELECT META(address).id, address.* FROM example AS address WHERE address.type = 'address'"; var query = Couchbase.N1qlQuery.fromString(statement); bucket.query(query, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } response(result); }); } }); |
La ruta anterior utilizará una consulta N1QL que obtendrá todos los documentos y sus claves de documento siempre que contengan una propiedad llamada tipo que es igual a dirección.
Del mismo modo, podríamos hacer lo mismo para persona documentos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server.route({ method: "GET", path: "/people", handler: (request, response) => { var statement = "SELECT META(person).id, person.* FROM example AS person WHERE person.type = 'person'"; var query = Couchbase.N1qlQuery.fromString(statement); bucket.query(query, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } response(result); }); } }); |
Sin embargo, esto es aburrido sólo consulta de documentos basados en su tipo propiedad. Probablemente deberíamos establecer una relación entre ambos tipos.
La idea aquí es que creamos un array dentro del archivo persona que contiene un identificador para cada dirección a la que están asociados. En lugar de obtener un documento completo, crear o actualizar la matriz, y luego guardar de nuevo, vamos a hacer una mutación subdocumento directamente en la base de datos.
Tomemos como ejemplo el siguiente punto final:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
server.route({ method: "PUT", path: "/person/address/{personid}", config: { validate: { payload: { addressid: Joi.string().required() } } }, handler: (request, response) => { bucket.mutateIn(request.params.personid).arrayAppend("addresses", request.payload.addressid, true).execute((error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } bucket.get(request.params.personid, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } response(result.value); }); }); } }); |
El punto final anterior espera que exista un parámetro de ruta y una carga útil en cada solicitud. El parámetro de ruta es el id de un persona y la carga útil contendrá un id de un dirección documento.
Utilizando el mutateIn podemos proporcionar un documento a mutar, y una ruta a la propiedad que debe ser mutada. En este caso, la propiedad persona será mutado, y añadiremos valores a un documento direcciones en su interior. Si el direcciones no existe, no te preocupes, se creará.
Una vez que se produce la mutación, vamos a bajar todo el documento que hemos mutado y se lo devolveremos al cliente.
Ahora podemos hacer una consulta N1QL más emocionante en nuestros datos. Echa un vistazo a este punto final revisado para recopilar persona documentos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server.route({ method: "GET", path: "/people", handler: (request, response) => { var statement = "SELECT META(person).id, person.firstname, person.lastname, (SELECT address.city, address.state FROM example AS address USE KEYS person.addresses) AS addresses FROM example AS person WHERE person.type = 'person'"; var query = Couchbase.N1qlQuery.fromString(statement); bucket.query(query, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } response(result); }); } }); |
Ahora estamos haciendo una subconsulta. No estamos haciendo una simple consulta porque una matriz de valores de identificación de direcciones no es muy útil para nosotros. En su lugar, la subconsulta carga esos valores de identificación para que nuestros resultados tengan direcciones reales.
Guay, ¿verdad?
Terminemos nuestra API RESTful con un último endpoint.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
server.route({ method: "GET", path: "/address/{addressid}", handler: (request, response) => { bucket.get(request.params.addressid, (error, result) => { if(error) { return response({ code: error.code, message: error.message }).code(500); } response(result.value); }); } }); |
El endpoint anterior nos permitirá devolver una única dirección concreta en función de su clave de documento.
Con la API creada, podrías probarla fácilmente con Postman o una herramienta similar. Sin embargo, vamos a crear un frontend para ella con Vue.js.
Creación de una interfaz de cliente con Vue.js
La idea detrás del frontend es que haremos peticiones HTTP al backend que acabamos de crear. La mayor parte de nuestro trabajo será en las solicitudes, la vinculación de datos, y el atractivo general de nuestra interfaz de usuario.
Si eres nuevo en Vue.js, asegúrate de obtener el Vue CLI. En un directorio nuevo, ejecuta lo siguiente con la CLI de Vue:
|
1 |
vue init webpack frontend |
El comando anterior iniciará el proceso de andamiaje para Vue.js. Elija no para todo lo que se pide, ya que no vamos a utilizar todas esas características. Cuando se trata de un proyecto independiente (compilador y tiempo de ejecución) frente a sólo tiempo de ejecución, no importa para este ejemplo.
Cuando el andamiaje esté terminado, ejecuta los siguientes comandos:
|
1 2 |
cd frontend npm install |
Los comandos anteriores descargarán todas las dependencias necesarias para el proyecto base. Sin embargo, necesitamos una dependencia para hacer peticiones HTTP con Vue.js. Ejecuta lo siguiente desde la CLI:
|
1 |
npm install axios --save |
En este proyecto se utilizará el axios paquete. Para obtener más información axios y hacer peticiones HTTP con Vue.js, echa un vistazo a un tutorial anterior que escribí titulado, Consumir datos de API remotas a través de HTTP en una aplicación web Vue.js.
Dentro de su proyecto debe tener un src/App.vue archivo. Para simplificar, esta será una aplicación de una sola página y un solo archivo. Ignora cualquier otro componente que haya sido creado con el andamio.
Antes de empezar a añadir marcas HTML y lógica JavaScript, incluyamos Bootstrap como marco temático. Abra el proyecto index.html y que tenga el siguiente aspecto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-project</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
La mayor parte de lo anterior se ha extraído del Documentación de iniciación a Bootstrap. Ahora, cuando empecemos a codificar en el src/App.vue se verá un poco más atractivo.
Como en la mayoría de los archivos de proyecto de Vue, hay un archivo <template>, <script>y <style> bloque. Nuestro <style> no tendrá nada especial, así que abre el bloque src/App.vue e incluya lo siguiente:
|
1 2 3 4 5 6 7 8 9 |
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 30px; } </style> |
La mayor parte de nuestro trabajo estará en los otros dos bloques de código. Para simplificar, vamos a empezar con la lógica y luego terminar con la interfaz de usuario.
Dentro del proyecto src/App.vue incluya el siguiente código JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<script> import axios from "axios"; export default { name: 'app', data() { return { input: { person: { firstname: "", lastname: "" }, address: { city: "", state: "" }, addressid: "" }, people: [], addresses: [] } }, mounted() { axios({ method: "GET", url: "https://localhost:3000/people" }).then(result => { this.people = result.data; }); axios({ method: "GET", url: "https://localhost:3000/addresses" }).then(result => { this.addresses = result.data; }); }, methods: { createPerson() { if(this.input.person.firstname != "" && this.input.person.lastname != "") { axios({ method: "POST", url: "https://localhost:3000/person", data: this.input.person, headers: { "content-type": "application/json" }}).then(result => { this.people.push(result.data); this.input.person.firstname = ""; this.input.person.lastname = ""; }); } }, createAddress() { if(this.input.address.city != "" && this.input.address.state != "") { axios({ method: "POST", url: "https://localhost:3000/address", data: this.input.address, headers: { "content-type": "application/json" }}).then(result => { this.addresses.push(result.data); this.input.address.city = ""; this.input.address.state = ""; }); } }, linkAddress(personid) { if(this.input.addressid != undefined && personid != "") { axios({ method: "PUT", url: "https://localhost:3000/person/address/" + personid, data: { addressid: this.input.addressid }, headers: { "content-type": "application/json" }}).then(result => { for(let i = 0; i < this.people.length; i++) { if(this.people[i].id == personid) { if(this.people[i].addresses == undefined) { this.people[i].addresses = []; } axios({ method: "GET", url: "https://localhost:3000/address/" + this.input.addressid }).then(result => { this.people[i].addresses.push(result.data); this.input.addressid = ""; }); } } }); } } } } </script> |
En lo anterior ocurren muchas cosas, así que vamos a desglosarlas.
La primera parte de la lógica que añadimos se refiere a la inicialización de los datos. La página datos nos permitirá inicializar las variables utilizadas en este archivo en particular.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
data() { return { input: { person: { firstname: "", lastname: "" }, address: { city: "", state: "" }, addressid: "" }, people: [], addresses: [] } }, |
En el datos el método entrada se vinculará a un formulario en la interfaz de usuario. En nuestro caso tendremos dos formularios, uno para persona y uno para dirección. Por defecto, queremos que los valores estén en blanco. También estamos inicializando nuestra lista de gente y nuestra lista de direcciones que se obtendrá de la API de Node.js.
Después de inicializar las variables, necesitamos cargar algunos datos del servidor. Esto se puede hacer en el montado método.
|
1 2 3 4 5 6 7 8 |
mounted() { axios({ method: "GET", url: "https://localhost:3000/people" }).then(result => { this.people = result.data; }); axios({ method: "GET", url: "https://localhost:3000/addresses" }).then(result => { this.addresses = result.data; }); }, |
Cuando se carga la aplicación, se realiza una solicitud de personas y otra de direcciones.
Esto nos lleva a la lista de métodos que se pueden llamar desde el HTML. La página crearPersona tomará los datos del formulario de persona y los enviará a la API para guardarlos. Del mismo modo, el método crearDirección hará lo mismo, pero con la información de la dirección.
En linkAddress es un poco diferente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
linkAddress(personid) { if(this.input.addressid != undefined && personid != "") { axios({ method: "PUT", url: "https://localhost:3000/person/address/" + personid, data: { addressid: this.input.addressid }, headers: { "content-type": "application/json" }}).then(result => { for(let i = 0; i < this.people.length; i++) { if(this.people[i].id == personid) { if(this.people[i].addresses == undefined) { this.people[i].addresses = []; } axios({ method: "GET", url: "https://localhost:3000/address/" + this.input.addressid }).then(result => { this.people[i].addresses.push(result.data); this.input.addressid = ""; }); } } }); } } |
En linkAddress tomará un identificador de persona y un identificador de dirección y los enviará a nuestro punto final de la API de subdocumentos. Una vez hecho esto, actualizará la información en las variables locales para mostrarla en la interfaz de usuario.
Esto nos lleva a la parte HTML de nuestro archivo de aplicación. Dentro del archivo <template> deberíamos tener algo como lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div id="app"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="well"> <form> <div class="form-group"> <label for="firstname">First Name</label> <input type="text" v-model="input.person.firstname" class="form-control" id="firstname" placeholder="First Name"> </div> <div class="form-group"> <label for="lastname">Last Name</label> <input type="text" v-model="input.person.lastname" class="form-control" id="lastname" placeholder="Last Name"> </div> <button type="button" v-on:click="createPerson()" class="btn btn-default">Save</button> </form> </div> </div> <div class="col-md-6"> <div class="well"> <form> <div class="form-group"> <label for="city">City</label> <input type="text" v-model="input.address.city" class="form-control" id="city" placeholder="City"> </div> <div class="form-group"> <label for="state">State</label> <input type="text" v-model="input.address.state" class="form-control" id="state" placeholder="State"> </div> <button type="button" v-on:click="createAddress()" class="btn btn-default">Save</button> </form> </div> </div> </div> <div class="row"> <div class="col-md-12"> <ul class="list-group"> <li v-for="(person, index) in people" class="list-group-item"> {{ person.firstname }} {{ person.lastname }} - <span v-for="(address, index) in person.addresses"> {{ address.city }}, {{ address.state }} / </span> <p> <form> <div v-for="(address, index) in addresses"> <input type="radio" name="addressid" v-bind:value="address.id" v-model="input.addressid"> {{ address.city }}, {{ address.state }} </div> <button type="button" v-on:click="linkAddress(person.id)" class="btn btn-default">Save</button> </form> </p> </li> </ul> </div> </div> </div> </div> </template> |
La mayor parte del HTML anterior es Bootstrap boilerplate. Si alguna vez has trabajado con Bootstrap, sabrás que hay un montón de preparación involucrada.
Salta a la siguiente sección:
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <div class="form-group"> <label for="firstname">First Name</label> <input type="text" v-model="input.person.firstname" class="form-control" id="firstname" placeholder="First Name"> </div> <div class="form-group"> <label for="lastname">Last Name</label> <input type="text" v-model="input.person.lastname" class="form-control" id="lastname" placeholder="Last Name"> </div> <button type="button" v-on:click="createPerson()" class="btn btn-default">Save</button> </form> |
Tenga en cuenta que el entrada que habíamos inicializado está ahora vinculado a los elementos del formulario. Se trata de un enlace de datos bidireccional.
Cuando se pulsa el botón de formulario para este formulario en particular, el botón crearPersona es llamado. El otro elemento del formulario se comporta igual.
En la parte principal de la interfaz de usuario, tenemos una lista de datos recuperados del servidor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul class="list-group"> <li v-for="(person, index) in people" class="list-group-item"> {{ person.firstname }} {{ person.lastname }} - <span v-for="(address, index) in person.addresses"> {{ address.city }}, {{ address.state }} / </span> <p> <form> <div v-for="(address, index) in addresses"> <input type="radio" name="addressid" v-bind:value="address.id" v-model="input.addressid"> {{ address.city }}, {{ address.state }} </div> <button type="button" v-on:click="linkAddress(person.id)" class="btn btn-default">Save</button> </form> </p> </li> </ul> |
Estamos listando personas, la información de dirección expandida de nuestra consulta N1QL del lado del servidor, y la interacción del botón de radio para emitir la solicitud de subdocumento.
Todo esto se hace fácilmente con Vue.js debido a la forma en que la interfaz de usuario está vinculada a la capa lógica.
Conclusión
Acabas de ver cómo crear una aplicación full stack compuesta estrictamente de tecnologías JavaScript. Usamos Node.js con el framework Hapi.js para la capa API backend y el framework Vue.js para nuestra capa frontend de navegador web. El frontend consume datos del backend y el backend obtiene sus datos de nuestro Couchbase Base de datos NoSQL.
Debido a que hicimos la aplicación muy modular, cada uno de los componentes puede ser intercambiado con una tecnología diferente. Podríamos cambiar Node.js para ser Java u otra cosa y podríamos cambiar Vue.js para ser otra cosa como Angular. Quieres ver cómo ir pila completa con Golang y Angular, echa un vistazo a este tutorial que escribí titulado, Crear una base de datos de películas con Golang, Angular y NoSQL.
Para obtener más información sobre el uso de Couchbase con Node.js, consulte la página Portal para desarrolladores de Couchbase.
