Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

aperçu ce guide vous montrera comment construire une application crud (créer, lire, mettre à jour, supprimer) complète en utilisant inferno js vous apprendrez à gérer des opérations de données fondamentales en développant un système crud qui manipule et met à jour efficacement les informations notre fondation backend est alimentée par back4app, où vous établirez un projet nommé basic crud app infernojs pour gérer vos données sans effort vous commencerez par configurer votre projet back4app et concevoir un schéma de base de données évolutif en définissant des classes et des champs—soit manuellement, soit avec l'assistant ai de back4app ce processus garantit que vos structures de données sont suffisamment robustes pour toutes les tâches crud ensuite, vous utiliserez l'interface admin de back4app, un outil de glisser déposer sans code qui rend la gestion des données simple enfin, vous lier votre frontend inferno js avec back4app en utilisant soit le sdk (si cela convient à votre configuration) soit via des appels api, tout en appliquant des contrôles d'accès stricts pour la sécurité à la fin de ce tutoriel, vous aurez une application web de niveau production avec authentification des utilisateurs, gestion dynamique des données et une interface réactive aperçus principaux maîtrisez les fonctionnalités crud avec un backend robuste sur back4app comprenez comment architecturer un schéma de base de données évolutif et l'intégrer avec votre frontend inferno js explorez un outil de gestion visuelle pour exécuter facilement des opérations de création, de lecture, de mise à jour et de suppression apprenez les stratégies de déploiement, y compris la conteneurisation avec docker exigences un compte back4app et un projet nouvellement créé si vous avez besoin d'aide, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app une configuration de développement inferno js utilisez votre starter ou boilerplate inferno préféré confirmez que node js (version 14 ou plus récente) est installé une compréhension de base de javascript, inferno js et des principes de l'api rest pour plus de détails, consultez la documentation d'inferno https //infernojs org/docs/introduction avant de plonger, veuillez vous assurer que vous avez étape 1 – initialiser votre projet lancer un nouveau projet back4app connectez vous à votre compte back4app sélectionnez l'option “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app infernojs et suivez les étapes à l'écran pour compléter la création créer un nouveau projet après la création, votre projet apparaît dans votre tableau de bord, fournissant une plateforme backend solide pour votre application étape 2 – élaboration du schéma de base de données définir votre modèle de données pour cette application crud, vous allez établir plusieurs classes ci dessous, des exemples de deux classes essentielles avec leurs champs, configurés pour prendre en charge les opérations crud 1\ la classe des articles champ type détails id identifiant d'objet clé primaire générée automatiquement titre chaîne le titre de l'article description chaîne une brève explication de l'élément créé à date horodatage marquant quand l'élément a été créé mis à jour le date horodatage de la mise à jour la plus récente 2\ la classe des utilisateurs champ type détails id identifiant d'objet clé primaire générée 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 une authentification sécurisée créé à date horodatage de la création du compte mis à jour le date horodatage de la dernière mise à jour du compte créez manuellement ces classes sur le tableau de bord back4app en sélectionnant « nouvelle classe » et en ajoutant les colonnes nécessaires créer une nouvelle classe vous pouvez définir chaque champ en sélectionnant un type de données, en fournissant un nom et en définissant des valeurs par défaut ou des exigences créer une colonne exploiter l'assistant ai de back4app pour la configuration du schéma l'assistant ai de back4app simplifie la création de schémas en générant automatiquement des classes en fonction de vos descriptions comment utiliser l'assistant ai accéder à l'assistant ai connectez vous à votre tableau de bord back4app et localisez l'assistant ai dans les paramètres détailler votre modèle de données entrez une description complète des classes et des champs dont vous avez besoin réviser et mettre en œuvre l'assistant proposera des définitions de classes confirmez et appliquez ces paramètres exemple de prompt create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) utiliser l'assistant ai rationalise votre configuration, garantissant cohérence et efficacité étape 3 – activation de l'interface administrateur et des fonctions crud présentation de l'interface administrateur l'interface administrateur de back4app est un outil puissant sans code qui offre une expérience de glisser déposer pour gérer votre backend elle vous permet d'exécuter facilement des opérations crud activation de l'interface administrateur allez dans la section “plus” de votre tableau de bord back4app cliquez sur “admin app” puis appuyez sur “activer l'application admin ” configurez votre compte administrateur en créant votre utilisateur administrateur initial ce processus configure automatiquement les rôles et les classes système essentielles activer l'application admin après l'activation, connectez vous à l'interface administrateur pour gérer vos données tableau de bord de l'application admin effectuer des opérations crud via l'interface administrateur dans l'interface administrateur, vous pouvez créer des entrées utilisez l'option « ajouter un enregistrement » dans une classe (comme articles) pour insérer de nouvelles données lire/modifier des entrées cliquez sur n'importe quel enregistrement pour voir ou mettre à jour ses détails supprimer des entrées utilisez la fonction de suppression pour effacer les enregistrements indésirables cette interface améliore considérablement l'utilisabilité en simplifiant toutes les tâches crud étape 4 – connecter inferno js avec back4app avec votre backend configuré via l'interface admin, il est temps d'intégrer votre frontend inferno js option a utiliser le sdk parse installez le sdk parse npm install parse initialisez parse dans votre application inferno créez un fichier de configuration (par exemple, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insérez vos identifiants back4app ici parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implémentez parse dans un composant inferno par exemple, construisez un composant pour récupérer et lister des éléments // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("erreur lors du chargement des éléments ", err); } } render() { return ( \<div> \<h2>éléments\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; option b utilisation des api rest ou graphql si le sdk parse n'est pas idéal pour votre scénario, vous pouvez exécuter des actions crud via rest ou graphql par exemple, pour récupérer des éléments avec rest // rest api call to retrieve items const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); intégrez ces appels api dans vos composants inferno selon les besoins étape 5 – renforcer votre backend mise en œuvre des listes de contrôle d'accès (acl) assurez la sécurité des données en attribuant des acl par exemple, pour générer un élément privé async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } configuration des autorisations au niveau de la classe (clp) dans votre tableau de bord back4app, ajustez les clp pour chaque classe afin d'appliquer des politiques d'accès par défaut, garantissant que seuls les utilisateurs autorisés peuvent interagir avec des données sensibles étape 6 – gestion de l'authentification des utilisateurs établissement des comptes utilisateurs back4app utilise la classe utilisateur (via parse) pour gérer l'authentification dans votre application inferno js, implémentez des fonctions d'enregistrement et de connexion comme illustré ci dessous // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } une stratégie similaire s'applique pour la connexion et la gestion des sessions des fonctionnalités supplémentaires comme l'authentification sociale, la vérification par email et la récupération de mot de passe peuvent être configurées dans le tableau de bord back4app étape 7 – déployer votre frontend inferno js l'option de déploiement web de back4app vous permet d'héberger votre frontend inferno js sans effort en liant votre dépôt github 7 1 construire pour la production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction de production npm run build cette commande compile votre application dans un dossier de construction contenant des ressources statiques optimisées confirmer la construction vérifiez que le dossier de construction comprend un fichier index html et d'autres dossiers de ressources 7 2 organisation et téléchargement de votre code votre dépôt doit inclure la source complète de votre frontend inferno js un exemple de structure de répertoire basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md fichiers d'exemple src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; pousser votre code sur github initialiser git dans votre dossier de projet git init mettez vos fichiers en scène git add validez vos modifications git commit m "commit initial pour le frontend inferno js" créez un dépôt github nommez le basic crud app infernojs frontend poussez votre projet git remote add origin https //github com/votre nom utilisateur/basic crud app infernojs frontend git git push u origin main 7 3 connexion de github avec le déploiement web de back4app allez au déploiement web connectez vous à back4app, sélectionnez votre projet ( basic crud app infernojs ), et cliquez sur la fonctionnalité déploiement web intégrer avec github suivez les instructions pour lier votre compte github, permettant à back4app d'accéder à votre dépôt choisissez votre dépôt et votre branche choisissez le dépôt (par exemple, basic crud app infernojs frontend ) et la branche (généralement main ) qui contient votre code 7 4 paramètres de déploiement entrez des configurations supplémentaires commande de construction si votre dépôt n'a pas de dossier de construction , spécifiez une commande comme npm run build back4app exécutera cela lors du déploiement dossier de sortie définissez la sortie sur build afin que back4app sache où se trouvent vos fichiers statiques variables d'environnement ajoutez toutes les variables nécessaires (comme les clés api) dans les paramètres de configuration 7 5 dockeriser votre application si vous optez pour la conteneurisation, incluez un dockerfile dans votre dépôt similaire à \# use an official node image for the build stage from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] sélectionnez le déploiement docker dans back4app si vous choisissez cette méthode 7 6 lancement de votre application cliquez sur déployer une fois tous les paramètres configurés, appuyez sur le bouton déployer regardez la construction back4app va récupérer votre code, construire votre projet et le déployer dans un conteneur accédez à votre application après le déploiement, back4app fournit une url où votre application inferno js est en ligne 7 7 confirmation du déploiement visitez l'url fournie ouvrez l'url dans votre navigateur tester la fonctionnalité assurez vous que l'application se charge, que toutes les routes fonctionnent correctement et que les ressources (css, js, images) s'affichent comme prévu déboguer utilisez les outils de développement pour inspecter les erreurs si des problèmes apparaissent, vérifiez les journaux de back4app et vérifiez les paramètres de github étape 8 – conclusion et orientations futures félicitations ! vous avez créé une application crud complète avec inferno js et back4app vous avez configuré le projet basic crud app infernojs , conçu vos classes de données et utilisé l'interface d'administration intuitive pour la gestion des données votre frontend est maintenant connecté et sécurisé avec des contrôles d'accès robustes prochaines étapes améliorez l'interface utilisateur développez votre application inferno js avec des vues détaillées, des capacités de recherche et des notifications en direct ajoutez plus de fonctionnalités envisagez d'implémenter des fonctions backend supplémentaires (comme le cloud code), d'intégrer des api tierces ou d'introduire un accès basé sur les rôles explorez davantage plongez dans la documentation de back4app https //www back4app com/docs et des tutoriels supplémentaires pour l'optimisation des performances et les intégrations personnalisées bonne programmation et bonne chance pour vos futurs projets !