Quickstart

introduction ce guide vous aidera à configurer et à utiliser back4app avec un projet nouveau ou existant en utilisant le react native cli vous installerez le parse sdk , l'initialiserez avec vos clés d'application et créerez votre premier appel api pour enregistrer et récupérer des données depuis back4app prérequis pour compléter ce tutoriel, vous aurez besoin de une https //www back4app com/docs/get started/new parse app sur back4app https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou yarn installé https //www npmjs com/package/npx exécuteur de package installé 1 créez votre projet react native il existe deux principales façons de créer un projet react native react native cli et expo choisissez en fonction de votre environnement de développement et de la plateforme cible (ios ou android) react native cli les instructions dépendent de votre système d'exploitation de développement, et si vous souhaitez commencer à développer pour ios ou android pour plus d'informations, consultez la documentation officielle https //reactnative dev/docs/environment setup expo installez expo cli globalement npm install g expo cli créez un nouveau projet react native expo init b4aproject cd b4aproject expo start 2 installer les dépendances dans votre projet react native, installez parse javascript sdk et asyncstorage en exécutant npm install parse @react native async storage/async storage save parse javascript sdk pour intégrer votre application avec les serveurs back4app react native async storage pour utiliser le sdk parse, un gestionnaire asyncstorage est requis pour ios, ajoutez également le support natif d'asyncstorage cd ios & pod install 3 obtenez vos clés d'application après avoir créé votre application sur back4app, trouvez vos clés d'application sous paramètres de l'application > sécurité & clés vous aurez besoin à la fois de l' id d'application et de la clé javascript pour vous connecter 4 initialiser parse et se connecter à back4app ouvrez index tsx et initialisez parse avec votre id d'application et votre clé javascript index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 enregistrer et récupérer des données avec parse initialisé, créez deux fonctions dans index tsx pour enregistrer et récupérer des données de back4app // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } 6 testez votre application ouvrez le terminal de votre projet exécutez le projet react native cli exécutez npx react native run android npx react native run android ou npx react native run ios npx react native run ios pour ouvrir l'application sur votre plateforme cible expo exécutez expo start expo start , et suivez les instructions pour voir l'application dans votre navigateur ou appareil dépannage quelques problèmes courants et solutions metro a rencontré une erreur lors de la tentative de résolution du module “idb keyval’ à partir du fichier solution allez dans le fichier metro conf js metro conf js et changez le pour celui ci 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; impossible de résoudre le module ‘eventemitter’ solution allez dans le fichier node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js et changez cette ligne var eventemitter = require(' / / /react native/libraries/vendor/emitter/eventemitter'); pour ceci import eventemitter from 'react native/libraries/vendor/emitter/eventemitter'; dans le même fichier eventemitter js eventemitter js , changez la ligne suivante module exports = eventemitter; à ceci export default eventemitter; problèmes avec babel si vous rencontrez des problèmes avec babel, envisagez de mettre à jour votre babel config js au suivant