Anteriormente en primera parte de esta serie
con respecto a Ionic Framework y Couchbase, escribí sobre el uso de Couchbase Lite para hacer CRUD local
(Crear, Recuperar, Actualizar, Eliminar) en un ejemplo de lista de tareas. Esta vez vamos a llevarlo al siguiente nivel y veremos
cómo replicar cambios a través de múltiples dispositivos y plataformas usando Couchbase Sync Gateway.
Requisitos previos
Para tener éxito en este tutorial, necesitas haber hecho lo siguiente:
- Finalizada la primera parte de la serie de blogs sobre Ionic Framework
- Descargado Couchbase Sync Gateway
- El SDK de Android si construyes para Android
- Un Mac con Xcode instalado si se construye para iOS
Este tutorial va a continuar exactamente donde lo dejó la primera parte de la serie, por lo que es importante que usted tenía la primera parte en un trabajo
antes de continuar.
Configuración de Couchbase Sync Gateway
Para utilizar Sync Gateway con nuestra aplicación, primero tenemos que crear un archivo de configuración. Cree un archivo llamado
sync-gateway-config.json en la raíz de tu proyecto e incluye 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 |
{ "log": ["CRUD", "REST+", "Access"], "databases": { "todos": { "server": "walrus:", "users": { "GUEST": {"disabled": false, "admin_channels": ["*"]} }, "sync": ` function(doc, oldDoc) { // NOTE this function is the same across the iOS, Android, and PhoneGap versions. if (doc.type == "task") { if (!doc.list_id) { throw({forbidden : "items must have a list_id"}) } channel("task-"+doc.list_id); } else if (doc.type == "list") { channel("list-"+doc._id); if (!doc.owner) { throw({forbidden : "list must have an owner"}) } if (oldDoc) { var oldOwnerName = oldDoc.owner.substring(oldDoc.owner.indexOf(":")+1); requireUser(oldOwnerName) } var ownerName = doc.owner.substring(doc.owner.indexOf(":")+1); access(ownerName, "list-"+doc._id); } } ` } } } |
No dejes que lo anterior te abrume, ya que no hay mucho que hacer. La mayor parte de la lógica sólo comprueba que los documentos tengan todos los
propiedades requeridas.
Para destacar algunas de las principales cosas que ocurren aquí, primero eche un vistazo al bases de datos.todos propiedad.
Esta será nuestra base de datos remota. El servidor que estamos utilizando es morsa que es una solución basada en la memoria
en el Sync Gateway. Es bueno para probar antes de que estés listo para guardarlo en Couchbase Server. También estamos eligiendo habilitar
acceso de invitados, por lo que no se requerirán usuarios registrados por ahora.
Esto nos lleva al código JavaScript de sincronización. Si el documento es de tipo tarea, comprobamos si existe un id de lista padre, de lo contrario
forzar un fallo. Si existe, guardamos el documento en la pasarela de sincronización con el prefijo tarea- en la clave. Si el documento
no es una tarea, entonces podría ser una lista. Compruebe que el documento tiene un propietario y guardarla en la carpeta
Sync Gateway con el prefijo lista- en la llave.
Añadir una nueva ruta Ionic para el inicio de sesión
Añadir al UI-Router de AngularJS
A partir de ahora su configuración AngularJS debe incluir dos rutas. Una para las listas de tareas y otra para las tareas. Lo que queremos hacer
ahora es incluir una tercera ruta para iniciar sesión en Sync Gateway. Dentro de su proyecto www/js/app.js haga lo siguiente
cambiar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
couchbaseApp.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state("login", { url: "/login", templateUrl: "templates/login.html", controller: "LoginController" }) .state("todoLists", { url: "/todoLists", templateUrl: "templates/todolists.html", controller: "TodoListsController" }) .state("tasks", { url: "/tasks/:listId", templateUrl: "templates/tasks.html", controller: "TaskController" }); $urlRouterProvider.otherwise("/login"); }); |
Observe el nuevo estado de inicio de sesión y que hemos cambiado nuestra ruta por defecto para que sea /inicio de sesión en lugar de /listastodo. En
está lista, sólo necesitamos crear la vista y el controlador para finalizarla.
Creación de una vista de inicio de sesión
Dentro de la sección www/plantillas cree un archivo llamado login.html y añade el siguiente código:
Iniciar sesión como usuario invitado
Se trata de una simple vista con un botón. Cuando el usuario hace clic en el botón, el basicLogin() se llama a la función
que crearemos en el controlador de inicio de sesión.
Creación de un controlador de inicio de sesión
El controlador para gestionar los inicios de sesión realizará una tarea muy importante. Iniciará el proceso de replicación entre el Sync Gateway
y el dispositivo local. Aquí está la versión delgada de nuestro controlador que debe ser añadido a la www/js/app.js file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
couchbaseApp.controller("LoginController", function($scope, $state, $ionicHistory) { $ionicHistory.nextViewOptions({ disableAnimate: true, disableBack: true }); $scope.basicLogin = function() { }; }); |
Fíjese en el $ionicHistory.nextViewOptions método. Esto es para evitar que el botón de retroceso de hardware de llevar a los usuarios de nuevo
a la pantalla de inicio de sesión después de que ya han iniciado sesión. Más importante para Android ya que iOS no tiene un hardware de vuelta.
A continuación verá el $scope.basicLogin() que se llamó desde la vista de interfaz de usuario. Su contenido será como el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$scope.basicLogin = function() { todoDatabase.replicate("todo", "https://192.168.56.1:4984/todos", true).then(function(result) { todoDatabase.replicate("https://192.168.56.1:4984/todos", "todo", true).then(function(result) { $state.go("todoLists"); }, function(error) { // There was an error replicating to the local device }); }, function(error) { // There was an error replicating to the Sync Gateway }); }; |
Lo primero que ocurre es la replicación desde el dispositivo local a la pasarela de sincronización. Está configurado para replicar continuamente todos los cambios. Si
la replicación de local a remoto se inicia correctamente, lo mismo ocurre de remoto a local. Los datos se replicarán continuamente de
el Sync Gateway remoto hasta el dispositivo.
Si ambas son correctas, el usuario será redirigido a las listas de tareas pendientes. Tenga en cuenta que la puerta de enlace de sincronización no necesita estar operativa para mover
pasado el inicio de sesión. Si el servidor no está levantado, fallará graciosamente y seguirá adelante. También tenga en cuenta, que las IPs que figuran en la función anterior son
IPs que me permitieron comunicarme entre el simulador y la máquina anfitriona local. Pueden diferir para usted y puede ser necesario hacer algunas investigaciones.
Añadir información del propietario a los datos del documento
Es necesario introducir dos pequeños cambios en la forma en que almacenamos los documentos en la base de datos local. En la $scope.insert de ambos
controladores de tareas y listas de tareas pendientes, un propietario debe añadirse. En este caso, el propietario será invitado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$scope.insert = function() { $ionicPopup.prompt({ title: 'Enter a new TODO list', inputType: 'text' }) .then(function(result) { var obj = { title: result, type: "list", owner: "guest" }; todoDatabase.createDocument(obj).then(function(result) { // Document created successfully }, function(error) { // Document creation failed }); }); } |
El código anterior es un ejemplo de uno de los módulos $scope.insert funciones. De nuevo, la única diferencia es que hemos añadido una función
propietario propiedad.
Probar el proyecto
Ejecución de la puerta de enlace Couchbase Sync
Con el Sync Gateway descargado, ejecute lo siguiente desde su Símbolo del sistema o Terminal:
|
1 2 3 |
/path/to/sync/gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json |
El Sync Gateway debería iniciarse sin problemas.
Pruebas para Android
Con un dispositivo conectado o un simulador en ejecución, desde el símbolo del sistema o el terminal, ejecute los dos comandos siguientes para
construye e instala el archivo APK:
|
1 2 3 4 |
ionic build android adb install -r platforms/android/build/outputs/apk/android-debug.apk |
Pruebas para iOS
Hay dos buenas maneras de hacer esto. Usted puede construir el proyecto y abrirlo con Xcode, o puede construir y emular la aplicación
sin iniciar Xcode. El primero se puede hacer así:
|
1 2 3 |
ionic build ios |
A continuación, abra el proyecto plataforma/ios/ e inicie el archivo de proyecto de Xcode.
Si ha instalado el paquete Node Package Manager (NPM) ios-simpuede hacer lo siguiente:
|
1 2 3 4 |
ionic build ios ionic emulate ios |
Conclusión
Usando el plugin PhoneGap de Couchbase y el Couchbase Sync Gateway, hemos creado una aplicación móvil de listas de tareas que replica datos
de forma local y remota para que se pueda acceder a él a través de múltiples dispositivos y plataformas. Utilizamos AngularJS para conectarnos fácilmente a los puntos finales RESTful
que expone Couchbase Lite.
Esta serie puede descargarse íntegramente de Couchbase Labs GitHub página.
¿La sincronización entre local y remoto es en tiempo real?
¡Sí que lo es!
Hola Nic, Es un tutorial maravilloso .. He aprendido mucho de sus tutoriales. Gracias por ello. Tengo una duda, he creado una aplicación utilizando su serie de aplicaciones parte 1 y parte 2 como base. He hecho todos los procedimientos que usted ha mencionado y soy capaz de conectarse a la pasarela de sincronización couchbase y he añadido algunos clientes a través de mi aplicación. Soy capaz de ver el documento en la base de datos también. Pero cuando me conecto con diferentes clientes en mi aplicación móvil, estoy recibiendo todas las entradas generadas por los diferentes clientes en mi aplicación móvil .... Por favor, ¿puede ayudarme hay alguna actualización adicional que tengo que hacer?
La configuración de tu pasarela de sincronización tendría que ser más compleja que la que he enumerado para dar cabida a la autenticación de usuario. Del mismo modo, tendrías que hacer uso de la autenticación en el dispositivo local:
Podrías echar un vistazo a esto y volver:
https://developer.couchbase.com…
Estaré encantado de responder a sus preguntas :-)
Ya tengo esto. Primero no debo entrar con el mismo cliente en el mismo dispositivo. Tengo que hacer una opcion de log out clara si quiero entrar con otro cliente. Pero la forma de asignar los canales de forma individual para los usuarios acceder .. Bcoz demasiadas modificaciones en el archivo de configuración de sincronización. He intentado incluso el acceso de perfil también .. Pero no ... ¿Me puede ayudar aquí para la asignación de canales para los clientes. Ejemplo: - Como 2 clientes y 2 empleados y admin.
{
\"log": [\"CRUD\", \"REST+\", \"Access\"],
\"adminInterface":4985",
\bases de datos: {
\Todos: {
{\i1}"usuarios".{\i} {
\GUEST {\"disabled\": true, {\"admin_channels\": [\"*\"]}
},
\"servidor": \”https://192.168.3.134:8091\”,
\Sincronización:
function (doc, oldDoc) {
if (doc.type == "ticket\") {
channel(doc._id);
var ownerName = doc.owner.substring(doc.owner.indexOf(\":\")) + 1);
console.log(doc.owner);
console.log(doc._id);
console.log(nombrepropietario);
access([doc.owner], doc._id);
}
}
}
}
}
Puede crear canales dinámicamente y concederles acceso mediante las propiedades del documento.
Enrutamiento de datos: https://developer.couchbase.com…
Validación de datos: https://developer.couchbase.com…
La función de acceso toma el nombre del usuario como primer parámetro y el nombre del canal como segundo parámetro.
Si tiene un documento con el siguiente esquema:
{
\"_id": \"123\",
\"tipo": \"orden",
\ "cliente_id\": \"ali\"
}
La Función de Sincronización podría contener lo siguiente:
function(doc, oldDoc) {
if (doc.type == \"order\") {
channel(doc._id);
access(doc.customer_id, doc._id);
}
}
Aquí estás diciendo "inserta el documento en el canal llamado 123 y dale al usuario ali acceso al canal 123".
También puede utilizar roles para asignar a los usuarios un rol determinado y conceder a un rol acceso a un canal.
Hola Nic, de nuevo - buen tutorial, he estado siguiendo esto y otro par del foro couchbase también para completar una solución basada en la nube. Estoy en condiciones de obtener esta solución en marcha, rápida y fácilmente gracias a sus instrucciones claras. He estado buscando en la integración de la autenticación de usuario a través de Facebook, hay numerosos ejemplos utilizando una gran cantidad de marcos, pero no ser iónico, ¿sabe usted de alguna?
¿Quizás tomar esta aplicación de ejemplo e integrarla con las APIs de Couchbase Sync Gateway?:
https://github.com/nraboy/ng-c…
Sip ese es el que usé, esta tarde he conseguido poner algo en marcha. Donde me han surgido los problemas ha sido en el archivo json de configuración de la pasarela de sincronización. Para conseguir la sincronización en marcha y funcionando he tenido que establecer cors para aceptar las solicitudes de * y no he conseguido la sección de sincronización bien todavía, pero puedo ver que el token de acceso de Facebook está siendo aceptado y algunos documentos se están sincronizando. Un poco más de lectura que hacer este fin de semana, debería tener tiempo durante la próxima semana para obtener la solución en marcha y funcionando correctamente, cualquier consejo sobre ejemplos adecuados de la configuración de sincronización o cors configurar en este caso sería muy útil
Gracias por el tutorial Nic
Funcionará Couchbase Sync Gateway en una máquina local o requerirá un servidor global.
Usted puede prototipo de su aplicación con Sync Gateway localmente, pero una vez que comience a utilizar dispositivos reales tendrá que utilizar un servidor remoto, de lo contrario probablemente no será capaz de conectarse a su máquina.
Hola Nic sigo tu tutorial, me enfrento al siguiente problema cuando inserto datos en Couch Base Server...
No estoy seguro de lo que significa este error, pero siempre debe insertar documentos a través de la API REST de Sync Gateway (https://developer.couchbase.com... de lo contrario no se crearán las reglas de revisión y acceso y se producirá un lío en el algoritmo de replicación cuando intentes hacer una replicación pull.
Mi pasarela de sincronización tampoco funciona correctamente cuando pruebo la aplicación sin dispositivo.
Tambien accedo globalmente al puerto 8091 del sistema local de la misma manera hago que los puertos 4984 y 4985 accedan globalmente pero estos puertos (4984,4985) no acceden globalmente.
Hola Nic
Mi pasarela de sincronización tampoco funciona correctamente cuando pruebo la aplicación sin dispositivo.
Tambien accedo globalmente al puerto 8091 del sistema local de la misma manera hago que los puertos 4984 y 4985 accedan globalmente pero estos puertos (4984,4985) no acceden globalmente.
Hola Nic,
Gracias por el tutorial ahora mi sync gateway funciona y los datos se replican al servidor.
¡Impresionante!
Hola Nic,
Estoy tratando de implementar la funcionalidad de inicio de sesión con nombre de usuario y contraseña usando couchbase + ionic, ¿Puede usted por favor me apunte a algún tutorial...
¿Quizás empezar aquí?
https://developer.couchbase.com…
Hola Nic ,
Gracias por el enlace es realmente me help.but si usted puede dar algún enlace de la aplicación que está en github y el uso de inicio de sesión y la funcionalidad de registro !!!.
Actualmente no hay ninguna demo de Ionic en GitHub para esto. Puedes ver la versión de PhoneGap si quieres:
https://github.com/couchbasela…
Creo que sería de más ayuda que compartieras lo que has probado y en base a eso te puedo ayudar.
Hola Nic ,
Quiero actualizar mis "elementos de tarea" en la aplicación todo, ¿puede decirme la consulta para actualizar el documento?
Podrías llamar al método updateDocument:
https://github.com/couchbasela…
updateDocument(documentId, documentRevision, jsonDocument);
Hola Nic ,
Gracias por el enlace, la función updateDocument actualiza el documento de mi base de datos local (base de datos móvil).
Pero no está enviando la actualización al servidor. Usando sync gateway, las funciones CreateDocument y Delete funcionan correctamente en mi aplicación y la sincronización con el servidor Couchbase también funciona correctamente a través de syncgateway, pero al usar update el log del servidor muestra un error como en la captura de pantalla
¿Puede ayudarme?
Para que me quede claro, ¿el documento se actualiza localmente? Simplemente no se replica, ¿correcto?
Lo mejor,
He abierto un ticket para usted que se encuentra aquí:
https://github.com/couchbase/s…
Ravi, ¿puedes publicar tu función de sincronización? (idealmente en un gist de github o algo que preserve el formato)
Esta conversación se trasladó aquí: https://forums.couchbase.com/t…
Hola Traun,
Comparto el archivo de sincronización en \ "https://forums.couchbase.com/t...\Nenlace como usted dijo .
También he utilizado "canal público" en el archivo syncgateway pero me enfrento al mismo problema "403 usuario incorrecto".
¿Puede orientarme sobre este problema o indicarme algún tutorial?
¿Puede enviar esto a la conversación en https://forums.couchbase.com/t… ?
Hola Traun,
Publico mi función de sincronización en el enlace \"https://forums.couchbase.com/t…\” .
También he utilizado el archivo syncgateway "canal público", pero me enfrenté al mismo problema "403 usuario incorrecto".
Pueden orientarme sobre este problema o indicarme algún tutorial...
Hola a todos y en especial a Nic, Felicidades por los buenos artículos que has publicado, estoy intercambiando CouchDB con Couchbase, sin embargo no puedo hacer replicación con usuario y contraseña (método HTTP)
¿Qué tengo que hacer antes de replicar en basicLogin(user, pass)?
…
todoDatabase.replicate (\"all\", \"https://192.168.0.11:4984/todos\", true) .then (function (result) {
todoDatabase.replicate (\"https://192.168.0.11:4984/todos\", \"all\", true) .then (function (result) {
…
perdón por mi inglés.
Gracias.
Hola @disqus_2gt0DNVITS:disqus,
Dado que la autenticación está fuera del ámbito de este artículo, ¿puedes iniciar un hilo de conversación en los foros?
https://forums.couchbase.com
Lo mejor,
Hola Nic,
Estoy tratando de implementar la funcionalidad de inicio de sesión y registro con nombre de usuario y contraseña utilizando couchbaseLite + ionic , ¿Puede usted por favor me guía sobre este tema.
Dado que el inicio de sesión y el registro están fuera del alcance de esta entrada del blog en particular, por favor traiga sus preguntas a los foros:
https://forums.couchbase.com/
Lo mejor,
Hola Nick, he seguido las instrucciones, código trabajado, pero todavía no sé cómo sincronizar db de Sync Gateway a la aplicación. He escrito la url sync_gateway y el resultado es:
{"commit_update_seq\":1,\"compact_running":false,\"db_name":\"todos\",\"disk_format_version":0,\"instance_start_time":1463023463886566,\"purge_seq":0,\"state":\"Online\",\"update_seq\":1}. Parece que es una base de datos vacía.
Podrías decirme las instrucciones para crear los datos de los registros en sync_gateway y sincronizarlos con la app. Gracias.
Algo así iniciaría el proceso de sincronización:
En realidad nunca estás guardando directamente en la pasarela de sincronización o en el servidor couchbase. Estás guardando localmente y los cambios se sincronizan.
¿Tienes algún registro más allá de lo que compartiste conmigo?
Gracias por su respuesta, he cambiado la url el registro dijo que:
Error al cargar el recurso https://127.0.0.1:4984/todos/
ERROR -> null app.js:86
(función anónima)
Error al cargar el recurso https://127.0.0.1:4984/_replicate
¿Qué es el trozo de código alrededor de la línea 86?
Me sigue apareciendo el error de que la dirección ya está en uso. ¿Cómo averiguar qué IP funcionará? He buscado mucho en Google, pero no he encontrado ninguna solución.
¿En qué momento recibes este mensaje? ¿Lo recibes en el dispositivo? ¿En el terminal? ¿En un navegador web? Cuanta más información tenga, mejor podré ayudarte.
Lo mejor,
Cuando estoy ejecutando este comando en la Terminal:
/ruta/a/sync/gateway/bin/sync_gateway /ruta/a/proyecto/sync-gateway-config.json
Si no lo detienes correctamente después de usarlo, el servicio Sync Gateway seguirá ocupando el puerto. Si esto ocurre, tendrás que matar el proceso manualmente y esto puede variar dependiendo de tu sistema operativo.
Lo mejor,
Cuando estoy ejecutando ese comando por primera vez, estoy recibiendo el error: dirección ya en uso. Y me aseguré de que no tengo puertos abiertos de cualquier otro servicio.
De la entrada del blog: \ "También tenga en cuenta, que las IPs que figuran en la función anterior son IPs que me permitió comunicar entre simulador a la máquina host local. Pueden diferir para usted y algunas investigaciones puede ser necesario hacer.\"
No entiendo esta línea. Creo que me estoy perdiendo algo.
Como utilizo Genymotion, no puedo conectarme a Sync Gateway desde mis simuladores utilizando localhost. Es por eso que tengo direcciones IP únicas. Si Sync Gateway y Couchbase Server se ejecutan en la misma máquina, estará utilizando localhost.
Si estás teniendo conflictos de dirección, es posible que desees publicar en los foros, ya que no parece estar relacionado con este post.
Lo mejor,