Comment créer une application CRUD avec Remix ?

aperçu dans ce guide, vous apprendrez à créer une application crud (créer, lire, mettre à jour, supprimer) en utilisant remix js nous utiliserons back4app comme notre service backend pour gérer le stockage des données de manière transparente ce guide couvre la configuration d'un projet back4app, la conception d'un schéma de données dynamique et la mise en place des opérations crud dans votre application remix js dans un premier temps, vous allez configurer un projet back4app, que nous appellerons basic crud app remix , fournissant un stockage de données non relationnel évolutif vous créerez ensuite un modèle de données en établissant manuellement des collections et des champs via le tableau de bord back4app, ou même en utilisant l'agent ia intégré pour une configuration automatisée ensuite, vous explorerez l'application admin de back4app—une interface conviviale qui vous permet de gérer facilement vos données en utilisant des opérations de glisser déposer enfin, vous connecterez votre application remix js à back4app via des appels api rest, garantissant que vos fonctionnalités crud, ainsi que l'authentification des utilisateurs, sont robustes et sécurisées à la fin de ce tutoriel, vous aurez une application remix js prête pour la production capable d'effectuer des opérations crud de base ainsi qu'une gestion sécurisée des utilisateurs ce que vous apprendrez comment construire une application crud avec remix js et un backend fiable meilleures pratiques pour structurer votre backend et l'intégrer avec un frontend remix js comment utiliser l'application back4app admin pour simplifier les tâches de gestion des données techniques pour déployer votre application remix js, y compris la conteneurisation avec docker prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet prêt besoin d'aide ? visitez commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement remix js fonctionnel vous pouvez utiliser n'importe quel éditeur de code moderne comme vs code node js (version 14 ou ultérieure) doit être installé connaissances de base en javascript, react et apis restful pour un rappel, consultez la documentation remix https //remix run/docs étape 1 – configuration de votre projet lancement d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app remix et suivez les étapes pour compléter le processus de création créer un nouveau projet une fois votre projet prêt, il apparaîtra sur votre tableau de bord, fournissant la base pour votre backend étape 2 – élaboration de votre modèle de données établir des structures de données pour cette application crud, vous définirez plusieurs collections dans back4app ci dessous, des exemples des principales collections et champs qui soutiendront vos fonctionnalités crud 1\ collection d'articles cette collection stockera des détails sur chaque article champ type de données description 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 bref résumé décrivant l'article créé à date horodatage pour quand l'élément a été ajouté mis à jour le date horodatage de la dernière modification 2\ collection des utilisateurs cette collection gère les informations d'identification et d'authentification des utilisateurs champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour l'utilisateur email chaîne adresse e mail unique de l'utilisateur hashdemotdepasse chaîne mot de passe haché pour une authentification sécurisée créé à date horodatage de la création du compte mis à jour le date horodatage de la mise à jour du compte vous pouvez créer ces collections et ajouter des champs directement depuis le tableau de bord back4app créer une nouvelle classe pour ajouter un nouveau champ, il suffit de choisir un type de données, de saisir le nom du champ et de définir des valeurs par défaut ou des options obligatoires si nécessaire créer une colonne utiliser l'agent ai de back4app pour la génération de schéma l'agent ia intégré à back4app peut générer automatiquement votre schéma en fonction de votre description, simplifiant ainsi la configuration initiale comment utiliser l'agent ia accéder à l'agent ia connectez vous à votre tableau de bord back4app et trouvez l'agent ia dans les paramètres de votre projet décrire votre modèle de données fournissez une explication détaillée des collections et des champs dont vous avez besoin réviser et confirmer l'agent ia présentera un schéma proposé vérifiez les détails et confirmez la configuration exemple de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette méthode assistée par ia accélère le processus et garantit que votre schéma est parfaitement adapté aux besoins de votre application étape 3 – activation de l'application admin et gestion des opérations crud aperçu de l'application admin l'application admin de back4app fournit une interface sans code qui simplifie la gestion des données backend ses fonctionnalités de glisser déposer rendent les opérations crud—comme l'ajout, la modification et la suppression d'enregistrements—plus intuitives activation de l'application admin allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez votre compte admin en entrant vos identifiants cela configurera également les rôles (par exemple, b4aadminuser ) et les classes système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos données facilement tableau de bord de l'application admin effectuer des tâches crud via l'application admin dans l'application admin, vous pouvez insérer de nouveaux enregistrements utilisez le bouton “ajouter un enregistrement” dans une collection (comme articles) pour créer de nouvelles entrées inspecter et modifier des enregistrements cliquez sur n'importe quel enregistrement pour voir ses détails et apporter des modifications supprimer des enregistrements supprimez tous les enregistrements qui ne sont plus nécessaires cette interface intuitive améliore considérablement votre expérience de gestion des données étape 4 – connecter votre application remix js avec back4app maintenant que votre backend est configuré, il est temps d'intégrer votre application remix js avec back4app utilisation des appels api rest dans remix js puisque le sdk parse n'est généralement pas utilisé avec remix js, vous effectuerez des opérations crud via des requêtes api rest 1\ configuration de votre projet remix js si ce n'est pas déjà fait, créez un nouveau projet remix npx create remix\@latest suivez les instructions pour choisir votre cible de déploiement 2\ faire des requêtes api depuis remix créez des fichiers de route api sous le app/routes répertoire pour gérer les opérations crud par exemple, vous pourriez avoir un fichier appelé items server js qui inclut des fonctions pour récupérer, créer, mettre à jour et supprimer des éléments exemple récupération d'éléments // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } de même, vous pouvez créer des routes post, put et delete pour gérer la création, les mises à jour et les suppressions d'éléments 3\ connecter les composants ui dans vos composants remix, vous pouvez utiliser des hooks comme useloaderdata pour récupérer des données et fetch des api ou des fonctions d'action pour renvoyer des données à back4app par exemple, dans votre composant react // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } intégrez des appels api similaires pour les opérations de mise à jour et de suppression dans vos actions remix étape 5 – sécuriser votre backend mise en œuvre des listes de contrôle d'accès (acl) renforcez la sécurité des données en définissant des acl pour vos objets par exemple, pour créer un article qui n'est accessible que par son créateur // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { const response = await fetch("https //parseapi back4app com/classes/items", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } permissions au niveau de la classe (clp) ajustez les clp dans votre tableau de bord back4app pour appliquer des politiques de sécurité par défaut, garantissant que seuls les utilisateurs authentifiés peuvent accéder à des collections spécifiques étape 6 – ajout de l'authentification des utilisateurs configuration de la gestion des utilisateurs back4app utilise la classe utilisateur intégrée de parse pour gérer l'authentification dans votre application remix, gérez l'enregistrement et la connexion des utilisateurs à l'aide d'appels api exemple point de terminaison d'enregistrement d'utilisateur // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); const response = await fetch("https //parseapi back4app com/users", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", }, body json stringify({ username, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } implémentez des points de terminaison similaires pour la connexion, la gestion des sessions et la réinitialisation des mots de passe étape 7 – déploiement de votre application remix js back4app prend en charge le déploiement sans faille vous pouvez déployer votre application remix js en utilisant diverses stratégies, y compris docker 7 1 construction de votre application remix js compiler et regrouper utilisez votre gestionnaire de paquets et vos scripts de construction (par exemple, via npm run build ) pour compiler votre application vérifier la sortie assurez vous que la sortie de votre construction contient tous les fichiers nécessaires 7 2 exemple de structure de projet un projet remix js typique peut ressembler à basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 construction de votre application remix js 7 3 dockeriser votre application si vous choisissez la conteneurisation, ajoutez un dockerfile à la racine de votre projet \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 déploiement via le déploiement web back4app connectez votre dépôt hébergez votre code source remix js sur github configurer le déploiement dans votre tableau de bord back4app, sélectionnez la fonctionnalité de déploiement web , liez votre dépôt (par exemple, basic crud app remix ), et choisissez la bonne branche définir les commandes de construction et de sortie spécifiez votre commande de construction (comme npm run build ) et le répertoire de sortie déployez votre application cliquez sur déployer et surveillez les journaux jusqu'à ce que votre application soit en ligne étape 8 – conclusion et orientations futures bien joué ! vous avez maintenant construit une application crud en utilisant remix js intégré avec back4app dans ce guide, vous avez configuré un projet appelé basic crud app remix , défini des collections pour les articles et les utilisateurs, et géré les données via l'application d'administration back4app vous avez ensuite connecté votre application remix js à back4app via des appels api rest, et mis en œuvre des mesures d'authentification sécurisée des utilisateurs et de protection des données prochaines étapes améliorez votre application envisagez d'ajouter plus de fonctionnalités comme la recherche, des vues détaillées des articles ou des mises à jour en temps réel élargissez les capacités du backend explorez les fonctions cloud, les intégrations d'api externes ou un contrôle d'accès plus avancé continuez à apprendre visitez la documentation de back4app https //www back4app com/docs et explorez d'autres tutoriels remix js pour optimiser davantage votre application bonne programmation et meilleurs vœux pour votre parcours avec remix js !