Comment créer une application CRUD avec Redwood ?

aperçu dans ce guide, vous apprendrez à créer une application crud (créer, lire, mettre à jour, supprimer) de base en utilisant redwoodjs ce tutoriel vous guide à travers le processus de configuration de votre projet avec back4app comme service backend, de conception d'un schéma de base de données robuste et de son intégration avec un frontend redwoodjs en suivant ces étapes, vous construirez une application prête pour la production qui gère les données efficacement tout en utilisant des techniques de développement modernes aperçus essentiels maîtrisez la création d'une application crud qui gère efficacement les données avec un puissant service backend découvrez comment architecturer une base de données évolutive et la fusionner avec une interface redwoodjs pour améliorer l'interaction utilisateur explorez l'utilisation d'un outil de gestion sans code par glisser déposer—l'application admin back4app—pour rationaliser les opérations crud apprenez les stratégies de déploiement, y compris la conteneurisation avec docker, pour lancer rapidement votre application web conditions préalables avant de commencer, vérifiez que vous avez les éléments suivants un compte back4app actif avec un nouveau projet prêt si vous avez besoin d'aide, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement redwoodjs configuré utilisez le cli redwoodjs pour créer votre application assurez vous que node js (version 14 ou ultérieure) est installé une compréhension de base de javascript, redwoodjs et graphql pour plus de détails, visitez la documentation de redwoodjs https //redwoodjs com/docs/introduction étape 1 – initier votre projet démarrer un nouveau projet back4app connectez vous à votre tableau de bord back4app sélectionnez “nouvelle application” pour commencer un nouveau projet nommez votre projet basic crud app redwoodjs et suivez les instructions de configuration créer un nouveau projet votre projet apparaîtra maintenant dans le tableau de bord, posant les bases de votre configuration et gestion backend étape 2 – élaboration du schéma de base de données structuration de votre modèle de données pour cette application crud, vous allez concevoir plusieurs collections voici des exemples de deux collections essentielles avec les champs nécessaires ces configurations sont cruciales pour permettre des fonctionnalités crud fiables 1\ collection articles cette collection contient des détails sur chaque article champ type de données but id identifiant d'objet identifiant unique généré automatiquement titre chaîne le nom ou le titre de l'élément description chaîne un court résumé décrivant l'élément créé à date horodatage de création de l'enregistrement mis à jour le date horodatage de la dernière mise à jour 2\ collection utilisateurs cette collection stocke les identifiants et les détails des utilisateurs champ type de données but id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail unique de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour l'authentification créé à date horodatage de création du compte mis à jour le date horodatage de la dernière mise à jour vous pouvez configurer ces collections directement dans le tableau de bord back4app en créant de nouvelles classes et en ajoutant des colonnes appropriées créer une nouvelle classe définissez chaque champ en choisissant son type, en le nommant et en définissant son statut par défaut ou requis créer une colonne utilisation de l'agent ai back4app pour la création de schémas l'agent ai back4app, accessible depuis votre tableau de bord, peut générer automatiquement le schéma de votre base de données en fonction d'une invite descriptive cette fonctionnalité accélère considérablement la configuration d'un schéma cohérent pour votre application comment utiliser l'agent ai lancez l'agent ai accédez à l'agent depuis votre tableau de bord back4app ou les paramètres du projet détaillez votre modèle de données entrez une invite complète décrivant les collections et les champs dont vous avez besoin examinez et appliquez examinez les suggestions de schéma générées et appliquez les à votre projet exemple d'invite create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) l'utilisation de cette approche pilotée par l'ia permet non seulement de gagner du temps, mais garantit également un schéma bien optimisé et uniforme étape 3 – activation de l'application admin et gestion des opérations crud introduction à l'application admin l'application admin back4app est une interface conviviale sans code qui vous permet de gérer vos données backend sans effort sa fonctionnalité de glisser déposer rend l'exécution des opérations crud—comme l'ajout, la visualisation, la mise à jour et la suppression d'enregistrements—un jeu d'enfant comment activer l'application admin allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant un utilisateur admin initial, ce qui établit également des rôles (par exemple, b4aadminuser ) et des collections système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos données tableau de bord de l'application admin effectuer des opérations crud via l'application admin dans l'application admin, vous pouvez ajouter de nouveaux enregistrements utilisez le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour insérer de nouvelles données voir et modifier des enregistrements cliquez sur un enregistrement pour voir ses détails et effectuer des mises à jour supprimer des enregistrements sélectionnez l'option de suppression pour éliminer les données qui ne sont plus nécessaires cette interface intuitive simplifie considérablement les tâches de gestion des données étape 4 – intégration de redwoodjs avec back4app maintenant que votre backend est configuré et gérable via l'application admin, il est temps de connecter votre frontend redwoodjs avec back4app utilisation de l'intégration de l'api graphql redwoodjs est construit autour de graphql, ce qui en fait un choix parfait pour s'intégrer avec back4app via des appels api au lieu d'utiliser le sdk, vous interagirez avec votre backend en utilisant des requêtes et des mutations graphql configuration de votre projet redwoodjs créez une nouvelle application redwoodjs yarn create redwood app basic crud app redwood accédez à votre répertoire de projet cd basic crud app redwood configurez vos variables d'environnement dans votre env fichier, ajoutez vos identifiants back4app back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com récupération de données avec les cellules redwoodjs les cellules redwoodjs simplifient la récupération de données voici un exemple d'une cellule qui récupère des éléments // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; vous pouvez intégrer des requêtes et des mutations graphql similaires dans vos composants redwoodjs pour effectuer des opérations crud étape 5 – sécuriser votre backend mise en œuvre du contrôle d'accès protégez vos données en définissant des listes de contrôle d'accès (acl) directement sur les objets par exemple, lors de la création d'un article privé, vous pouvez vous assurer que seul le propriétaire a des privilèges de lecture/écriture async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } configuration des autorisations au niveau de la classe dans le tableau de bord back4app, définissez les autorisations au niveau de la classe (clp) pour chaque collection afin de restreindre l'accès aux utilisateurs authentifiés ou à des rôles spécifiques, garantissant ainsi la sécurité de vos données étape 6 – gestion de l'authentification des utilisateurs mise en place de la gestion des comptes back4app utilise un système d'utilisateur robuste, que vous pouvez intégrer dans redwoodjs pour l'authentification des utilisateurs dans votre application redwoodjs, gérez les inscriptions et les connexions des utilisateurs via des appels api exemple inscription de l'utilisateur // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; une méthode similaire peut être appliquée pour se connecter et maintenir les sessions utilisateur étape 7 – déployer votre frontend redwoodjs via le déploiement web la fonctionnalité de déploiement web de back4app rend l'hébergement de votre frontend redwoodjs sans effort suivez ces étapes pour pousser votre code en production 7 1 construisez votre version de production ouvrez votre dossier de projet dans le terminal exécutez la commande de construction yarn rw build cela générera un web/dist dossier contenant vos fichiers statiques optimisés vérifiez la sortie de la construction assurez vous que le web/dist dossier contient un index html ainsi que tous les actifs nécessaires 7 2 organisez et validez votre code source votre dépôt doit héberger l'intégralité du code source de votre application redwoodjs une structure typique pourrait être basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json s'engager sur github initialiser git (si nécessaire) git init mettez vos fichiers en scène git add engagez votre code git commit m "engagement initial pour le frontend crud de redwoodjs" créez un dépôt github (par exemple, basic crud app redwood ) et poussez votre code git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 intégrer avec le déploiement web accéder au déploiement web depuis votre tableau de bord back4app sous votre projet (basic crud app redwood) connectez votre compte github si ce n'est pas déjà fait, en suivant les instructions sélectionnez votre dépôt et votre branche (par exemple, main ) contenant votre code redwoodjs 7 4 définir les paramètres de déploiement commande de construction spécifiez yarn rw build si votre dépôt n'inclut pas de distribution pré construite répertoire de sortie configurez le répertoire de sortie comme web/dist variables d'environnement incluez toutes les variables d'environnement nécessaires, telles que vos clés back4app 7 5 conteneurisation avec docker si vous privilégiez docker pour le déploiement, incluez un dockerfile dans votre dépôt par exemple \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 déployer l'application appuyez sur le bouton déployer dans back4app après avoir finalisé votre configuration surveillez le processus de déploiement back4app récupérera votre code, construira le projet et le déploiera dans un environnement conteneurisé récupérez l'url de votre application une fois déployée, une url sera fournie où votre application redwoodjs est hébergée 7 7 valider votre déploiement ouvrez l'url fournie dans votre navigateur pour confirmer que le site se charge testez la fonctionnalité de l'application assurez vous que toutes les pages, routes et ressources se chargent correctement déboguez si nécessaire utilisez les outils de développement du navigateur et les journaux de déploiement de back4app pour tout débogage requis étape 8 – réflexions finales et orientations futures félicitations pour avoir construit votre application crud basée sur redwoodjs en utilisant back4app ! vous avez réussi à mettre en place un projet intitulé basic crud app redwood , créé des collections de base de données détaillées pour les articles et les utilisateurs, et intégré un frontend propre avec une gestion des données robuste et une sécurité quelle est la suite ? affinez votre frontend améliorez votre application redwoodjs avec des fonctionnalités telles que des pages d'articles détaillées, des fonctionnalités de recherche et des mises à jour en temps réel incorporez des fonctionnalités avancées envisagez d'ajouter des fonctions sans serveur, des intégrations tierces ou des contrôles d'accès plus complexes explorez des ressources supplémentaires plongez plus profondément dans la documentation de back4app https //www back4app com/docs et les guides de redwoodjs https //redwoodjs com/docs pour d'autres améliorations en suivant ce tutoriel, vous possédez désormais le savoir faire pour développer un backend crud évolutif et l'intégrer sans effort avec un frontend moderne redwoodjs en utilisant back4app profitez de votre parcours de codage !