Comment construire un backend pour Gatsby ?

introduction dans ce tutoriel, vous apprendrez comment construire un backend pour gatsby en utilisant back4app nous vous montrerons comment intégrer les fonctionnalités de back4app—comme la gestion de base de données, les fonctions cloud code, rest api et les capacités de requête graphql , l'authentification des utilisateurs, et les requêtes en temps réel (live queries)—pour créer un backend sécurisé, évolutif et robuste qui peut être accessible depuis votre site gatsby vous verrez également comment la configuration rapide de back4app et son environnement intuitif peuvent réduire considérablement le temps et les efforts nécessaires pour gérer les tâches de backend à la fin, vous saurez exactement comment construire un backend pour gatsby qui stocke et récupère des données, gère l'authentification, intègre des fonctions cloud, et plus encore cela vous prépare à incorporer facilement une logique personnalisée, à ajouter des api tierces, ou à étendre votre modèle de données sans avoir à vous soucier de la maintenance traditionnelle des serveurs ce que vous allez construire et pourquoi c'est précieux intégration backend complète vous créerez une structure de backend évolutive pour votre site gatsby, incorporant le sdk parse, qui est parfait pour les besoins de données dynamiques économies de temps back4app fournit des outils comme l'agent ia, des requêtes en temps réel, et des tâches cloud qui accélèrent la création de backend compétences évolutives après avoir terminé, vous serez en mesure d'adapter ces concepts pour des fonctionnalités gatsby plus avancées, comme créer des pages au moment de la construction ou de se connecter à des fonctions sans serveur pour des opérations dynamiques conditions préalables 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, vous pouvez en créer un gratuitement suivez le guide ci dessus pour préparer votre projet environnement de développement gatsby de base vous pouvez le configurer en installant le gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli et en exécutant node js (version 14 ou supérieure) installé installer node js https //nodejs org/en/download/ familiarité avec javascript et les concepts de gatsby documentation officielle de gatsby https //www gatsbyjs com/docs/ lisez la documentation ou un tutoriel pour débutants si vous êtes nouveau sur gatsby assurez vous d'avoir ces exigences en place cela garantit une expérience fluide lorsque vous créez un nouveau fichier pour la configuration ou exécutez des requêtes graphql dans votre environnement gatsby étape 1 – configuration du projet back4app créer un nouveau projet la première étape pour construire un backend pour gatsby sur back4app consiste à créer un nouveau projet si vous ne l'avez pas déjà fait connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” sur votre tableau de bord donnez un nom à votre application (par exemple, “gatsby backend tutorial”) après avoir créé le projet, il apparaîtra dans votre tableau de bord back4app nous utiliserons ce projet comme le cœur de notre backend connectez le sdk parse back4app utilise la plateforme parse pour gérer vos données, offrir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore pour gatsby, vous pouvez toujours npm install parse et ensuite l'intégrer dans vos fichiers sources récupérez vos clés parse dans votre tableau de bord back4app, localisez votre id d'application et clé javascript , généralement sous “paramètres de l'application” ou “sécurité & clés ” vous trouverez également l' url du serveur parse (souvent quelque chose comme https //parseapi back4app com ) installez le sdk parse dans votre site gatsby npm install parse créez un parseconfig js dans le répertoire racine de votre projet gatsby ou dans src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; chaque fois que vous importez parse depuis parseconfig js dans vos fichiers gatsby (par exemple, dans gatsby node js , gatsby browser js , ou pages/composants), vous aurez une instance préconfigurée prête à effectuer des requêtes vers votre backend back4app étape 2 – configuration de la base de données création d'un modèle de données dans back4app, les données sont gérées sous forme de “classes” (similaires à des tables) avec des champs pour vos données créons une classe “todo” à des fins de démonstration nous allons montrer quelques façons de sauvegarder et récupérer des données dans gatsby avec parse 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 comme titre (string) et iscompleted (boolean) ou vous pouvez laisser parse créer automatiquement des colonnes lorsque les objets sont d'abord enregistrés depuis votre code créer un modèle de données avec l'agent ia back4app fournit un agent ia pour aider à définir votre structure de données ouvrez l'agent ia depuis votre tableau de bord ou menu d'application décrivez votre modèle de données (par exemple, “veuillez créer un nouveau schéma d'application todo avec un titre et un statut d'achèvement ”) laissez l'agent ia générer le schéma pour vous lire et écrire des données en utilisant le sdk un extrait d'exemple dans gatsby pourrait ressembler à ceci (par exemple, dans une page basée sur react ou dans gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } lecture et écriture de données en utilisant l'api rest alternativement, vous pouvez interagir avec la base de données via l' api rest 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 lecture et écriture de données en utilisant l'api graphql back4app prend également en charge une api graphql , vous pourriez donc exécuter des requêtes ou des mutations comme mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } c'est particulièrement pratique si vous souhaitez que votre site gatsby récupère des données via des requêtes graphql au moment de la construction travailler avec des requêtes en direct gatsby est un générateur de sites statiques, mais vous pouvez toujours configurer des connexions dynamiques en temps réel en utilisant parse requêtes en direct cela peut être utile dans le code exécuté dans le navigateur ou dans vos propres hooks sans serveur activer les requêtes en direct dans votre tableau de bord back4app (sous paramètres du serveur) ajouter l'url du serveur de requêtes en direct à parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; s'abonner à une classe pour des notifications en temps réel async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } cela enverra des mises à jour de données en temps réel à l'interface de votre projet gatsby étape 3 – appliquer la sécurité avec les acl et les clp qu'est ce que les acl et les clp ? les acl (listes de contrôle d'accès) vous permettent de définir des autorisations sur des objets individuels, tandis que les clp (autorisations au niveau de la classe) s'appliquent à des classes entières dans votre base de données back4app configuration des autorisations au niveau de la classe allez à database dans votre tableau de bord back4app sélectionnez la classe (par exemple, todo ) cliquez sur l'onglet class level permissions configurez si la classe est lisible publiquement, nécessite une authentification ou est restreinte à certains rôles utilisation des acl dans le code dans votre code gatsby, vous pouvez définir des acl pour chaque nouvel objet async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } étape 4 – écriture des fonctions cloud code pourquoi cloud code ? avec cloud code, vous pouvez ajouter une logique personnalisée côté serveur à votre backend back4app c'est idéal pour les règles commerciales, les transformations de rest api , les déclencheurs ou les validations de données que vous souhaitez garder sécurisées et hors du côté client exemple de fonction cloud // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); déployer le code cloud via back4app cli installez et configurez le cli, puis exécutez b4a deploy via dashboard allez à cloud code > functions dans votre tableau de bord, collez votre code dans main js , et cliquez sur déployer appeler votre fonction depuis gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } étape 5 – configuration de l'authentification classe utilisateur parse back4app utilise la parse user classe pour l'authentification par défaut, elle gère le hachage des mots de passe, les sessions et le stockage sécurisé inscription et connexion dans gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } après vous être connecté, vous pouvez appeler parse user current() pour vérifier si un utilisateur est connecté connexion sociale vous pouvez intégrer google , facebook , apple , et d'autres fournisseurs avec des configurations supplémentaires lisez en plus dans la documentation sur la connexion sociale https //www back4app com/docs/platform/sign in with apple étape 6 – gestion du stockage de fichiers téléchargement de fichiers utilisez parse file pour télécharger des images ou d'autres fichiers par exemple, dans un composant gatsby async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } vous pouvez ensuite attacher ce fichier à un objet parse, le stocker, et plus tard récupérer l'url du fichier pour l'afficher sur votre site gatsby étape 7 – vérification par email et réinitialisation de mot de passe pourquoi c'est important la vérification de l'email confirme l'adresse email de l'utilisateur, et les flux de réinitialisation de mot de passe améliorent l'expérience utilisateur les deux sont facilement configurables dans back4app accédez aux paramètres d'email de votre application dans le tableau de bord activez la vérification de l'email et configurez le modèle d'email de réinitialisation de mot de passe utilisez les méthodes du sdk parse (par exemple, parse user requestpasswordreset(email) ) pour déclencher les emails de réinitialisation étape 8 – planification des tâches avec les cloud jobs aperçu des cloud jobs utilisez cloud jobs pour automatiser les tâches récurrentes, comme la suppression des données obsolètes ou l'envoi de résumés quotidiens par exemple // 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); } }); puis planifiez le sous paramètres de l'application > paramètres du serveur > tâches en arrière plan étape 9 – intégration des webhooks les webhooks permettent à votre application back4app d'envoyer des requêtes http à des services externes lorsque des événements spécifiques se produisent, comme la création d'un nouvel enregistrement allez à votre tableau de bord back4app > plus > webhooks ajoutez un nouveau webhook , en spécifiant l'url de point de terminaison pour un service externe sélectionnez ce qui déclenche le webhook (par exemple, aftersave sur la classe todo) vous pouvez également vous intégrer à slack ou à des passerelles de paiement en ajoutant le point de terminaison approprié étape 10 – exploration du panneau d'administration back4app l'application admin app de back4app est une interface centrée sur le modèle pour la gestion des données vous pouvez donner aux utilisateurs non techniques un accès sécurisé pour effectuer des opérations crud sur vos classes activation de l'application admin allez à app dashboard > more > admin app et cliquez sur “activer l'application admin ” ensuite, créez un utilisateur admin et choisissez un sous domaine pour l'interface admin vous pouvez maintenant vous connecter à votre application admin pour visualiser et modifier des données sans écrire de code conclusion dans ce tutoriel, vous avez découvert comment construire un backend pour gatsby en utilisant back4app vous avez appris à configurer une base de données sécurisée avec des classes, des champs personnalisés et des relations utiliser le sdk parse , ainsi que l'api rest et les options de requête graphql pour les transactions de données configurer des acl et des clp pour la sécurité des données écrire et déployer du cloud code pour étendre la logique métier et les déclencheurs gérer l'authentification des utilisateurs avec l'inscription, la connexion, la réinitialisation du mot de passe et la vérification par e mail gérer le stockage de fichiers pour les images et les documents planifier des tâches automatisées avec des cloud jobs intégrer des services externes via des webhooks exploiter l'admin app pour une administration facile des données avec ces compétences, votre site gatsby peut tirer parti de puissantes fonctionnalités dynamiques tout en profitant du rendu statique de gatsby à partir de là, vous pouvez élargir votre modèle de données et ajouter une logique métier avancée intégrer plus d'apis externes pour une plateforme véritablement complète suivre la documentation officielle de back4app pour des plongées plus profondes dans la sécurité, la performance et l'analyse expérimenter avec les fonctionnalités de construction de gatsby —par exemple, “ créer des pages ” à partir de données dynamiques ou configurer un “ plugin gatsby source ” pour votre backend back4app maintenant, vous avez une base solide pour construire des applications orientées données et à l'épreuve du temps avec gatsby et back4app