Hay muchas maneras de usar Couchbase en tu aplicación web o móvil a través de uno de los varios SDKs de lenguajes. Sin embargo, ¿qué pasaría si no estuvieras usando un lenguaje backend como PHP o un lenguaje móvil como Objective-C? ¿Qué pasa si estás usando un servicio web alojado estáticamente como Amazon S3 donde sólo tienes habilidades HTML, CSS y JavaScript?
Aquí es donde PouchDB puede entrar en juego. PouchDB es una librería de sincronización y almacenamiento diseñada para funcionar en un navegador web usando JavaScript. No se requiere código backend o SDKs para usar esta librería con Couchbase. PouchDB puede tomar el rol de SDK del lado del cliente y replicar los datos hacia y desde el Sync Gateway de Couchbase. Pero PouchDB usa vanilla JavaScript, entonces ¿qué pasa cuando tu aplicación usa AngularJS?
Vamos a echar un vistazo a cómo envolver varias funciones en PouchDB para hacerlo más amigable con AngularJS.
Qué necesitaremos
Hay algunos requisitos para la aplicación que vamos a construir. Veremos cómo obtenerlos por el camino, pero aquí tienes una muestra para que sepas en qué te estás metiendo.
- Python para ejecutar un servidor HTTP sencillo o algo similar
- Pasarela de sincronización Couchbase
- PouchDB 4
- AngularJS 1
- La biblioteca AngularJS UI-Router versión 0.2
- Twitter Bootstrap 3
Sentar las bases de nuestro proyecto
Antes de entrar en el código, vamos a situar la estructura de nuestro proyecto y todas las bibliotecas y estilos en su lugar.
En algún lugar de tu ordenador crea el directorio PouchDB y añade los siguientes directorios en la raíz:
- css
- fuentes
- js
- plantillas
En la raíz de tu proyecto también querrás crear un archivo llamado index.html y un archivo llamado sync-gateway-config.json.
Ahora tenemos que descargar todas las bibliotecas para nuestro proyecto. Empezando por Twitter Bootstrapdescargue la última y coloque todos los min.css archivos en el css de su proyecto, todos los min.js archivos en el js de su proyecto, y todos los archivos de fuentes en el directorio fuentes de su proyecto.
Con Twitter Bootstrap fuera del camino, a continuación tenemos que descargar AngularJS y el AngularJS UI-Router. Después de descargar estas bibliotecas, coloque el archivo min.js en los archivos js directorio.
La última biblioteca que hay que descargar es PouchDB. Después de descargar el min.js colóquelo en la carpeta js de su proyecto con el resto.
Obtención de la puerta de enlace Couchbase Sync
Este proyecto requerirá Couchbase Sync Gateway para tener éxito. Si no estás familiarizado, Couchbase Sync Gateway es un servicio intermediario que se encarga de procesar los datos entre la aplicación local (tu aplicación AngularJS) y Couchbase Server. En este ejemplo no utilizaremos Couchbase Server, por lo que Sync Gateway actuará como nuestra solución de almacenamiento en memoria en la nube.
La puerta de enlace de sincronización de Couchbase se encuentra en la dirección Sección de descargas de Couchbase.
Construir nuestro proyecto
Ahora que todos los archivos están en su lugar podemos empezar a codificar nuestra aplicación.
Incluidos todos los guiones y estilos
Empecemos por incluir todos los estilos y scripts en nuestro index.html archivo. Abra su index.html e incluya el siguiente código:
|
1 2 |
Algunas cosas a las que prestar atención index.html archivo. Hemos llamado a nuestra aplicación AngularJS pouchapp y estamos utilizando una etiqueta que puede parecer extraña:
Esa etiqueta es parte del UI-Router de AngularJS. Esta es una aplicación de una sola página donde cada pantalla es un parcial que se carga en esa etiqueta. Pronto tendrá más sentido.
Creación del archivo lógico de AngularJS
Dentro de la sección js cree un archivo llamado app.js e incluya el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
angular.módulo("pouchapp", ["ui.router"]) .ejecute(función($pouchDB) { }) .config(función($stateProvider, $urlRouterProvider) { }) .controlador("MainController", función($alcance, $rootScope, $estado, $stateParams, $pouchDB) { }) |
Algunas cosas a tener en cuenta sobre este archivo en general y lo que vamos a hacer. El app.js es donde irá toda la lógica de nuestra aplicación. En él tenemos un archivo .run() que se ejecutará cuando se inicie la aplicación, una función .config() que configurará todas las pantallas de nuestra aplicación (UI-Router), y una función .controlador() que contendrá la lógica para la funcionalidad de nuestra aplicación en particular.
Tenga en cuenta también $pouchDB ya que se trata de un servicio AngularJS que diseñaremos más adelante.
Configuración de AngularJS
Dado que estamos utilizando el UI-Router de AngularJS, tenemos que configurar nuestras rutas en el directorio .config() función del app.js archivo. El código sería como el siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$stateProvider .estado("lista", { "url": "/lista", "templateUrl": "templates/list.html", "controlador": "MainController" }) .estado("item", { "url": "/item/:documentId/:documentRevision", "templateUrl": "templates/item.html", "controlador": "MainController" }); $urlRouterProvider.de lo contrario("lista"); |
Para resumir, tenemos dos rutas (pantallas) aquí. Tenemos una pantalla para mostrar una lista de algún tipo y una pantalla que nos permite añadir o actualizar elementos de la lista. Ambas rutas utilizan un controlador AngularJS llamado Controlador principalpero cada uno tiene una plantilla diferente.
Plantillas de ruta de AngularJS
Cada pantalla necesita su propio HTML para mostrarse al usuario. En el archivo plantillas crear lista.html y item.html. Abra el lista.html y añade el siguiente código:
|
1 |
<botón clase="btn btn-primary">Nuevo Artículo</botón> |
| Nombre | Apellido | Correo electrónico | |
|---|---|---|---|
| {{value.firstname}} | {{value.lastname}} | {{value.email}} | editar | borrar |
Mucho de esto puede parecer una locura, pero voy a explicarlo y debería tener más sentido. En primer lugar, estamos creando una tabla y un bucle a través de un objeto creando una nueva fila de la tabla para cada iteración. Dado que se trata de un objeto que estamos recorriendo, tendrá tanto una clave como un valor, que es por lo que lo hemos separado. El valor de este par es también un objeto, que contiene la información del nombre, así como la información de correo electrónico.
La línea con el editar y borrar está tomando información del objeto para borrarlo del almacenamiento o pasarlo a una pantalla diferente para que podamos editarlo.
Ahora pasamos a la segunda y última ruta para nuestra aplicación. Abrimos la item.html e incluya el siguiente código:
|
1 |
Esencialmente esto es sólo un formulario. Tenemos una función de guardado que veremos en la próxima sección de controladores AngularJS.
El servicio PouchDB AngularJS
Antes de seguir adelante necesitamos hablar del servicio AngularJS para PouchDB. De lo contrario, todo lo demás no va a tener sentido. Estamos creando un servicio porque queremos que las cosas sean AngularJS friendly con PouchDB. Queremos tener interfaces reactivas entre otras cosas. Al final del app.js añada el siguiente código:
|
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 |
.servicio("$pouchDB", ["$rootScope", "$q", función($rootScope, $q) { var base de datos; var changeListener; este.setDatabase = función(databaseName) { base de datos = nuevo PouchDB(databaseName); } este.startListening = función() { changeListener = base de datos.cambia({ en directo: verdadero, incluir_docs: verdadero }).en("cambio", función(cambiar) { si(!cambiar.suprimido) { $rootScope.$difusión("$pouchDB:cambio", cambiar); } si no { $rootScope.$difusión("$pouchDB:eliminar", cambiar); } }); } este.stopListening = función() { changeListener.cancelar(); } este.sincronizar = función(remoteDatabase) { base de datos.sincronizar(remoteDatabase, {en directo: verdadero, reintentar: verdadero}); } este.guardar = función(jsonDocument) { var aplazado = $q.aplazar(); si(!jsonDocument._id) { base de datos.Correo electrónico:(jsonDocument).entonces(función(respuesta) { aplazado.resolver(respuesta); }).captura(función(error) { aplazado.rechace(error); }); } si no { base de datos.poner(jsonDocument).entonces(función(respuesta) { aplazado.resolver(respuesta); }).captura(función(error) { aplazado.rechace(error); }); } devolver aplazado.promesa; } este.borrar = función(documentId, revisióndeldocumento) { devolver base de datos.eliminar(documentId, revisióndeldocumento); } este.consiga = función(documentId) { devolver base de datos.consiga(documentId); } este.destruir = función() { base de datos.destruir(); } }]); |
Eso es mucho para asimilar. Esencialmente estamos envolviendo muchas de las funciones de PouchDB. Sin embargo, lo que más importa aquí es el startListening y guardar funciones.
Dentro de la startListening estamos escuchando los cambios y transmitiéndolos a través de la aplicación utilizando $rootScope.$broadcast. Aunque aún no lo hayas visto, AngularJS puede captar esas emisiones utilizando $rootScope.$on. Esto hace que cambiar la interfaz de usuario sea muy fácil.
En cuanto a la guardar comprobamos si se nos ha pasado un identificador de documento. Si no se pasó ningún id de documento significa que se trata de un nuevo documento a insertar, de lo contrario se trata de una actualización.
Cómo volver a nuestra función de controlador y ejecución
Empecemos con AngularJS .run() porque es corta. Añade el siguiente código:
|
1 2 3 4 5 6 |
.ejecute(función($pouchDB) { $pouchDB.setDatabase("nraboy-test"); $pouchDB.sincronizar("http://localhost:4984/test-database"); }) |
Aquí nombramos la base de datos local y le decimos que queremos sincronizar a esta ubicación remota que es en realidad nuestro Couchbase Sync Gateway. Esta sincronización ocurre continuamente después de que la llamamos. Por continuamente quiero decir que los cambios serán replicados entre la aplicación y el servidor mientras la aplicación esté abierta.
Saltando al código del controlador, añade 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 |
.controlador("MainController", función($alcance, $rootScope, $estado, $stateParams, $pouchDB) { $alcance.artículos = {}; $pouchDB.startListening(); $rootScope.$en("$pouchDB:cambio", función(evento, datos) { $alcance.artículos[datos.doc._id] = datos.doc; $alcance.$aplicar(); }); $rootScope.$en("$pouchDB:eliminar", función(evento, datos) { borrar $alcance.artículos[datos.doc._id]; $alcance.$aplicar(); }); si($stateParams.documentId) { $pouchDB.consiga($stateParams.documentId).entonces(función(resultado) { $alcance.inputForm = resultado; }); } $alcance.guardar = función(nombre, apellido, correo electrónico) { var jsonDocument = { "nombre": nombre, "apellido": apellido, "email": correo electrónico }; si($stateParams.documentId) { jsonDocument["_id"] = $stateParams.documentId; jsonDocument["_rev"] = $stateParams.revisióndeldocumento; } $pouchDB.guardar(jsonDocument).entonces(función(respuesta) { $estado.ir("lista"); }, función(error) { consola.registro("ERROR -> " + error); }); } $alcance.borrar = función(id, rev) { $pouchDB.borrar(id, rev); } }) |
La aplicación ya se está sincronizando, así que tenemos que escuchar cualquier cambio. Aquí está el $rootScope.$on Ya lo he mencionado antes. Tenemos dos de ellos porque en uno estamos escuchando cambios (crear o actualizar) y en el otro estamos escuchando borrados.
Si el lista.html nos ha enviado aquí para una actualización, entonces tendremos un id de documento pasado. En este escenario podemos hacer una búsqueda y obtener los datos de ese id de documento en particular para mostrar en el formulario en lugar de dejarlo en blanco que es el valor predeterminado.
Por último, tenemos nuestro guardar y borrar funciones.
Configuración de la pasarela de sincronización
PouchDB y AngularJS es sólo la mitad de la historia aquí. Seguro que crearán una bonita aplicación local, pero queremos que las cosas se sincronicen. El Couchbase Sync Gateway es nuestro punto final para esto y por supuesto PouchDB funciona muy bien con él.
Dentro de la sección sync-gateway-config.json añada 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 |
{ "log":["CRUD+", "REST+", "Cambios+", "Adjuntar+"], "bases de datos": { "base de datos de prueba": { "servidor":"morsa:datos", "sync":` función (doc) { canal (doc.canales); } `, "usuarios": { "INVITADO": { "desactivado": falso, "admin_canales": ["*"] } } } }, "CORS": { "Origen": ["http://localhost:9000"], "LoginOrigin": ["http://localhost:9000"], "Cabeceras": ["Tipo de contenido"], "MaxAge": 17280000 } } |
Esta es una de las configuraciones más básicas que existen. Algunas cosas a tener en cuenta al respecto:
- Utiliza walrus:data para el almacenamiento, que está en memoria y no persiste. No debe utilizarse para producción.
- Todos los datos se sincronizan a través del usuario GUEST, por lo que no hay autenticación aquí, pero podría ser
- Estamos solucionando los problemas de CORS permitiendo peticiones en localhost:9000
Probar la aplicación
En este punto todo nuestro código está en su lugar y nuestro Sync Gateway está listo para ser ejecutado. Inicie el Sync Gateway ejecutando lo siguiente en un símbolo del sistema o terminal:
|
1 |
/ruta/a/sincronizar/pasarela/papelera/sincronizar-pasarela /ruta/a/proyecto/sincronizar-pasarela-config.json |
Aquí es donde Python entra en juego. No puedes simplemente abrir los archivos HTML en un navegador web. Deben ser servidos para evitar problemas de CORS. Desde el símbolo del sistema o terminal, con el proyecto como su directorio de trabajo actual, ejecute lo siguiente:
|
1 |
python -m SimpleHTTPServer 9000 |
Visite http://localhost:9000 en su navegador y compruébelo.
Conclusión
Ahora has visto cómo crear una aplicación web que puede sincronizarse con Couchbase usando nada más que AngularJS y PouchDB. No se requieren SDKs de backend.
Puede obtener el código fuente completo de esta entrada de blog a través de nuestra página Repositorio GitHub de Couchbase Labs.
¿Soportará N1QL la unión de 2 buckets en algún campo común? Tengo 2 cubos, los documentos en ambos cubos tienen el campo acct_id. ¿Puedo unir ambos cubos en acct_id para obtener el resultado?
Gracias por este magnífico tutorial.
Señor, me gustaría utilizar offline
almacenamiento como PouchDB para almacenar y recuperar imágenes y he estado
luchando con ella desde hace bastante tiempo. He seguido el sitio web de inicio de PouchDB pero yo no era capaz de guardar una sola foto a la misma
Y le estaría muy agradecido, si me puede ayudar con una simple ilustración.
Muchas gracias
¿Por qué no convertir las imágenes en cadenas base64 y almacenar las cadenas?
Ok señor. Permítame hacerlo.
Gracias, señor.
Como se aconseja, utilizo angular.tojson en los datos de la imagen de la cámara, y almacena el resultado en pouchdb.
Sin embargo, he intentado recuperar la imagen y mostrarla pero sin éxito. La imagen es parte de una matriz de objetos con un nombre de referencia. Aunque, yo uso ng-repeat al bucle a través del objeto para extraer el nombre y la fecha de nacimiento, pero no sé cómo convertir de nuevo la imagen a su forma original en el campo de expresión es decir {{}}.
Gracias, señor.
Cuando dices cámara, si estás hablando de Ionic Framework, ¿has visto esto?:
https://blog.nraboy.com/2014/0…
Más concretamente está esta línea en el ejemplo:
Para mostrar una imagen base64, debe asignar su HTML
imgtag \"data:image/jpeg;base64\" de lo contrario la etiqueta no entenderá los datos que estás pasando:Espero que eso ayude.
Lo mejor,
Nic, gracias por el tutorial blog. su estilo de codificación controlador es diferente de lo que he aprendido y me preguntaba si usted podría ayudar en la adición de otra página de enlace a la aplicación? He intentado copiar y duplicar su controlador y que no funcionó. gracias
Nic, tengo dificultades para sincronizar con "sync gateway" a mi servidor Couchbase. ¿Tienes algún consejo? Tengo un error que mi "cors" no está activado. ¿Podría ser por eso?
Podría ser, pero suele ser un problema del navegador.
¿Puede proporcionar más detalles sobre su configuración y lo que está sucediendo? Cuanta más información tenga, mejor podré ayudarle.
Lo mejor,
Nic, he utilizado sobre todo el código según sus instrucciones. Mi configuración es el desarrollo de un angular PouchDB a Couchbase aplicación en mi MS Surface Pro 3. este es mi dispositivo de desarrollo. Mi servidor Couchbase está en nuestro servidor de Office. La mayor parte de mi desarrollo es cuando estoy en la misma red que el servidor CouchBase y el propósito principal es para mi programa para trabajar en el campo con conectividad limitada con el servidor de la oficina.Por favor, hágamelo saber si hay más que le gustaría saber. Gracias
Perdón por mi respuesta tardía, estaba de vacaciones por las fiestas.
Estoy un poco confundido con la información que me diste. ¿Puede aclarar algunas cosas?
1. ¿La aplicación web (PouchDB, Angular, ect) se ejecuta en tu Surface Pro?
2. ¿Couchbase Sync Gateway se ejecuta en tu Surface Pro o en el servidor de tu oficina?
3. ¿Está su servidor Couchbase detrás de un cortafuegos? En otras palabras, independientemente de dónde esté alojado tu Sync Gateway, ¿tiene permiso de firewall para acceder a Couchbase Server?
Lo mejor,
1. la aplicación se ejecutará en nuestros supervisores (30 de ellos) pro\ superficie, ordenadores portátiles.
2. Couchbase y la pasarela de sincronización está en el servidor de la oficina.
3. sí tenemos permisos para acceder al servidor de CouchBase.
Creo que lo tengo casi configurado, estoy recibiendo este error? \ "400 nombre de base de datos ilegal: TCS-Mobile\"
TCS-Mobile es el nombre correcto de mi cubo.
¿Este error se produce a través de Sync Gateway o de los registros de la consola de la aplicación web?
registros de la consola.
¿Puedo pedirle que siga mi tutorial exactamente? Mi conjetura es que usted tiene algo personalizado a su configuración que puede no ser correcta.
También puedes ver esto:
https://www.youtube.com/watch?…
Saludos,
Hola Nic,
Parece que sabes hacer comprensible lo complejo.
Estoy empezando como "propietario del producto" (scrum) y aún no tengo mi equipo de TI en su lugar. Vamos a construir una aplicación móvil (no nativa) y una aplicación de navegador web para trabajar con el servidor Couchbase.
"Aquí es donde PouchDB puede entrar en juego. PouchDB es una biblioteca de sincronización y almacenamiento diseñada para funcionar en un navegador web mediante JavaScript".
¿Puede Couchbase Lite / Mobile funcionar en un navegador web usando JavaScript de forma similar a lo que se ha hecho con PouchDB?
Gracias, señor,
Jim
PS. Debería haber mencionado que no necesito capacidad offline para la aplicación web.
¿Has visto esto?
http://www.couchbase.com/cros…
Gran tutorial, estoy en medio de un primer proyecto fuera de línea en el momento por lo que este es perfecto. Estoy teniendo algunos problemas con el CORS sin embargo. Terminé agarrando su código de Github para asegurarse de que no tenía ningún typos tontas pero los problemas persisten.
Utilizo Chrome en un Mac.
Cuando inicio la pasarela de sincronización obtengo lo siguiente:
MacBook-Pro:~ leigh$ couchbase-sync-gateway/bin/sync_gateway Dropbox/wwwroot/offlinefirst/sync-gateway-config.json
19:52:18.109745 Activando registro: [CRUD+ REST+ Cambios+ Adjuntar+]
19:52:18.109826 ==== Couchbase Sync Gateway/1.0.4(34;04138fd) ====
19:52:18.109840 Configurado Go para utilizar las 8 CPUs; setenv GOMAXPROCS para anular esto
19:52:18.109858 Abriendo db /base-de-datos-prueba como bucket "base-de-datos-prueba", pool "predeterminado", servidor .
19:52:18.109893 Abriendo la base de datos test-database de Walrus en .
19:52:18.110497 Cambios+: Notificando que \"test-database\" cambió (keys="{_sync:user:}\") count=2
19:52:18.110505 Restablecer usuario invitado a config.
19:52:18.110516 Iniciando servidor admin en 127.0.0.1:4985
19:52:18.113169 Iniciando servidor en :4984 ...
2016/01/25 19:52:20 Morsa: Advertencia: Couldn\'t save walrus bucket: open data/walrustemp741838838: no such file or directory
y en el navegador me sale esto
XMLHttpRequest no puede cargar http://localhost:4984/test-database/?_nonce=1453751478847. No se puede utilizar un comodín \'*\' en la cabecera \'Access-Control-Allow-Origin\' cuando el indicador de credenciales es verdadero. Por lo tanto, no se permite el acceso al origen "http://localhost:9000".
pouchdb-4.0.1.min.js:9 Error de PouchDB: la base de datos remota no parece tener CORS habilitado. Para solucionarlo, habilite CORS: http://pouchdb.com/errors.html…
¡Interesante!
¿Te aseguraste de servir tu proyecto AngularJS en lugar de simplemente abrir el archivo de índice a través del Finder? Si está sirviendo su proyecto y está tratando de utilizarlo a través de localhost:9000, ¿puede decirme qué versión de Sync Gateway está utilizando?
Lo mejor,
Gracias por responder Nic,
Probé con Sync Gateway 1.0.4 y 1.1 y también intercambié entre Pouch 4.0.1 y Pouch 5.2.0 sin suerte. Definitivamente también serví el proyecto usando el servidor Python. Al final seguí tu tutorial de YouTube ( https://www.youtube.com/watch... que tenía un cambio muy ligero en el archivo sync-gateway-config.json en comparación con este tutorial.
Cuando usé \ 'morsa:datos\' según este tutorial tuve el problema CORS pero cuando seguí el de Youtube y usé \ 'servidor\':\ 'http://localhost:8091\' estaba bien.
¡Al menos ya estoy en marcha!
Una última pregunta, ¿debería esto manejar la sincronización bidireccional tal y como está? Tendré una aplicación Electron, una aplicación móvil y una aplicación web, todas sincronizándose con la base de datos Couchbase, así que necesitaré que cada PouchDB empuje y tire.
En sincronizar del servicio $pouchDB se encargará de la sincronización bidireccional.
En mi video usé localhost:8091 porque lo tenía conectado a mi instancia en vivo de Couchbase Server. En este artículo tenía Sync Gateway configurado para utilizar el almacenamiento temporal de morsa sólo para desarrollo. Es extraño que los problemas de CORS desaparecieran cuando cambiaste a Couchbase Server, pero me alegro de que hayas conseguido que funcione.
Si aún no lo has hecho, no olvides hacer una búsqueda del tutorial de Electron que hice y que amplía este post.
Lo mejor,
Sigo recibiendo un error CORS al intentar sincronizar una base de datos PouchDB. He probado el sync-gateway-config.json anterior y la versión que se encuentra en los documentos de Couchbase Sync Gateway aquí:
http://developer.couchbase.com…
En ambos casos, obtengo el siguiente error:
XMLHttpRequest no puede cargar http://localhost:4985/test-database/.
El encabezado "Access-Control-Allow-Origin" no está presente en el archivo solicitado.
recurso. Origen \'http://localhost:3000\' no es por lo tanto
acceso permitido.
He publicado este problema en StackOverflow, pero nadie ha intentado enviar una respuesta todavía.
http://stackoverflow.com/quest…
Asumo que estás usando lo siguiente:
Su error dice que está intentando acceder a través del puerto 3000. Ha cambiado el puerto dentro de la sección CORS de Sync Gateway de 9000 a 3000?
Lo mejor,
Gracias por responderme. Lo he hecho. En mi archivo sync-gateway-config.json, tanto "Origen" como "Origen de inicio de sesión" están configurados en el puerto 3000. Estoy atascado en este momento y no estoy seguro de qué más probar. La pregunta que publiqué en Stack Overflow tampoco tiene respuesta todavía.
He enviado un correo electrónico a nuestro equipo móvil. Ellos deben seguir este post pronto. Yo personalmente no veo lo que puede estar mal, pero pueden tener una perspectiva diferente.
Lo mejor,
Parece que está intentando acceder al puerto de administración de Sync Gateway, que no admite CORS, por lo que yo sé. ¿Ha intentado acceder al puerto público (4984)?
Ese era el problema. Estaba usando 4985 por alguna razón. No sé por qué. Gracias por su ayuda.
Hola Nic, ¡¡¡Gran tutorial!!!
¿Cómo integrarías "PouchDB\" con Spring Framework? Para que pueda utilizar Spring Security, otras librerías Java y exponer una API Restful (tal vez sólo una envoltura ficticia en la parte superior de Couchbase). Mi objetivo principal es tener un cliente AngularJs con autonomía offline, y capacidades auto-sync, pero como tengo un montón de módulos escritos en Java y necesito integrar otras librerías me encantaría combinar todo esto con una App Spring Framework en el backend.
He leído también su tutorial http://www.couchbase.com/deve... , pero no sé cuál es el mejor enfoque para integrarlo con PouchDB.
Cualquier consejo o sugerencia será muy apreciado.
Gracias,
Hola @delkan@delkant:disqus,
¿Qué tal si usas PouchDB como modelo en tu configuración MVC donde PouchDB y Sync Gateway están a cargo de todos los datos? Entonces podrías mantener tu aplicación Java existente para el procesamiento lógico y el renderizado.
Si necesitas más integración, Couchbase Sync Gateway tiene una API RESTful con la que puedes comunicarte a través de tu código Java. También puedes gestionar autenticación personalizada con Sync Gateway y tu servidor Java.
Podría ayudarme tener una historia más específica de las cosas que intentas hacer.
Lo mejor,
La verdad es que es una buena idea y me funciona, pero prefiero usar Spring security porque ya tengo a todos mis usuarios en él. He utilizado en el pasado este proxy http( https://github.com/mitre/HTTP-... ) para asegurar las peticiones http de solr\ con spring-security, acabo de hacer una prueba con el Sync Gateway también, de modo que sólo los usuarios autenticados con Spring-security podían acceder al gateway. Funcionó de maravilla. Otra cosa que me gusta aqui es que puedo exponer solo a nivel de bucket (basado en la url), todo esto usando spring security y en el mismo puerto donde esta mi app, solo definiendo un nuevo end point para servir a cloudbase sync gateway.
Hola Nic,
De nuevo un buen tutorial. Tengo una pregunta aquí.
Según la documentación de PouchDB https://pouchdb.com/adapters.h…
Couchbase Sync Gateway **soporte en progreso**. Funcionará, pero puedes tener problemas, especialmente con los archivos adjuntos.
Como el soporte está en progreso me pregunto si se puede usar PouchDB Server con Couchbase en su lugar. No he encontrado documentación sobre esto pero dado que ambas bases de datos están implementadas usando un protocolo similar a CouchDB quizás sean compatibles. ¿Podrías por favor confirmar esto?
¿Necesitas siempre un Sync Gateway o algo como PouchDB Server para acceder a una db tipo couchdb desde PouchDB?
Soy nuevo en esto, así que lo siento si mis preguntas no tienen sentido para usted.
Gracias, señor,
Estoy recibiendo un error cuando uso el código de ejemplo. El controlador establece escuchas cada vez que se carga la vista de lista y provoca el error de abajo:
pouchdb.js:141 (nodo) advertencia: posible fuga de memoria EventEmitter detectado. 11 oyentes añadidos. Usa emitter.setMaxListeners() para aumentar el límite.
No soy un ninja de Angular, pero supongo que ese trozo de código debe moverse a un servicio.
¡¡Hola Señor!!
¿Quería desarrollar la aplicación anterior con CouchDB en lugar de Couchbase? ¿Es lo mismo que arriba? ¿Cuál es preferible, pero sobre todo estoy buscando CouchDB? ¿O tengo que hacer alguna modificación en el código anterior? ¿Puedes proporcionarme algún enlace o recurso para desarrollar con CouchDB?
Gracias de antemano.
Lo tendrás mucho más fácil con Couchbase. Tiene más funciones y es más fácil de usar.
Señor, tengo que desarrollar una aplicación POS que sea offline y sincronice los datos cuando el usuario tenga acceso a internet. Quiero saber cómo couchbase maneja los estados conflictivos. Por ejemplo, si hay una venta en la estación POS 1 para el artículo A. El cliente llegó con 2 cantidades del artículo A. Al mismo tiempo, la estación 1 estaba fuera de línea y los datos locales muestran sólo una cantidad restante para el artículo A. Pero en realidad el gerente de ventas sólo muestra una cantidad restante para el artículo A. Al mismo tiempo, la estación 1 estaba fuera de línea y los datos locales muestran sólo 1 cantidad restante para el artículo A. Pero en realidad el gerente de ventas había rellenado las existencias hace algún tiempo cuando la estación 1 estaba fuera de línea, lo que significa que la reposición de existencias no se mostrará en la estación 1 hasta que la base de datos se sincronice. Mi pregunta es ¿Cómo se manejará este escenario en los estados offline / online de la base de datos?
El historial de revisiones se mantiene cada vez que cambia un documento. Así, por ejemplo, cuando guarde su documento por primera vez, puede tener este aspecto:
1-ad2348fd
Donde 1 es la revisión y el resto es el hash asociado a la grabación.
Si al final se encuentra con un documento que comparte el mismo id y el mismo número de revisión, pero diferentes hashes, se proporcionará un indicador de conflicto. En este punto, puede consultar el historial de revisiones del documento, es decir, mirar las dos entradas de revisión de la misma profundidad (o más profundas) y aplicar su lógica de negocio para ver qué guarda debe ganar.
Si se diera el caso de que uno de los dispositivos acabara con un número de historial de revisiones superior, es decir, que el dispositivo offline guardara 100 veces, ganaría sin conflicto el que hubiera guardado la revisión superior. Sin embargo, siempre puede consultar el historial de revisiones y aplicar más lógica empresarial.
¿Responde esto a su pregunta?
Lo mejor,
No del todo. El escenario que he proporcionado, me encontré con el problema cuando la estación fuera de línea tiene la orden de venta (2 artículos del producto A) que más de lo que su estado DB local (Sólo 1 artículos restantes del producto A). En este escenario, ¿cómo se puede llevar a cabo la transacción de venta mientras la estación (aplicación POS) está en modo fuera de línea? La unica solucion que se me ocurre es poner en negativo los articulos durante el periodo en que la aplicacion esta offline, porque 1-2 = -1; y tan pronto como Internet este disponible sincronizo el estado y gestiono los conflictos como has dicho. ¿puedes presentar alguna solucion mejor?
Realmente no estoy seguro de lo que estás diciendo. ¿Quieres intentarlo de nuevo?
HI Nic,
Gran tutorial. Muy bien explicado.
quería señalar, al inyectar el AngularJs UI router, en app.js, inyectar ["ui.router"] en lugar de ["ui-router"] para evitar el error injectormodulerr.
Gracias de nuevo
HI Nic,
Mis disculpas, yo era el que había leído mal. Usted había inyectado correctamente.
Ahora que SyncGateway no soporta el protocolo de replicación CouchDB este tutorial parece no ser válido.
https://developer.couchbase.com/documentation/mobile/2.0/references/couchbase-lite/release-notes/index.html#deprecation-notices