React Native em Tempo Real com Parse SDK: Integrando useParseQuery

20 min

usando o hook useparsequery para construir um aplicativo react native em tempo real introdução neste guia, você explorará os principais recursos da @parse/react native @parse/react native lib usando um exemplo de aplicativo todo em react native você usará o useparsequery useparsequery hook para consultar tarefas em tempo real e armazenar resultados localmente neste aplicativo usando várias consultas parse, você descobrirá como usar a nova lib parse em seu projeto o 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 objetivo explore os principais casos de uso da lib parse react native criando um aplicativo todo pré requisitos para completar este tutorial, você precisará um aplicativo criado no back4app siga o tutorial de habilitar live query nota siga o tutorial parse react native para aprender como começar com @parse/react native 1 configurar o projeto inicial antes de começar, você precisará obter o projeto bootstrap react native que configuramos como ponto de partida para este tutorial é um simples react native init react native init projeto com todas as dependências e estilos pré definidos para que você possa se concentrar em explorar @parse/react native @parse/react native recursos você pode baixar o zip https //github com/templates back4app/react native todo app/archive/main zip ou clonar o projeto em seguida, instale as dependências do projeto para ios, instale os pods no guia anterior, introdução https //www back4app com/docs/react native/parse react native sdk/getting started , você aprendeu como usar initializeparse initializeparse para habilitar a conexão com os servidores back4app configure seu app id app id e javascriptkey javascriptkey no componente de ponto de entrada localizado em src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); vá em frente e execute o projeto depois disso, você terá configurado com sucesso o projeto inicial e o aplicativo parecerá com o seguinte a estrutura do diretório do projeto o projeto inicial tem 4 páginas principais página de aprendizado mostra tarefas que pertencem à categoria de aprendizado página de compras mostra tarefas que pertencem à categoria de compras página de trabalho mostra tarefas que pertencem à categoria de trabalho página de adicionar tarefa formulário básico para criar uma nova tarefa 2 criando uma nova tarefa uma característica comum em um aplicativo todo é permitir que os usuários criem novas tarefas para isso, a função de criar tarefa usará o parse javascript sdk para criar um novo parse object e salvá lo no back4app na addtodo addtodo página do projeto inicial, você terá um formulário básico com um campo de entrada para inserir a descrição da tarefa, algumas caixas de seleção para escolher a categoria da tarefa e um botão de enviar neste tutorial, você criará parse object parse object para as tarefas que terão os seguintes atributos consulte o guia do parse javascript sdk salvar dados para mais informações sobre como criar objetos parse 1 { 2 description 'simple string of task descrition', 3 author 'person creating the task', 4 completed false, // or true 5 createdat date, // automatically created by back4app 6 } agora implemente o método para criar uma tarefa quando o usuário clicar em enviar no pages/addtodo/index js pages/addtodo/index js componente, vamos implementar o handlesubmit handlesubmit método 1 async function handlesubmit() { 2 try { 3 const task = new parse object extend('task'); 4 // create a new instance of that class 5 const task = new task(); 6 task set('description', description); 7 task set('category', category); 8 task set('author', 'anonymous'); 9 task set('completed', false); 10 await task save(); 11	 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } depois disso, você agora poderá criar algumas tarefas sinta se à vontade para criar quantas tarefas quiser nos próximos passos, você as consultará 3 consultando & filtrando tarefas agora que você criou algumas tarefas, é hora de usar a biblioteca parse react native você irá escrever algumas consultas e passá las para useparsequery useparsequery hook as consultas listarão todas as tarefas não concluídas na categoria de aprendizado este é o primeiro caso de uso do hook, você irá construir uma consulta de busca única, definindo enablelivequery\ false enablelivequery\ false , que será executada quando o componente da página de aprendizado renderizar o enablelivequery enablelivequery é true true por padrão, e mudar para false false desativará a assinatura de mudanças em tempo real no componente pages/learning/index js pages/learning/index js , vamos escrever nossa parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'learning'); passe a consulta como argumento para o useparsequery useparsequery hook o código acima mostra um uso básico do hook parse o hook useparsequery é um novo recurso que você pode usar com qualquer parse query use todas as capacidades do parse query https //docs parseplatform org/js/guide/#queries para recuperar seus objetos de dados e o hook tornará essa experiência ainda melhor após obter os resultados, passe os para o componente tasklist para exibir as tarefas no app 1 //learning/index js 2 import react, {useeffect} from 'react'; 3 import {activityindicator} from 'react native'; 4 import tasklist from ' / /components/tasklist'; 5 import parse from 'parse/react native js'; 6 import {useparsequery} from '@parse/react native'; 7	 8 const learning = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'learning'); 13	 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15	 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19	 20 return \<tasklist todos={results} />; 21 }; 22	 23 export default learning; seu app deve mostrar com sucesso a lista de tarefas assim 4 mudanças em tempo real o segundo uso que você vai explorar são atualizações em tempo real o useparsequery useparsequery hook encapsula o parse live query e fornece suporte pronto para mudanças em tempo real ao passar uma consulta para o hook, ele cria uma conexão websocket para se comunicar com o servidor back4app livequery, que sincroniza automaticamente você adicionará esse recurso às tarefas na categoria de compras é importante notar que o live query e o subdomínio back4app devem estar habilitados no seu painel do back4app uma vez feito isso, adicione a url do seu subdomínio ao initializeparse initializeparse e os resultados do hook parse react native sempre terão dados atualizados se você não configurar o subdomínio, useparsequery useparsequery hook não será capaz de recuperar dados em tempo real 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); no pages/shopping/index js pages/shopping/index js componente, vamos escrever nosso parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'shopping'); em seguida, passe a consulta como argumento para o useparsequery useparsequery hook observe que não há necessidade de parâmetros extras, uma vez que as alterações em tempo real estão habilitadas por padrão após obter os resultados, passe os para o tasklist tasklist componente para exibir as tarefas no app 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import tasklist from ' / /components/tasklist'; 4 import parse from 'parse/react native js'; 5 import {useparsequery} from '@parse/react native'; 6	 7 const shopping = () => { 8 const task = new parse object extend('task'); 9 const query = new parse query(task); 10 query equalto('completed', false); 11 query equalto('category', 'shopping'); 12	 13 const {results, isloading, issyncing} = useparsequery(query); 14	 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20	 21 export default shopping; 5 suporte offline o terceiro caso de uso para @parse/react native @parse/react native é usar o cache offline dos resultados da consulta isso é útil caso seu app react native precise funcionar quando os usuários têm latência de rede ou problemas de conectividade com a internet o suporte offline melhora a responsividade do seu app react native e a experiência do usuário a boa notícia é que não são necessárias etapas extras! a abordagem offline first e as assinaturas em tempo real estão habilitadas por padrão em resumo, simplesmente usar o useparsequery useparsequery hook garante que seu app estará armazenando em cache os resultados da consulta para suporte offline combinado com assinaturas de live query para quando seu usuário voltar online 6 limitando e ordenando consultas suponha que a lista de tarefas da categoria trabalho seja demais para uma pessoa lidar e você queira mostrar apenas um subconjunto delas para o dia além disso, ordenar pela data de criação no pages/shopping/index js pages/shopping/index js componente, vamos escrever nosso parse query parse query 1 const task = new parse object extend('task'); 2 const query = new parse query(task); 3 query equalto('completed', false); 4 query equalto('category', 'work'); 5 query ascending('createdat'); // order by creation date 6 query limit(5); // limit to 5 tasks em seguida, passe a consulta como argumento para o useparsequery useparsequery hook e passe os para o tasklist tasklist componente para exibir tarefas no app 1 import react from 'react'; 2 import {activityindicator} from 'react native'; 3 import parse from 'parse/react native js'; 4 import {useparsequery} from '@parse/react native'; 5 import tasklist from ' / /components/tasklist'; 6 // import { container } from ' /styles'; 7	 8 const work = () => { 9 const task = new parse object extend('task'); 10 const query = new parse query(task); 11 query equalto('completed', false); 12 query equalto('category', 'work'); 13 query ascending('createdat'); 14 query limit(5); 15	 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19	 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25	 26 export default work; 7 especificando os argumentos do useparsequery você usou @parse/react native @parse/react native para recuperar dados do back4app com recursos como live query nos passos anteriores portanto, uma explicação da interface exportada é necessária o useparsequery useparsequery hook aceita um parse query parse query e um useparsequeryoptions useparsequeryoptions objeto como seus argumentos o objeto de configuração opcional padrão é o seguinte 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery o recurso realtime live query está habilitado por padrão enablelocaldatastore habilita o cache local dos resultados de dados, o padrão é true true mas você pode desativar definindo como false false initialload se você já tiver alguns dados carregados na memória, pode configurá los para mostrar uma prévia dos dados para os usuários está feito! neste ponto, você aprendeu como usar a @parse/react native @parse/react native lib criando um app de tarefas react native no back4app