Comment créer une application CRUD avec Deno ? A Comprehensive Guide

aperçu ce guide démontre comment créer une application crud simple (créer, lire, mettre à jour, supprimer) en utilisant deno nous allons tirer parti de back4app comme notre plateforme de gestion backend, en la configurant pour fonctionner comme une solution de base de données fiable et nous utiliserons l'approche api pour interagir avec nos services backend dans ce tutoriel, vous allez configurer un projet back4app appelé basic crud app deno concevoir et configurer votre schéma de base de données avec des collections et des champs adaptés aux opérations crud utiliser l'application admin de back4app pour gérer vos collections via une interface intuitive de glisser déposer connecter votre frontend deno avec back4app en utilisant des appels rest/graphql sécuriser votre backend avec des mesures de contrôle d'accès robustes à la fin de ce guide, vous aurez construit une application web prête pour la production qui prend en charge les opérations de données essentielles et l'authentification des utilisateurs aperçus essentiels maîtriser les fonctionnalités crud pour gérer efficacement les données apprendre à concevoir un backend évolutif intégré à un frontend basé sur deno utiliser l'application admin de back4app pour une gestion des données sans faille découvrir des stratégies de déploiement, y compris la conteneurisation avec docker conditions préalables avant de commencer, veuillez vous assurer que vous avez un compte back4app et un projet initialisé consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app si nécessaire une configuration de développement deno assurez vous que deno est installé et à jour (version 1 10+ recommandée) une familiarité avec javascript/typescript, deno et les concepts d'api rest consultez le manuel deno https //deno land/manual pour plus de lectures étape 1 – initialiser votre projet lancer un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” sur votre tableau de bord nommez votre projet basic crud app deno et suivez les instructions à l'écran créer un nouveau projet après la création du projet, il sera visible sur votre tableau de bord, posant les bases de votre configuration backend étape 2 – élaboration du schéma de base de données structuration de votre modèle de données pour cette application crud, vous définirez plusieurs collections ci dessous, des collections d'exemple avec des champs suggérés pour faciliter les opérations de base 1\ collection articles cette collection contient des détails pour chaque article champ type but id identifiant d'objet clé primaire générée automatiquement titre chaîne nom de l'article description chaîne résumé bref de l'article créé à date horodatage pour quand l'élément a été ajouté mis à jour le date horodatage de la dernière mise à jour 2\ collection utilisateurs cette collection stocke les profils d'utilisateurs et les données d'authentification 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 unique de l'utilisateur hash de mot de passe chaîne mot de passe haché en toute sécurité créé à date horodatage de création du compte mis à jour le date dernière mise à jour vous pouvez créer manuellement ces collections dans le tableau de bord back4app en établissant une nouvelle classe pour chacune et en ajoutant des colonnes pour définir chaque champ créer une nouvelle classe vous pouvez également ajouter des champs en sélectionnant leur type, en les nommant, en définissant des valeurs par défaut et en les marquant comme obligatoires créer une colonne utilisation de l'agent ai back4app pour la création de schémas l'agent ai back4app simplifie la génération de schémas en vous permettant de saisir une invite descriptive, qui crée ensuite automatiquement les collections et les champs requis étapes pour utiliser l'agent ai accéder à l'agent ai ouvrez votre tableau de bord back4app et localisez l'option agent ai saisir la description de votre modèle de données fournissez une invite détaillée énumérant vos collections et champs examiner et appliquer inspectez les suggestions de schéma générées et mettez les en œuvre dans votre projet exemple d'invite create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ 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) cette approche garantit la cohérence et l'efficacité dans la configuration de votre schéma backend étape 3 – activation de l'interface administrateur et des fonctions crud aperçu de l'interface administrateur l'application administrateur back4app offre une interface sans code pour gérer vos données backend son design intuitif par glisser déposer facilite la gestion des opérations crud activation de l'application administrateur allez dans le menu “plus” sur votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant un utilisateur administrateur initial, ce qui configure également les rôles (par exemple, b4aadminuser ) et les collections système activer l'application admin une fois activée, connectez vous à l'application admin pour gérer vos collections sans effort tableau de bord de l'application admin gestion des opérations crud via l'application admin dans l'application admin, vous pouvez ajouter des enregistrements cliquez sur “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir/modifier des enregistrements sélectionnez des enregistrements pour inspecter ou modifier les détails supprimer des enregistrements supprimez les entrées qui ne sont plus nécessaires cet outil simple rationalise le processus d'exécution des opérations de données de base étape 4 – connecter deno avec back4app avec votre backend configuré, il est temps de lier votre frontend deno en utilisant les api rest ou graphql option utiliser des appels api rest/graphql nous allons nous fier aux appels api pour interagir avec back4app exemple récupérer des données via rest dans deno créez un module (par exemple, fetchitems ts ) avec le code suivant const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); intégrez ces appels api dans votre application deno selon vos besoins étape 5 – renforcer la sécurité de votre backend mise en œuvre des listes de contrôle d'accès (acl) protégez vos données en attribuant des acl à chaque objet par exemple, pour garantir qu'un élément est privé async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", 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 des politiques d'accès par défaut, en veillant à ce que seuls les utilisateurs authentifiés ou autorisés puissent accéder ou modifier des données sensibles étape 6 – gestion de l'authentification des utilisateurs création de comptes utilisateurs back4app utilise la classe utilisateur de parse pour l'authentification dans votre application deno, gérez l'enregistrement et la connexion des utilisateurs via des appels api rest exemple enregistrement d'un utilisateur dans deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { 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 data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); cette approche peut également être appliquée à la connexion et à la gestion des sessions étape 7 – déployer votre frontend deno avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre frontend basé sur deno en déployant le code directement depuis un dépôt github 7 1 – construire votre version de production ouvrez votre répertoire de projet dans le terminal exécutez la commande de construction par exemple, si vous utilisez un bundler comme esbuild deno run allow read allow write build script ts confirmez la sortie de construction assurez vous que le répertoire de sortie (par exemple, dist ) contient les fichiers statiques nécessaires comme index html , javascript empaqueté, css et images 7 2 – organiser et s'engager dans votre code votre dépôt devrait inclure tous les fichiers source pour votre frontend deno une structure d'exemple pourrait être basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md fichier d'exemple deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; fichier d'exemple src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); engager votre code sur github initialiser git git init mettre en scène tous les fichiers git add engagez vos modifications git commit m "engagement initial pour le frontend deno crud" pousser sur github créer un dépôt (par exemple, basic crud app deno ) et pousser git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – lier github avec le déploiement web de back4app connectez vous à back4app et accédez à votre projet cliquez sur la fonctionnalité de déploiement web connectez votre compte github en suivant les instructions sélectionnez votre dépôt et votre branche (par exemple, main ) qui contient votre code deno 7 4 – configurer les paramètres de déploiement spécifiez commande de construction si aucun dossier dist pré construit n'existe, définissez la commande (par exemple, deno run allow read allow write build script ts ) répertoire de sortie définissez le dossier de sortie, tel que dist variables d'environnement ajoutez toutes les variables d'environnement nécessaires (par exemple, les clés api) 7 5 – dockeriser votre application deno pour déployer avec docker, incluez un dockerfile dans votre projet \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] choisissez l'option de déploiement docker dans back4app si vous préférez la conteneurisation 7 6 – lancement de votre application initier le déploiement cliquez sur le déployer bouton dans votre tableau de bord back4app surveiller le processus back4app récupérera votre code, exécutera les étapes de construction et déploiera votre application accéder à votre site après le déploiement, une url sera fournie où votre application deno est en ligne 7 7 – confirmer le succès du déploiement visitez l'url fournie ouvrez l'url dans votre navigateur testez votre application assurez vous que toutes les routes, les ressources statiques et les points de terminaison api fonctionnent correctement dépanner si des problèmes apparaissent, consultez les journaux de déploiement et vérifiez votre configuration étape 8 – conclusion et orientations futures félicitations ! vous avez réussi à créer une application crud de base en utilisant deno avec back4app comme backend vous avez configuré le projet basic crud app deno , structuré votre base de données, géré les données via l'application admin, connecté votre frontend deno via des appels api, et sécurisé vos données avec des acl et des clp améliorations futures développer le frontend ajouter des fonctionnalités comme des vues détaillées, des filtres de recherche ou des mises à jour en temps réel logique backend avancée intégrer des fonctions cloud ou des intégrations api supplémentaires approfondir la sécurité explorer l'accès basé sur les rôles et d'autres mesures d'authentification pour plus de détails, consultez la documentation de back4app https //www back4app com/docs et explorez des ressources supplémentaires bonne programmation et amusez vous à construire votre application crud deno évolutive !