Integration des Parse Server SDKs in React Anwendungen

schnellstart einführung in diesem abschnitt lernen sie, wie sie mit back4app beginnen, indem sie ein bestehendes oder neues projekt mit react verwenden sie werden das parse sdk parse sdk , parse mit ihren app schlüsseln app schlüsseln , initialisieren und ihren ersten api aufruf durchführen, um datenobjekte von back4app zu speichern und zu lesen voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine erstellte app auf back4app; eine aktuelle version von node js , einschließlich yarn yarn und npx npx 1 erstellen eines react projekts wenn sie bereits ein funktionierendes react projekt haben, können sie zum nächsten schritt übergehen führen sie den folgenden befehl im verzeichnis aus, in dem sie das projekt speichern möchten, und geben sie auch den namen an, in diesem fall back4app guide react back4app guide react wenn node js node js richtig konfiguriert ist, sollten sie sehen, wie das projekt in ihrem terminal erstellt wird nach abschluss sehen sie eine nachricht, die sie darüber informiert, dass der prozess erfolgreich war öffnen sie das projekt in ihrem bevorzugten code editor und lassen sie uns mit der integration von parse beginnen 2 abhängigkeiten installieren lassen sie uns jetzt die einzige benötigte abhängigkeit installieren, parse javascript sdk parse javascript sdk , um ihre app mit den back4app servern zu integrieren führen sie den folgenden befehl im stammverzeichnis ihres projekts aus 3 holen sie sich ihre app schlüssel nachdem sie ihre app auf back4app erstellt haben, gehen sie zu ihrem app dashboard und holen sie sich ihre app schlüssel unter app einstellungen >sicherheit & schlüssel app einstellungen >sicherheit & schlüssel (siehe das bild unten) beachten sie, dass sie immer zwei schlüssel benötigen, um sich mit back4app zu verbinden, den anwendungs id anwendungs id und javascript schlüssel javascript schlüssel 4 parse initialisieren und mit back4app verbinden gehe zu deiner app js app js und initialisiere das parse sdk parse sdk mit sowohl der anwendungs id anwendungs id als auch dem javascript schlüssel javascript schlüssel (siehe vorherigen schritt) 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 speichern und lesen eines einfachen datenobjekts ihre app ist initialisiert und kann sicher mit den back4app cloud diensten verbinden lassen sie uns nun eine komponente erstellen, die zwei einfache funktionen enthält, um daten aus ihrer back4app datenbank zu speichern und abzurufen erstellen sie eine neue datei mit dem namen personcomponent js personcomponent js in ihrem src src verzeichnis und fügen sie den folgenden code hinzu 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \<p>{`name ${person get('name')}`}\</p> 44 \<p>{`email ${person get('email')}`}\</p> 45 \</div> 46 )} 47 \</div> 48 ); 49 }; die addperson addperson methode erstellt ein neues parse object parse object das eine person person klasse darstellt, setzt ihre eigenschaften und speichert sie im back4app cloud datenstore die methode fetchperson fetchperson ruft ein parse object parse object ab, das das attribut name name hat, das gleich john john wenn die abfrage aufgelöst wird, kannst du auf die attribute der person mit der get get methode zugreifen beachten sie auch die schnittstellenelemente in dieser komponente, sie bestehen aus zwei schaltflächen, die die methoden aufrufen, und auch aus zwei absätzen, die die abgerufene person person durch eine statusvariable abrufen wir müssen jetzt diese komponente in ihrer haupt app js app js datei importieren und verwenden ihre app js app js datei sollte nach dem entfernen des großteils des platzhaltercodes etwa so aussehen 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 testen sie ihre app öffnen sie das terminal ihres projekts führen sie yarn start yarn start ihr browser sollte sich nach dem erstellen mit der laufenden app öffnen klicken sie auf die schaltfläche, um eine neue person person zuerst hinzuzufügen, und klicken sie dann, um die gleiche person person abzurufen sie haben ein datenobjekt von back4app gespeichert und abgerufen sie können die daten auch auf ihrem app dashboard überprüfen und auf die klasse person klicken was als nächstes zu tun ist wie sie gesehen haben, ist der einfachste weg, back4app in ihr react projekt zu integrieren, über das parse javascript sdk https //www npmjs com/package/parse das parse sdk bietet eine hervorragende entwicklungserfahrung durch eine leichte und benutzerfreundliche schicht, die minimale konfiguration und code wiederverwendbarkeit bietet