{"id":1917,"date":"2015-12-16T01:03:04","date_gmt":"2015-12-16T01:03:03","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=1917"},"modified":"2023-10-06T00:03:18","modified_gmt":"2023-10-06T07:03:18","slug":"first-steps-with-pouchdb-sync-gateway-todomvc-todolite","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/first-steps-with-pouchdb-sync-gateway-todomvc-todolite\/","title":{"rendered":"Primeros pasos con PouchDB y Sync Gateway"},"content":{"rendered":"

Esta semana, PouchDB v3.4.0<\/a>\u00a0con compatibilidad con Couchbase Sync Gateway.<\/p>\n

En este post, tomaremos el ejemplo existente de \ufffcTodoMVC\ufffc y agregaremos sincronizaci\u00f3n filtrada usando autenticaci\u00f3n de Facebook. Adem\u00e1s de la sincronizaci\u00f3n entre los clientes Web, vamos a cambiar el modelo de datos ligeramente para sincronizar con las aplicaciones ToDoLite existentes que se ejecutan en iOS\ufffc<\/a> y \ufffcAndroid<\/a>:<\/p>\n

Para seguir adelante, puedes abrir y ejecutar el ejemplo TodoMVC en commit \ufffc.d9bb961<\/a>. Para mayor comodidad, he a\u00f1adido el c\u00f3digo de inicio de sesi\u00f3n de Facebook en app.js<\/strong>. Cuando el usuario inicia sesi\u00f3n, la funci\u00f3n startSessionAndSync(accessToken, userId)<\/strong>\u00a0se llama. \u00a1Ahora vamos a a\u00f1adir el c\u00f3digo para que esto suceda!<\/p>\n

Inicio r\u00e1pido<\/h1>\n

Aseg\u00farate de servir la aplicaci\u00f3n en el puerto 9000<\/strong>\u00a0ya que configuraremos CORS para localhost:9000<\/strong>\u00a0m\u00e1s tarde. El simple comando python debe hacer:<\/p>\n

$ python -m SimpleHTTPServer 9000\r\n<\/pre>\n
Modelizaci\u00f3n de datos<\/h1>\n
TodoMVC y ToDoLite tienen un modelo de datos ligeramente diferente. En las apps ToDoLite, un usuario puede crear m\u00faltiples listas y compartirlas con m\u00faltiples usuarios.<\/p>\n
En primer lugar, veamos un documento de Tarea con la informaci\u00f3n esperada t\u00edtulo<\/strong>\u00a0y una lista_id<\/strong>\u00a0haciendo referencia a la Lista a la que pertenece (en este caso 123):<\/p>\n
{\r\n  \"_id\": \"E9W3-9I2Y-O8W2-6Y4D\",\r\n  \"type\": \"task\",\r\n  \"list_id\": \"123\",\r\n  \"title\": \"A task title\"\r\n}\r\n<\/pre>\n
Del mismo modo, un documento de Lista tambi\u00e9n tiene un t\u00edtulo<\/strong>\u00a0y un propietario que hace referencia al usuario al que pertenece:<\/p>\n
{\r\n  \"_id\": \"123\",\r\n  \"type\": \"list\",\r\n  \"title\": \"TodoMVC list\",\r\n  \"owner\": \"p:1234567890\"\r\n}\r\n<\/pre>\n
TodoMVC sin embargo es una aplicaci\u00f3n de lista \u00fanica. Para mantener las cosas simples podemos insertar el documento de la lista en c\u00f3digo tan pronto como el usuario inicie sesi\u00f3n.<\/p>\n
Vamos a crear una nueva funci\u00f3n llamada migrateGuestToUser<\/strong> para crear el documento List con el id de usuario y guardarlo en PouchDB:<\/p>\n
function migrateGuestToUser(userId) {\r\n  var list = {\r\n    _id: '123',\r\n    type: 'list',\r\n    title: 'TodoMVC list',\r\n    owner: 'p:' + userId\r\n  };\r\n  db.put(list, function(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully saved user list');\r\n    }\r\n  })\r\n}\r\n<\/pre>\n
Nota:<\/strong> Es muy importante establecer el campo propietario, la funci\u00f3n de sincronizaci\u00f3n rechazar\u00e1 el documento de lo contrario<\/a>.<\/p>\n
Y podemos llamarlo en startSessionAndSync<\/strong>:<\/p>\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n}\r\n<\/pre>\n
Los documentos de tarea pertenecen a una lista y, por tanto, tienen un lista_id<\/strong> que necesitamos establecer. Cambie la propiedad addTodo<\/strong> funci\u00f3n en app.js<\/strong> para que se vea como abajo. F\u00edjese en que hemos definido el par\u00e1metro lista_id<\/strong> al campo _id<\/strong> de la lista que hemos insertado anteriormente:<\/p>\n
function addTodo(text) {\r\n  var todo = {\r\n    _id: new Date().toISOString(),\r\n    title: text,\r\n    checked: false,\r\n    type: 'task',\r\n    list_id: '123',\r\n    created_at: new Date()\r\n  };\r\n  db.put(todo, function callback(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully posted a todo!');\r\n    }\r\n  });\r\n}\r\n<\/pre>\n
Ahora que tenemos los documentos apropiados que se ajustan al modelo de datos de ToDoLite, podemos echar un vistazo a la autenticaci\u00f3n y la replicaci\u00f3n.<\/p>\n
Activaci\u00f3n de CORS en Sync Gateway<\/h1>\n
En este tutorial, vamos a ejecutar una instancia local de Sync Gateway en localhost:4984<\/strong> pero estamos sirviendo nuestra aplicaci\u00f3n web en localhost:9000<\/strong>. En este punto obtendr\u00edamos un error de pol\u00edtica de mismo origen. Pero Chris<\/a> recientemente a\u00f1adi\u00f3 soporte CORS a Sync Gateway para este prop\u00f3sito. As\u00ed que no tenemos que escribir una sola l\u00ednea de c\u00f3digo del lado del servidor :)<\/p>\n
CORS permite a las aplicaciones web acceder a recursos de dominios distintos del dominio de origen. Al activar CORS en Sync Gateway le estamos diciendo al navegador \"S\u00ed, el nombre de dominio Sync Gateway puede comunicarse con esta aplicaci\u00f3n web\". Abrir sync-gateway-config.json<\/strong> con la configuraci\u00f3n CORS adicional para habilitarlo en localhost:9000<\/strong>:<\/p>\n
{ \r\n ...\r\n \"CORS\": {\r\n   \"Origin\": [\"https:\/\/localhost:9000\"],\r\n   \"LoginOrigin\": [\"https:\/\/localhost:9000\"],\r\n   \"Headers\": [\"Content-Type\"],\r\n   \"MaxAge\": 17280000\r\n },\r\n ...\r\n}\r\n<\/pre>\n
Utilice Sync Gateway 1.1 o posterior. In\u00edcielo con el archivo de configuraci\u00f3n:<\/p>\n
$ ~\/Downloads\/sync_gateway sync-gateway-config.json\r\n<\/pre>\n
Volver a app.js<\/strong>actualice la url de remoteCouch en consecuencia:<\/p>\n
var SYNC_GATEWAY_URL = 'https:\/\/127.0.0.1:4984\/todos\/';\r\nvar remoteCouch = SYNC_GATEWAY_URL;\r\n<\/pre>\n
Ahora bien, si intent\u00e1ramos sincronizar la lista con Sync Gateway obtendr\u00edamos un error 401 No autorizado. Vamos a solucionarlo creando una sesi\u00f3n de usuario con el login de Facebook.<\/p>\n
Autenticaci\u00f3n con Sync Gateway<\/h1>\n
Para autenticarnos con Sync Gateway podemos enviar una solicitud POST a \/todos\/_facebook<\/strong> con el token de acceso, si recibimos un 200 OK, el navegador establecer\u00e1 la cookie de sesi\u00f3n devuelta por Sync Gateway para futuras r\u00e9plicas push\/pull.<\/p>\n
function startSyncGatewaySession(accessToken) {\r\n  var request = new XMLHttpRequest();\r\n  request.open('POST', SYNC_GATEWAY_URL + '\/_facebook', true);\r\n  request.setRequestHeader('Content-Type', 'application\/json');\r\n  request.onreadystatechange = function() {\r\n    if (request.readyState == 4 && request.status == 200) {\r\n      console.log('New SG session, starting sync!');\r\n      sync();\r\n  };\r\n  request.withCredentials = true;\r\n  request.send(JSON.stringify({\"access_token\": accessToken}));\r\n}\r\n<\/pre>\n
Nota<\/strong>: Es importante fijar request.withCredentials = true<\/strong> en una solicitud CORS para guardar la cookie devuelta por Sync Gateway para futuras solicitudes autenticadas (r\u00e9plicas push\/pull).<\/p>\n
Ll\u00e1malo startSessionAndSync<\/strong> pasando el accessToken<\/strong> volvimos de Facebook:<\/p>\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n  startSyncGatewaySession(accessToken);\r\n}\r\n<\/pre>\n
Conclusi\u00f3n<\/h1>\n
Ahora abre tu navegador, puedes comprobar que los elementos de todo se sincronizan con otra ventana del navegador abierta o con las aplicaciones nativas que ejecutan TodoLite.<\/p>\n
Los usuarios pueden seguir creando tareas sin estar conectados. Pero en cuanto un usuario inicia sesi\u00f3n, las tareas pasan a formar parte de su lista. Ofrecer una funci\u00f3n de cuenta de invitado es una de las muchas ventajas de crear capacidades offline-first.<\/p>\n
F\u00edjese en el Lista TodoMVC<\/strong> se muestra como una tarea en Chrome. Esto se debe a que en este ejemplo se utilizaba la funci\u00f3n allDocs<\/strong> para visualizar las tareas.<\/p>\n
En el pr\u00f3ximo post, usaremos consultas Map\/Reduce para a\u00f1adir la capacidad multi-lista y tambi\u00e9n un documento de perfil para compartirlos con otros usuarios.<\/p>\n
M\u00e1s informaci\u00f3n:<\/p>\n