Comment construire une application CRUD avec Astro ?

aperçu dans ce guide, vous apprendrez à créer une application web crud (créer, lire, mettre à jour et supprimer) en utilisant astro ce tutoriel vous guide à travers la configuration d'un projet back4app—notre backend robuste—et la conception d'une structure de données qui prend en charge les opérations fondamentales nous allons ensuite construire un frontend astro qui communique avec back4app via des api rest/graphql, garantissant une gestion des données sécurisée et efficace à la fin de ce guide, vous aurez une application web prête pour la production, complète avec authentification des utilisateurs et gestion sécurisée des données ce que vous apprendrez comment structurer une application crud avec astro et back4app conception d'un backend évolutif avec des collections personnalisées utilisation d'une interface d'administration par glisser déposer pour une gestion des données sans effort intégration de votre frontend astro avec back4app en utilisant rest ou graphql déploiement de votre projet astro et conteneurisation avec docker si nécessaire prérequis avant de commencer, veuillez confirmer que vous avez un compte back4app avec un nouveau projet prêt consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app pour des conseils un environnement de développement astro configuré utilisez la documentation officielle d'astro https //docs astro build pour commencer assurez vous que node js (version 14+) est installé une connaissance de base de javascript, astro et des api rest visitez les docs d'astro https //docs astro build si vous avez besoin d'un rappel étape 1 – initialiser votre projet démarrer un nouveau projet back4app connectez vous à votre compte back4app cliquez sur “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app astro et suivez les instructions pour compléter la configuration créer un nouveau projet après la création, votre projet apparaîtra sur votre tableau de bord back4app—votre fondation pour la configuration du backend étape 2 – élaboration de votre schéma de base de données structuration de votre modèle de données pour notre application crud, vous définirez plusieurs collections ci dessous se trouvent des collections d'exemple avec des champs et des types pour vous aider à configurer efficacement votre schéma de base de données cette structure prend en charge des opérations crud efficaces 1\ collection d'articles champ type but id identifiant d'objet clé primaire générée automatiquement titre chaîne nom ou titre de l'élément description chaîne un bref aperçu de l'article créé à date horodatage de création mis à jour le date horodatage de la dernière modification 2\ collection des utilisateurs champ type but id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour l'authentification créé à date lorsque le compte a été créé mis à jour le date dernière heure de mise à jour pour le compte vous pouvez configurer manuellement ces collections dans votre tableau de bord back4app en créant de nouvelles classes et en ajoutant des colonnes appropriées créer une nouvelle classe pour ajouter un champ, sélectionnez un type de données, fournissez un nom de champ, définissez un défaut si nécessaire et indiquez si le champ est requis créer une colonne exploiter l'agent ai de back4app pour la configuration du schéma l'agent ai intégré dans back4app peut générer automatiquement votre schéma décrivez vos collections et champs souhaités dans l'interface de l'agent ai, examinez ses recommandations et appliquez les à votre projet exemple de prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) cet outil accélère la configuration tout en garantissant que votre schéma répond aux exigences de l'application étape 3 – activation de l'interface administrateur et des actions crud explorer l'interface administrateur l'application administrateur de back4app est un outil sans code qui fournit une interface visuelle pour gérer vos données backend son design par glisser déposer vous permet d'effectuer facilement des opérations crud activation de l'interface administrateur ouvrez le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant l'utilisateur administrateur initial cela configurera également les rôles par défaut (par exemple, b4aadminuser ) et les collections système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos collections tableau de bord de l'application admin gestion des données avec l'interface admin dans l'application admin, vous pouvez ajouter des enregistrements cliquez sur “ajouter un enregistrement” dans une collection (comme articles) pour créer de nouvelles entrées voir/modifier des enregistrements cliquez sur un enregistrement pour inspecter ou modifier ses champs supprimer des enregistrements supprimez facilement les entrées obsolètes cet outil simplifie les opérations crud avec une interface intuitive étape 4 – connecter astro avec back4app avec votre backend configuré, il est temps d'intégrer votre frontend astro utilisation des api rest/graphql puisqu'astro est un générateur de sites statiques optimisé pour la performance, nous allons interagir avec back4app en utilisant des api rest ou graphql cette approche évite le besoin du sdk parse exemple récupération d'éléments via rest voici un exemple d'appel api rest dans un composant astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> intégrez des appels api similaires pour créer, mettre à jour et supprimer des enregistrements dans vos composants astro étape 5 – protéger votre backend mise en œuvre des listes de contrôle d'accès (acl) protégez vos données en définissant des acl sur les objets par exemple, pour créer un élément que seul le propriétaire peut modifier async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de définir qui peut accéder et modifier vos données étape 6 – ajout de l'authentification des utilisateurs configuration de l'inscription et de la connexion des utilisateurs back4app utilise la classe user de parse pour l'authentification dans votre projet astro, créez des composants pour l'inscription et la connexion des utilisateurs en utilisant des appels d'api rest exemple inscription d'un utilisateur // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> vous pouvez créer des composants similaires pour la connexion des utilisateurs et la gestion des sessions étape 7 – déployer votre frontend astro la fonctionnalité de déploiement web de back4app vous permet d'héberger votre projet astro sans effort en connectant votre dépôt github 7 1 construction de votre version de production ouvrez un terminal dans le répertoire de votre projet exécutez la commande de construction npm run build cela génère un dist dossier optimisé avec vos actifs statiques vérifiez la construction assurez vous que le dist dossier contient un index html ainsi que d'autres répertoires d'actifs 7 2 organisation de votre dépôt de projet votre dépôt doit inclure le code source complet d'astro une structure d'exemple pourrait être basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md fichier d'exemple src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 validation et envoi de votre code sur github initialiser un dépôt git (si ce n'est pas déjà fait) git init ajouter tous les fichiers git add valider vos modifications git commit m "commit initial pour le frontend astro" créer un dépôt sur github (par exemple, basic crud app astro ) et pousser git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 lier github avec le déploiement web back4app accéder au déploiement web connectez vous à votre tableau de bord back4app, naviguez vers votre projet ( basic crud app astro ), et sélectionnez l'option déploiement web connectez votre compte github suivez les instructions pour autoriser back4app à accéder à votre dépôt choisissez votre dépôt et votre branche sélectionnez le dépôt (par exemple, basic crud app astro ) et la branche (généralement main ) 7 5 configuration des paramètres de déploiement commande de construction spécifiez la commande de construction (par exemple, npm run build ) si votre dépôt n'a pas de sortie pré construite répertoire de sortie définissez le sur dist afin que back4app sache où trouver vos fichiers statiques variables d'environnement ajoutez toutes les variables requises, telles que les clés api 7 6 dockerisation de votre application astro (optionnel) si vous préférez les déploiements conteneurisés, incluez un dockerfile comme \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] intégrez les paramètres docker dans votre configuration de déploiement web si vous le souhaitez 7 7 lancement de votre application appuyez sur le bouton déployer dans la section déploiement web surveillez le processus de construction back4app récupérera votre code, le construira et déploiera votre application recevez votre url une fois déployé, back4app fournira une url où votre site est en ligne étape 8 – conclusion et améliorations futures bravo ! vous avez maintenant créé une application crud complète avec astro et back4app votre projet comprend un backend avec des collections détaillées pour les éléments et les utilisateurs, et un frontend qui effectue toutes les opérations crud via des api rest/graphql prochaines étapes améliorer le frontend ajoutez des fonctionnalités telles que des vues détaillées, des capacités de recherche et des notifications en temps réel étendre la fonctionnalité du backend envisagez d'intégrer des fonctions cloud ou des points de terminaison api supplémentaires pour une logique plus complexe approfondir explorez d'autres ressources dans la documentation de back4app https //www back4app com/docs et les docs d'astro https //docs astro build pour des sujets avancés en suivant ce tutoriel, vous possédez maintenant les connaissances nécessaires pour construire une application crud robuste et évolutive en utilisant astro et back4app amusez vous à coder et à explorer de nouvelles possibilités !