Comment créer une application CRUD avec Svelte ?

aperçu dans ce guide, vous apprendrez à créer une application crud complète (créer, lire, mettre à jour, supprimer) en utilisant svelte nous utiliserons back4app comme notre plateforme backend, qui offre un backend low code robuste pour gérer les données de votre application ce guide explique comment configurer un projet back4app, concevoir un schéma de données polyvalent et mettre en œuvre des opérations crud dans une application svelte au départ, vous créerez un projet back4app intitulé basic crud app svelte ce projet constitue la base de votre configuration backend, où vous définirez votre schéma de données soit manuellement, soit avec l'aide de l'agent ia intégré de back4app ensuite, vous explorerez l'application admin de back4app—une interface conviviale pour la gestion des données—vous permettant d'effectuer facilement des opérations crud enfin, vous connecterez votre application svelte à back4app, en utilisant soit le sdk javascript parse, soit des appels api rest/graphql directs, tout en garantissant une gestion sécurisée des données à la fin de ce tutoriel, vous aurez une application svelte entièrement fonctionnelle qui effectue des tâches crud de base avec une authentification utilisateur sécurisée ce que vous apprendrez comment configurer une application crud basée sur svelte avec un backend flexible méthodes pour organiser votre backend et le connecter à votre application svelte comment tirer parti de l'application admin de back4app pour des opérations de données sans faille stratégies pour déployer votre application svelte, y compris la conteneurisation docker prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un projet actif besoin d'aide ? visitez back4app getting started https //www back4app com/docs/get started/new parse app pour des conseils une configuration de développement svelte vous pouvez utiliser un éditeur de code comme vscode et vous assurer que node js est installé une connaissance de base de svelte, javascript et des api rest consultez la documentation svelte https //svelte dev/docs si nécessaire étape 1 – configuration de votre projet lancement d'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 svelte et suivez les instructions à l'écran pour compléter la configuration créer un nouveau projet après avoir créé votre projet, vous le verrez sur votre tableau de bord, qui sert de base à la configuration de votre backend étape 2 – élaboration du schéma de données structuration de vos données pour cette application crud, vous devez définir quelques collections dans votre projet back4app voici des exemples des collections clés et des champs nécessaires pour soutenir vos opérations crud svelte 1\ collection d'articles cette collection stocke des informations pour chaque article champ type détails id identifiant d'objet identifiant unique généré automatiquement titre chaîne nom ou titre de l'élément 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\ collection des utilisateurs cette collection gère les identifiants et les détails d'authentification des utilisateurs champ type détails id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour chaque utilisateur email chaîne adresse e mail de l'utilisateur hashdemotdepasse 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 compte vous pouvez créer ces collections et définir des champs directement depuis votre tableau de bord back4app créer une nouvelle classe vous pouvez ajouter des champs en choisissant le type approprié, en nommant le champ, en définissant des valeurs par défaut et en le marquant comme requis créer une colonne utiliser l'agent ai de back4app pour une génération rapide de schéma l'agent ai intégré dans back4app peut configurer automatiquement votre schéma de données en fonction d'une simple description cet outil simplifie le processus de configuration et garantit que votre schéma est optimisé pour les opérations crud comment utiliser l'agent ai ouvrez l'agent ia dans les paramètres de votre projet sur le tableau de bord back4app, trouvez l'agent ia détaillez vos exigences de schéma fournissez une invite claire qui décrit les collections et les champs dont vous avez besoin examinez et confirmez vérifiez le schéma proposé et confirmez pour l'appliquer exemple d'invite create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette méthode permet de gagner du temps et garantit que votre schéma backend est parfaitement aligné avec les besoins de votre application étape 3 – gestion des données avec l'application admin aperçu de l'application admin l'application admin de back4app offre un environnement sans code pour gérer vos données backend avec son interface de glisser déposer, vous pouvez facilement effectuer des opérations telles que l'ajout, la modification et la suppression d'enregistrements activation de l'application admin allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “application admin” puis cliquez sur “activer l'application admin ” configurez votre compte admin en suivant les instructions pour établir vos identifiants ce processus configurera également des rôles (comme b4aadminuser ) et d'autres configurations système activer l'application admin une fois activée, connectez vous à l'application admin pour gérer efficacement les données de votre projet tableau de bord de l'application admin comment utiliser l'application admin insérer de nouveaux enregistrements utilisez la fonction “ajouter un enregistrement” dans une collection (comme les articles) pour introduire de nouvelles données examiner ou modifier des enregistrements cliquez sur un enregistrement pour voir ses détails ou modifier ses champs supprimer des enregistrements supprimez les entrées de données obsolètes ou inutiles cette interface intuitive rend la gestion de vos données backend simple et efficace étape 4 – connecter votre application svelte à back4app maintenant que votre backend est configuré, il est temps de lier votre application svelte à back4app option a utiliser le sdk javascript parse installer le sdk utilisez npm ou yarn pour installer le sdk javascript parse npm install parse initialiser parse dans votre application svelte dans votre fichier javascript principal (par exemple, src/main js ), initialisez parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // votre code d'initialisation de l'application svelte suit implémenter des fonctions crud créez un module (par exemple, src/services/items js ) pour gérer les opérations crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("erreur lors de la récupération des éléments ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("élément créé avec succès !"); } catch (error) { console error("erreur lors de la création de l'élément ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("élément mis à jour avec succès !"); } catch (error) { console error("erreur lors de la mise à jour de l'élément ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("élément supprimé avec succès !"); } catch (error) { console error("erreur lors de la suppression de l'élément ", error); } } option b utilisation des api rest/graphql si le sdk parse n'est pas idéal pour votre cas d'utilisation, vous pouvez invoquer directement les points de terminaison rest ou graphql de back4app par exemple, pour récupérer des éléments via rest export async function getitemsrest() { 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("rest error fetching items ", error); return \[]; } } intégrez ces appels api dans vos composants svelte selon vos besoins étape 5 – sécuriser votre backend utilisation des listes de contrôle d'accès (acl) améliorez la sécurité de vos données en configurant des acl sur vos objets par exemple, pour créer un élément visible uniquement par son propriétaire import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } configuration des autorisations au niveau de la classe (clp) configurez les clp directement dans votre tableau de bord back4app pour restreindre l'accès afin que seuls les utilisateurs authentifiés puissent interagir avec certaines collections étape 6 – mise en œuvre de l'authentification des utilisateurs dans svelte configuration des comptes utilisateurs back4app utilise la collection d'utilisateurs intégrée de parse pour gérer l'authentification dans votre application svelte, implémentez des fonctions d'enregistrement et de connexion similaires aux exemples ci dessous import parse from 'parse'; export async function registeruser(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 registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } cette approche peut être étendue pour gérer les sessions, les réinitialisations de mot de passe et d'autres fonctionnalités d'authentification étape 7 – déployer votre application svelte back4app simplifie le processus de déploiement vous pouvez déployer votre application svelte en utilisant plusieurs méthodes, y compris la conteneurisation docker 7 1 construire votre application svelte compiler votre application exécutez votre commande de construction svelte, généralement npm run build vérifiez la construction assurez vous que les fichiers générés (généralement dans le public ou build dossier) incluent tous les actifs nécessaires 7 2 exemple de structure de projet une structure de projet svelte typique pourrait ressembler à basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 dockeriser votre application svelte si vous préférez un déploiement conteneurisé, créez un dockerfile à la racine de votre projet \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 déploiement via le déploiement web back4app liez votre dépôt github hébergez votre projet svelte sur github configurez le déploiement dans back4app dans le tableau de bord back4app, choisissez l'option déploiement web , connectez votre dépôt (par exemple, basic crud app svelte ), et sélectionnez votre branche cible définissez les paramètres de construction spécifiez votre commande de construction (comme npm run build ) et indiquez le répertoire de sortie de la construction déployez votre application cliquez sur déployer et surveillez les journaux jusqu'à ce que votre application soit en ligne étape 8 – conclusion et améliorations futures félicitations ! vous avez construit une application crud basée sur svelte qui se connecte à back4app vous avez mis en place un projet nommé basic crud app svelte , configuré des collections pour les articles et les utilisateurs, et géré vos données via l'application d'administration back4app vous avez ensuite intégré votre frontend svelte en utilisant le sdk javascript parse (ou rest/graphql) et ajouté des mesures de sécurité robustes quelle est la suite ? étendre la fonctionnalité ajoutez des fonctionnalités comme une recherche avancée, des vues détaillées ou des mises à jour en temps réel améliorer la logique backend expérimentez avec des fonctions cloud, des intégrations d'api tierces ou un contrôle d'accès basé sur les rôles approfondir votre apprentissage explorez d'autres tutoriels et la documentation back4app https //www back4app com/docs pour optimiser votre application bonne programmation et amusez vous à construire votre application crud svelte !