Guide d'intégration du Parse SDK dans un projet React

démarrage rapide introduction dans cette section, vous apprendrez comment commencer avec back4app en utilisant un projet existant ou nouveau avec react vous installerez le parse sdk parse sdk , initialiserez parse en utilisant vos clés d'application clés d'application , et effectuerez votre premier appel api en sauvegardant et en lisant des objets de données depuis back4app prérequis pour compléter ce tutoriel, vous aurez besoin de d'une application créée sur back4app; d'une version récente de node js , y compris yarn yarn et npx npx 1 création d'un projet react si vous avez déjà un projet react fonctionnel, vous pouvez passer à l'étape suivante exécutez la commande suivante dans le répertoire où vous souhaitez stocker le projet, en indiquant également son nom, dans ce cas, back4app guide react back4app guide react si node js node js est correctement configuré, vous devriez voir le projet se créer dans votre invite de terminal après l'achèvement, vous verrez un message vous informant que le processus a réussi ouvrez le projet dans votre éditeur de code préféré et commençons à intégrer parse 2 installer les dépendances installons maintenant la seule dépendance nécessaire, parse javascript sdk parse javascript sdk , pour intégrer votre application avec les serveurs back4app exécutez la commande suivante dans le répertoire racine de votre projet 3 obtenez vos clés d'application après avoir créé votre application sur back4app, allez sur le tableau de bord de votre application et obtenez vos clés d'application sous paramètres de l'application >sécurité & clés paramètres de l'application >sécurité & clés (voir l'image ci dessous) notez que vous aurez toujours besoin de deux clés pour vous connecter à back4app, le id d'application id d'application et clé javascript clé javascript 4 initialiser parse et se connecter à back4app allez à votre app js app js et initialisez le parse sdk parse sdk en utilisant à la fois l' id d'application id d'application et la clé javascript clé javascript (vérifiez l'étape précédente) 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 enregistrer et lire un objet de données simple votre application est initialisée et peut se connecter en toute sécurité aux services cloud de back4app créons maintenant un composant contenant deux fonctions simples à l'intérieur pour enregistrer et récupérer des données de votre base de données back4app créez un nouveau fichier nommé personcomponent js personcomponent js dans votre src src répertoire et ajoutez le code suivant 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 }; le addperson addperson méthode crée un nouveau parse object parse object représentant une personne personne classe, définit ses propriétés puis l'enregistre dans le magasin de données cloud back4app la méthode fetchperson fetchperson récupère un parse object parse object qui a l'attribut nom nom égal à john john lorsque la requête se résout, vous pourrez accéder aux attributs de la personne en utilisant la get get méthode notez également les éléments d'interface dans ce composant, ils consistent en deux boutons appelant les méthodes et aussi deux paragraphes récupérant le personne personne à travers une variable d'état nous devons maintenant importer et utiliser ce composant dans votre fichier principal app js app js votre app js app js devrait ressembler à quelque chose comme ça, après avoir supprimé la plupart du code de remplacement 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 testez votre app ouvrez le terminal de votre projet exécutez yarn start yarn start votre navigateur devrait s'ouvrir après la construction avec l'application en cours d'exécution cliquez sur le bouton pour ajouter une nouvelle personne personne d'abord, puis cliquez pour récupérer la même personne personne vous avez enregistré et récupéré un objet de données depuis back4app vous pouvez également vérifier les données sur votre tableau de bord de l'application et en cliquant sur la classe personne que faire ensuite comme vous l'avez vu, le moyen le plus simple d'intégrer back4app dans votre projet react est via le parse javascript sdk https //www npmjs com/package/parse le sdk parse offre une excellente expérience de développement grâce à une couche légère et facile à utiliser qui nécessite une configuration minimale et une réutilisation du code