Integração do Parse React para Atualizações em Tempo Real em Apps

9 min

começando com o hook parse react para atualizações em tempo real usando parse introdução a maneira mais fácil de integrar parse/back4app em seu projeto baseado em javascript é através do parse javascript sdk 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 hook parse react é tornar essa experiência ainda melhor para os desenvolvedores reactjs, fornecendo uma camada leve e fácil de usar que oferece configuração mínima e reutilização de código 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 a biblioteca é escrita inteiramente em typescript, em cima do parse javascript sdk , e atualmente está na versão alpha neste guia inicial, você instalará e configurará a @parse/react @parse/react biblioteca em seu projeto react @parse/react @parse/react está atualmente na versão alpha a biblioteca está em teste, então recomendamos proceder com cautela seu feedback é muito apreciado, então sinta se à vontade para usar a biblioteca 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 ou yarn instalados; npx executável de pacote instalado 1 instalação instale @parse/react @parse/react e sua dependência parse parse na sua aplicação react 2 configuração da aplicação para permitir que o app se conecte aos servidores do back4app de forma segura, você deve fornecer ao sdk javascript do parse as credenciais do app no seu app js app js (ou app tsx app tsx ) arquivo lembre se de usar seu subdomínio do back4app criado quando você habilitou seu aplicativo para realizar consultas ao vivo app js or app tsx 1 import { initializeparse } from '@parse/react'; 2	 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); observe que o initializeparse initializeparse método substitui o habitual parse initialize parse initialize um 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 core settings core settings , sob server settings server settings 3 criando sua primeira query em seguida, você irá construir sua primeira query e exibi la em seu app a @parse/react @parse/react biblioteca exporta um useparsequery useparsequery hook, então você não precisa perder tempo procurando como implementar recursos como suporte offline, mudanças em tempo real, e assim por diante ele leva um parse query parse query e retorna um objeto com algumas propriedades que você pode usar para acessar os dados retornados pelas queries app js or app tsx 1 import react from 'react'; 2 import parse from 'parse'; 3 import { initializeparse, useparsequery } from '@parse/react'; 4	 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10	 11 export default function app() { 12 //make sure your class is enabled for real time notifications (live query) checking the menu > app settings > server settings > server url and live query 13 const parsequery = new parse query('your class name here'); 14 const { 15 islive, 16 isloading, 17 issyncing, 18 results, 19 count, 20 error, 21 reload 22 } = useparsequery(parsequery); 23	 24 return ( 25 \<div> 26 {isloading && ( 27 \<p>loading \</p> 28 )} 29 {islive && ( 30 \<p>live!\</p> 31 )} 32 {issyncing && ( 33 \<p>syncing \</p> 34 )} 35 {results && ( 36 \<ul> 37 {results map(result => ( 38 \<li key={result id}> 39 {result get('class column name here')} 40 \</li> 41 ))} 42 \</ul> 43 )} 44 \<p>{count}\</p> 45 {error && ( 46 \<p>{error message}\</p> 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } ao passar uma consulta para o hook, ele primeiro procurará resultados em cache que pode ter armazenado em seguida, ele cria uma conexão websocket para se comunicar com o servidor livequery do back4app, 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 o props props retornado pelo hook islive islive se true true , indica que a consulta está inscrita 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á recebendo resultados atualizados dos servidores back4app results results estes são os dados retornados pela 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 você pode ver a documentação completa para mais detalhes sobre como configurar e usar a @parse/react @parse/react biblioteca 4 teste o app hook agora você deve ser capaz de executar seu aplicativo react 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 @parse/react 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, como usá la criando um aplicativo de chat ao vivo de exemplo