Integrazione Parse SDK in React Native con query real-time

utilizzare il hook useparsequery per costruire un'app react native in tempo reale introduzione in questa guida, esplorerai le principali caratteristiche della @parse/react native @parse/react native libreria utilizzando un esempio di app todo react native utilizzerai il useparsequery useparsequery hook per interrogare i compiti in tempo reale e memorizzare i risultati localmente su questa app utilizzando varie query parse, scoprirai come utilizzare la nuova libreria parse nel tuo progetto parse react native è attualmente nella versione alpha la libreria è in fase di test, quindi ti consigliamo di procedere con cautela il tuo feedback è molto apprezzato, quindi sentiti libero di utilizzare la libreria e inviarci le tue domande e prime impressioni inviando un'email a community\@back4app com obiettivo esplora i principali casi d'uso per la libreria parse react native creando un'app todo prerequisiti per completare questo tutorial, avrai bisogno di un'app creata su back4app segui il https //www back4app com/docs/platform/parse live query nota segui il https //www back4app com/docs/react native/parse sdk/real time/react hook real time per imparare come iniziare con @parse/react native 1 configura il progetto iniziale prima di iniziare, dovrai ottenere il progetto bootstrap react native che abbiamo impostato come punto di partenza per questo tutorial è un semplice react native init react native init progetto con tutte le dipendenze e gli stili predefiniti per permetterti di concentrarti sull'esplorazione delle @parse/react native @parse/react native funzionalità puoi https //github com/templates back4app/react native todo app/archive/main zip o clonare il progetto git clone https //github com/templates back4app/react native todo app git successivamente, installa le dipendenze del progetto cd react native todo app \# usando yarn yarn install \# usando npm npm install per ios, installa i pod cd ios && npx pod install nella guida precedente, https //www back4app com/docs/react native/parse react native sdk/getting started , hai imparato come usare initializeparse initializeparse per abilitare la connessione con i server back4app configura il tuo app id app id e javascriptkey javascriptkey nel componente di punto di ingresso situato in src/index js src/index js 1 // src/index js 2 initializeparse( 3 'https //parseapi back4app com/', 4 'application id', 5 'javascript key' 6 ); vai avanti e esegui il progetto \# per ios npx react native run ios \# per android npx react native run android dopo di che avrai configurato con successo il progetto di avvio e l'app apparirà come segue la struttura della directory del progetto react native todo app ├── src/ │ ├── config/ │ │ └── reactotronconfig js │ ├── images/ │ │ ├── back4app logo png │ │ └── bg jpg │ ├── components/ │ │ └── cardtodobutton/ │ │ └── index js // componente dell'elemento pulsante card │ │ └── menu/ │ │ └── index js // menu con pulsanti card │ │ └── tasklist/ │ │ └── index js // componente della lista delle attività │ ├── pages/ │ │ └── addtodo/ │ │ └── index js // pagina aggiungi todo │ │ └── learning/ │ │ └── index js // pagina di apprendimento │ │ └── main/ │ │ └── index js // pagina principale │ │ └── shopping/ │ │ └── index js // pagina di shopping │ │ └── work/ │ │ └── index js // pagina di lavoro │ ├── services/ │ │ └── api js │ ├── index js // punto di ingresso dell'app │ └── routes js // configurazione delle rotte di navigazione ├── editorconfig ├── eslintrc json ├── gitignore ├── babel config js ├── dependencies json ├── devdependencies json ├── index js ├── jsconfig js ├── license ├── package json └── readme md il progetto iniziale ha 4 pagine principali pagina di apprendimento mostra le attività che appartengono alla categoria apprendimento pagina di shopping mostra le attività che appartengono alla categoria shopping pagina di lavoro mostra le attività che appartengono alla categoria lavoro pagina aggiungitodo modulo di base per creare un nuovo compito 2 creare un nuovo compito una caratteristica comune in un'app todo è consentire agli utenti di creare nuovi compiti per questo, la funzione di creazione del compito utilizzerà il parse javascript sdk per creare un nuovo oggetto parse e salvarlo su back4app nella addtodo addtodo pagina del progetto di partenza, avrai un modulo di base con un input per inserire la descrizione del compito, alcune caselle di controllo per selezionare la categoria del compito e un pulsante di invio in questo tutorial, creerai parse object parse object per i compiti che avrà i seguenti attributi guarda la guida del parse javascript sdk https //www back4app com/docs/react native/parse sdk/react native save data per ulteriori informazioni sulla creazione di oggetti 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 } ora implementa il metodo per creare un compito quando l'utente fa clic su invia nel pages/addtodo/index js pages/addtodo/index js componente, implementiamo il handlesubmit handlesubmit metodo 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&#x9; 12 alert alert('new task created '); 13 } catch (error) { 14 console log('error while creating task ', error); 15 } 16 } dopo di che, ora sarai in grado di creare alcuni compiti sentiti libero di crearne quanti più vuoi nei prossimi passaggi li interrogherai 3 interrogazione e filtraggio dei compiti ora che hai creato alcuni compiti, è tempo di utilizzare la libreria parse react native scriverai alcune query e le passerai a useparsequery useparsequery hook le query elencheranno tutti i compiti non completati nella categoria apprendimento questo è il primo caso d'uso del hook, costruirai una query di recupero una tantum, impostando enablelivequery\ false enablelivequery\ false , che viene eseguita quando il componente della pagina di apprendimento viene renderizzato il enablelivequery enablelivequery è true true per impostazione predefinita, e cambiarlo in false false disabiliterà l'abbonamento alle modifiche in tempo reale nel pages/learning/index js pages/learning/index js componente, scriviamo il nostro 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'); passa la query come argomento al useparsequery useparsequery hook const {results} = useparsequery(query, {enablelivequery false}); il codice sopra mostra un uso di base per il hook parse il hook useparsequery è una nuova risorsa che puoi utilizzare con qualsiasi parse query usa https //docs parseplatform org/js/guide/#queries per recuperare i tuoi oggetti dati e il hook renderà questa esperienza ancora migliore dopo aver ottenuto i risultati, passali al componente tasklist per visualizzare i compiti nell'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&#x9; 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&#x9; 14 const {results, isloading} = useparsequery(query, {enablelivequery false}); 15&#x9; 16 if (isloading) { 17 return \<activityindicator/>; 18 } 19&#x9; 20 return \<tasklist todos={results} />; 21 }; 22&#x9; 23 export default learning; la tua app dovrebbe mostrare con successo l'elenco dei compiti in questo modo 4 modifiche in tempo reale il secondo utilizzo che esplorerai sono gli aggiornamenti in tempo reale il useparsequery useparsequery hook incapsula il parse live query e fornisce supporto immediato per le modifiche in tempo reale passando una query al hook, crea una connessione websocket per comunicare con il server back4app livequery, che si sincronizza automaticamente aggiungerai questa funzionalità ai compiti nella categoria shopping è importante notare che live query e il sottodominio back4app devono essere abilitati nel tuo back4app dashboard app una volta fatto, aggiungi l'url del tuo sottodominio a initializeparse initializeparse e i risultati dal hook parse react native avranno sempre dati aggiornati se non configuri il sottodominio, useparsequery useparsequery hook non sarà in grado di recuperare dati in tempo reale 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); nel pages/shopping/index js pages/shopping/index js componente, scriviamo il nostro 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'); poi, passa la query come argomento al useparsequery useparsequery hook const {results, isloading, issyncing} = useparsequery(query); nota che non è necessario alcun parametro extra poiché le modifiche in tempo reale sono abilitate per impostazione predefinita dopo aver ottenuto i risultati, passali al tasklist tasklist componente per visualizzare i compiti nell'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&#x9; 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&#x9; 13 const {results, isloading, issyncing} = useparsequery(query); 14&#x9; 15 if (isloading || issyncing) { 16 return \<activityindicator />; 17 } 18 return \<tasklist todos={results || \[]} />; 19 }; 20&#x9; 21 export default shopping; 5 supporto offline il terzo caso d'uso per @parse/react native @parse/react native è l'uso della memorizzazione nella cache offline dei risultati delle query questo è utile nel caso in cui la tua app react native debba funzionare quando gli utenti hanno latenza di rete o problemi di connettività internet il supporto offline migliora la reattività delle tue app react native e l'esperienza utente la grande notizia è che non sono necessari passaggi extra! l'approccio offline first e le sottoscrizioni in tempo reale sono abilitati per impostazione predefinita in breve, semplicemente utilizzando il useparsequery useparsequery hook si assicura che la tua app memorizzi nella cache i risultati delle query per il supporto offline combinato con le sottoscrizioni live query per quando il tuo utente torna online 6 limitare e ordinare le query supponiamo che l'elenco dei compiti della categoria lavoro sia troppo per una persona da gestire e tu voglia mostrare solo un sottoinsieme di essi per il giorno inoltre, ordina per data di creazione nel pages/shopping/index js pages/shopping/index js componente, scriviamo il nostro 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 quindi, passa la query come argomento al useparsequery useparsequery hook e passali al tasklist tasklist componente per visualizzare i compiti nell'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&#x9; 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&#x9; 16 const {results, isloading} = useparsequery(query, { 17 enablelivequery false, 18 }); 19&#x9; 20 if (isloading) { 21 return \<activityindicator />; 22 } 23 return \<tasklist todos={results} />; 24 }; 25&#x9; 26 export default work; 7 specificare gli argomenti di useparsequery hai usato @parse/react native @parse/react native per recuperare dati da back4app con funzionalità come live query nei passaggi precedenti pertanto, è necessaria una spiegazione dell'interfaccia esportata il useparsequery useparsequery hook accetta un parse query parse query e un useparsequeryoptions useparsequeryoptions oggetto come suoi argomenti l'oggetto di configurazione opzionale predefinito è il seguente 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery la funzione realtime live query è abilitata per impostazione predefinita enablelocaldatastore abilita la memorizzazione locale dei risultati dei dati, il valore predefinito è true true ma puoi disattivarlo impostando a false false initialload se hai già alcuni dati caricati in memoria, puoi impostarli per mostrare un'anteprima dei dati agli utenti è fatto! a questo punto, hai imparato come utilizzare la @parse/react native @parse/react native libreria creando un'app todo react native su back4app