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

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant preact et la connecter à un backend robuste fourni par back4app ce guide est parfait pour commencer car il couvre les opérations crud de base (créer, lire, mettre à jour, supprimer) et vous guide dans la création d'une interface utilisateur propre et fonctionnelle à la fin, vous aurez une application entièrement opérationnelle qui vous montre comment intégrer un backend géré tout en utilisant preact pour un frontend léger et rapide construire une application full stack peut être complexe, surtout lorsqu'il s'agit de la configuration du backend, de la gestion de la base de données, de l'authentification et du déploiement pour simplifier ces défis, nous utilisons back4app—une solution évolutive backend as a service (baas) —afin que vous puissiez vous concentrer sur le développement de votre frontend pendant qu'il gère l'hébergement, les bases de données et les api back4app fournit des services backend complets, y compris une base de données prête à l'emploi, l'authentification, le cloud code pour la logique côté serveur, et des sdk pour une intégration fluide il prend également en charge les déploiements conteneurisés, ce qui en fait un excellent choix pour les applications full stack modernes avec ces ressources, vous pouvez développer et déployer rapidement des applications sans le fardeau de la gestion de l'infrastructure serveur principaux enseignements en suivant ce tutoriel, vous apprendrez à initialiser un projet preact moderne en utilisant vite intégrer un service backend pour gérer les données de votre application implémenter des opérations crud de base pour une interface utilisateur interactive déployer une application liste de tâches entièrement fonctionnelle en utilisant des workflows conteneurisés sur back4app prérequis avant de commencer, assurez vous d'avoir ce qui suit node js et npm installez la dernière version lts de node js depuis nodejs org https //nodejs org/ et vérifiez en exécutant node v et npm v dans votre terminal connaissances de base en preact une familiarité avec les composants fonctionnels, les hooks (comme usestate et useeffect ), et la syntaxe jsx est attendue si vous êtes nouveau dans preact, envisagez de revoir d'abord ses bases un compte back4app inscrivez vous sur back4app https //www back4app com/ pour configurer et gérer vos services backend avec ces prérequis en place, vous êtes prêt à configurer votre projet et à commencer à construire configuration du projet commencez par configurer votre environnement de développement local et initialiser votre projet preact en utilisant vite pour une expérience de développement simplifiée confirmez que node js (version lts) est installé si nécessaire, téléchargez et installez le depuis nodejs org https //nodejs org/ vérifiez en exécutant node v npm v initialisez votre projet preact en utilisant vite exécutez la commande suivante dans votre terminal (remplacez todo app par le nom de projet de votre choix) npm create vite\@latest todo app template preact naviguez dans votre répertoire de projet cd todo app installez les dépendances requises npm install démarrez le serveur de développement pour vérifier votre configuration npm run dev votre application preact devrait maintenant fonctionner localement ouvrez l'url fournie dans votre navigateur pour confirmer ensuite, vous configurerez votre backend sur back4app pour gérer le stockage des données et les interactions api création du backend todo back4app offre un service backend entièrement géré alimenté par parse , qui fournit une base de données nosql, une authentification, du cloud code et des api auto générées prêtes à l'emploi cette section vous guidera dans la création d'un modèle de données task pour stocker vos éléments à faire et le connecter à votre frontend preact configuration de votre application 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, todopreactapp ) et choisissez nodejs/parse comme type de backend une fois l'application créée, naviguez vers "base de données" > "navigateur" cliquez sur "créer une classe" et sélectionnez "personnalisé" nommez la classe task et définissez les permissions de niveau de classe pour permettre la lecture et l'écriture publiques (vous pouvez ajuster ces paramètres plus tard) dans la classe task , ajoutez les champs suivants titre (string) – le titre de la tâche description (string) – détails sur la tâche terminé (boolean) – indique si la tâche est terminée datelimite (date) – la date limite pour la tâche cliquez sur "enregistrer" pour finaliser la configuration de votre schéma intégration de back4app avec preact intégrez back4app dans votre projet preact en utilisant le parse javascript sdk installez le sdk via npm npm install parse configurez le sdk en l'initialisant avec votre id d'application et clé javascript récupérez ces identifiants depuis votre tableau de bord back4app sous paramètres de l'application > sécurité & clés dans votre src/main jsx , importez et configurez parse comme suit import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) avec le backend connecté, vous êtes prêt à construire l'interface utilisateur de la liste de tâches dans preact et à implémenter des opérations crud développement du frontend avec preact maintenant que votre backend est configuré, construisez l'interface utilisateur de votre application de liste de tâches en utilisant preact vous créerez des composants pour ajouter, afficher, mettre à jour et supprimer des tâches tout en gérant l'état avec des hooks organiser vos composants votre application comprendra les composants clés suivants taskform jsx – gère l'ajout de nouvelles tâches tasklist jsx – affiche toutes les tâches et fournit des contrôles pour les compléter ou les supprimer taskitem jsx – représente une tâche individuelle avec des actions pour basculer l'achèvement ou supprimer la tâche créez un dossier composants à l'intérieur de src et ajoutez ces fichiers mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx gérer l'état avec des hooks utilisez les hooks de preact ( usestate et useeffect ) pour la gestion de l'état et les effets secondaires commencez par configurer l'état dans app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; création du composant de formulaire de tâche dans taskform jsx , créez un formulaire contrôlé pour ajouter des tâches utilisez usestate pour gérer les valeurs d'entrée et soumettre les données à back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; affichage de la liste des tâches dans tasklist jsx , affichez la liste des tâches en parcourant le tableau des tâches et en utilisant le taskitem composant import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; création du composant task item dans taskitem jsx , créez un composant qui vous permet de marquer une tâche comme terminée ou de la supprimer import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; styliser votre application ajoutez les styles suivants dans le index css fichier dans le src dossier / container styling / 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; } container p { font size 1rem; } 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 ce css dans votre src/main jsx import " /index css"; finaliser l'interface utilisateur votre application preact to do list dispose désormais d'un frontend dynamique intégré à back4app et d'un style personnalisé l'application vous permet d'ajouter, d'afficher, de mettre à jour et de supprimer des tâches tout en maintenant une communication efficace entre le frontend et le backend ensuite, vous déploierez votre application preact en utilisant la plateforme de déploiement web de back4app déployer le frontend sur le déploiement web back4app le déploiement web back4app fournit un environnement entièrement géré et conteneurisé pour déployer vos applications avec des déploiements basés sur docker, vous pouvez empaqueter votre frontend preact et le déployer sans effort configurer vite pour la production les projets preact construits avec vite fonctionnent en mode développement par défaut pour la production, construisez une version statique et servez la en utilisant un serveur web léger tel que nginx mettez à jour votre vite config js pour définir le bon chemin de base import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); générez des fichiers prêts pour la production npm run build créer un dockerfile pour votre application créez un dockerfile dans le répertoire racine pour définir votre conteneur \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] tester le conteneur localement avant de déployer, construisez et testez votre conteneur docker localement docker build t todo preact frontend exécutez le conteneur docker run p 8080 80 todo preact frontend visitez http //localhost 8080 dans votre navigateur pour confirmer que votre application est servie correctement pousser sur github et déployer via back4app poussez votre projet sur github 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 ensuite, déployez en utilisant le déploiement web back4app connectez vous à back4app web deployment https //www back4app com/containers cliquez sur "créer une nouvelle application" , fournissez un nom et sélectionnez github repository autorisez back4app à accéder à votre dépôt et sélectionnez le todo preact dépôt choisissez dockerfile deployment et confirmez les paramètres de construction cliquez sur "déployer" pour initier le processus de construction surveillance et gestion des déploiements après le déploiement, utilisez le tableau de bord back4app pour voir les journaux pour le dépannage surveiller les performances des conteneurs et l'utilisation des ressources déclencher des redéploiements sur de nouveaux commits configurer des domaines personnalisés si nécessaire test et débogage de votre application après le déploiement, testez soigneusement votre application preact vérifiez la connectivité api ouvrez la console de développement de votre navigateur (f12 → réseau) pour surveiller les appels api pendant les opérations de tâche ajouter et récupérer des tâches utilisez l'interface utilisateur pour ajouter des tâches, puis actualisez la page pour vérifier la persistance dans le navigateur de base de données back4app tester les opérations crud assurez vous que le marquage des tâches comme complètes et la suppression sont correctement reflétés dans le backend gestion des cas limites validez les entrées de formulaire et simulez des conditions de réseau lent à l'aide des outils de développement si vous rencontrez des problèmes, consultez les journaux de back4app ou vérifiez votre configuration api meilleures pratiques pour utiliser les services back4app améliorez les performances et la sécurité de votre application en suivant ces meilleures pratiques optimisez les appels api utilisez des requêtes par lots pour plusieurs opérations et sélectionnez uniquement les champs nécessaires dans vos requêtes sécurisez les données sensibles stockez les identifiants comme l'id d'application et la clé javascript dans des variables d'environnement avec vite, créez un env fichier vite parse app id=your app id vite parse js key=your js key activer l'auto scaling activez l'auto scaling dans le déploiement web de back4app pour gérer un trafic élevé améliorer la sécurité restreindre les autorisations au niveau des classes (clps) pour contrôler les modifications de données et configurer les acl selon les besoins utiliser le cloud code déchargez la logique complexe vers le cloud code pour de meilleures performances et une exposition réduite de l'api conclusion vous avez maintenant construit une application de liste de tâches complète utilisant preact pour le frontend et les services backend robustes de back4app ce tutoriel vous a guidé à travers l'initialisation d'un projet preact, l'intégration du sdk parse et le déploiement de votre application en utilisant des workflows conteneurisés sur back4app alors que vous continuez à développer, envisagez d'ajouter des fonctionnalités telles que l'authentification avancée des utilisateurs, des mises à jour en temps réel et des intégrations tierces pour des détails supplémentaires et du support, référez vous à la documentation de back4app https //www back4app com/docs