Integrazione Parse SDK nel Progetto React: Guida Avanzata

guida rapida introduzione in questa sezione, imparerai come iniziare con back4app utilizzando un progetto esistente o nuovo con react installerai il parse sdk parse sdk , inizializzerai parse utilizzando le tue chiavi dell'app chiavi dell'app , e farai la tua prima chiamata api salvando e leggendo oggetti di dati da back4app requisiti per completare questo tutorial, avrai bisogno di di un app creata su back4app; una versione recente di node js , inclusi yarn yarn e npx npx 1 creare un progetto react se hai già un progetto react funzionante, puoi saltare al passaggio successivo esegui il seguente comando nella directory in cui desideri memorizzare il progetto, informando anche il suo nome, in questo caso, back4app guide react back4app guide react se node js node js è configurato correttamente, dovresti vedere il progetto che viene creato nel tuo terminale al termine, vedrai un messaggio che ti informa che il processo è stato completato con successo apri il progetto nel tuo editor di codice preferito e iniziamo a integrare parse 2 installa le dipendenze ora installiamo l'unica dipendenza necessaria, parse javascript sdk parse javascript sdk , per integrare la tua app con i server di back4app esegui il seguente comando nella directory principale del tuo progetto 3 ottieni le chiavi della tua app dopo aver creato la tua app su back4app, vai al dashboard della tua app e ottieni le chiavi della tua app sotto impostazioni app >sicurezza e chiavi impostazioni app >sicurezza e chiavi (controlla l'immagine qui sotto) nota che avrai sempre bisogno di due chiavi per connetterti a back4app, il id applicazione id applicazione e chiave javascript chiave javascript 4 inizializza parse e connettiti a back4app vai al tuo app js app js e inizializza il parse sdk parse sdk utilizzando sia il application id application id che il javascript key javascript key (controlla il passaggio precedente) 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 salva e leggi un semplice oggetto dati la tua app è inizializzata e può connettersi in modo sicuro ai servizi cloud di back4app creiamo ora un componente contenente due semplici funzioni per salvare e recuperare dati dal tuo database back4app crea un nuovo file chiamato personcomponent js personcomponent js nella tua src src directory e aggiungi il seguente codice 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 }; il metodo addperson metodo addperson crea un nuovo parse object parse object che rappresenta una persona persona classe, imposta le sue proprietà e poi lo salva nel cloud data store di back4app il metodo fetchperson fetchperson recupera un parse object parse object che ha l'attributo name name uguale a john john quando la query si risolve, sarai in grado di accedere agli attributi della persona usando il metodo get metodo get nota anche gli elementi dell'interfaccia in questo componente, consistono in due pulsanti che chiamano i metodi e anche due paragrafi che recuperano il persona persona attraverso una variabile di stato ora dobbiamo importare e utilizzare questo componente nel tuo principale app js app js file il tuo app js app js file dovrebbe apparire qualcosa del genere, dopo aver rimosso la maggior parte del codice segnaposto al suo interno 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 testa la tua app apri il terminale del tuo progetto esegui yarn start yarn start il tuo browser dovrebbe aprirsi dopo la costruzione con l'app in esecuzione clicca il pulsante per aggiungere una nuova persona persona prima, poi clicca per recuperare la stessa persona persona hai salvato e recuperato un oggetto dati da back4app puoi anche controllare i dati sul tuo app dashboard e cliccando sulla classe persona cosa fare dopo come hai visto, il modo più semplice per integrare back4app nel tuo progetto react è attraverso il parse javascript sdk https //www npmjs com/package/parse il parse sdk offre un'eccellente esperienza di sviluppo attraverso uno strato leggero e facile da usare che fornisce una configurazione minima e riutilizzabilità del codice