How to Build a Backend for React Native?

introduction dans ce tutoriel, vous apprendrez comment construire un backend pour react native en utilisant back4app nous nous concentrerons sur la compatibilité multiplateforme et illustrerons comment vous pouvez intégrer les fonctionnalités essentielles de back4app pour la gestion des données, l'authentification des utilisateurs et les données en temps réel en tirant parti des api rest et graphql, vous pouvez développer votre projet react native pour qu'il fonctionne à la fois sur les plateformes ios et android, garantissant une expérience fluide à travers les composants natifs et les applications mobiles la mise en œuvre de connexions utilisateur sécurisées, la planification de tâches et l'utilisation d'applications en temps réel faciliteront votre parcours de développeur full stack vous verrez également comment l'environnement de back4app peut réduire le temps nécessaire pour configurer des services, y compris l'hébergement, la base de données et les couches de sécurité à la fin, vous aurez une structure backend robuste qui soutient votre application react native et ouvre la voie à la création de solutions mobiles à grande échelle après avoir terminé ce guide, vous serez prêt à étendre votre application avec des fonctionnalités avancées, à intégrer des services tiers ou à transformer votre projet en une plateforme prête pour la production plongeons dans le développement moderne d'applications mobiles avec back4app et react native ! prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app et un nouveau projet back4app commencer avec back4app https //www back4app com/docs/get started/new parse app si vous n'avez pas de compte, inscrivez vous gratuitement ensuite, suivez le guide pour préparer votre projet environnement de développement de base react native vous pouvez utiliser le react native cli quickstart https //reactnative dev/docs/environment setup ou expo cli https //docs expo dev/get started/installation/ assurez vous d'avoir node js installé node js (version 14 ou supérieure) installé vous avez besoin de node js pour installer des paquets npm et exécuter des serveurs de développement locaux installer node js https //nodejs org/en/download/ familiarité avec javascript et les concepts de base de react native docs officielles de react native https //reactnative dev/ si vous êtes nouveau dans le développement react native, consultez d'abord les docs ou un tutoriel pour débutants assurez vous d'avoir ces prérequis en place avant de commencer avoir votre projet back4app créé et votre environnement local react native configuré garantira un processus fluide étape 1 – créer un nouveau projet sur back4app et se connecter créer un nouveau projet la première étape pour construire des backends mobiles pour votre application react native consiste à créer un nouveau projet sur back4app suivez ces étapes connectez vous à votre compte back4app cliquez sur le bouton “nouvelle app” dans votre tableau de bord back4app donnez un nom à votre application (par exemple, “reactnative backend tutorial”) une fois le projet créé, il apparaîtra dans votre tableau de bord back4app vous utiliserez ce nouveau projet pour gérer les données et configurer la sécurité de votre application react native obtenir vos clés d'application contrairement aux applications react basées sur le web, le développement react native nécessite souvent des requêtes http directes pour la récupération et la manipulation des données puisque nous nous concentrons sur les api rest (ou les api graphql ) au lieu du sdk parse, vous aurez toujours besoin de vos clés back4app pour envoyer des requêtes authentifiées récupérez vos clés parse dans le tableau de bord back4app, ouvrez la section paramètres de l'application ou sécurité et clés pour trouver votre id d'application , clé api rest , et point de terminaison graphql (généralement https //parseapi back4app com/graphql ) notez votre clé api rest vous l'incluez dans vos en têtes fetch ou axios de react native pour authentifier chaque requête cette étape garantit que vos applications mobiles peuvent communiquer en toute sécurité avec back4app étape 2 – configuration de la base de données back4app offre une large gamme d'options backend pour les applications react native, y compris des capacités de gestion des données robustes vous pouvez créer des classes, ajouter des champs et définir des relations via le tableau de bord que vous construisiez des applications en temps réel ou des applications crud plus simples, le tableau de bord back4app vous aide à stocker et organiser les données facilement création d'un modèle de données naviguez vers la section “base de données” dans votre tableau de bord back4app créez une nouvelle classe (par exemple, “todo”) et ajoutez des colonnes pertinentes comme titre (string) et estcomplété (boolean) back4app prend en charge divers types de données string , number , boolean , object , date , file , pointer , array , relation , geopoint , et polygon vous pouvez également laisser parse créer automatiquement des champs lorsque vous envoyez de nouvelles données création d'un modèle de données avec un agent ia si vous le souhaitez, vous pouvez utiliser l'agent ia de back4app ouvrez l'agent ia depuis votre tableau de bord d'application décrivez votre modèle de données en langage simple (par exemple, “construire une classe todo avec des champs titre et iscompleted ”) laissez l'agent ia créer le schéma pour vous cela peut faire gagner du temps lors des premières étapes de votre projet react native lecture et écriture de données en utilisant l'api rest pour le développement typique de react native, vous pouvez utiliser l'api native fetch ou une bibliothèque tierce comme axios pour gérer les api rest voici un exemple utilisant curl, que vous pouvez adapter pour fetch post (créer un todo) curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo get (récupérer les todos) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo dans votre application react native, vous pouvez faire de même avec fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } lecture et écriture de données en utilisant l'api graphql si vous préférez graphql, back4app fournit un point de terminaison graphql voici un exemple de mutation pour créer un nouvel enregistrement mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } vous pouvez exécuter des requêtes graphql en utilisant une bibliothèque comme apollo client ou même un simple fetch appel async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } travailler avec des requêtes en direct (optionnel) pour des données en temps réel, back4app propose des requêtes en direct, bien que cela nécessite généralement le sdk parse comme nous nous concentrons sur les appels rest dans ce tutoriel, vous pouvez activer les requêtes en direct dans les paramètres de serveur de votre application si vous prévoyez de les utiliser plus tard les données en temps réel peuvent vous aider à tenir les utilisateurs informés instantanément dans une application react native pour une approche plus simple, vous pouvez interroger le serveur à vos propres intervalles ou vous fier à des outils tiers étape 3 – appliquer la sécurité avec les acl et les clp aperçu rapide back4app sécurise votre backend avec acls (listes de contrôle d'accès) et clps (permissions au niveau de la classe) cela vous permet de protéger les données à la fois au niveau de l'objet et de la classe ils sont essentiels pour mettre en œuvre des permissions utilisateur sécurisées dans le développement d'applications mobiles de qualité production étape par étape permissions au niveau de la classe (clps) allez dans la section base de données de votre application, ouvrez n'importe quelle classe et passez à “sécurité & permissions ” ajustez les permissions de lecture/écriture pour divers rôles d'utilisateur ou l'accès public acls vous pouvez appliquer un contrôle d'accès par objet en incluant des champs acl dans vos requêtes rest par exemple pour plus de détails, consultez les directives de sécurité de l'application https //www back4app com/docs/security/parse security étape 4 – écriture des fonctions cloud code pourquoi cloud code cloud code vous permet d'exécuter des scripts côté serveur sur back4app pour des tâches telles que les validations, les déclencheurs et le traitement des appels api externes cela vous aide à contrôler la logique qui doit rester cachée du client, offrant une meilleure sécurité pour votre projet react native exemple de fonction voici un exemple que vous écririez dans votre main js côté serveur vous pouvez l'appeler depuis votre application react native via rest // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); déploiement back4app cli installez le cli, configurez votre clé de compte, et exécutez b4a deploy tableau de bord vous pouvez également aller à cloud code > functions , collez votre code dans main js , et cliquez sur déployer appeler votre fonction (via rest) utilisez les api rest directement depuis votre application react native async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } cette flexibilité vous rend plus efficace en tant que développeur full stack, car vous pouvez intégrer la logique métier sans exposer de détails sensibles sur le client étape 5 – configuration de l'authentification activer ou configurer l'authentification des utilisateurs back4app utilise la classe parse user pour gérer l'authentification des utilisateurs même si vous n'utilisez pas le sdk parse dans react native, vous pouvez vous inscrire, vous connecter ou vous déconnecter en utilisant des requêtes http directes inscrire un utilisateur (rest) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users se connecter (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login ces requêtes renvoient un jeton de session que vous pouvez stocker dans votre application react native pour gérer les sessions utilisateur cela garantit que chaque requête que vous effectuez peut être autorisée, construisant des expériences mobiles qui restent sécurisées connexion sociale back4app prend en charge les connexions sociales (google, facebook, apple) via des flux spécialisés vous devrez suivre le documentation sur la connexion sociale https //www back4app com/docs/platform/sign in with apple pour configurer les applications oauth, puis envoyer les jetons appropriés à back4app étape 6 – gestion du stockage de fichiers configuration du stockage de fichiers back4app peut stocker des fichiers pour votre application react native vous pouvez les attacher à des objets ou les télécharger directement comme nous utilisons rest, voici un exemple de téléchargement d'un fichier (encodé en base64) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png la réponse renvoie une url que vous pouvez stocker dans votre base de données depuis votre application react native, vous pouvez le faire avec fetch en envoyant le fichier sous forme de blob ou de données de formulaire considérations de sécurité pour éviter les téléchargements non autorisés, configurez les options de téléchargement de fichiers dans vos paramètres du serveur parse par exemple, vous pourriez autoriser les téléchargements uniquement à partir d'utilisateurs authentifiés cela garantit que les services, y compris le stockage de fichiers, restent protégés étape 7 – vérification par e mail et réinitialisation du mot de passe aperçu confirmer la propriété de l'e mail est essentiel pour mettre en œuvre des flux utilisateurs sécurisés back4app propose des outils intégrés pour la vérification des e mails et la réinitialisation des mots de passe configuration du tableau de bord back4app ouvrez les paramètres de votre application activez la vérification par e mail dans les paramètres d'e mail personnalisez les modèles pour les messages de réinitialisation de mot de passe et de vérification code/implémentation un utilisateur qui oublie son mot de passe peut déclencher une demande de réinitialisation curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4app envoie un e mail de réinitialisation de mot de passe à l'utilisateur cette commodité vous évite de configurer des serveurs de messagerie séparés dans votre application react native étape 8 – planification des tâches avec les cloud jobs ce que font les cloud jobs les cloud jobs vous aident à automatiser des tâches récurrentes comme le nettoyage des données ou l'envoi de rapports quotidiens voici un exemple de tâche dans main js // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); déployez ce code, puis allez à paramètres du serveur > tâches en arrière plan pour le planifier cela maintient vos données à jour sur vos plateformes ios et android sans intervention manuelle étape 9 – intégration des webhooks définition les webhooks permettent à votre backend de notifier des services externes chaque fois qu'un événement se produit par exemple, vous pourriez notifier slack ou une passerelle de paiement lors de la création d'un nouveau todo configuration allez à plus > webhooks dans votre tableau de bord back4app ajoutez un nouveau webhook pointant vers un point de terminaison externe souhaité définissez des déclencheurs pour déterminer quand les changements de données de votre application react native doivent déclencher le webhook vous pouvez également coder des webhooks à l'intérieur des déclencheurs cloud code, vous permettant d'envoyer des requêtes http ou d'intégrer des api tierces cela étend les capacités de votre backend à un large éventail de services externes étape 10 – explorer le panneau d'administration back4app où le trouver le panneau d'administration back4app est une interface conviviale pour les personnes non techniques afin de gérer les données il est particulièrement utile pour les propriétaires de produits, les représentants des clients ou le personnel de support qui ont besoin d'un accès direct à votre modèle de données fonctionnalités activer l'application admin dans votre tableau de bord de l'application > plus > application admin créer un utilisateur admin (nom d'utilisateur/mot de passe) choisir un sous domaine pour un accès rapide à la base de données sans code une fois connecté, vos utilisateurs ou votre équipe peuvent visualiser, modifier ou supprimer des enregistrements sans écrire de code cette approche favorise une gestion des données plus rapide et une collaboration conclusion dans ce guide, vous avez appris comment construire un backend pour des applications react native en utilisant back4app cela incluait créer un backend sécurisé et mettre en œuvre la compatibilité multiplateforme pour votre application react native configurer la gestion des données avec des api rest et graphql configurer des acl et des clp pour protéger les données sensibles écrire du cloud code pour la logique côté serveur gérer l'authentification des utilisateurs et la vérification des e mails gérer le stockage de fichiers avec des téléchargements directs planifier des tâches en arrière plan avec des cloud jobs utiliser des webhooks pour intégrer des services externes explorer le panneau d'administration back4app pour une administration facile de la base de données avec ces outils et fonctionnalités, votre projet react native peut évoluer en une solution full stack fiable et évolutive vous êtes maintenant équipé pour gérer des données en temps réel, la sécurité des utilisateurs et d'autres aspects cruciaux des applications mobiles continuez à explorer la documentation back4app https //www back4app com/docs/ pour affiner vos compétences et créer des expériences mobiles puissantes sur les plateformes ios et android prochaines étapes renforcez votre application react native avec une sécurité avancée et un contrôle d'accès basé sur les rôles expérimentez avec des mises à jour en temps réel en utilisant des requêtes en direct pour des applications en temps réel (si nécessaire) intégrez des api externes et des services, y compris des passerelles de paiement ou des connexions sociales améliorez les performances grâce à la mise en cache ou à l'optimisation des fonctions cloud plongez plus profondément dans la documentation officielle de back4app https //www back4app com/docs/ pour débloquer des fonctionnalités supplémentaires