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

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 no back4app siga o tutorial de habilitar 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 npx pacote runner usando a seguinte linha de comando instale @parse/react native @parse/react native e sua dependência peer parse parse no seu aplicativo react native 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&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); você pode encontrar seu app id app id e javascript key javascript key credenciais abrindo seu app dashboard dashboard em back4app website https //www back4app com/ e clicando em app settings app settings > core settings core settings , sob server settings server settings seu subdomínio deve estar habilitado em app settings app settings > core settings core settings > server url and live query 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 @parse/react native biblioteca exporta um useparsequery 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 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&#x9; 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6&#x9; 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&#x9; 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&#x9; 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29&#x9; 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 props retornados pelo hook islive islive se true true , indica que a consulta se inscreveu para atualizações em tempo real isloading isloading se true true , a consulta está buscando os resultados issyncing issyncing se true true , a consulta está obtendo resultados atualizados dos servidores back4app results results estes são os dados retornados da consulta count count indica o número de objetos que corresponderam à consulta error error quando algo dá errado com a consulta, ela retorna um erro reload reload recarregue os resultados da sua consulta o useparsequery useparsequery aceita qualquer parse query 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 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 @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