Rafael Ugolini es un desarrollador de software full stack que actualmente trabaja en Famoco en Bruselas, Bélgica. Ha estado trabajando con el desarrollo de software durante más de 10 años y últimamente se centra en el diseño de soluciones web y el desarrollo utilizando Python y Javascript. Twitter, LinkedIn, Github
Introducción
En este artículo voy a proponer una primero fuera de línea desarrollo mediante Couchbase como herramienta de comunicación entre el backend y el frontend.
Mientras estudiaba react-redux, algo que me gustó mucho es el Acciones asíncronas patrón donde usted tiene:
|
1 2 3 4 5 |
{ tipo: 'FECH_POSTS_REQUEST' } { tipo: 'FECH_POSTS_FAILURE', error: Oops } { tipo: 'FECH_POSTS_SUCCESS', respuesta: { ... } } |
Después de entender un poco más sobre Couchbase y Pasarela de sincronización CouchbaseEste patrón proporciona una muy buena experiencia de usuario, ya que realmente renderiza la página basada en el estado actual de la aplicación.
¿Cómo funciona?
Aplicación
La aplicación en sí nunca hace ninguna llamada al backend, la única responsabilidad que tiene es guardar estados y renderizarlos, de esta manera es posible tener una aplicación completamente funcional trabajando offline.
Pasarela Couchbase Lite/Sync
Couchbase Lite se encargará de sincronizar el estado actual de la aplicación con Pasarela de sincronización Couchbase y recuperar la nueva información una vez que el documento se actualiza en el backend.
Ganchos web
Una vez que Couchbase Sync Gateway recibe un documento que coincide con el filtro, hará una llamada HTTP a la Web App con el documento que necesita actualizar.
Aplicación web
La Web App puede hacer cualquier tipo de actualización como:
- Creación de una nueva tarea en una cola de tareas
- Recuperación de datos de una API externa
- Analizar algunos datos/imágenes (p. ej.: OCR)
Manos a la obra
Para ilustrar un poco cómo funciona este concepto, desarrollo un ejemplo sencillo en el que una vez guardado un documento concreto, la aplicación web enviará una tarea que obtendrá un personaje aleatorio de Star Wars y actualizará el documento.
Puede descargar todo el código necesario para ejecutar un ejemplo de esto solución.
La pila está compuesta por:
- Aplicación web - Flask
- Cola de tareas - Celery + RabbitMQ
- Sync Gateway (modo morsa)
Para ejecutarlo, simplemente clona el repositorio git y ejecuta docker-compose:
|
1 2 3 4 5 |
git clonar https://github.com/rafaelugolini/syncgateway_apiless_example cd syncgateway_apiless_example docker-componer arriba |
Modelado de datos
En este ejemplo, la clave acción es la fuente principal de los eventos, el documento debe guardarse con:
|
1 |
{ "acción": "solicitud_persona" } |
Para crear un documento curl, basta con utilizar el siguiente comando
|
1 |
rizo -H "Content-Type: application/json" -X POST -d '{"acción": "solicitud_persona"}' http://localhost:4984/db/ |
Pasarela de sincronización
En la configuración de la puerta de enlace de sincronización, su registrado un controlador de eventos que cada cambio de documento con action == "solicitud_persona"se realizará una llamada a la API de la aplicación web.
|
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 |
"event_handlers": { "documento_cambiado": [ {"manipulador": "webhook", "url": "http://web_service:5000/person_request/", "filtro": `función(doc) { si (doc.acción == "solicitud_persona") { devolver verdadero; } devolver falso; }` } ] } |
Aplicación web
La aplicación web es una simple API de Flask que recibe un POST con la información del documento y envía una tarea a Celery.
La tarea consultará a un personaje aleatorio de Star Wars de https://swapi.co/ y actualizar el documento:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "acción": "persona_éxito", "género": "mujer", "altura": "168", "masa": "55", "nombre": "Zam Wesell" } |
Cliente
He desarrollado un simple cliente pouchdb que imprimirá todos los documentos de sync gateway a la consola. Básicamente ejecuta esta función cada vez que hay un cambio en la base de datos.
|
1 2 3 4 5 6 7 8 9 10 11 |
const getAllDocs = () => ( db.allDocs({ incluir_docs: verdadero, archivos adjuntos: verdadero, }).entonces((resultado) => { consola.registro('\x1Bc'); // esto borra la consola consola.registro(util.inspeccionar(resultado.filas, falso, null)); }).captura((err) => { consola.registro(err); }) ); |
YPuedes conseguirlo en repositorio git.
|
1 2 |
hilo instale hilo iniciar |
Este artículo ha sido publicado por la Programa de redacción de la comunidad Couchbase
[...] Error al cargar HTMLArtículo único [...]