Tutorial: Crear una aplicación de puntos de interés con Vue.js, Node.js, Express y Couchbase Server

Recorriendo la sección de scripts, verás que hago un uso intensivo de las capacidades reactivas de Vue. Para entender esta parte, te ayudará tener al menos cierta familiaridad con Vue, especialmente con propiedades calculadas y observadores, datos, método y ganchos del ciclo de vida.

Hacemos uso de la montado para añadir un receptor de eventos enviados por el servidor, y para rellenar inicialmente la lista desplegable de ciudades. La parte más pesada de la lógica de negocio tiene lugar en la consulta a la base de datos, como veremos.

Veamos cómo funciona la selección de una ciudad. Observa que cada elemento del botón desplegable tiene un receptor de clics que establece seleccionado a los datos de la ciudad para esa entrada. Tenemos un método de vigilancia definido en seleccionado. Vue también sabe automáticamente que la propiedad calculada mostrar depende de seleccionado.

Esto significa que cada vez que se selecciona una ciudad a través del menú desplegable, se produce una cascada de actividad. Cambiar seleccionado causa mostrar se vuelva a calcular. Esto, a su vez, establece el texto del botón desplegable, ya que está vinculado a mostrar. En seleccionadoen el método ver actualiza la tabla de hoteles cada vez que se selecciona una nueva ciudad.

La mesa artículos están vinculados a destinationsProvider en métodos. Al actualizar la tabla se ejecuta el código. Al igual que la lista de ciudades original, obtiene los hoteles mediante una llamada asíncrona a nuestra base de datos a través de un punto final REST del servidor.

Vue se encarga de mucho aquí por nosotros. Por ejemplo, la llamada para refrescar la tabla no recibe los datos inmediatamente. Vue volverá a renderizar las partes relevantes del DOM automáticamente cada vez que vuelva la llamada REST. No tenemos que suministrar nada del cableado, aparte de especificar el enlace entre artículos y destinationProvider.

Cargamos la clave API de Google Maps desde un archivo config.js. Crea ese archivo y por ahora añade este código de marcador de posición.

Vuelva a crear el proyecto (npm run build). Inicie el servidor, recargue el sitio, y debería ver el comienzo de nuestro cliente real con este aspecto.

Los dos bloques de código para conectar con nuestra base de datos son muy sencillos.

Las tres primeras líneas importan el cliente Couchbase Node, crean un nuevo objeto cluster que representa un cluster de nodos de base de datos, y autentifican a ese cluster. Esto inicia la conexión a la base de datos.

Para mayor comodidad, añadimos referencias a los objetos cliente y cluster a app.locales. Esto hace que estén disponibles en todo el mundo.

Por último, el código establece y guarda conexiones con dos cubos. Cubos son una estructura organizativa de alto nivel en Couchbase.

El primer bucket lo rellenaremos con datos de ejemplo que vienen con las instalaciones de Couchbase Server. Para el segundo cubo, estoy amañando un poco las cosas aquí. Necesitamos un bucket de metadatos para el archivo Servicio de concursos. Como veremos, sólo necesitamos almacenar un par de documentos adicionales que deben ir a algún sitio aparte del cubo principal. En lugar de crear un tercer bucket, simplemente los pongo con los datos de eventos. Normalmente no usarías este atajo en producción.

Tenemos sólo unas pocas líneas de código que necesitamos para dirigir Express para servir nuestras páginas estáticas construidas desde el código del cliente y para organizar nuestra API de datos del servidor.

La plantilla index.html La página de inicio de la aplicación añade dist a todas las rutas de los archivos. Esto significa que nuestros archivos estáticos en realidad se sirven desde un directorio raíz de /cliente/dist.

He separado la API de datos en dos grupos, organizados bajo un epígrafe general rutas subdirectorio. Los puntos finales empiezan por registros. Estos recuperarán datos de la base de datos.

En eventos es única. Los endpoints son utilizados tanto por el cliente web como por el servicio de eventos de Couchbase.

Veamos la registros código primero.

Aquí tenemos definidas tres rutas, /destinos, /hoteles/porCiudad/:idy /selección/geo. Todos tienen la misma estructura básica. Obtenemos nuestras referencias a la base de datos, utilizamos bluebird para crear una promesa versiones del método de consulta, construir un N1QL dispararla y devolver los resultados.

Repasemos las consultas, empezando por la más sencilla.

Utilizamos La /selección/geo para almacenar la elección de hotel realizada por el usuario. Aquí está la consulta desglosada.

UPSERT modificará un documento, o lo creará si aún no existe. Almacenamos la geolocalización del hotel elegido en un documento con un id de desencadenar. Probablemente suene extraño. Tendrá más sentido más adelante, cuando lleguemos al código Eventing. Lo que realmente nos interesa no es sólo la ubicación del hotel, sino los puntos de interés cercanos. Este documento pondrá en marcha la secuencia que recupera esos POI. De ahí la razón de llamar al documento desencadenar.

He aquí un ejemplo del documento creado.

Para comprender la /hoteles/porCiudad/:id consulta, primero eche un vistazo a un par de documentos de ejemplo.

Para nuestra tabla de hoteles, necesitamos el nombre del hotel, la dirección, la geolocalización, el nombre del aeropuerto y el código del aeropuerto. Obviamente, eso es combinar datos de ambos documentos. Para ello utilizamos un INNER JOIN. Esta es la consulta.

Caminando a través de él, se puede ver que somos capaces de realizar la unión utilizando los documentos de la misma cubeta. Utilizo alias para hacer las cosas más claras. Utilizamos la ciudad de cada documento para formar la condición de unión. Observa que también utilizo el documento tipotanto en la condición de unión como en la de DONDE cláusula. Las condiciones de unión pueden ser bastante sofisticadas. Lea esto blog para más detalles y ejemplos.

Por último, examinemos cómo hemos obtenido nuestra lista de ciudades. Esta es la consulta para el /destinospunto final.

El único resultado devuelto es una lista de nombres de ciudades. En este caso, estamos utilizando una unión interna como filtro. Al emparejar las ciudades con aeropuertos con las ciudades con hoteles, obtenemos una lista de las ciudades que tienen ambos.

Las uniones internas pueden utilizar dos enfoques algorítmicos diferentes. La primera unión que vimos utiliza la unión de bucle anidado por defecto.

Este último ejemplo utiliza una tabla hash en memoria. Esto puede acelerar considerablemente una unión, sobre todo cuando uno de los dos conjuntos de datos es pequeño. Hemos utilizado la tabla "USE HASH()" para informar a N1QL de cómo queremos optimizar la consulta. Hay un lado "probe" y un lado "build". La tabla hash se construye a partir de los datos del lado de construcción. La unión se realiza haciendo búsquedas en los datos del lado de la sonda.

La pista que dimos arriba le dice a N1QL que use los datos del hotel para el lado de la sonda en este caso. Es decir, se construirá la tabla a partir de los datos del aeropuerto, a continuación, hacer las búsquedas hash utilizando los datos del hotel.

Si no lo has hecho antes, te animo a que pruebes estas consultas directamente en el Couchbase Server Query Workbench, parte de la consola de administración web.

Ya hemos mencionado la creación de un receptor de eventos para eventos enviados por el servidor en el lado del cliente. Estos dos puntos finales muestran lo que se necesita en el servidor.

La versión "get" del poi es llamado por el navegador cuando el EventSource se construye. Puedes ver que simplemente añadimos la persona que llama como cliente.

Utilizamos la versión "post" como intermediaria para enviar los datos al cliente. El sitio res.send(''); nos da una pista de cómo funciona. En el código Eventing, vamos a utilizar las capacidades N1QL cURL para empujar los datos a este punto final. La respuesta vacía está ahí para cerrar esa transacción.

A continuación, el servidor reenvía los datos a los clientes que estén a la escucha. Hay muchos más detalles. Si quieres saber más, este artículo tiene buena información.

Para terminar el lado servidor de nuestro proyecto, crea un subdirectorio rutas en el directorio del servidor.

Copie el registros en un archivo llamado registros.js. Copia el eventos en un archivo llamado eventos.js. Y, por último, en el propio directorio del servidor, cree un nuevo archivo llamado .env. Pegue allí los siguientes parámetros de configuración y guárdelos. (Por supuesto, cambie los parámetros que necesite).

El servidor ya debería estar listo. En el directorio raíz del servidor, ejecute node app.js. No olvides construir primero el código cliente.