{"id":2108,"date":"2016-01-07T16:23:09","date_gmt":"2016-01-07T16:23:08","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2108"},"modified":"2023-06-23T06:06:16","modified_gmt":"2023-06-23T13:06:16","slug":"introducing-the-react-native-couchbase-lite-module","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/es\/introducing-the-react-native-couchbase-lite-module\/","title":{"rendered":"Presentamos el m\u00f3dulo React Native Couchbase Lite"},"content":{"rendered":"<p>Recientemente, publicamos una serie de art\u00edculos sobre el tema del uso de Couchbase Lite en una aplicaci\u00f3n React Native. En este tutorial, lo llevar\u00e1s un paso m\u00e1s all\u00e1 y usar\u00e1s el recomendado <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">M\u00f3dulo Couchbase Lite<\/a> para React Native (disponible como <a href=\"https:\/\/www.npmjs.com\/package\/react-native-couchbase-lite\">M\u00f3dulo npm<\/a>). A\u00f1adir\u00e1s el c\u00f3digo necesario de Couchbase Lite para completar las Pantallas de Login y Lista para una simple Aplicaci\u00f3n Todo. Al final del tutorial, habr\u00e1s cubierto los siguientes conceptos b\u00e1sicos:<\/p>\n<ul>\n<li>Crear, suprimir una base de datos y los documentos que contiene.<\/li>\n<li>Uso de Couchbase Views para mostrar documentos de la lista por fecha.<\/li>\n<li>Replicaciones con autenticaci\u00f3n b\u00e1sica.<\/li>\n<li>Creaci\u00f3n de usuarios de Sync Gateway y uso de una funci\u00f3n de sincronizaci\u00f3n.<\/li>\n<\/ul>\n<h2 id=\"toc_1\" style=\"margin-top: 0.7em;text-align: left\">Requisitos<\/h2>\n<ul>\n<li>Node.js 4.0 +<\/li>\n<li>Xcode 7 o superior<\/li>\n<li>Un simulador de iOS o un dispositivo con iOS 9 o superior<\/li>\n<\/ul>\n<h2 id=\"toc_1\">Primeros pasos<\/h2>\n<p>Para ahorrar algo de tiempo, ya he creado un proyecto de inicio que contiene todo el c\u00f3digo de interfaz de usuario. Adelante <a href=\"https:\/\/cl.ly\/2L3t2p2p001q\">descargarlo<\/a> al directorio que prefieras y descomprime el contenido. A continuaci\u00f3n, desde el directorio del proyecto instale las dependencias:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install<\/code><\/pre>\n<p>Si a\u00fan no es el caso, aseg\u00farate tambi\u00e9n de tener la CLI de React Native instalada globalmente:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install react-native -g<\/code><\/pre>\n<p>A continuaci\u00f3n, inicie el demonio React Native:<\/p>\n<pre>\r\n<code class=\"language-none\">$ react-native start<\/code><\/pre>\n<p>Abra el proyecto Xcode en <code>ios\/UntitledTodoApp.xcodeproj<\/code> y ejec\u00fatalo en el simulador o dispositivo desde Xcode. Deber\u00edas ver ambas pantallas:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/screens-start.png\" \/><\/p>\n<p>Observe que el bot\u00f3n Cerrar sesi\u00f3n no le devuelve a la pantalla de inicio de sesi\u00f3n y que no se muestra nada en el ListView. No se preocupe, lo solucionar\u00e1 en la siguiente secci\u00f3n :) Recuerde habilitar LiveReload usando la opci\u00f3n <code>Cmd+D<\/code> (y Chrome Debugging puede ser \u00fatil a veces).<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/tools.png\" \/><\/p>\n<h2 id=\"toc_2\">Persistencia local con Couchbase Lite<\/h2>\n<p>El proyecto de inicio ya contiene el m\u00f3dulo React Native Couchbase Lite (puede seguir la gu\u00eda <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">instrucciones de repo<\/a> para usarlo en otro proyecto React Native). En esta secci\u00f3n, aprender\u00e1s c\u00f3mo instanciar un nuevo gestor, base de datos y persistir documentos localmente.<\/p>\n<p>Crear un nuevo archivo en <code>src\/base.js<\/code> y pega lo siguiente:<\/p>\n<pre>\r\n<code class=\"language-javascript\">\/\/ 1\r\nimport {manager, ReactCBLite} from &apos;react-native-couchbase-lite&apos;;\r\n\r\n\/\/ 2\r\nReactCBLite.init(5984, &apos;admin&apos;, &apos;pass&apos;);\r\n\r\n\/\/ 3\r\nvar database = new manager(&apos;https:\/\/admin:pass@localhost:5984\/&apos;, &apos;myapp&apos;);\r\n\r\n\/\/ 4\r\nmodule.exports = database;<\/code><\/pre>\n<p>El c\u00f3digo hace lo siguiente:<\/p>\n<ol>\n<li>Importe el <code>director<\/code> y <code>ReactCBLite<\/code> del m\u00f3dulo mediante la funci\u00f3n <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">desestructurar la sintaxis de las asignaciones<\/a> en ES6.<\/li>\n<li>Inicia el Listener de Couchbase Lite que sirve una API REST HTTP que usar\u00e1s m\u00e1s tarde.<\/li>\n<li>Instanciar una instancia de gestor pasando la URL del servidor incrustado y el nombre de la base de datos deseada.<\/li>\n<li>Exporte el objeto para poder utilizarlo durante todo el ciclo de vida de la aplicaci\u00f3n.<\/li>\n<\/ol>\n<p>Ahora puede centrarse en <code>components\/Login.js<\/code>. A\u00f1ade una sentencia require para utilizar el objeto de base de datos del paso anterior:<\/p>\n<pre>\r\n<code class=\"language-javascript\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>Este componente tiene dos campos de entrada y un bot\u00f3n, por ahora no va a comprobar si el usuario existe porque Sync Gateway no est\u00e1 en funcionamiento todav\u00eda. Sin embargo, tendr\u00e1 que arrancar la base de datos local antes de abrir la vista de lista. Sustituya el cuerpo de <code>onLoginButtonPressed<\/code> con lo siguiente:<\/p>\n<pre>\r\n<code class=\"language-javascript\">var remote = `https:\/\/${this.state.username}:${this.state.password}@localhost:4984\/todos`;\r\nvar credentials = this.state;\r\ndatabase.createDatabase()\r\n  .then((res) =&gt; {\r\n    database.replicate(&apos;myapp&apos;, remote, true);\r\n    database.replicate(remote, &apos;myapp&apos;, true);\r\n    var todoViews = {\r\n      lists: {\r\n        \"map\": function (doc) {\r\n          emit(doc.created_at, doc);\r\n        }.toString()\r\n      }\r\n    };\r\n    database.createDesignDocument(\"_design\/todo\", todoViews);\r\n  }).catch((err) =&gt; {\r\n    throw err\r\n  });\r\nvar data = {username: credentials.username};\r\nthis.props.navigator.push({id: 2, data: data});<\/code><\/pre>\n<p>Aqu\u00ed, est\u00e1 creando la base de datos y luego registrando un documento de dise\u00f1o con una vista para consultar documentos por su <code>fecha_de_creaci\u00f3n<\/code> propiedad.<\/p>\n<p>A continuaci\u00f3n, abra <code>Listas.js<\/code> y requerir el objeto de base de datos una vez m\u00e1s:<\/p>\n<pre>\r\n<code class=\"language-none\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>En el <code>render<\/code> observe las 2 variables <code>leftButtonConfig<\/code> y <code>rightButtonConfig<\/code> que se utilizan en el componente NavigationBar en la sentencia return. Corresponden a la <strong>Cerrar sesi\u00f3n<\/strong> y <strong>Nuevo<\/strong> botones. Los manejadores de clic no hacen nada sin embargo, por lo que va a cambiar de inmediato. En la ventana <code>manipulador<\/code> campo del objeto literal <code>leftButtonConfig<\/code> a\u00f1adir:<\/p>\n<pre>\r\n<code class=\"language-javascript\">database.deleteDatabase()\r\n  .then((res) =&gt; {\r\n    if (res.ok) {\r\n      this.props.navigator.pop();\r\n    }\r\n  });<\/code><\/pre>\n<p>Simplemente est\u00e1 borrando la base de datos (y todos los documentos y posibles r\u00e9plicas en curso con ella) y volviendo a la vista de inicio de sesi\u00f3n.<\/p>\n<p>A continuaci\u00f3n, en el <code>manipulador<\/code> para la <code>rightButtonConfig<\/code> a\u00f1adir:<\/p>\n<pre>\r\n<code class=\"language-javascript\">AlertIOS.alert(\r\n  &apos;New List Title&apos;,\r\n  null,\r\n  [\r\n    {\r\n      text: &apos;Save&apos;,\r\n      onPress: (text) =&gt; {\r\n        database.createDocument({\r\n          type: &apos;list&apos;,\r\n          title: text,\r\n          owner: that.props.data.username,\r\n          created_at: new Date().getTime()\r\n        });\r\n      }\r\n    },\r\n    {\r\n      text: &apos;Cancel&apos;,\r\n      style: &apos;cancel&apos;\r\n    }\r\n  ],\r\n  &apos;plain-text&apos;\r\n);<\/code><\/pre>\n<p>En este caso, se muestra un cuadro de di\u00e1logo de alerta para introducir el nuevo t\u00edtulo de la lista y, a continuaci\u00f3n, se mantiene en la base de datos (con la funci\u00f3n <code>propietario<\/code> con el usuario conectado y <code>fecha_de_creaci\u00f3n<\/code> como marca de tiempo actual).<\/p>\n<p>A continuaci\u00f3n, debajo del <code>getInitialState<\/code> a\u00f1ada lo siguiente para consultar los documentos almacenados:<\/p>\n<pre>\r\n<code class=\"language-none\">_redrawListView: function() {\r\n  \/\/ 1\r\n  database.queryView(&apos;_design\/todo&apos;, &apos;lists&apos;)\r\n    .then((res) =&gt; {\r\n      this.setState({\r\n        dataSource: this.state.dataSource.cloneWithRows(res.rows)\r\n      });\r\n    });\r\n},\r\ncomponentWillMount: function() {\r\n  \/\/ 2\r\n  var that = this;\r\n  that._redrawListView();\r\n  this.interval = setInterval(function () {\r\n    that._redrawListView();\r\n  }, 100);\r\n},\r\n\/\/ 3\r\ncomponentWillUnmount: function() {\r\n  clearInterval(this.interval);\r\n},<\/code><\/pre>\n<p>He aqu\u00ed el desglose de lo que est\u00e1 ocurriendo:<\/p>\n<ol>\n<li><code>_redrawListView<\/code> es un m\u00e9todo privado que consulta el <code>enumera<\/code> y actualiza la fuente de datos para mostrar las nuevas filas (si las hay) en la pantalla.<\/li>\n<li>En <code>componentWillMount<\/code> est\u00e1 utilizando el <code>setInterval<\/code> para comprobar peri\u00f3dicamente si hay nuevos documentos y actualizar la interfaz de usuario.<\/li>\n<li>Detener el m\u00e9todo de intervalo cuando el componente se desmonta (es decir, al volver a la vista de inicio de sesi\u00f3n).<\/li>\n<\/ol>\n<p>Cree una nueva lista y abra <a href=\"https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists\">https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists<\/a> en su navegador. Debe proporcionar <code>admin<\/code> para el nombre de usuario y <code>pase<\/code>\u00a0para la contrase\u00f1a. La respuesta JSON deber\u00eda tener este aspecto:<\/p>\n<pre>\r\n<code class=\"language-javascript\">{\r\n   \"offset\":0,\r\n   \"rows\":[\r\n      {\r\n         \"key\":1452038776654,\r\n         \"value\":{\r\n            \"owner\":\"james\",\r\n            \"_id\":\"-_XbsYkL8LNqVDSMuZceW71\",\r\n            \"_rev\":\"1-e62876578d58bcdef321bb50470debf4\",\r\n            \"created_at\":1452038776654,\r\n            \"title\":\"Groceries\",\r\n            \"type\":\"list\",\r\n            \"_local_seq\":2\r\n         },\r\n         \"id\":\"-_XbsYkL8LNqVDSMuZceW71\"\r\n      },\r\n      ...\r\n   ],\r\n   \"total_rows\":2\r\n}<\/code><\/pre>\n<p>Para visualizarlos en la pantalla se utilizar\u00e1 el bot\u00f3n <code>ListView<\/code> componente. Tiene dos atributos obligatorios:<\/p>\n<ul>\n<li><code>fuente de datos<\/code> para proporcionar los datos: puede pasar <code>this.state.dataSource<\/code>.<\/li>\n<li><code>renderRow<\/code> toma una funci\u00f3n que devuelve un <code>Ver<\/code> dado un elemento de la lista.<\/li>\n<\/ul>\n<p>Te falta el m\u00e9todo para dibujar la fila, abajo <code>render<\/code>a\u00f1ada un <code>renderRow<\/code> con lo siguiente:<\/p>\n<pre>\r\n<code class=\"language-javascript\">renderRow: function(list) {\r\n  var list = list.value;\r\n  return (\r\n    \r\n      {list.title}\r\n      {list.owner}\r\n    \r\n  );\r\n}<\/code><\/pre>\n<p>Los datos deseados se guardan en el <code>valor<\/code> y est\u00e1 mostrando los campos de t\u00edtulo y propietario en <code>Texto<\/code> elementos. En la sentencia return del <code>render<\/code> a\u00f1ada el m\u00e9todo <code>ListView<\/code> por debajo del <code>Barra de navegaci\u00f3n<\/code> componente as\u00ed:<\/p>\n<pre>\r\n<code class=\"language-none\">\r\n  \r\n  \r\n<\/code><\/pre>\n<p>Persiste en los documentos y observa que la pantalla se actualiza sola:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/render-list.png\" \/><\/p>\n<h2 id=\"toc_3\">Configuraci\u00f3n de la pasarela de sincronizaci\u00f3n<\/h2>\n<p>En esta secci\u00f3n, utilizar\u00e1 Sync Gateway para introducir la sincronizaci\u00f3n bidireccional y la autenticaci\u00f3n de usuarios en el servidor, de modo que puedan iniciar sesi\u00f3n varios usuarios. En primer lugar, descargue Sync Gateway de <a href=\"https:\/\/www.couchbase.com\/blog\/es\/nosql-databases\/downloads\/\">aqu\u00ed<\/a> y en el directorio ra\u00edz del proyecto, cree un nuevo archivo llamado <code>sync-gateway-config.json<\/code> con el siguiente JSON:<\/p>\n<pre>\r\n<code class=\"language-javascript\">{\r\n  \"log\": [\"*\"],\r\n  \"databases\": {\r\n    \"todos\": {\r\n      \"users\": {\r\n        \"moderator\": {\"password\": \"pass\", \"admin_channels\": [\"*\"]},\r\n        \"laura\": {\"password\": \"pass\"},\r\n        \"james\": {\"password\": \"pass\"},\r\n        \"adam\": {\"password\": \"pass\"}\r\n      },\r\n      \"sync\": `function(doc, oldDoc) {\r\n        var channelname = \"chan_\" + doc.owner\r\n        channel(channelname);\r\n        access(doc.owner, channelname);\r\n      }`\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<p>Algunas cosas importantes a tener en cuenta aqu\u00ed son:<\/p>\n<ul>\n<li>En <code>INVITADO<\/code> est\u00e1 desactivado (de hecho, es el caso por defecto) por lo que cualquier petici\u00f3n no autenticada ser\u00e1 tratada como no autorizada y devolver\u00e1 un c\u00f3digo de estado 401. Para ello, se han creado 4 usuarios diferentes (con nombres moderador, laura, james, adam). El usuario llamado <strong>moderador<\/strong> tiene acceso a todos los canales.<\/li>\n<li>La funci\u00f3n de sincronizaci\u00f3n env\u00eda un documento a un canal denominado <code>propietario<\/code> campo y concede el <code>propietario<\/code> acceso a ese canal.<\/li>\n<\/ul>\n<p>As\u00ed que, en teor\u00eda, el <strong>moderador<\/strong> deber\u00eda ver todos los documentos de la Lista, mientras que el <strong>otros usuarios<\/strong> s\u00f3lo ver\u00e1n sus propios documentos de la Lista.<\/p>\n<p>Inicie Sync Gateway desde la l\u00ednea de comandos:<\/p>\n<pre>\r\n<code class=\"language-none\">$ ~\/Downloads\/couchbase-sync-gateway\/bin\/sync_gateway .\/sync-gateway-config.json<\/code><\/pre>\n<p>En <code>Iniciar sesi\u00f3n.js<\/code>actualice el <code>onLoginButtonPressed<\/code> como sigue:<\/p>\n<pre>\r\n<code class=\"language-javascript\">\/\/ 1 - Request configuration\r\nvar remote = `https:\/\/${this.state.username}:${this.state.password}@localhost:4984\/todos`;\r\nvar credentials = this.state;\r\nvar settings = {\r\n  method: &apos;POST&apos;,\r\n  headers: {\r\n    &apos;Content-Type&apos;: &apos;application\/json&apos;\r\n  },\r\n  body: JSON.stringify({\r\n    name: credentials.username,\r\n    password: credentials.password\r\n  })\r\n};\r\nvar that = this;\r\n\/\/ 2 - Check that the name\/password are valid\r\nfetch(remote + &apos;\/_session&apos;, settings)\r\n  .then((res) =&gt; {\r\n    switch (res.status) {\r\n      case 200:\r\n        \/\/ 3 - Bootstrap application\r\n        database.createDatabase()\r\n          .then((res) =&gt; {\r\n            database.replicate(&apos;myapp&apos;, remote, true);\r\n            database.replicate(remote, &apos;myapp&apos;, true);\r\n            var todoViews = {\r\n              lists: {\r\n                \"map\": function (doc) {\r\n                  emit(doc.created_at, doc);\r\n                }.toString()\r\n              }\r\n            };\r\n            database.createDesignDocument(\"_design\/todo\", todoViews);\r\n          }).catch((err) =&gt; {\r\n            throw err\r\n          });\r\n        \r\n        var data = {username: credentials.username};\r\n        that.props.navigator.push({id: 2, data: data});\r\n        break;\r\n      case 401:\r\n        \/\/ 4 - Wrong credentials\r\n        alert(&apos;User not found or password incorrect&apos;);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  });<\/code><\/pre>\n<p>Esto es lo que ocurre:<\/p>\n<ol>\n<li>Construya la URL de la base de datos remota (en este caso se trata de una base de datos de Sync Gateway) y establezca los campos JSON de nombre\/contrase\u00f1a en el cuerpo de la solicitud.<\/li>\n<li>Utiliza el <a href=\"https:\/\/developer.couchbase.com\/documentation\/mobile\/1.1.0\/develop\/references\/sync-gateway\/admin-rest-api\/session\/post---db--_session-\/index.html\">POST \/_sesi\u00f3n<\/a> para comprobar el nombre y la contrase\u00f1a con Sync Gateway.<\/li>\n<li>Si las credenciales son v\u00e1lidas, cree la base de datos y, una vez hecho esto, inicie las r\u00e9plicas continuas push\/pull y registre un documento de dise\u00f1o con una vista para consultar el documento por su <code>fecha_de_creaci\u00f3n<\/code> propiedad.<\/li>\n<li>Si las credenciales no son v\u00e1lidas, muestra una ventana de alerta.<\/li>\n<\/ol>\n<p>Ejecute la aplicaci\u00f3n e inicie sesi\u00f3n como usuarios diferentes. Si es posible, ejecuta la app en dos dispositivos para observar la replicaci\u00f3n continua y los diferentes permisos de lectura del moderador:<\/p>\n<p><img decoding=\"async\" src=\"\/wp-content\/original-assets\/2016\/january\/introducing-the-react-native-couchbase-lite-module\/screens-final.png\" \/><\/p>\n<h2 id=\"toc_4\">Conclusi\u00f3n<\/h2>\n<p>En este tutorial, aprendiste a usar el m\u00f3dulo React Native Couchbase Lite para construir una simple aplicaci\u00f3n Todo donde m\u00faltiples usuarios pueden iniciar sesi\u00f3n.<\/p>\n<p>El proyecto final puede consultarse en <a href=\"https:\/\/github.com\/jamiltz\/ReactNative-UntitledTodoApp\">GitHub<\/a>.<\/p>\n<p>No dudes en compartir tus opiniones, hallazgos o preguntas en los comentarios o en los foros. \u00a1Hasta pronto!<\/p>","protected":false},"excerpt":{"rendered":"<p>Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]<\/p>","protected":false},"author":51,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1810],"tags":[],"ppma_author":[9028],"class_list":["post-2108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-mobile"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.7.1 (Yoast SEO v25.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing the React Native Couchbase Lite Module - The Couchbase Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/es\/introducing-the-react-native-couchbase-lite-module\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing the React Native Couchbase Lite Module\" \/>\n<meta property=\"og:description\" content=\"Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/es\/introducing-the-react-native-couchbase-lite-module\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-07T16:23:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-23T13:06:16+00:00\" \/>\n<meta name=\"author\" content=\"James Nocentini, Technical Writer, Mobile, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Nocentini, Technical Writer, Mobile, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"},\"author\":{\"name\":\"James Nocentini, Technical Writer, Mobile, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6\"},\"headline\":\"Introducing the React Native Couchbase Lite Module\",\"datePublished\":\"2016-01-07T16:23:08+00:00\",\"dateModified\":\"2023-06-23T13:06:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"},\"wordCount\":1133,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"articleSection\":[\"Couchbase Mobile\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\",\"name\":\"Introducing the React Native Couchbase Lite Module - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2016-01-07T16:23:08+00:00\",\"dateModified\":\"2023-06-23T13:06:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing the React Native Couchbase Lite Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6\",\"name\":\"James Nocentini, Technical Writer, Mobile, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/09977bdd14473dc23a125f2f74c3e816\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g\",\"caption\":\"James Nocentini, Technical Writer, Mobile, Couchbase\"},\"description\":\"James Nocentini is the Technical Writer in charge of the documentation for Couchbase Mobile. Previously, he worked as a Developer Advocate and before that as a front-end developer for HouseTrip. He also enjoys writing Android tutorials for raywenderlich.com in his spare time.\",\"url\":\"https:\/\/www.couchbase.com\/blog\/es\/author\/james-nocentini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing the React Native Couchbase Lite Module - The Couchbase Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/es\/introducing-the-react-native-couchbase-lite-module\/","og_locale":"es_MX","og_type":"article","og_title":"Introducing the React Native Couchbase Lite Module","og_description":"Recently, we published a series of articles on the topic of using Couchbase Lite in a React Native application. In this tutorial, you\u2019ll take it one step further and use the recommended Couchbase Lite Module for React Native (available as [&hellip;]","og_url":"https:\/\/www.couchbase.com\/blog\/es\/introducing-the-react-native-couchbase-lite-module\/","og_site_name":"The Couchbase Blog","article_published_time":"2016-01-07T16:23:08+00:00","article_modified_time":"2023-06-23T13:06:16+00:00","author":"James Nocentini, Technical Writer, Mobile, Couchbase","twitter_card":"summary_large_image","twitter_misc":{"Written by":"James Nocentini, Technical Writer, Mobile, Couchbase","Est. reading time":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"},"author":{"name":"James Nocentini, Technical Writer, Mobile, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6"},"headline":"Introducing the React Native Couchbase Lite Module","datePublished":"2016-01-07T16:23:08+00:00","dateModified":"2023-06-23T13:06:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"},"wordCount":1133,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","articleSection":["Couchbase Mobile"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","url":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/","name":"Introducing the React Native Couchbase Lite Module - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2016-01-07T16:23:08+00:00","dateModified":"2023-06-23T13:06:16+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing the React Native Couchbase Lite Module"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"El blog de Couchbase","description":"Couchbase, la base de datos NoSQL","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"El blog de Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/ec4dfbd349cb4a321fb6a92b71a9a7f6","name":"James Nocentini, Redactor t\u00e9cnico, M\u00f3vil, Couchbase","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/09977bdd14473dc23a125f2f74c3e816","url":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","caption":"James Nocentini, Technical Writer, Mobile, Couchbase"},"description":"James Nocentini es el escritor t\u00e9cnico encargado de la documentaci\u00f3n de Couchbase Mobile. Anteriormente, trabaj\u00f3 como Developer Advocate y antes de eso como desarrollador front-end para HouseTrip. Tambi\u00e9n disfruta escribiendo tutoriales de Android para raywenderlich.com en su tiempo libre.","url":"https:\/\/www.couchbase.com\/blog\/es\/author\/james-nocentini\/"}]}},"authors":[{"term_id":9028,"user_id":51,"is_guest":0,"slug":"james-nocentini","display_name":"James Nocentini, Technical Writer, Mobile, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/0aa80108e5c81e282d705199edae5a25f8ef92abf15cd64f8ff19837abcee09a?s=96&d=mm&r=g","first_name":"James","last_name":"Nocentini","user_url":"","author_category":"","description":"James Nocentini es el escritor t\u00e9cnico encargado de la documentaci\u00f3n de Couchbase Mobile. Anteriormente, trabaj\u00f3 como Developer Advocate y antes de eso como desarrollador front-end para HouseTrip. Tambi\u00e9n disfruta escribiendo tutoriales de Android para raywenderlich.com en su tiempo libre."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/2108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=2108"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/2108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=2108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=2108"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/ppma_author?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}