How to Build a Qwik Frontend and Connect It to a Backend?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant qwik et la connecter à un backend robuste alimenté par back4app ce guide est conçu pour les développeurs qui souhaitent tirer parti de la résumabilité et des capacités de chargement paresseux de qwik tout en intégrant des opérations crud essentielles (créer, lire, mettre à jour, supprimer) avec un backend géré à la fin, vous aurez une application entièrement fonctionnelle qui démontre comment combiner un frontend moderne qwik avec les services backend fiables de back4app construire une application full stack peut être difficile car cela implique la configuration du backend, la gestion de la base de données, l'authentification et le déploiement pour simplifier ces tâches, nous utilisons back4app— un backend as a service (baas) évolutif —afin que vous puissiez vous concentrer sur la création de votre application qwik pendant qu'il s'occupe de l'hébergement, des bases de données et des api back4app propose une suite complète de services backend, y compris une base de données nosql prête à l'emploi, l'authentification, le cloud code pour la logique côté serveur, et des intégrations sdk fluides son support de déploiement conteneurisé en fait un excellent choix pour les applications full stack modernes avec ces outils à votre disposition, vous pouvez développer et déployer rapidement des applications sans le surcoût de la gestion de l'infrastructure serveur principaux enseignements en suivant ce tutoriel, vous apprendrez à initialiser un projet qwik moderne intégrer un service backend pour gérer les données de votre application implémenter des opérations crud essentielles pour une interface utilisateur interactive déployer une application de 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 depuis nodejs org https //nodejs org/ et vérifiez avec node v et npm v connaissances de base en qwik une familiarité avec les composants de qwik, les signaux (utilisant usesignal ) et le concept de résumabilité est recommandée si vous êtes nouveau dans qwik, consultez d'abord sa documentation 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 qwik confirmez que node js (version lts) est installé node v npm v créez un nouveau projet qwik en utilisant le qwik cli exécutez la commande suivante npm create qwik\@latest répondez aux invites que le cli vous fournira nommez le projet todo app ou remplacez le par le nom de votre choix accédez à votre répertoire de projet cd todo app démarrez le serveur de développement pour vérifier votre configuration npm start votre application qwik 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 ce service 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 guide à travers la création d'un modèle de données task pour stocker vos éléments à faire et le lier à votre frontend qwik 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, todoqwikapp ) et sélectionnez nodejs/parse comme type de backend une fois créé, naviguez vers "base de données" > "navigateur" cliquez sur "créer une classe" et choisissez "personnalisé" nommez la classe task et définissez les permissions de niveau de classe pour permettre la lecture et l'écriture publiques (vous pouvez affiner 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 votre schéma intégration de back4app avec qwik intégrez back4app dans votre projet qwik 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 créez un fichier de configuration (par exemple, src/lib/parse js ) et ajoutez 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 cette configuration dans vos composants et routes qwik pour interagir avec votre backend développer le frontend avec qwik maintenant que votre backend est connecté, construisez l'interface utilisateur de votre application to do list en utilisant qwik vous créerez des composants pour ajouter, afficher, mettre à jour et supprimer des tâches tout en gérant l'état avec les signaux qwik organiser vos composants votre application comprendra les composants clés suivants taskform tsx – un composant pour gérer l'ajout de nouvelles tâches tasklist tsx – un composant pour afficher toutes les tâches et fournir des contrôles pour marquer les tâches comme complètes ou les supprimer taskitem tsx – un composant qui représente une tâche individuelle avec des actions pour basculer l'achèvement ou la supprimer créez un dossier de composants à l'intérieur de src et ajoutez ces fichiers mkdir src/components touch src/components/taskform tsx src/components/tasklist tsx src/components/taskitem tsx gérer l'état avec les signaux qwik utilisez le usesignal de qwik pour la gestion réactive de l'état dans votre page principale (par exemple, src/routes/index tsx ), configurez l'état et la récupération des données comme suit import { component$, usesignal, usevisibletask$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; import taskform from ' /components/taskform'; import tasklist from ' /components/tasklist'; export default component$(() => { const tasks = usesignal< { id string; createdat string; updatedat string; title string; description string; completed boolean; }\[] \>(\[]); const fetchtasks = $ ( async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id ?? '', createdat task createdat ? task createdat toisostring() '', updatedat task updatedat ? task updatedat toisostring() '', title task get('title') ?? '', description task get('description') ?? '', completed task get('completed') ?? false, })); } catch (error) { console error("error fetching tasks ", error); } }); usevisibletask$(async () => { await fetchtasks(); }); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform ontaskadded$={fetchtasks} /> \<tasklist tasks={tasks value} ontaskschange$={fetchtasks} /> \</div> ); }); construction du composant de formulaire de tâche dans src/components/taskform tsx , créez un composant de formulaire pour ajouter des tâches utilisez les signaux réactifs de qwik pour les entrées du formulaire import { component$, usesignal, $, qrl } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface taskformprops { ontaskadded$ qrl<() => void>; } export default component$((props taskformprops) => { const title = usesignal(''); const description = usesignal(''); const handlesubmit$ = $(async (e event) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title value); task set("description", description value); task set("completed", false); await task save(); title value = ''; description value = ''; return true; } catch (error) { console error("error adding task ", error); return false; } }); return ( \<form preventdefault\ submit onsubmit$={async (event) => { const success = await handlesubmit$(event); if (success) { await props ontaskadded$(); } }} \> \<input type="text" placeholder="task title" value={title value} oninput$={(e) => title value = (e target as htmlinputelement) value} required /> \<input type="text" placeholder="description" value={description value} oninput$={(e) => description value = (e target as htmlinputelement) value} required /> \<button type="submit">add task\</button> \</form> ); }); construction de la liste des tâches et des composants d'éléments dans src/components/tasklist tsx , affichez la liste des tâches import { component$ } from '@builder io/qwik'; import taskitem from ' /taskitem'; interface task { id string; title string; description string; completed boolean; } interface tasklistprops { tasks task\[]; ontaskschange$ () => void; } export default component$((props tasklistprops) => { return ( \<div> {props tasks length === 0 ? ( \<p>no tasks available\</p> ) ( props tasks map(task => ( \<taskitem key={task id} task={task} ontaskschange$={props ontaskschange$} /> )) )} \</div> ); }); dans src/components/taskitem tsx , créez un composant pour les tâches individuelles avec des actions pour basculer l'achèvement ou supprimer la tâche import { component$, $ } from '@builder io/qwik'; import parse from ' /lib/parse js'; interface task { id string; title string; description string; completed boolean; } interface taskitemprops { task task; ontaskschange$ () => void; } export default component$((props taskitemprops) => { const handletoggle = $(async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(props task id); tasktoupdate set("completed", !props task completed); await tasktoupdate save(); props ontaskschange$(); } catch (error) { console error("error updating task ", error); } }); const handledelete = $(async () => { try { const query = new parse query("task"); const tasktodelete = await query get(props task id); await tasktodelete destroy(); props ontaskschange$(); } catch (error) { console error("error deleting task ", error); } }); return ( \<div class={`task item ${props task completed ? "completed" ""}`}> \<h3>{props task title}\</h3> \<p>{props task description}\</p> \<button onclick$={handletoggle}> {props task completed ? "undo" "complete"} \</button> \<button onclick$={handledelete}>delete\</button> \</div> ); }); styliser votre application créez un src/global css fichier pour ajouter un style de base / src/global css / 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 les styles globaux dans votre fichier racine (par exemple, src/root tsx ) import " /global css"; finaliser l'interface utilisateur votre application qwik 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 garantissant une communication fluide entre le frontend et le backend ensuite, vous déploierez votre application qwik en utilisant la plateforme de déploiement web de back4app déployer le frontend sur back4app web deployment back4app web deployment fournit un environnement entièrement géré et conteneurisé pour héberger vos applications avec des déploiements basés sur docker, vous pouvez empaqueter votre application qwik et la déployer sans effort ajouter l'adaptateur de serveur express qwik vous permet de configurer des adaptateurs de déploiement pour des cibles spécifiques nous allons ajouter l'adaptateur express pour servir votre projet en production installer l'adaptateur npm run qwik add puis sélectionnez adaptateur serveur node js express et confirmez l'installation cela met à jour votre readme et ajoute de nouveaux scripts de déploiement dans votre package json mettez à jour le script de démarrage ouvrez package json et changez le script de démarrage en "start" "node server/entry express" en option, gardez un script de développement séparé si nécessaire cela garantit que votre projet utilise express pour servir la version de production configurer qwik pour la production construisez votre site qwik prêt pour la production avec npm run build créer un dockerfile pour votre application créez un dockerfile à la racine du projet pour containeriser votre application qwik # build stage from node\ lts alpine as builder user node workdir /home/node copy package json run npm ci copy chown=node\ node run npm run build \# final run stage from node\ lts alpine as runner env node env=production user node workdir /home/node copy from=builder chown=node\ node /home/node/package json copy from=builder chown=node\ node /home/node/node modules /node modules copy from=builder chown=node\ node /home/node/dist /dist copy from=builder chown=node\ node /home/node/server /server arg port expose ${port 3000} cmd \["node", "server/entry express"] 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 de back4app connectez vous à back4app web deployment https //www back4app com/containers cliquez sur "créer une nouvelle application" , fournissez un nom et sélectionnez dépôt github autorisez back4app à accéder à votre dépôt et sélectionnez votre dépôt de projet qwik choisissez déploiement dockerfile 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 lorsque de nouveaux commits sont poussés configurer des domaines personnalisés si nécessaire tester et déboguer votre application une fois déployée, testez soigneusement votre application qwik vérifiez la connectivité api ouvrez la console de développement de votre navigateur (f12 → réseau) pour vérifier les appels api lors des opérations de tâche ajouter et récupérer des tâches utilisez l'interface utilisateur pour ajouter des tâches, puis actualisez pour confirmer la persistance des données 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 se reflètent correctement dans le backend gérer les cas particuliers validez les entrées de formulaire et simulez des conditions de réseau lent à l'aide des outils de développement si des problèmes surviennent, consultez les journaux de back4app ou vérifiez à nouveau votre configuration api meilleures pratiques pour utiliser les services back4app améliorez les performances et la sécurité de votre application en optimiser les appels api utilisez des requêtes par lot pour plusieurs opérations et interrogez uniquement les champs nécessaires sécuriser les données sensibles stockez les identifiants comme l'id d'application et la clé javascript dans des variables d'environnement dans qwik, créez un env fichier vite parse app id=your app id vite parse js key=your js key activation de l'auto scaling activez l'auto scaling dans le déploiement web de back4app pour gérer un trafic élevé amélioration de la sécurité restreindre les autorisations au niveau de la classe (clps) pour contrôler les modifications de données et configurer les acl selon les besoins utilisation du cloud code déchargez la logique complexe vers le cloud code pour améliorer les performances et réduire l'exposition de l'api conclusion vous avez maintenant construit une application de liste de tâches full stack en utilisant qwik pour le frontend et les services backend robustes de back4app ce tutoriel vous a guidé à travers la configuration d'un projet qwik, l'intégration du sdk parse et le déploiement de votre site 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 plus d'informations et de support, consultez la documentation de back4app https //www back4app com/docs