Hook React per aggiornamenti real-time in Parse Native SDK

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 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 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 https //www back4app com/docs/get started/new parse app su back4app segui il https //www back4app com/docs/platform/parse live query https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm o yarn installati 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 npx pacchetto runner utilizzando la seguente riga di comando npx react native init startwithparsern installa @parse/react native @parse/react native e la sua dipendenza peer parse 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&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); puoi trovare il tuo app id app id e javascript key javascript key credenziali aprendo la tua app dashboard dashboard su https //www back4app com/ e cliccando su impostazioni app impostazioni app > impostazioni di base impostazioni di base , sotto impostazioni del server impostazioni del server il tuo sottodominio deve essere abilitato su impostazioni app impostazioni app > impostazioni di base impostazioni di base > url del server e live query url del server e live query per ulteriori informazioni, controlla questa guida 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 @parse/react native libreria esporta un useparsequery 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 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&#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 } 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 props restituiti dal hook islive islive se true true , indica che la query si è iscritta per aggiornamenti in tempo reale isloading isloading \ se true true , la query sta recuperando i risultati issyncing issyncing \ se true true , la query sta ottenendo risultati aggiornati dai server di back4app results results questi sono i dati restituiti dalla query count count indica il numero di oggetti che corrispondono alla query error error quando qualcosa va storto con la query, restituisce un errore reload reload ricarica i risultati della tua query il useparsequery useparsequery accetta qualsiasi parse query parse query e puoi vedere la 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 @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 https //reactnavigation org/docs/1 x/hello react navigation per iniziare a scrivere alcune altre query