Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

aperçu ce guide vous accompagne dans la création d'une application crud (créer, lire, mettre à jour et supprimer) en utilisant mithril js tout au long de ce tutoriel, vous apprendrez à configurer un projet back4app intitulé basic crud app mithriljs pour servir de puissant backend à votre application web nous concevrons un schéma de données efficace, le gérerons via le panneau d'administration de back4app, et intégrerons votre frontend mithril js en utilisant des appels api rest ce que vous apprendrez comment mettre en place un système crud qui gère de manière fiable les données en utilisant un backend robuste stratégies pour construire un design de base de données évolutif et le lier à une application mithril js utilisation de l'interface d'administration intuitive par glisser déposer de back4app pour effectuer des actions crud méthodes de déploiement, y compris la conteneurisation docker, pour mettre votre application en ligne rapidement exigences avant de commencer, veuillez confirmer que vous avez un compte back4app et un projet actif pour assistance, référez vous à commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement mithril js vous pouvez inclure mithril via npm ou un cdn assurez vous d'avoir node js (v14+) installé des connaissances fondamentales en javascript, mithril js et apis restful pour des conseils supplémentaires, consultez la documentation de mithril js https //mithril js org/ étape 1 – initialiser votre projet configurer un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le nouveau app bouton depuis votre tableau de bord fournissez le nom du projet basic crud app mithriljs et suivez les étapes guidées créer un nouveau projet une fois configuré, votre projet sera listé sur votre tableau de bord, servant de hub backend pour votre application étape 2 – élaboration de votre schéma de base de données construction du modèle de données pour cette application crud, vous allez concevoir quelques collections clés ci dessous se trouve un aperçu pour créer des collections avec leurs champs respectifs afin de gérer efficacement les opérations crud 1\ collection d'articles cette collection contient les détails de chaque article champ type but id identifiant d'objet identifiant unique généré automatiquement titre chaîne nom ou titre de l'élément description chaîne résumé bref sur l'article créé à date horodatage de création mis à jour le date horodatage de la dernière mise à jour 2\ collection des utilisateurs cette collection gère les profils d'utilisateur et les détails d'authentification champ type but id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom unique de l'utilisateur email chaîne adresse e mail unique de l'utilisateur hash de mot de passe chaîne mot de passe haché pour une authentification sécurisée créé à date horodatage lorsque l'utilisateur a été enregistré mis à jour le date horodatage pour toute modification vous pouvez ajouter manuellement ces collections et champs via le tableau de bord back4app en créant de nouvelles classes et en définissant chaque colonne en conséquence créer une nouvelle classe pour ajouter des champs, il suffit de sélectionner le type de données approprié, de fournir un nom, de définir des valeurs par défaut et de marquer si c'est requis créer une colonne exploitation de l'agent ia de back4app pour l'automatisation des schémas l'agent ia intégré sur back4app simplifie la création de schémas en générant automatiquement vos collections en fonction d'une invite fournie comment utiliser l'agent ia accédez à l'agent ia depuis le tableau de bord de votre projet décrivez votre schéma souhaité en détaillant les collections et les champs examinez le schéma généré et appliquez les modifications exemple d'invite create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) cet outil aide à garantir que la conception de votre base de données est à la fois cohérente et optimale pour gérer les opérations crud étape 3 – activation de l'interface d'administration et des fonctionnalités crud aperçu de l'interface d'administration l'interface d'administration back4app est une solution sans code conçue pour vous aider à gérer vos données backend sans effort son design par glisser déposer rend l'exécution des opérations crud très facile comment activer l'interface d'administration allez dans la section plus de votre tableau de bord back4app cliquez sur admin app puis sélectionnez activer l'application admin configurez vos identifiants d'administrateur pour créer votre premier utilisateur administrateur ce processus configure également les rôles (comme b4aadminuser ) et les collections système activer l'application admin après activation, connectez vous à l'interface d'administration pour gérer vos collections tableau de bord de l'application admin effectuer des opérations crud via l'interface d'administration ajouter de nouveaux enregistrements utilisez l'option “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer des entrées voir/modifier des enregistrements cliquez sur un enregistrement pour inspecter les détails ou modifier ses champs supprimer des enregistrements utilisez la fonction de suppression pour effacer les entrées obsolètes cette interface intuitive améliore l'expérience utilisateur en simplifiant les actions crud de routine étape 4 – lier mithril js avec back4app avec votre backend prêt et géré via l'interface d'administration, il est temps de connecter votre frontend mithril js à back4app en utilisant des appels api rest utilisation des appels api rest avec mithril js nous allons nous appuyer sur des appels api rest pour interagir avec votre backend back4app exemple récupération et affichage des articles créez un composant mithril qui récupère des articles de la collection articles // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; ce composant utilise la méthode de cycle de vie de mithril oninit pour charger les données lorsque le composant est initialisé exemple ajouter un nouvel élément vous pouvez intégrer un formulaire pour envoyer une requête post afin d'ajouter de nouveaux éléments // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; vous pouvez également implémenter des opérations de mise à jour et de suppression en utilisant les méthodes http correspondantes (put/patch pour les mises à jour et delete pour les suppressions) étape 5 – améliorer la sécurité du backend mise en œuvre des contrôles d'accès sécurisez vos données en appliquant des listes de contrôle d'accès (acl) à chaque objet par exemple, pour créer un élément que seul le propriétaire peut modifier async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } définir les autorisations au niveau de la classe (clp) dans votre tableau de bord back4app, ajustez les clp pour chaque collection afin de définir des politiques de sécurité par défaut cela garantit que seuls les utilisateurs autorisés ont accès à des informations sensibles étape 6 – configuration de l'authentification des utilisateurs configuration des comptes utilisateurs back4app utilise la classe utilisateur de parse pour gérer l'authentification avec mithril js, vous pouvez gérer l'inscription et la connexion via des appels d'api rest voici un exemple pour l'inscription d'un utilisateur // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; vous pouvez adopter une méthode similaire pour vous connecter et gérer les sessions étape 7 – déployer votre frontend mithril js la fonctionnalité de déploiement web de back4app vous permet d’héberger votre application mithril js sans effort en liant votre dépôt github 7 1 construire la version de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction npm run build cela générera un build dossier contenant des fichiers statiques optimisés 7 2 organisation et engagement de votre code votre dépôt devrait avoir une structure similaire à basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md exemple src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); s'engager et pousser sur github initialiser git (si ce n'est pas déjà fait) git init ajouter vos fichiers git add engager les modifications git commit m "initial commit of mithril js frontend" créer un dépôt sur github (par exemple, basic crud app mithriljs frontend ) et pousser votre code git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 lier github avec le déploiement web connectez vous à votre tableau de bord back4app, naviguez vers votre projet ( basic crud app mithriljs ), et sélectionnez déploiement web connectez votre compte github en suivant les instructions à l'écran choisissez votre dépôt et votre branche (par exemple, main ) qui contient votre code source mithril js 7 4 configuration des déploiements configurer commande de construction spécifiez npm run build si le dossier de construction n'est pas présent répertoire de sortie définissez ceci sur build pour pointer vers vos actifs statiques variables d'environnement ajoutez toutes les clés api ou paramètres nécessaires 7 5 dockeriser votre application (optionnel) si vous préférez la conteneurisation, incluez un dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 déployer votre application appuyez sur le déployer bouton dans votre section de déploiement web back4app surveillez le processus de construction pendant que back4app tire, construit et déploie votre application une fois terminé, vous recevrez une url pour votre application mithril js en direct 7 7 vérification du déploiement ouvrez l'url fournie dans votre navigateur confirmez que votre application se charge, que les navigations fonctionnent et que les ressources sont servies correctement utilisez les outils de développement du navigateur pour le dépannage si nécessaire étape 8 – conclusion et orientations futures bien joué ! vous avez réussi à créer une application crud de base avec mithril js intégrée à back4app vous avez configuré un projet appelé basic crud app mithriljs , défini votre schéma de base de données pour les éléments et les utilisateurs, et géré votre backend via l'interface d'administration de plus, vous avez connecté votre frontend mithril js en utilisant des appels d'api rest et appliqué des mesures de sécurité pour protéger vos données quelles sont les prochaines étapes ? améliorer le frontend ajoutez des fonctionnalités comme des vues détaillées, des capacités de recherche ou des mises à jour en temps réel étendre les fonctions backend explorez les fonctions cloud, les intégrations api supplémentaires ou les autorisations basées sur les rôles en savoir plus plongez plus profondément dans la documentation de back4app https //www back4app com/docs et les guides de mithril js pour des améliorations avancées bonne programmation et bonne chance avec votre projet !