Echtzeit-Updates mit Parse: React-Hook Integration

10 min

erste schritte mit dem react hook für echtzeit updates mit parse einführung willkommen bei der parse react native bibliothek! in diesem leitfaden erfahren sie, was die parse react bibliothek ist, wie sie sie installieren und in ihrem react native projekt verwenden können motivation der einfachste weg, parse/back4app in ihr auf javascript basierendes projekt zu integrieren, ist über die parse javascript sdk https //www npmjs com/package/parse diese bibliothek funktioniert in mehreren javascript umgebungen wie nodejs, reactjs, vuejs, angularjs, react native und gibt ihnen zugang zu den back4app funktionen das ziel von parse react native ist es, diese erfahrung für react native entwickler noch besser zu machen, indem eine leichtgewichtige und benutzerfreundliche schicht bereitgestellt wird, die minimale konfiguration, wiederverwendbarkeit von code und native optimierungen für android und ios bietet die verwendung dieses pakets stellt sicher, dass dinge wie die einrichtung von anmeldeinformationen, http anfragen, echtzeitsynchronisation und offline interaktion automatisch für ihre react native app verfügbar sind die bibliothek ist vollständig in typescript geschrieben, basierend auf parse javascript sdk https //www npmjs com/package/parse , und befindet sich derzeit in der alpha version in diesem ersten leitfaden installieren und richten sie die @parse/react native bibliothek in ihrem react native projekt ein parse react native befindet sich derzeit in der alpha version die bibliothek wird getestet, daher empfehlen wir, vorsichtig vorzugehen ihr feedback ist sehr geschätzt, zögern sie also nicht, die bibliothek zu verwenden und uns ihre fragen und ersten eindrücke per e mail an community\@back4app com zu senden voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine erstellte app auf back4app befolgen sie das aktivieren sie live query tutorial npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm oder yarn installiert npx https //www npmjs com/package/npx paket runner installiert 1 installation wenn sie keine react native anwendung haben, erstellen sie ein neues projekt mit dem npx npx paket runner mit folgendem befehl installieren sie @parse/react native @parse/react native und seine peer abhängigkeit parse parse in ihrer react native anwendung 2 anwendungssetup um der app eine sichere verbindung zu den back4app servern zu ermöglichen, müssen sie dem parse javascript sdk die anmeldeinformationen der app bereitstellen 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 ); du kannst deine app id app id und javascript schlüssel javascript schlüssel anmeldeinformationen finden, indem du deine app dashboard dashboard unter back4app website https //www back4app com/ öffnest und auf app einstellungen app einstellungen > kerneinstellungen kerneinstellungen , unter servereinstellungen servereinstellungen dein subdomain muss unter app einstellungen app einstellungen > kerneinstellungen kerneinstellungen > server url und live abfrage server url und live abfrage für weitere informationen, bitte überprüfe diesen leitfaden hier https //www back4app com/docs/platform/parse live query 3 erstellen deiner ersten abfrage als nächstes wirst du deine erste abfrage erstellen und sie in deiner app anzeigen die @parse/react native @parse/react native bibliothek exportiert einen useparsequery useparsequery hook, sodass du keine zeit damit verschwenden musst, herauszufinden, wie man funktionen wie offline unterstützung, echtzeitänderungen usw implementiert es dauert einen parse query parse query und gibt ein objekt mit einigen eigenschaften zurück, die sie verwenden können, um auf die von abfragen zurückgegebenen daten zuzugreifen 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 } beim übergeben einer abfrage an den hook sucht dieser zunächst nach zwischengespeicherten ergebnissen, die er möglicherweise gespeichert hat dann wird eine websocket verbindung hergestellt, um mit dem back4app livequery server zu kommunizieren, der automatisch synchronisiert mit anderen worten, der offline first ansatz und echtzeitänderungen sind standardmäßig aktiviert um den abfragezustand zu überprüfen, verwenden sie die props props , die vom hook zurückgegeben werden islive islive wenn true true , zeigt an, dass die abfrage für echtzeit updates abonniert ist isloading isloading wenn true true , wird die abfrage die ergebnisse abrufen issyncing issyncing wenn true true , wird die abfrage aktualisierte ergebnisse von den back4app servern abrufen results results dies sind die von der abfrage zurückgegebenen daten count count gibt die anzahl der objekte an, die der abfrage entsprechen error error wenn etwas mit der abfrage schiefgeht, wird ein fehler zurückgegeben reload reload laden sie ihre abfrageergebnisse neu die useparsequery useparsequery akzeptiert jede parse query parse query , und sie können die vollständige dokumentation https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs mit beispielen zu parse abfragen sehen 4 testen sie den app hook jetzt sollten sie in der lage sein, ihre react native app auszuführen und die ergebnisse zu sehen denke daran, dass du einige daten zu deinem back4app projekt hinzufügen solltest, um einige elemente in deiner app zu sehen es ist erledigt! an diesem punkt hast du @parse/react native @parse/react native in deinem projekt installiert, die verbindungen mit back4app konfiguriert und deine erste abfrage geschrieben im nächsten leitfaden wirst du eine der hauptfunktionen dieser bibliothek sehen, wie man sie verwendet lass uns fortfahren zu „echtzeitänderungen“ https //reactnavigation org/docs/1 x/hello react navigation um weitere abfragen zu schreiben