{"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\/pt\/introducing-the-react-native-couchbase-lite-module\/","title":{"rendered":"Apresentando o m\u00f3dulo React Native Couchbase Lite"},"content":{"rendered":"<p>Recentemente, publicamos uma s\u00e9rie de artigos sobre o t\u00f3pico de uso do Couchbase Lite em um aplicativo React Native. Neste tutorial, voc\u00ea dar\u00e1 um passo adiante e usar\u00e1 o <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">M\u00f3dulo Couchbase Lite<\/a> para React Native (dispon\u00edvel como um <a href=\"https:\/\/www.npmjs.com\/package\/react-native-couchbase-lite\">M\u00f3dulo npm<\/a>). Voc\u00ea adicionar\u00e1 o c\u00f3digo do Couchbase Lite necess\u00e1rio para completar as telas de login e de listagem de um aplicativo Todo simples. Ao final do tutorial, voc\u00ea ter\u00e1 abordado os seguintes conceitos b\u00e1sicos:<\/p>\n<ul>\n<li>Cria\u00e7\u00e3o e exclus\u00e3o de um banco de dados e documentos dentro dele.<\/li>\n<li>Uso de visualiza\u00e7\u00f5es do Couchbase para exibir documentos da lista por data.<\/li>\n<li>Replica\u00e7\u00f5es com autentica\u00e7\u00e3o b\u00e1sica.<\/li>\n<li>Cria\u00e7\u00e3o de usu\u00e1rios do Sync Gateway e uso de uma fun\u00e7\u00e3o de sincroniza\u00e7\u00e3o.<\/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 ou superior<\/li>\n<li>Um simulador ou dispositivo iOS com iOS 9 ou superior<\/li>\n<\/ul>\n<h2 id=\"toc_1\">Primeiros passos<\/h2>\n<p>Para economizar tempo, j\u00e1 criei um projeto inicial que cont\u00e9m todo o c\u00f3digo da interface do usu\u00e1rio. V\u00e1 em frente e <a href=\"https:\/\/cl.ly\/2L3t2p2p001q\">Fa\u00e7a o download<\/a> no diret\u00f3rio de sua prefer\u00eancia e descompacte o conte\u00fado. Em seguida, no diret\u00f3rio do projeto, instale as depend\u00eancias:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install<\/code><\/pre>\n<p>Se ainda n\u00e3o for o caso, certifique-se tamb\u00e9m de ter a CLI do React Native instalada globalmente:<\/p>\n<pre>\r\n<code class=\"language-none\">$ npm install react-native -g<\/code><\/pre>\n<p>Em seguida, inicie o daemon do React Native:<\/p>\n<pre>\r\n<code class=\"language-none\">$ react-native start<\/code><\/pre>\n<p>Abra o projeto do Xcode em <code>ios\/UntitledTodoApp.xcodeproj<\/code> e execute-o no simulador ou no dispositivo a partir do Xcode. Voc\u00ea dever\u00e1 ver as duas telas:<\/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 o bot\u00e3o Log Out n\u00e3o o leva de volta \u00e0 tela de log-in e que nada \u00e9 exibido no ListView. N\u00e3o se preocupe, isso ser\u00e1 corrigido na pr\u00f3xima se\u00e7\u00e3o :) Lembre-se de ativar o LiveReload usando a op\u00e7\u00e3o <code>Cmd+D<\/code> (e a depura\u00e7\u00e3o do Chrome pode ser \u00fatil em alguns momentos).<\/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\">Persist\u00eancia local com o Couchbase Lite<\/h2>\n<p>O projeto inicial j\u00e1 cont\u00e9m o m\u00f3dulo React Native Couchbase Lite (voc\u00ea pode seguir o guia <a href=\"https:\/\/github.com\/fraserxu\/react-native-couchbase-lite\">instru\u00e7\u00f5es de reposit\u00f3rio<\/a> para us\u00e1-lo em outro projeto React Native). Nesta se\u00e7\u00e3o, voc\u00ea aprender\u00e1 a instanciar um novo gerenciador, banco de dados e persistir documentos localmente.<\/p>\n<p>Crie um novo arquivo em <code>src\/database.js<\/code> e cole o seguinte:<\/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>O c\u00f3digo faz o seguinte:<\/p>\n<ol>\n<li>Importar o <code>gerente<\/code> e <code>ReactCBLite<\/code> objetos do m\u00f3dulo usando o <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">desestrutura\u00e7\u00e3o da sintaxe de atribui\u00e7\u00e3o<\/a> no ES6.<\/li>\n<li>Inicie o Listener do Couchbase Lite que serve uma API HTTP REST que voc\u00ea usar\u00e1 posteriormente.<\/li>\n<li>Instanciar uma inst\u00e2ncia do gerenciador passando o URL do servidor incorporado e o nome do banco de dados desejado.<\/li>\n<li>Exporte o objeto para que ele possa ser usado em todo o ciclo de vida do aplicativo.<\/li>\n<\/ol>\n<p>Agora voc\u00ea pode voltar seu foco para <code>componentes\/Login.js<\/code>. Adicione uma instru\u00e7\u00e3o require para usar o objeto de banco de dados da etapa anterior:<\/p>\n<pre>\r\n<code class=\"language-javascript\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>Esse componente tem dois campos de entrada e um bot\u00e3o. Por enquanto, voc\u00ea n\u00e3o vai verificar se o usu\u00e1rio existe porque o Sync Gateway ainda n\u00e3o est\u00e1 em funcionamento. No entanto, voc\u00ea precisar\u00e1 inicializar o banco de dados local antes de abrir a visualiza\u00e7\u00e3o de lista. Substitua o corpo de <code>_onLoginButtonPressed<\/code> com o seguinte:<\/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>Aqui, voc\u00ea est\u00e1 criando o banco de dados e, em seguida, registrando um documento de design com uma visualiza\u00e7\u00e3o para consultar documentos por seus <code>created_at<\/code> propriedade.<\/p>\n<p>Em seguida, abra <code>Listas.js<\/code> e solicitar o objeto de banco de dados mais uma vez:<\/p>\n<pre>\r\n<code class=\"language-none\">var database = require(&apos;.\/..\/database&apos;);<\/code><\/pre>\n<p>No <code>renderizar<\/code> observe as 2 vari\u00e1veis <code>leftButtonConfig<\/code> e <code>rightButtonConfig<\/code> que s\u00e3o usados no componente NavigationBar na instru\u00e7\u00e3o de retorno. Eles correspondem ao <strong>Sair do sistema<\/strong> e <strong>Novo<\/strong> bot\u00f5es. No entanto, os manipuladores de cliques n\u00e3o fazem nada, portanto, voc\u00ea mudar\u00e1 isso imediatamente. Na se\u00e7\u00e3o <code>manipulador<\/code> campo do literal do objeto <code>leftButtonConfig<\/code> adicionar:<\/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>Voc\u00ea est\u00e1 simplesmente excluindo o banco de dados (e todos os documentos e poss\u00edveis replica\u00e7\u00f5es em andamento com ele) e, em seguida, retornando ao LogIn View.<\/p>\n<p>Em seguida, no <code>manipulador<\/code> para o <code>rightButtonConfig<\/code> adicionar:<\/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>Nesse caso, voc\u00ea est\u00e1 exibindo uma caixa de di\u00e1logo de alerta para inserir o novo t\u00edtulo da lista e, em seguida, persistindo-o no banco de dados (com a fun\u00e7\u00e3o <code>propriet\u00e1rio<\/code> definido como o usu\u00e1rio conectado e <code>created_at<\/code> como o registro de data e hora atual).<\/p>\n<p>Em seguida, abaixo do <code>getInitialState<\/code> adicione o seguinte para consultar os documentos persistentes:<\/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>Aqui est\u00e1 o detalhamento do que est\u00e1 acontecendo:<\/p>\n<ol>\n<li><code>_redrawListView<\/code> \u00e9 um m\u00e9todo privado que consulta o <code>listas<\/code> e atualiza a fonte de dados para exibir as novas linhas (se houver) na tela.<\/li>\n<li>Em <code>componentWillMount<\/code> voc\u00ea est\u00e1 usando o <code>setInterval<\/code> para verificar periodicamente se h\u00e1 novos documentos e atualizar a interface do usu\u00e1rio.<\/li>\n<li>Interrompa o m\u00e9todo de intervalo quando o componente for desmontado (ou seja, quando retornar \u00e0 exibi\u00e7\u00e3o de login).<\/li>\n<\/ol>\n<p>Crie uma nova lista e abra <a href=\"https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists\">https:\/\/localhost:5984\/myapp\/_design\/todo\/_view\/lists<\/a> em seu navegador. Voc\u00ea deve fornecer <code>administrador<\/code> para o nome de usu\u00e1rio e <code>passe<\/code>\u00a0para a senha. A resposta JSON deve ter a seguinte apar\u00eancia:<\/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 exibi-los na tela, use o comando <code>Visualiza\u00e7\u00e3o de lista<\/code> componente. Ele tem dois atributos obrigat\u00f3rios:<\/p>\n<ul>\n<li><code>fonte de dados<\/code> para fornecer os dados: voc\u00ea pode passar <code>this.state.dataSource<\/code>.<\/li>\n<li><code>renderRow<\/code> usa uma fun\u00e7\u00e3o que retorna um <code>Ver<\/code> dado um item de lista.<\/li>\n<\/ul>\n<p>Est\u00e1 faltando o m\u00e9todo para desenhar a linha, abaixo <code>renderizar<\/code>, adicione um <code>renderRow<\/code> com o seguinte:<\/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>Os dados desejados s\u00e3o mantidos no <code>valor<\/code> e voc\u00ea est\u00e1 exibindo os campos de t\u00edtulo e propriet\u00e1rio em <code>Texto<\/code> elementos. De volta \u00e0 instru\u00e7\u00e3o de retorno do <code>renderizar<\/code> adicione o m\u00e9todo <code>Visualiza\u00e7\u00e3o de lista<\/code> abaixo do <code>Barra de navega\u00e7\u00e3o<\/code> componente dessa forma:<\/p>\n<pre>\r\n<code class=\"language-none\">\r\n  \r\n  \r\n<\/code><\/pre>\n<p>Persista nos documentos e observe a tela se atualizando:<\/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\">Configura\u00e7\u00e3o do gateway de sincroniza\u00e7\u00e3o<\/h2>\n<p>Nesta se\u00e7\u00e3o, voc\u00ea usar\u00e1 o Sync Gateway para introduzir a sincroniza\u00e7\u00e3o bidirecional e a autentica\u00e7\u00e3o de usu\u00e1rio no lado do servidor para que v\u00e1rios usu\u00e1rios possam fazer login. Primeiro, fa\u00e7a o download do Sync Gateway em <a href=\"https:\/\/www.couchbase.com\/blog\/pt\/nosql-databases\/downloads\/\">aqui<\/a> e no diret\u00f3rio raiz do projeto, crie um novo arquivo chamado <code>sync-gateway-config.json<\/code> com o seguinte 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>Alguns aspectos importantes a serem observados aqui s\u00e3o:<\/p>\n<ul>\n<li>O <code>CONVIDADO<\/code> est\u00e1 desativado (na verdade, \u00e9 o caso por padr\u00e3o), portanto, qualquer solicita\u00e7\u00e3o n\u00e3o autenticada ser\u00e1 tratada como n\u00e3o autorizada e retornar\u00e1 um c\u00f3digo de status 401. Nesse caso, foram criados 4 usu\u00e1rios diferentes (com os nomes moderador, laura, james, adam). O usu\u00e1rio chamado <strong>moderador<\/strong> tem acesso a todos os canais.<\/li>\n<li>A fun\u00e7\u00e3o Sync encaminha um documento para um canal com o nome do <code>propriet\u00e1rio<\/code> e concede o <code>propriet\u00e1rio<\/code> acesso a esse canal.<\/li>\n<\/ul>\n<p>Portanto, em teoria, o <strong>moderador<\/strong> deve ver todos os documentos da lista, enquanto o <strong>outros usu\u00e1rios<\/strong> ver\u00e3o apenas seus pr\u00f3prios documentos da Lista.<\/p>\n<p>Inicie o Sync Gateway na linha de comando:<\/p>\n<pre>\r\n<code class=\"language-none\">$ ~\/Downloads\/couchbase-sync-gateway\/bin\/sync_gateway .\/sync-gateway-config.json<\/code><\/pre>\n<p>Em <code>Login.js<\/code>, atualize o <code>_onLoginButtonPressed<\/code> como segue:<\/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>O que est\u00e1 acontecendo \u00e9 o seguinte:<\/p>\n<ol>\n<li>Construa o URL do banco de dados remoto (nesse caso, \u00e9 um banco de dados do Sync Gateway) e defina os campos JSON de nome\/senha no corpo da solicita\u00e7\u00e3o.<\/li>\n<li>Use o <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 \/_session<\/a> para verificar o nome\/senha com o Sync Gateway.<\/li>\n<li>Se as credenciais forem v\u00e1lidas, crie o banco de dados e, uma vez feito isso, inicie as replica\u00e7\u00f5es push\/pull cont\u00ednuas e registre um documento de design com uma visualiza\u00e7\u00e3o para consultar o documento por seus <code>created_at<\/code> propriedade.<\/li>\n<li>Se as credenciais forem inv\u00e1lidas, exiba uma janela de alerta.<\/li>\n<\/ol>\n<p>Execute o aplicativo e fa\u00e7a login como usu\u00e1rios diferentes. Se poss\u00edvel, execute o aplicativo em dois dispositivos para observar a replica\u00e7\u00e3o cont\u00ednua e as diferentes permiss\u00f5es de leitura para o 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\">Conclus\u00e3o<\/h2>\n<p>Neste tutorial, voc\u00ea aprendeu a usar o m\u00f3dulo React Native Couchbase Lite para criar um aplicativo Todo simples em que v\u00e1rios usu\u00e1rios podem fazer login.<\/p>\n<p>O projeto final pode ser encontrado em <a href=\"https:\/\/github.com\/jamiltz\/ReactNative-UntitledTodoApp\">GitHub<\/a>.<\/p>\n<p>Sinta-se \u00e0 vontade para compartilhar seus coment\u00e1rios, descobertas ou fazer perguntas nos coment\u00e1rios abaixo ou nos f\u00f3runs. Falamos com voc\u00ea em breve!<\/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 v26.1 (Yoast SEO v26.1.1) - 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\/pt\/introducing-the-react-native-couchbase-lite-module\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\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\/pt\/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\":\"pt-BR\",\"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\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@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\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@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\":\"pt-BR\",\"@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\/pt\/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\/pt\/introducing-the-react-native-couchbase-lite-module\/","og_locale":"pt_BR","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\/pt\/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":"pt-BR","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":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/introducing-the-react-native-couchbase-lite-module\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@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":"Blog do Couchbase","description":"Couchbase, o banco de dados 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":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"Blog do Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@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, redator t\u00e9cnico, celular, Couchbase","image":{"@type":"ImageObject","inLanguage":"pt-BR","@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 \u00e9 o redator t\u00e9cnico respons\u00e1vel pela documenta\u00e7\u00e3o do Couchbase Mobile. Anteriormente, ele trabalhou como Developer Advocate e, antes disso, como desenvolvedor front-end da HouseTrip. Ele tamb\u00e9m gosta de escrever tutoriais sobre Android para raywenderlich.com em seu tempo livre.","url":"https:\/\/www.couchbase.com\/blog\/pt\/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","author_category":"","last_name":"Nocentini","first_name":"James","job_title":"","user_url":"","description":"James Nocentini \u00e9 o redator t\u00e9cnico respons\u00e1vel pela documenta\u00e7\u00e3o do Couchbase Mobile. Anteriormente, ele trabalhou como Developer Advocate e, antes disso, como desenvolvedor front-end da HouseTrip. Ele tamb\u00e9m gosta de escrever tutoriais sobre Android para raywenderlich.com em seu tempo livre."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/comments?post=2108"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/posts\/2108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/categories?post=2108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/tags?post=2108"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/pt\/wp-json\/wp\/v2\/ppma_author?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}