Integração em Tempo Real com Parse no React Native

10 min

introdução ao hook do react para atualizações em tempo real usando parse introdução bem vindo à parse react native lib! neste guia, você aprenderá o que é a parse react lib, como instalá la e começar a usá la em seu projeto react native motivação a maneira mais fácil de integrar parse/back4app em seu projeto baseado em javascript é através do parse javascript sdk https //www npmjs com/package/parse esta biblioteca funciona em múltiplos ambientes javascript, como nodejs, reactjs, vuejs, angularjs, react native, e oferece acesso aos recursos do back4app o objetivo do parse react native é tornar essa experiência ainda melhor para os desenvolvedores react native, fornecendo uma camada leve e fácil de usar que oferece configuração mínima, reutilização de código e otimizações nativas para android e ios usar este pacote garantirá que itens como configuração de credenciais, requisições http, sincronização em tempo real e interação offline first estejam automaticamente disponíveis para seu aplicativo react native a lib é escrita inteiramente em typescript, em cima do parse javascript sdk https //www npmjs com/package/parse , e atualmente está na versão alpha neste guia inicial, você instalará e configurará a biblioteca @parse/react native em seu projeto react native parse react native está atualmente na versão alpha a lib está em teste, então recomendamos proceder com cautela seu feedback é muito apreciado, então sinta se à vontade para usar a lib e nos enviar suas perguntas e primeiras impressões enviando um e mail para community\@back4app com pré requisitos para completar este tutorial, você precisará um aplicativo criado https //www back4app com/docs/get started/new parse app no back4app siga o tutorial de habilitar live query https //www back4app com/docs/platform/parse live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou yarn instalados npx https //www npmjs com/package/npx pacote runner instalado 1 instalação se você não tiver um aplicativo react native, vá em frente e crie um novo projeto com \npx\ pacote runner usando a seguinte linha de comando npx react native init startwithparsern instale \@parse/react native\ e sua dependência peer \parse\ no seu aplicativo react native \# usando yarn yarn add @parse/react native parse \# usando npm npm install save @parse/react native parse 2 configuração do aplicativo para permitir que o aplicativo se conecte aos servidores do back4app de forma segura, você deve fornecer ao sdk javascript do parse as credenciais do aplicativo 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); você pode encontrar seu \app id\ e \javascript key\ credenciais abrindo seu app \dashboard\ em back4app website https //www back4app com/ e clicando em \app settings\ > \core settings\ , sob \server settings\ seu subdomínio deve estar habilitado em \app settings\ > \core settings\ > \server url and live query\ para mais informações, por favor, consulte este guia aqui https //www back4app com/docs/platform/parse live query 3 criando sua primeira query em seguida, você irá construir sua primeira query e exibi la em seu app a \@parse/react native\ biblioteca exporta um \useparsequery\ hook, para que você não perca tempo procurando como implementar recursos como suporte offline, mudanças em tempo real, e assim por diante leva um \parse query\ e retorna um objeto com algumas propriedades que você pode usar para acessar os dados retornados pelas consultas 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13	 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } ao passar uma consulta para o hook, ele primeiro procurará resultados em cache que pode ter armazenado em seguida, cria uma conexão websocket para se comunicar com o servidor back4app livequery, que sincroniza automaticamente em outras palavras, a abordagem offline first e as mudanças em tempo real são habilitadas por padrão para verificar o estado da consulta, use os \props\ retornados pelo hook \islive\ se \true\ , indica que a consulta se inscreveu para atualizações em tempo real \isloading\ se \true\ , a consulta está buscando os resultados \issyncing\ se \true\ , a consulta está obtendo resultados atualizados dos servidores back4app \results\ estes são os dados retornados da consulta \count\ indica o número de objetos que corresponderam à consulta \error\ quando algo dá errado com a consulta, ela retorna um erro \reload\ recarregue os resultados da sua consulta o \useparsequery\ aceita qualquer \parse query\ e você pode ver a documentação completa https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs com exemplos sobre consultas parse 4 teste o app hook agora você deve ser capaz de executar seu aplicativo react native e ver os resultados \# no android npx react native run android \# no ios npx react native run ios lembre se de que você deve adicionar alguns dados ao seu projeto back4app para ver alguns itens em seu app está feito! neste ponto, você instalou \@parse/react native\ em seu projeto, configurou as conexões com o back4app e escreveu sua primeira query no próximo guia, você verá uma das principais características desta biblioteca e como usá la vamos continuar para “mudanças em tempo real” https //reactnavigation org/docs/1 x/hello react navigation para começar a escrever mais algumas queries