Hook React per aggiornamenti real-time in Parse Native SDK

10 min

iniziare con il hook react per aggiornamenti in tempo reale utilizzando parse introduzione benvenuto nella libreria parse react native! in questa guida, imparerai cos'è la libreria parse react, come installarla e iniziare a usarla nel tuo progetto react native motivazione il modo più semplice per integrare parse/back4app nel tuo progetto basato su javascript è attraverso il parse javascript sdk https //www npmjs com/package/parse questa libreria funziona in più ambienti javascript come nodejs, reactjs, vuejs, angularjs, react native, e ti dà accesso alle funzionalità di back4app l'obiettivo di parse react native è rendere questa esperienza ancora migliore per gli sviluppatori react native fornendo uno strato leggero e facile da usare che offre una configurazione minima, riutilizzabilità del codice e ottimizzazioni native per android e ios utilizzare questo pacchetto garantirà che elementi come la configurazione delle credenziali, le richieste http, la sincronizzazione in tempo reale e l'interazione offline first siano automaticamente disponibili per la tua app react native la libreria è scritta interamente in typescript, sopra il parse javascript sdk https //www npmjs com/package/parse , ed è attualmente nella versione alpha in questa guida iniziale, installerai e configurerai la libreria @parse/react native nel tuo progetto react native 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 requisiti per completare questo tutorial, avrai bisogno di un app creato https //www back4app com/docs/get started/new parse app su back4app segui il tutorial per abilitare 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 o yarn installati npx https //www npmjs com/package/npx pacchetto runner installato 1 installazione se non hai un'applicazione react native, procedi e crea un nuovo progetto con \npx\ pacchetto runner utilizzando la seguente riga di comando npx react native init startwithparsern installa \@parse/react native\ e la sua dipendenza peer \parse\ nella tua applicazione react native \# usando yarn yarn add @parse/react native parse \# usando npm npm install save @parse/react native parse 2 configurazione dell'applicazione per consentire all'app di connettersi in modo sicuro ai server di back4app, devi fornire al parse javascript sdk le credenziali dell'app 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 ); puoi trovare il tuo \app id\ e \javascript key\ credenziali aprendo la tua app \dashboard\ su sito web di back4app https //www back4app com/ e cliccando su \impostazioni app\ > \impostazioni di base\ , sotto \impostazioni del server\ il tuo sottodominio deve essere abilitato su \impostazioni app\ > \impostazioni di base\ > \url del server e live query\ per ulteriori informazioni, controlla questa guida qui https //www back4app com/docs/platform/parse live query 3 creare la tua prima query successivamente, costruirai la tua prima query e la visualizzerai nella tua app la \@parse/react native\ libreria esporta un \useparsequery\ hook, così non perderai tempo a cercare come implementare funzionalità come il supporto offline, le modifiche in tempo reale, e così via ci vuole un \parse query\ e restituisce un oggetto con alcune proprietà che puoi usare per accedere ai dati restituiti dalle query 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 } quando passi una query al hook, cercherà prima i risultati memorizzati nella cache che potrebbe aver salvato poi, crea una connessione websocket per comunicare con il server back4app livequery, che si sincronizza automaticamente in altre parole, l'approccio offline first e le modifiche in tempo reale sono abilitati per impostazione predefinita per controllare lo stato della query usa i \props\ restituiti dal hook \islive\ se \true\ , indica che la query si è iscritta per aggiornamenti in tempo reale \isloading\ \ se \true\ , la query sta recuperando i risultati \issyncing\ \ se \true\ , la query sta ottenendo risultati aggiornati dai server di back4app \results\ questi sono i dati restituiti dalla query \count\ indica il numero di oggetti che corrispondono alla query \error\ quando qualcosa va storto con la query, restituisce un errore \reload\ ricarica i risultati della tua query il \useparsequery\ accetta qualsiasi \parse query\ e puoi vedere la documentazione completa https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs con esempi sulle query parse 4 testa l'app hook ora dovresti essere in grado di eseguire la tua app react native e vedere i risultati \# su android npx react native run android \# su ios npx react native run ios tieni presente che dovresti aggiungere alcuni dati al tuo progetto back4app per vedere alcuni elementi nella tua app è fatto! a questo punto, hai installato \@parse/react native\ nel tuo progetto, configurato le connessioni con back4app e scritto la tua prima query nella prossima guida, vedrai una delle principali funzionalità di questa libreria e come usarla continuiamo a “cambiamenti in tempo reale” https //reactnavigation org/docs/1 x/hello react navigation per iniziare a scrivere alcune altre query