Echtzeit-React-Native-Apps mit useParseQuery-Hook

verwendung des useparsequery hooks zum erstellen einer echtzeit react native app einführung in diesem leitfaden werden sie die hauptmerkmale der @parse/react native @parse/react native bibliothek anhand eines todo react native app beispiels erkunden sie werden den useparsequery useparsequery hook verwenden, um aufgaben in echtzeit abzufragen und die ergebnisse lokal in dieser app zu speichern mit verschiedenen parse abfragen werden sie entdecken, wie sie die neue parse bibliothek in ihrem projekt verwenden können 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, also zögern sie nicht, die bibliothek zu verwenden und uns ihre fragen und ersten eindrücke per e mail an community\@back4app com zu senden ziel erforschen sie die hauptanwendungsfälle der parse react native bibliothek, indem sie eine todo app erstellen voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine app, die auf back4app erstellt wurde befolgen sie das aktivieren sie live query tutorial hinweis befolgen sie das parse react native tutorial um zu lernen, wie sie mit @parse/react native beginnen 1 richten sie das anfängliche projekt ein bevor sie beginnen, müssen sie das bootstrap react native projekt herunterladen, das wir als ausgangspunkt für dieses tutorial eingerichtet haben es ist ein einfaches react native init react native init projekt mit allen abhängigkeiten und stilen, die für sie vordefiniert sind, damit sie sich auf die erkundung der @parse/react native @parse/react native funktionen konzentrieren können sie können die zip herunterladen https //github com/templates back4app/react native todo app/archive/main zip oder das projekt klonen als nächstes installieren sie die projektabhängigkeiten für ios, installieren sie pods im vorherigen leitfaden, erste schritte https //www back4app com/docs/react native/parse react native sdk/getting started , haben sie gelernt, wie man initializeparse initializeparse verwendet, um die verbindung zu den back4app servern zu aktivieren richten sie ihre app id app id und javascriptkey javascriptkey im einstiegspunkt komponenten, die sich 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 ); fahren sie fort und führen sie das projekt aus danach haben sie das starterprojekt erfolgreich eingerichtet und die app wird wie folgt aussehen die verzeichnisstruktur des projekts das ursprüngliche projekt hat 4 hauptseiten lernseite zeigt aufgaben, die zur kategorie lernen gehören einkaufsseite zeigt aufgaben, die zur kategorie einkaufen gehören arbeitsseite zeigt aufgaben, die zur kategorie arbeit gehören addtodo seite einfaches formular zum erstellen einer neuen aufgabe 2 erstellen einer neuen aufgabe ein gemeinsames merkmal einer todo app ist es, den benutzern zu ermöglichen, neue aufgaben zu erstellen dazu wird die funktion zum erstellen von aufgaben das parse javascript sdk verwenden, um ein neues parse objekt zu erstellen und es auf back4app zu speichern auf der addtodo addtodo seite des starterprojekts haben sie ein einfaches formular mit einem eingabefeld zur eingabe der aufgabenbeschreibung, einigen kontrollkästchen zur auswahl der aufgaben kategorie und einem absenden button in diesem tutorial werden sie parse object parse object für die aufgaben erstellen, das die folgenden attribute haben wird schauen sie sich den parse javascript sdk daten speichern leitfaden für weitere informationen zum erstellen von parse objekten an 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 } implementieren sie jetzt die methode zum erstellen einer aufgabe, wenn der benutzer auf absenden klickt im pages/addtodo/index js pages/addtodo/index js komponente lassen sie uns die handlesubmit handlesubmit methode implementieren 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 } danach werden sie nun in der lage sein, einige aufgaben zu erstellen fühlen sie sich frei, so viele aufgaben zu erstellen, wie sie möchten in den nächsten schritten werden sie diese abfragen 3 abfragen & filtern von aufgaben jetzt, da sie einige aufgaben erstellt haben, ist es zeit, die parse react native lib zu verwenden sie werden einige abfragen schreiben und sie an den useparsequery useparsequery hook übergeben die abfragen listen alle nicht abgeschlossenen aufgaben in der kategorie lernen auf dies ist der erste anwendungsfall des hooks, sie werden eine einmalige abrufabfrage erstellen, indem sie enablelivequery\ false enablelivequery\ false , setzen, die ausgeführt wird, wenn die lernseitenkomponente gerendert wird das enablelivequery enablelivequery ist true true standardmäßig, und die änderung auf false false deaktiviert das abonnement für echtzeitänderungen in der pages/learning/index js pages/learning/index js komponente lassen sie uns unsere 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'); übergeben sie die abfrage als argument an den useparsequery useparsequery hook der obige code zeigt eine grundlegende verwendung des parse hooks der useparsequery hook ist eine neue ressource, die sie mit jeder parse query verwenden können verwenden sie alle parse query funktionen https //docs parseplatform org/js/guide/#queries um ihre datenobjekte abzurufen, und der hook wird diese erfahrung noch besser machen nachdem sie die ergebnisse erhalten haben, geben sie sie an die tasklist komponente weiter, um aufgaben in der app anzuzeigen 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; ihre app sollte erfolgreich die liste der aufgaben wie folgt anzeigen 4 echtzeitänderungen die zweite nutzung, die sie erkunden werden, sind echtzeit updates der useparsequery useparsequery hook kapselt die parse live query ein und bietet sofortige unterstützung für echtzeitänderungen wenn sie eine abfrage an den hook übergeben, wird eine websocket verbindung hergestellt, um mit dem back4app livequery server zu kommunizieren, der automatisch synchronisiert sie werden diese funktion zu den aufgaben in der einkaufs kategorie hinzufügen es ist wichtig zu beachten, dass live query und die back4app subdomain auf ihrem back4app dashboard app aktiviert sein müssen sobald sie das getan haben, fügen sie ihre subdomain url zu initializeparse initializeparse hinzu, und die ergebnisse aus dem parse react native hook werden immer aktualisierte daten haben wenn sie die subdomain nicht konfigurieren, wird der useparsequery useparsequery hook nicht in der lage sein, daten in echtzeit abzurufen 1 // src/index js 2 initializeparse( 3 '\<yoursubdomain> b4a io', 4 'application id', 5 'javascript key' 6 ); im pages/shopping/index js pages/shopping/index js komponente lassen sie uns unser 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'); dann übergeben sie die abfrage als argument an den useparsequery useparsequery hook beachten sie, dass keine zusätzlichen parameter erforderlich sind, da die echtzeitänderungen standardmäßig aktiviert sind nachdem sie die ergebnisse erhalten haben, geben sie sie an die tasklist tasklist komponente weiter, um aufgaben in der app anzuzeigen 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 offline unterstützung der dritte anwendungsfall für @parse/react native @parse/react native besteht darin, die abfrageergebnisse offline zu cachen dies ist nützlich, falls ihre react native app auch bei netzwerkverzögerungen oder internetverbindungsproblemen funktionieren muss die offline unterstützung verbessert die reaktionsfähigkeit ihrer react native apps und das benutzererlebnis die gute nachricht ist, dass keine zusätzlichen schritte erforderlich sind! der offline first ansatz und die echtzeit abonnements sind standardmäßig aktiviert kurz gesagt, die verwendung des useparsequery useparsequery hooks stellt sicher, dass ihre app die abfrageergebnisse für die offline unterstützung zusammen mit live query abonnements cacht, wenn ihr benutzer wieder online geht 6 abfragen einschränken und sortieren angenommen, die aufgabenliste aus der kategorie arbeit ist zu viel für eine person, um sie zu bewältigen, und sie möchten nur eine teilmenge davon für den tag anzeigen außerdem nach dem erstellungsdatum sortieren in der pages/shopping/index js pages/shopping/index js komponente lassen sie uns unser 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 dann übergeben sie die abfrage als argument an den useparsequery useparsequery hook und geben sie sie an die tasklist tasklist komponente weiter, um aufgaben in der app anzuzeigen 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 angabe der useparsequery argumente sie haben @parse/react native @parse/react native verwendet, um daten von back4app mit funktionen wie live query in den vorherigen schritten abzurufen daher ist eine erklärung der exportierten schnittstelle erforderlich der useparsequery useparsequery hook akzeptiert eine parse query parse query und ein useparsequeryoptions useparsequeryoptions objekt als seine argumente das standardmäßige optionale konfigurationsobjekt ist das folgende 1 { 2 enablelivequery true, 3 enablelocaldatastore true, 4 initialload \[] 5 } enablelivequery die realtime live query funktion ist standardmäßig aktiviert enablelocaldatastore ermöglicht das lokale caching von datenresultaten, standardmäßig ist true true aber sie können es deaktivieren, indem sie es auf false false initialload wenn sie bereits einige daten im speicher geladen haben, können sie diese so einstellen, dass sie eine vorschau der daten für die benutzer anzeigen es ist erledigt! an diesem punkt haben sie gelernt, wie sie die @parse/react native @parse/react native bibliothek verwenden, indem sie eine react native todo app auf back4app erstellen