Comment créer une appli CRUD avec Gatsby ?

introduction dans ce guide, vous découvrirez comment créer une application web crud (créer, lire, mettre à jour, supprimer) en utilisant gatsby nous utiliserons back4app comme votre backend cloud pour gérer les données sans effort ce guide vous accompagne dans la configuration d'un projet back4app, la définition d'un schéma flexible et la connexion de votre application gatsby avec des appels api rest ou graphql pour effectuer des opérations crud dans un premier temps, vous allez configurer un projet back4app nommé basic crud app gatsby ce projet vous donne accès à une base de données non relationnelle robuste vous concevrez votre schéma de données en créant manuellement des classes et des champs dans le tableau de bord back4app ou en utilisant l'agent ia de back4app ensuite, vous utiliserez l'application admin de back4app—une interface de glisser déposer—pour gérer les tâches de gestion des données sans effort enfin, vous intégrerez votre application gatsby avec l'api back4app (via rest ou graphql) pour exécuter des opérations crud sécurisées à la fin de ce tutoriel, vous aurez développé une application gatsby prête pour la production qui effectue des opérations crud de base avec une gestion sécurisée des données et une authentification des utilisateurs principaux enseignements apprenez à créer une application crud avec gatsby soutenue par un backend low code comprenez comment structurer votre backend et le lier à un site gatsby moderne utilisez l'application admin intuitive de back4app pour gérer la création, la lecture, la mise à jour et la suppression des données découvrez les options de déploiement, y compris les stratégies de conteneurisation pour votre application gatsby prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un projet actif besoin d'aide ? voir commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement node js avec gatsby cli installé utilisez node js https //nodejs org/ et installez gatsby via npm install g gatsby cli une familiarité avec react, graphql et les api rest consultez la documentation react https //reactjs org/docs/getting started html si nécessaire étape 1 – configuration de votre projet création d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app gatsby et complétez les étapes de configuration créer un nouveau projet après la création, votre projet apparaîtra sur le tableau de bord, prêt pour la configuration du backend étape 2 – définir votre modèle de données configuration de votre schéma pour cette application crud, vous devez configurer plusieurs classes dans back4app ci dessous des exemples des classes et champs essentiels 1\ classe des éléments cette classe stocke des détails sur chaque élément champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne nom de l'article description chaîne brève description de l'article créé à date horodatage lorsque l'élément a été créé mis à jour le date horodatage de la dernière mise à jour de l'élément 2\ classe des utilisateurs cette classe gère les identifiants et l'authentification des utilisateurs champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail unique de l'utilisateur hashdemotdepasse chaîne mot de passe crypté pour la connexion créé à date horodatage de création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez ajouter ces classes et champs directement dans le tableau de bord back4app créer une nouvelle classe vous pouvez définir des champs en choisissant un type de données, en nommant le champ, en définissant des valeurs par défaut et en marquant les champs obligatoires créer une colonne utiliser l'agent ai back4app pour la génération de schéma l'agent ai de back4app peut automatiquement construire votre schéma en fonction de vos spécifications cela accélère la configuration et garantit que votre modèle de données prend en charge toutes les opérations crud comment utiliser l'agent ai ouvrez l'agent ai connectez vous à votre tableau de bord back4app et trouvez l'agent ai sous les paramètres de votre projet entrez vos exigences décrivez les classes et les champs dont vous avez besoin examinez et appliquez l'agent proposera un schéma examinez le et confirmez pour l'implémenter exemple de prompt create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette approche assistée par ai garantit un schéma de données cohérent et efficace étape 3 – activation de l'application admin et gestion des opérations crud aperçu de l'application admin l'application admin de back4app fournit une interface sans code pour la gestion des données backend ses fonctionnalités de glisser déposer conviviales simplifient les opérations crud telles que l'ajout, la visualisation, la mise à jour et la suppression d'enregistrements activation de l'application admin allez dans le menu “plus” sur votre tableau de bord back4app sélectionnez “application admin” et cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en configurant le premier compte administrateur cette étape crée également des rôles (par exemple, b4aadminuser ) et des classes système activer l'application admin une fois activée, connectez vous à l'application admin pour gérer vos données backend tableau de bord de l'application admin utilisation de l'application admin pour les tâches crud dans l'application admin, vous pouvez insérer des enregistrements utilisez la fonction “ajouter un enregistrement” dans une classe (comme articles) pour créer de nouvelles entrées inspecter/mise à jour des enregistrements cliquez sur n'importe quelle entrée pour voir les détails ou modifier les informations supprimer des enregistrements supprimez les enregistrements obsolètes ou inutiles cette interface simplifiée rend la gestion des données rapide et intuitive étape 4 – connecter votre application gatsby à back4app avec votre backend configuré, la prochaine phase consiste à lier votre application gatsby à back4app utilisation des appels api dans gatsby nous utiliserons des appels rest ou graphql pour communiquer avec back4app une seconde option consiste à utiliser le sdk récupération des données avec rest vous pouvez utiliser l'api fetch de javascript pour récupérer des données par exemple, pour charger des éléments depuis back4app // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; envoi de données via rest pour ajouter un nouvel élément, utilisez une requête post // src/services/api js export const createitem = async (title, description) => { try { const response = await fetch('https //parseapi back4app com/classes/items', { 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({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; vous pouvez également implémenter des fonctions de mise à jour et de suppression en utilisant les méthodes put/post et delete intégrez ces appels api dans vos pages ou composants gatsby pour gérer les données de manière dynamique étape 5 – sécuriser votre backend mise en œuvre des contrôles d'accès protégez vos données en définissant des listes de contrôle d'accès (acl) dans back4app par exemple, pour créer un élément visible uniquement par son propriétaire // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; permissions au niveau de la classe (clps) configurez les clps dans votre tableau de bord back4app pour appliquer des règles d'accès par défaut, garantissant que seuls les utilisateurs authentifiés peuvent accéder à des classes spécifiques étape 6 – ajout de l'authentification des utilisateurs configuration des comptes utilisateurs dans gatsby back4app utilise la classe utilisateur intégrée de parse pour l'authentification dans votre application gatsby, gérez l'enregistrement et la connexion des utilisateurs via des appels api exemple inscription de l'utilisateur // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('https //parseapi back4app com/users', { 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({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; exemple connexion de l'utilisateur // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; cette approche peut être étendue pour gérer les sessions, les réinitialisations de mot de passe, et plus encore étape 7 – déployer votre application gatsby back4app prend en charge un processus de déploiement fluide vous pouvez déployer votre application gatsby en utilisant plusieurs méthodes, y compris la conteneurisation 7 1 construire votre site gatsby installer les dépendances exécutez npm install construire le site utilisez la commande de construction gatsby gatsby build tester localement servez votre construction de production pour vérifier la fonctionnalité gatsby serve 7 2 aperçu de la structure du projet une structure de projet gatsby typique pourrait ressembler à basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 dockeriser votre application gatsby si vous préférez des déploiements conteneurisés, ajoutez un dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 déploiement via back4app web deployment liez votre dépôt hébergez votre code source gatsby sur github configurer le déploiement dans le tableau de bord back4app, sélectionnez web deployment , connectez votre dépôt (par exemple, basic crud app gatsby ), et choisissez la branche définir les commandes de construction spécifiez la commande de construction (par exemple, npm run build ) et le répertoire de sortie déployer cliquez sur déployer et surveillez les journaux jusqu'à ce que votre site soit en ligne étape 8 – conclusion et prochaines étapes bravo ! vous avez construit une application crud basée sur gatsby intégrée avec back4app vous avez configuré un projet nommé basic crud app gatsby , défini votre modèle de données, géré les données avec l'application admin, et connecté votre interface frontale gatsby à back4app en utilisant des appels api rest/graphql prochaines étapes améliorez votre application envisagez d'ajouter une recherche avancée, des vues détaillées ou des mises à jour en temps réel élargissez les capacités du backend explorez les fonctions cloud, les intégrations d'api tierces ou des contrôles d'accès basés sur les rôles affinés apprenez en plus visitez la documentation de back4app https //www back4app com/docs pour des informations et des tutoriels supplémentaires bon codage et amusez vous à construire votre application crud gatsby !