Comment construire un frontend Svelte et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant svelte 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 intuitive en utilisant svelte à la fin, votre application interagira de manière transparente 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 travail, nous utilisons back4app—un robuste backend en tant que service —pour que vous puissiez vous concentrer sur la création d'un frontend svelte dynamique 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 déployer des applications évolutives sans gérer l'infrastructure serveur principaux enseignements en suivant ce tutoriel, vous allez initialiser un projet svelte moderne avec vite intégrer de manière transparente un service backend pour gérer les données de votre application mettre en œuvre des opérations crud essentielles pour une dynamique liste de tâches 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 avec node v et npm v connaissances de base en svelte , y compris les composants, les variables réactives et la gestion des événements un compte back4app pour gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si vous n'en avez pas déjà un 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 svelte en utilisant vite 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 svelte en exécutant npm create vite\@latest todo app template svelte changez de répertoire de votre projet cd todo app installez les dépendances nécessaires npm install démarrez le serveur de développement pour vérifier la configuration npm run dev ouvrez l'url fournie dans votre navigateur pour voir votre application svelte en action avec le frontend prêt, procédez à la création de votre backend sur back4app création du backend todo back4app propose 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 générées automatiquement 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 définissez les autorisations pour permettre la lecture et l'écriture publiques (vous pourrez affiner cela 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 svelte pour connecter votre application svelte à back4app, vous utiliserez le parse javascript sdk installez le sdk parse npm install parse configurez le sdk en modifiant le src/main js fichier importez le sdk et initialisez le avec votre id d'application et votre clé javascript depuis le tableau de bord back4app (trouvez les sous paramètres de l'application > sécurité et clés ) import app from ' /app svelte'; 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; const app = new app({ target document getelementbyid('app') }); export default app; avec votre backend connecté, vous pouvez maintenant construire l'interface de la liste de tâches et implémenter des opérations crud développement du frontend votre application svelte sera composée de composants qui vous permettront d'ajouter, d'afficher, de mettre à jour et de supprimer des tâches vous tirerez parti de la réactivité de svelte pour des mises à jour dynamiques structuration de vos composants créez un dossier components à l'intérieur de src pour organiser vos composants svelte mkdir src/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 'parse/dist/parse min js'; 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, vous permettant de basculer son statut d'achèvement ou de la supprimer \<script> import parse from 'parse/dist/parse min js'; 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 les itérant et en rendant chacune à l'aide de taskitem \<script> import taskitem from ' /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} app svelte dans votre composant principal, gérez l'état de l'application et intégrez vos composants de tâche \<script> import { onmount } from 'svelte'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform svelte'; import tasklist from ' /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 un src/global css fichier 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/main js import ' /global css'; déployer le frontend sur le déploiement web back4app le déploiement web back4app offre un environnement conteneurisé pour héberger votre application svelte configurer vite pour la production ajustez vite config js si nécessaire pour définir correctement le chemin de base pour un environnement conteneurisé import { defineconfig } from 'vite'; import { svelte } from '@sveltejs/vite plugin svelte'; export default defineconfig({ plugins \[svelte()], base ' /', }); générez la build de production npm run build création d'un dockerfile créer un dockerfile dans le répertoire racine avec le contenu suivant \# stage 1 build the svelte app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] tester le conteneur docker localement construisez votre image docker docker build t todo frontend exécutez le conteneur docker run p 8080 80 todo frontend ouvrez http //localhost 8080 dans votre navigateur pour vérifier que votre application svelte 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 initier la première construction 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 svelte 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 svelte pour optimiser votre application requêtes efficaces utilisez des opérations par lot 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'); variables d'environnement stocker des clés sensibles dans un env fichier 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 backend tirer parti du cloud code pour une logique métier 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 svelte, 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 svelte et les services backend en regardant vers l'avenir, envisagez d'améliorer votre application avec 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 back4app https //www back4app com/docs et explorez les ressources communautaires