Comment construire un frontend Redwood.js et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant redwood js et la connecter à un backend géré sur back4app ce guide pratique vous accompagne à chaque étape—de la configuration de votre projet redwood js à l'intégration de parse pour la communication avec le backend—afin que vous puissiez vous concentrer sur la création d'une interface utilisateur dynamique et réactive redwood js est conçu pour simplifier le développement full stack en combinant un frontend moderne basé sur react avec une architecture backend robuste dans ce tutoriel, vous utiliserez back4app pour gérer vos services backend, vous permettant d'effectuer des opérations crud essentielles sans le tracas de la gestion de l'infrastructure serveur principaux enseignements à la fin de ce guide, vous serez en mesure de initialiser un projet redwood js moderne avec des outils standard de l'industrie connecter votre frontend redwood js à un backend back4app en utilisant le sdk javascript parse mettre en œuvre des opérations crud pour gérer votre liste de tâches conteneuriser votre application redwood js et la déployer via le déploiement web de back4app prérequis avant de commencer, assurez vous d'avoir ce qui suit node js et npm/yarn installés sur votre machine vérifiez l'installation avec node v et npm v ou yarn v connaissances de base en redwood js , y compris la structure du projet, le routage et les composants une familiarité avec les concepts de react est bénéfique un compte back4app pour configurer et gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si nécessaire avec ces prérequis en place, vous êtes prêt à configurer votre projet redwood js et à le connecter à un backend évolutif configuration du projet commencez par créer une nouvelle application redwood js ouvrez votre terminal et exécutez la commande suivante, en remplaçant todo app par le nom de projet souhaité yarn create redwood app todo app naviguez dans votre répertoire de projet cd todo app installez toutes les dépendances yarn install exécutez le serveur de développement pour vérifier que votre projet est correctement configuré yarn rw dev visitez l'url affichée dans votre terminal pour confirmer que votre application redwood js fonctionne configuration du backend todo sur back4app back4app fournit 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 " nommez votre application (par exemple, todoredwoodapp ) et choisissez 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 ses autorisations de niveau de classe pour permettre la lecture et l'écriture publiques (ajustez ces paramètres plus tard si nécessaire) ajoutez les champs suivants à la classe tâche 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 le schéma intégration de back4app avec redwood js pour connecter votre application redwood js à back4app, installez le sdk javascript parse yarn add parse ensuite, configurez parse en créant un nouveau fichier dans le web/src répertoire nommez le parseclient js et ajoutez le code suivant remplacez 'your application id' et 'your javascript key' par vos identifiants du tableau de bord back4app (sous paramètres de l'application > sécurité & clés ) // web/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 cette configuration vous permet d'appeler des méthodes parse depuis n'importe quel composant redwood js construire le frontend avec redwood js avec votre backend connecté, il est temps de construire l'interface de la liste de tâches dans redwood js, les pages sont placées sous le web/src/pages répertoire créer la page todo créez un nouveau dossier nommé todopage dans web/src/pages et ajoutez un fichier appelé todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx ouvrez web/src/pages/todopage/todopage jsx et ajoutez le code suivant // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) 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) } } const addtask = 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() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { 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() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} 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={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage configuration des routes pour rendre votre page todo accessible, ouvrez le routes jsx fichier situé dans web/src/routes jsx et ajoutez une nouvelle route // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; ajout de styles globaux pour ajouter des styles globaux, ajoutez les styles css ci dessous au fichier css nommé index css dans le web/src dossier / web/src/index 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; } } votre application redwood js dispose maintenant d'une interface de liste de tâches fonctionnelle qui interagit avec un backend back4app conteneuriser et déployer votre application redwood js sur back4app le déploiement web de back4app offre un environnement conteneurisé qui simplifie le déploiement des applications dans cette section, vous allez empaqueter votre application redwood js dans un conteneur docker et la déployer préparer votre application pour la production tout d'abord, construisez votre application redwood js pour la production yarn rw build web création d'un dockerfile pour configurer docker pour votre projet redwood js, vous devez exécuter la commande de configuration docker dans votre terminal yarn rw setup docker les commandes de configuration effectuent plusieurs tâches elles créent quatre fichiers dockerfile, dockerignore, docker compose dev yml et docker compose prod yml elles ajoutent le package @redwoodjs/api server au côté api et le package @redwoodjs/web server au côté web elles mettent à jour le paramètre browser open dans redwood toml si ce paramètre reste vrai, cela provoquera une rupture du serveur de développement lors de l'exécution de docker compose dev yml la commande fournit un dockerfile qui construit votre application redwood js et prépare une image de production en utilisant un runtime node js minimal vous pouvez démarrer le fichier de composition dev avec docker compose f /docker compose dev yml up ouvrez http //localhost 8390 dans votre navigateur pour vérifier que votre application redwood js fonctionne correctement déploiement via back4app web deployment 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 sélectionnez dépôt github et autorisez back4app choisissez votre todo redwood dépôt sélectionnez déploiement dockerfile et vérifiez les paramètres de construction cliquez sur "déployer" pour commencer le processus de déploiement après le déploiement, 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 une fois déployée, assurez vous que votre application fonctionne comme prévu connectivité api utilisez les outils de développement du navigateur pour vérifier que les requêtes api pour ajouter, basculer et supprimer des tâches sont réussies persistance des données ajoutez des tâches via l'interface utilisateur et actualisez pour confirmer que les tâches persistent dans la base de données back4app opérations crud testez le basculement et la suppression des tâches tout en vérifiant les erreurs dans la console ou les journaux api cas particuliers validez que les validations d'entrée empêchent les soumissions vides meilleures pratiques et conseils d'optimisation pour une application sécurisée et efficace, considérez les éléments suivants optimiser les requêtes api utilisez le traitement par lots et ne récupérez que les champs nécessaires variables d'environnement sécurisez les informations d'identification sensibles (id d'application et clé javascript) en utilisant des variables d'environnement contrôle d'accès implémentez des acl dynamiques afin que seuls les utilisateurs autorisés puissent modifier les données code cloud déchargez la logique complexe vers le code cloud 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 redwood js intégrée à un backend back4app ce tutoriel a couvert tout, de l'initialisation du projet et de l'intégration du backend à la déploiement conteneurisé alors que vous continuez à développer, envisagez d'ajouter des fonctionnalités telles que la gestion avancée des utilisateurs, les mises à jour en temps réel et les intégrations tierces pour plus d'informations, explorez la documentation back4app https //www back4app com/docs et les ressources redwood js