Comment créer un frontend Sveltekit et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant sveltekit et la connecter à un service backend géré alimenté par back4app ce guide est conçu pour vous si vous souhaitez maîtriser les opérations crud essentielles (créer, lire, mettre à jour, supprimer) et créer une interface dynamique et réactive en utilisant sveltekit à la fin de ce tutoriel, votre application interagira sans effort avec un backend qui gère le stockage des données, l'authentification, et plus encore développer une application full stack peut être complexe en raison de la configuration du backend et de la gestion de la base de données pour simplifier votre flux de travail, nous utilisons back4app—un backend en tant que service robuste—afin que vous puissiez vous concentrer sur la création d'un frontend sveltekit exceptionnel back4app fournit une base de données nosql entièrement gérée, une authentification, du cloud code pour une logique personnalisée, et des sdk pour une intégration fluide cela vous permet de construire et de déployer des applications évolutives sans gérer l'infrastructure serveur points clés à retenir en suivant ce tutoriel, vous allez initialiser un projet sveltekit moderne en utilisant vite intégrer un service backend pour gérer les données de votre application mettre en œuvre des opérations crud essentielles pour une liste de tâches dynamique déployer votre application entièrement fonctionnelle en utilisant des workflows conteneurisés sur back4app conditions préalables avant de commencer, assurez vous d'avoir node js et npm installés sur votre machine vérifiez en exécutant node v et npm v connaissances de base en sveltekit , y compris le routage, les fonctions de chargement et les variables réactives un compte back4app pour gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si vous ne l'avez pas déjà fait avec ces conditions préalables en place, vous êtes prêt à commencer à construire votre projet configuration du projet commencez par configurer votre environnement de développement local et initialiser un nouveau projet sveltekit assurez vous d'avoir node js (version lts) installé si ce n'est pas le cas, téléchargez le depuis nodejs org https //nodejs org/ créez votre projet sveltekit en exécutant npx sv create todo app lorsque vous y êtes invité, choisissez les options sveltekit qui conviennent le mieux à votre projet (par exemple, projet squelette, typescript si désiré) naviguez dans votre répertoire de projet cd todo app démarrez le serveur de développement pour vérifier la configuration npm run dev votre application sveltekit devrait maintenant s'ouvrir dans votre navigateur avec le frontend prêt, procédez à la création de votre backend sur back4app création du backend todo back4app offre un service backend entièrement géré alimenté par parse il comprend une base de données nosql, une authentification, du cloud code et des api auto générées suivez ces étapes pour configurer votre backend connectez vous à votre tableau de bord back4app https //www back4app com/ et cliquez sur "créer une nouvelle application " nommez votre application (par exemple, todoapp ) et sélectionnez nodejs/parse comme type de backend accédez à "base de données" > "navigateur" , cliquez sur "créer une classe" , et choisissez "personnalisé" nommez la classe tâche et configurez la pour une lecture et une écriture publiques (vous pouvez affiner ces autorisations plus tard) dans la classe tâche , ajoutez les champs suivants titre (string) – le titre de la tâche description (string) – détails sur la tâche terminé (boolean) – état d'achèvement de la tâche datelimite (date) – la date limite pour la tâche cliquez sur "enregistrer" pour créer le schéma intégration de back4app avec sveltekit vous utiliserez le parse javascript sdk pour connecter votre application sveltekit au backend back4app installer le sdk parse npm install parse configurer le sdk en modifiant le src/app html ou en créant un module dédié (par exemple, src/lib/parseclient js ) par exemple, créez src/lib/parseclient js avec ce qui suit import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; vous pouvez maintenant importer ce module dans vos routes ou composants sveltekit pour interagir avec back4app développer le frontend votre application sveltekit consistera en des routes et des composants pour ajouter, afficher, mettre à jour et supprimer des tâches profitez du routage basé sur les fichiers de sveltekit et des variables réactives pour des mises à jour dynamiques structurer vos composants créez un src/lib/components dossier pour organiser vos composants mkdir p src/lib/components vous allez créer les composants suivants taskform svelte – pour ajouter de nouvelles tâches tasklist svelte – pour afficher la liste des tâches taskitem svelte – pour représenter des tâches individuelles taskform svelte ce composant rend un formulaire qui capture les détails de la tâche et les soumet à back4app \<script> import { createeventdispatcher } from 'svelte'; import parse from '$lib/parseclient'; let title = ''; let description = ''; const dispatch = createeventdispatcher(); async function handlesubmit(event) { event preventdefault(); try { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('description', description); task set('completed', false); await task save(); dispatch('refresh'); title = ''; description = ''; } catch (error) { console error('error adding task ', error); } } \</script> \<form on\ submit|preventdefault={handlesubmit}> \<input type="text" placeholder="task title" bind\ value={title} required /> \<input type="text" placeholder="description" bind\ value={description} required /> \<button type="submit">add task\</button> \</form> taskitem svelte ce composant représente une tâche individuelle, avec des boutons pour basculer son statut d'achèvement ou supprimer la tâche \<script> import parse from '$lib/parseclient'; export let task; export let refresh; async function togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(task id); tasktoupdate set('completed', !task completed); await tasktoupdate save(); refresh(); } catch (error) { console error('error updating task ', error); } } async function deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(task id); await tasktodelete destroy(); refresh(); } catch (error) { console error('error deleting task ', error); } } \</script> \<div class="task item {task completed ? 'completed' ''}"> \<div> \<h3>{task title}\</h3> \<p>{task description}\</p> \</div> \<div> \<button on\ click={togglecomplete}> {task completed ? 'undo' 'complete'} \</button> \<button on\ click={deletetask}>delete\</button> \</div> \</div> tasklist svelte ce composant affiche toutes les tâches en itérant sur un tableau et en rendant chaque tâche à l'aide du composant taskitem \<script> import taskitem from '$lib/components/taskitem svelte'; export let tasks = \[]; export let refresh; \</script> {#if tasks length === 0} \<p>no tasks available\</p> {\ else} {#each tasks as task (task id)} \<taskitem {task} {refresh} /> {/each} {/if} +page svelte (route principale) dans votre route principale sveltekit (par exemple, src/routes/+page svelte ), gérez l'état des tâches et intégrez les composants \<script> import { onmount } from 'svelte'; import parse from '$lib/parseclient'; import taskform from '$lib/components/taskform svelte'; import tasklist from '$lib/components/tasklist svelte'; let tasks = \[]; async function fetchtasks() { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } } onmount(fetchtasks); \</script> \<div class="container"> \<h1>to do list\</h1> \<taskform on\ refresh={fetchtasks} /> \<tasklist {tasks} refresh={fetchtasks} /> \</div> styliser l'application créez une feuille de style globale (par exemple, src/app css ) pour ajouter un style de base container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importez cette feuille de style dans votre src/app html ou fichier de mise en page principal déploiement du frontend sur back4app web deployment back4app web deployment fournit un environnement conteneurisé pour héberger votre application sveltekit configuration de vite pour la production mettez à jour votre vite config js si nécessaire pour définir le chemin de base pour un environnement conteneurisé import { sveltekit } from '@sveltejs/kit/vite'; import { defineconfig } from 'vite'; export default defineconfig({ plugins \[sveltekit()], base ' /', }); générez la build de production npm run build création d'un dockerfile avant de pouvoir tester votre conteneur docker localement, vous devez installer adapter node qui construit votre site pour node js pour ce faire, exécutez la commande dans votre terminal npm i d @sveltejs/adapter node après avoir installé l' adapter node , ouvrez le fichier svelte config js et remplacez le code par le bloc de code ci dessous import adapter from '@sveltejs/adapter node'; / @type {import('@sveltejs/kit') config} / const config = { &#x9;kit { &#x9; // adapter auto only supports some environments, see https //svelte dev/docs/kit/adapter auto for a list &#x9; // if your environment is not supported, or you settled on a specific environment, switch out the adapter &#x9; // see https //svelte dev/docs/kit/adapters for more information about adapters &#x9; adapter adapter() &#x9;} }; export default config; maintenant, créez un dockerfile à la racine de votre projet avec le contenu suivant from node 22 alpine as builder workdir /app copy package json / run npm ci copy run npm run build run npm prune production from node 22 alpine workdir /app copy from=builder /app/build build/ copy from=builder /app/node modules node modules/ copy package json expose 3000 env node env=production cmd \[ "node", "build" ] tester le conteneur docker localement construisez votre image docker docker build t todo frontend exécutez le conteneur docker run p 3000 3000 todo frontend ouvrez http //localhost 3000 dans votre navigateur pour vérifier que votre application sveltekit est servie correctement déploiement sur back4app initialisez un dépôt git, ajoutez vos fichiers de projet et validez git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main connectez vous à back4app web deployment https //www back4app com/containers cliquez sur "créer une nouvelle application" , fournissez le nom de votre projet et sélectionnez votre dépôt github autorisez back4app et choisissez dockerfile deployment confirmez les paramètres de construction et cliquez sur "déployer" pour commencer le processus de déploiement surveillance de votre déploiement après le déploiement, utilisez le tableau de bord back4app pour voir les journaux pour le débogage surveiller les performances des conteneurs et l'utilisation des ressources déclencher des reconstructions sur de nouveaux commits configurer des domaines personnalisés si nécessaire accédez à votre application en direct à https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ tests et débogage après le déploiement, confirmez que votre frontend sveltekit communique correctement avec le backend back4app vérification de l'api utilisez les outils de développement de votre navigateur (f12 → réseau) pour inspecter les appels api opérations de tâches ajoutez, complétez et supprimez des tâches via l'interface utilisateur et vérifiez les mises à jour dans le navigateur de base de données back4app gestion des erreurs vérifiez les journaux de la console pour les erreurs et testez les cas limites tels que la soumission de tâches vides tests de performance simulez des conditions de réseau lentes en utilisant les outils du navigateur pour évaluer la réactivité meilleures pratiques pour utiliser back4app avec sveltekit pour optimiser votre application requêtes efficaces utilisez des opérations par lots lors du traitement de plusieurs tâches const tasks = \[task1, task2, task3]; parse object saveall(tasks); requêtes optimisées récupérer uniquement les champs nécessaires query select('title', 'completed'); gestion de l'environnement stocker les clés sensibles dans des variables d'environnement vite parse app id=your app id vite parse js key=your js key sécurité utiliser des acl pour restreindre l'accès task setacl(new parse acl(parse user current())); déchargement du backend utiliser le cloud code pour une logique complexe afin de réduire l'exposition de l'api conclusion vous avez maintenant construit une application de liste de tâches full stack en créant un frontend sveltekit, en l'intégrant avec le backend de back4app et en le déployant à l'aide de workflows conteneurisés ce tutoriel vous a guidé à travers chaque étape—du développement local au déploiement dans le cloud—assurant une interaction fluide entre votre interface sveltekit et les services backend en regardant vers l'avenir, envisagez des améliorations telles que des mises à jour en temps réel, une authentification améliorée et des intégrations tierces pour un apprentissage supplémentaire, visitez la documentation de back4app https //www back4app com/docs et explorez les ressources communautaires