Comment créer un frontend Blitz.js et le connecter à un backend ?

dans ce guide, vous allez créer une application de liste de tâches en utilisant blitz js et la connecter à un backend géré sur back4app ce tutoriel étape par étape est conçu pour vous aider à mettre en œuvre des opérations crud essentielles et à créer une interface utilisateur dynamique en utilisant blitz js construire une application full stack peut être complexe si vous devez gérer à la fois les systèmes frontend et backend en tirant parti de back4app, vous pouvez simplifier la gestion du backend grâce à un baas évolutif , vous permettant de vous concentrer sur la création d'une interface engageante avec blitz js back4app fournit une suite de services backend, y compris une base de données nosql prête à l'emploi, l'authentification, des fonctions cloud et des points de terminaison api ces fonctionnalités vous permettent de développer et de déployer rapidement votre application sans le fardeau de la maintenance des serveurs points clés à retenir à la fin de ce tutoriel, vous serez en mesure de configurer un projet blitz js moderne en utilisant des outils standard de l'industrie intégrer un backend back4app avec votre application blitz js en utilisant le sdk parse mettre en œuvre des opérations crud pour gérer votre liste de tâches conteneuriser et déployer votre application blitz js en utilisant le déploiement web de back4app prérequis avant de commencer, assurez vous d'avoir ce qui suit node js et npm installés sur votre machine vérifiez l'installation avec node v et npm v dans votre terminal connaissances de base en blitz js , y compris le routage, les requêtes et les mutations une familiarité avec react est bénéfique car blitz js s'appuie sur cela un compte back4app pour configurer et gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si vous ne l'avez pas déjà fait avec ces prérequis remplis, vous êtes prêt à initialiser votre projet blitz js et à l'intégrer à un backend robuste configuration du projet commencez par configurer votre application blitz js blitz js offre une expérience développeur simplifiée en combinant la puissance de next js avec un framework full stack exécutez la commande suivante pour créer un nouveau projet blitz js remplacez todo app par le nom de votre projet choisi npx blitz new todo app naviguez vers votre répertoire de projet cd todo app exécutez votre serveur de développement pour vérifier que tout est correctement configuré npm run dev visitez l'url affichée dans votre terminal pour confirmer que votre application blitz js fonctionne configuration du backend todo sur back4app back4app propose un backend parse géré qui simplifie la gestion des données pour votre application dans cette section, vous allez créer un modèle de données pour stocker les tâches de votre liste de tâches création de votre application backend connectez vous à votre tableau de bord back4app https //www back4app com/ et cliquez sur "créer une nouvelle application " fournissez un nom pour votre application (par exemple, todoblitzapp ) et sélectionnez nodejs/parse comme type de backend dans la section "base de données" > "navigateur" , cliquez sur "créer une classe" et sélectionnez "personnalisé " nommez la classe tâche et définissez les autorisations de niveau de classe pour permettre la lecture et l'écriture publiques (vous pouvez ajuster ces paramètres plus tard) ajoutez les champs suivants à la tâche classe titre (string) – le titre de la tâche description (string) – détails sur la tâche terminé (boolean) – si la tâche est terminée datelimite (date) – la date limite pour la tâche cliquez sur "enregistrer" pour créer le schéma intégrer back4app avec blitz js pour connecter votre application blitz js à back4app, installez le sdk javascript parse npm install parse ensuite, configurez le sdk parse dans votre projet blitz js créez un nouveau fichier de configuration (par exemple, src/parseclient js ) et initialisez parse comme indiqué ci dessous remplacez les espaces réservés par vos identifiants back4app provenant de paramètres de l'application > sécurité & clés // src/parseclient js 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 requêtes et mutations blitz js pour interagir avec votre backend construire le frontend avec blitz js avec le backend configuré, il est temps de construire l'interface de la liste de tâches dans blitz js vous utiliserez les requêtes et mutations intégrées de blitz js pour effectuer des opérations crud structurer vos pages et appels api dans blitz js, les pages se trouvent sous le src/pages répertoire ouvrez src/pages/index tsx et ajoutez le code suivant pour configurer la page, interroger les tâches depuis back4app, et définir des mutations pour ajouter, basculer et supprimer des tâches // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home cette page utilise les hooks de requête de tanstack pour récupérer des tâches et gérer les actions des utilisateurs, garantissant une intégration fluide avec votre backend back4app pour s'assurer que le usequery fonctionne, vous devez envelopper votre application entière dans un queryclientprovider vous faites cela dans le src/pages/ app tsx fichier remplacez le code dans le src/pages/ app tsx fichier par le bloc de code ci dessous // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) ajout de styles globaux pour définir le style de base de votre application, ajoutez le bloc de code au fichier css à src/styles/globals css / src/styles/globals 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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 vos styles globaux en ajoutant la ligne suivante dans src/pages/ app tsx (ou votre fichier de composant app personnalisé) / src/pages/ app tsx / import " /styles/globals css"; votre application blitz js affiche maintenant une interface de liste de tâches entièrement fonctionnelle intégrée à back4app conteneuriser et déployer votre application blitz js sur back4app le déploiement web de back4app fournit un environnement conteneurisé qui simplifie le processus de déploiement vous allez empaqueter votre application blitz js dans un conteneur docker et le déployer sans effort préparer votre application blitz js pour la production tout d'abord, construisez votre application blitz js pour la production blitz build création d'un dockerfile créez un dockerfile dans le répertoire racine de votre projet avec le contenu suivant from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] ce dockerfile construit votre projet blitz js et prépare une image de production en utilisant un runtime node js léger après avoir créé votre dockerfile, créez un dockerignore et copiez collez votre gitignore construction et test de votre conteneur docker construisez l'image docker localement docker build t todo blitz frontend exécutez le conteneur pour le tester docker run p 3000 3000 todo blitz frontend visitez http //localhost 3000 dans votre navigateur pour vérifier que votre application blitz js fonctionne correctement déployer votre application via le déploiement web 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, connectez vous à back4app web deployment https //www back4app com/containers et suivez ces étapes cliquez sur "créer une nouvelle application" et entrez les détails de votre projet choisissez dépôt github et autorisez back4app sélectionnez votre todo blitz dépôt choisissez déploiement dockerfile et vérifiez les paramètres de construction cliquez sur "déployer" pour commencer le processus de déploiement une fois déployé, utilisez le tableau de bord back4app pour surveiller les journaux, gérer les constructions et configurer des domaines personnalisés si nécessaire tester et déboguer votre application après le déploiement, assurez vous que votre application fonctionne comme prévu en vérification de la connectivité api utilisez les outils de développement de votre navigateur pour vérifier que les requêtes api pour ajouter, basculer et supprimer des tâches sont réussies vérification de la persistance des données ajoutez des tâches via l'interface utilisateur et actualisez la page pour confirmer qu'elles sont enregistrées dans la base de données back4app test des opérations crud validez que les tâches peuvent être basculées et supprimées, et inspectez les journaux de la console pour toute erreur gestion des cas particuliers essayez de soumettre des entrées invalides pour tester la robustesse de vos validations meilleures pratiques et conseils d'optimisation considérez les recommandations suivantes pour une application sécurisée et efficace optimiser les requêtes api utilisez le traitement par lots et limitez les champs interrogés pour réduire la surcharge réseau sécuriser les variables d'environnement stockez les informations d'identification sensibles (id d'application et clé javascript) dans un fichier sécurisé env mettre en œuvre le contrôle d'accès utilisez des acl dynamiques pour garantir que seuls les utilisateurs autorisés peuvent modifier les données exploiter le cloud code déchargez la logique complexe vers le cloud code de back4app pour améliorer les performances et la sécurité conclusion vous avez maintenant construit une application de liste de tâches full stack en utilisant blitz js intégrée à un backend back4app ce tutoriel vous a guidé à travers l'initialisation du projet, l'intégration du backend et le déploiement conteneurisé alors que vous avancez, envisagez d'élargir votre application avec des fonctionnalités telles que la gestion avancée des utilisateurs, les mises à jour en temps réel et les intégrations tierces pour des informations supplémentaires, explorez la documentation back4app https //www back4app com/docs et les ressources blitz js