Comment créer une application CRUD avec SvelteKit ? A Comprehensive Tutorial

aperçu dans ce guide, vous allez créer une application crud simple (créer, lire, mettre à jour, supprimer) en utilisant sveltekit nous allons démontrer comment effectuer des opérations de données standard et gérer le backend de votre application web avec back4app le tutoriel commence par la configuration d'un projet back4app intitulé basic crud app sveltekit , qui sert de backend robuste vous allez ensuite concevoir un schéma de base de données adaptable en créant manuellement des collections et des champs, ou en utilisant l'agent ai de back4app cela garantit que votre modèle de données est optimisé pour des opérations crud efficaces ensuite, vous utiliserez l'application admin de back4app—un outil sans code, glisser déposer—pour gérer vos collections, simplifiant ainsi votre processus de gestion des données enfin, vous intégrerez votre frontend sveltekit avec back4app en utilisant des api rest des mesures de sécurité avancées, telles que des contrôles d'accès, seront également configurées pour protéger votre backend à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production qui prend en charge les opérations crud ainsi que l'authentification des utilisateurs et les mises à jour de données dynamiques points principaux maîtrisez la création d'applications crud qui gèrent efficacement les données avec un backend fiable comprenez comment structurer une base de données évolutive et la connecter à un frontend sveltekit apprenez à utiliser un outil d'administration visuel (back4app admin app) pour effectuer des opérations sur les données sans effort explorez les stratégies de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet prêt consultez commencer avec back4app https //www back4app com/docs/get started/new parse app pour des conseils un environnement de développement sveltekit installez sveltekit en suivant la documentation officielle https //kit svelte dev/docs une compréhension de base de javascript, sveltekit et des api rest consultez la documentation sveltekit https //kit svelte dev/docs pour plus de détails étape 1 – initialisation du projet configuration d'un nouveau projet back4app connectez vous à votre tableau de bord back4app cliquez sur le bouton “nouvelle application” sur votre tableau de bord entrez le nom du projet basic crud app sveltekit et suivez les instructions à l'écran pour créer votre projet créer un nouveau projet après la création, votre nouveau projet apparaît sur votre tableau de bord, fournissant une plateforme stable pour la configuration du backend étape 2 – élaboration du schéma de base de données formulation de votre modèle de données pour notre application crud, nous devons créer plusieurs collections voici des exemples décrivant les collections requises et leurs champs pour configurer votre schéma de base de données afin d'effectuer des opérations crud 1\ collection d'articles cette collection contient des détails sur chaque article champ type de données description id identifiant d'objet clé primaire générée automatiquement titre chaîne titre de l'article description chaîne aperçu bref de l'article créé à date horodatage lorsque l'élément a été créé mis à jour le date horodatage de la dernière mise à jour 2\ collection des utilisateurs cette collection stocke les identifiants et les détails de profil des utilisateurs champ type de données description 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 utilisateur unique hash de mot de passe chaîne mot de passe crypté pour l'authentification créé à date horodatage de création du compte mis à jour le date horodatage de la dernière mise à jour du profil vous pouvez créer manuellement ces collections dans le tableau de bord back4app en établissant une nouvelle classe pour chacune et en ajoutant les colonnes respectives créer une nouvelle classe définissez chaque champ en sélectionnant le type de données approprié, en le nommant, en définissant des valeurs par défaut et en le marquant comme requis si nécessaire créer une colonne automatisation de la création de schémas avec l'agent ai de back4app l'agent ai de back4app simplifie le processus de configuration du schéma directement depuis votre tableau de bord en saisissant une invite qui décrit vos collections et champs, vous pouvez générer automatiquement la structure de votre base de données comment utiliser l'agent ai accédez à l'agent ai ouvrez votre tableau de bord back4app et accédez à l'agent ai dans les paramètres de votre projet décrivez votre modèle collez une invite détaillée décrivant les collections et les champs dont vous avez besoin examinez et confirmez après soumission, examinez les collections générées et les définitions de champs, puis appliquez les à votre projet exemple d'invite create the following collections in my back4app project 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 permet de gagner du temps et garantit que votre schéma est à la fois cohérent et optimisé étape 3 – activation de l'application admin et exécution des opérations crud présentation de l'application admin l'application admin de back4app offre une interface visuelle pour gérer votre backend sans effort avec ses fonctionnalités de glisser déposer, effectuer des opérations crud devient simple activation de l'application admin allez dans la section “plus” de votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurer les identifiants admin créez un utilisateur admin initial pour établir des rôles (par exemple, b4aadminuser ) et des collections système activer l'application admin après activation, connectez vous à l'application admin pour commencer à gérer vos données tableau de bord de l'application admin gestion des opérations crud avec l'application admin dans l'application admin, vous pouvez ajouter des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir et modifier des enregistrements sélectionnez un enregistrement pour voir ses détails ou modifier ses champs supprimer des enregistrements utilisez l'option de suppression pour éliminer les entrées qui ne sont plus nécessaires cette interface intuitive rationalise considérablement votre processus de gestion des données étape 4 – connecter sveltekit avec back4app avec votre backend configuré via l'application admin, il est temps de lier votre frontend sveltekit à back4app exploitation des api rest dans sveltekit vous effectuerez des opérations crud en utilisant des appels d'api rest exemple de récupération de données créez un point de terminaison ou un composant sveltekit qui récupère des éléments depuis back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> intégrez des appels api similaires dans vos composants sveltekit pour les opérations de création, de mise à jour et de suppression étape 5 – sécuriser votre backend configuration des listes de contrôle d'accès (acl) protégez vos données en définissant des acl pour chaque objet par exemple, pour créer un élément privé async function createprivateitem(itemdata, ownerid) { 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 itemdata title, description itemdata description, acl { \[ownerid] { 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, configurez les clp pour chaque collection afin que seuls les utilisateurs autorisés puissent accéder aux données sensibles étape 6 – mise en œuvre de l'authentification des utilisateurs gestion des comptes utilisateurs back4app utilise la classe utilisateur de parse pour l'authentification dans votre application sveltekit, configurez des formulaires d'inscription et de connexion qui interagissent avec back4app via des appels api rest exemple inscription de l'utilisateur \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { 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, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> une méthode similaire peut être mise en œuvre pour la connexion des utilisateurs et la gestion des sessions étape 7 – déploiement de votre frontend sveltekit la fonctionnalité de déploiement web de back4app vous permet d'héberger votre frontend sveltekit en le liant à un dépôt github cette section couvre comment construire vos fichiers de production, pousser votre code source et déployer votre site 7 1 création d'une build de production ouvrez votre terminal dans le répertoire du projet exécutez la commande de construction npm run build cela génère un build (ou output ) dossier avec des ressources statiques optimisées vérifiez la construction assurez vous que le dossier de construction contient un index html et tous les répertoires d'actifs nécessaires 7 2 structuration et téléchargement de votre code votre dépôt devrait avoir le code source complet de sveltekit une structure typique pourrait être basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md fichier api exemple src/lib/api js export const fetchitems = async () => { 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 data = await res json(); return data results; }; s'engager sur github initialiser git (si ce n'est pas fait) git init ajouter vos fichiers git add engagez vos modifications git commit m "engagement initial pour le frontend sveltekit" créer un dépôt github nommez le, par exemple, basic crud app sveltekit poussez votre code git remote add origin https //github com/votre nom utilisateur/basic crud app sveltekit git git push u origin main 7 3 lier votre dépôt github avec le déploiement web ouvrir le déploiement web connectez vous à back4app, naviguez vers votre projet (basic crud app sveltekit), et sélectionnez l'option déploiement web connectez vous à github suivez les instructions pour lier votre compte github afin que back4app puisse accéder à votre dépôt choisissez votre dépôt et votre branche sélectionnez votre dépôt sveltekit (par exemple, basic crud app sveltekit unhandled content type main ) 7 4 configurer votre déploiement fournissez ces paramètres supplémentaires commande de construction s'il n'y a pas de dossier pré construit, définissez la commande (par exemple, npm run build ) répertoire de sortie spécifiez le dossier (généralement build ou output ) qui contient vos fichiers statiques variables d'environnement ajoutez toutes les variables nécessaires telles que les clés api 7 5 dockerisation de votre application sveltekit si docker est votre choix de déploiement, incluez un dockerfile dans votre dépôt \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configurez le déploiement web pour utiliser docker si vous le souhaitez 7 6 déployer votre application cliquez sur le bouton déployer une fois la configuration terminée, appuyez sur le déployer bouton surveiller le déploiement back4app récupérera votre code, exécutera la construction et déploiera votre application dans un conteneur obtenez votre url après un déploiement réussi, back4app fournit une url pour votre application sveltekit hébergée 7 7 valider votre déploiement visitez l'url ouvrez l'url fournie dans votre navigateur tester la fonctionnalité confirmez que votre application se charge correctement, que les routes fonctionnent et que tous les actifs sont correctement servis déboguer si nécessaire utilisez les outils de développement du navigateur pour inspecter les erreurs et consultez les journaux de back4app pour le dépannage étape 8 – conclusion et orientations futures félicitations pour avoir construit une application crud complète avec sveltekit et back4app ! vous avez mis en place un projet appelé basic crud app sveltekit , créé des collections détaillées pour les articles et les utilisateurs, et géré votre backend via l'application admin de plus, vous avez intégré votre frontend sveltekit via des api rest et appliqué des contrôles d'accès stricts améliorations futures développez votre frontend améliorez votre application sveltekit avec des vues détaillées, des capacités de recherche et des notifications en temps réel ajoutez des fonctionnalités avancées implémentez une logique côté serveur (par exemple, des fonctions cloud), intégrez des api tierces ou activez des autorisations basées sur les rôles approfondissez vos connaissances visitez la documentation de back4app https //www back4app com/docs et explorez plus de tutoriels pour des améliorations de performance et des intégrations personnalisées ce tutoriel vous a équipé des compétences nécessaires pour créer un backend crud évolutif pour votre application sveltekit en utilisant back4app amusez vous à coder et bonne construction !