Comment créer une application CRUD de base avec Marionette.js : Un guide étape par étape

introduction dans ce guide, vous apprendrez à créer une application crud complète (créer, lire, mettre à jour, supprimer) en utilisant marionette js ce tutoriel vous montre comment configurer une application qui gère les opérations de données de manière efficace nous commencerons par configurer un projet back4app appelé basic crud app marionettejs , qui sert de puissant backend pour votre application après avoir configuré votre projet, vous concevrez un schéma de base de données flexible en définissant des collections et des champs—soit manuellement, soit avec l'aide de l'agent ia de back4app cette approche garantit que votre backend est bien organisé et capable de gérer les opérations crud de manière fiable ensuite, vous utiliserez l'application admin de back4app—une interface de glisser déposer—pour gérer vos collections sans effort, vous permettant d'effectuer des opérations de création, de lecture, de mise à jour et de suppression avec aisance enfin, vous intégrerez votre frontend marionette js avec back4app en utilisant rest/graphql (ou le sdk parse, si applicable), tout en veillant à ce que votre backend reste sécurisé avec des contrôles d'accès avancés à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production qui prend en charge les opérations crud ainsi que l'authentification des utilisateurs et la gestion sécurisée des données points clés à retenir construire des applications crud qui gèrent efficacement les données en utilisant un backend robuste obtenez des informations sur la création d'un backend évolutif et sa connexion à un frontend marionette js apprenez à utiliser une interface de gestion sans code (back4app admin app) pour simplifier les opérations de données comprendre les techniques de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application prérequis avant de commencer, veuillez vous assurer que vous avez ce qui suit un compte back4app avec un nouveau projet configuré pour des conseils, voir commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement marionette js vous pouvez utiliser un modèle ou un kit de démarrage pour marionette js assurez vous que node js (version 14 ou supérieure) est installé une compréhension de base de javascript, marionette js et des api rest consultez la documentation de marionette js https //marionettejs com/docs/master/ pour plus de détails étape 1 – configuration du projet création d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” sur votre tableau de bord nommez votre projet basic crud app marionettejs et complétez les invites créer un nouveau projet après avoir créé le projet, il apparaîtra sur votre tableau de bord, fournissant la base pour la configuration et la gestion du backend étape 2 – concevoir votre schéma de base de données création de votre modèle de données pour cette application crud, vous définirez plusieurs collections voici des exemples de collections que vous pourriez créer, y compris les champs et les types de données qui alimenteront votre base de données 1\ collection d'articles cette collection contient les détails de chaque article champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne nom de l'article description chaîne un court résumé sur l'article créé à date horodatage de la création de l'élément mis à jour le date horodatage de la dernière mise à jour 2\ collection des utilisateurs cette collection stocke les identifiants et les détails de profil des utilisateurs champ type de données description 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 hash de mot de passe chaîne mot de passe crypté pour l'authentification de l'utilisateur créé à date horodatage de la création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez ajouter manuellement ces collections sur le tableau de bord back4app en créant une nouvelle classe pour chacune et en définissant leurs champs respectifs créer une nouvelle classe vous pouvez créer des champs en sélectionnant un type de données, en fournissant un nom, en définissant des valeurs par défaut et en les marquant comme requis si nécessaire créer une colonne utilisation de l'agent ai back4app pour la création de schémas l'agent ai back4app simplifie la création de schémas en générant des collections et des champs à partir d'un prompt descriptif comment utiliser l'agent ai lancez l'agent ai accédez y via le menu de votre tableau de bord back4app ou les paramètres du projet décrivez votre modèle de données collez un prompt détaillé décrivant les collections et les champs dont vous avez besoin examinez et confirmez examinez le schéma suggéré et appliquez le à votre projet exemple de prompt create these 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) cette méthode permet de gagner du temps et garantit la cohérence de votre schéma de base de données étape 3 – activation de l'application admin et réalisation des opérations crud aperçu de l'application admin l'application admin back4app offre une interface sans code, par glisser déposer, pour gérer vos données backend elle simplifie les opérations crud telles que la création, la lecture, la mise à jour et la suppression d'enregistrements activation de l'application admin ouvrez le menu “plus” sur 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 administrateur, ce qui configure également des rôles par défaut comme b4aadminuser activer l'application admin après activation, connectez vous à l'application admin pour gérer vos collections tableau de bord de l'application admin utilisation de l'application admin pour les tâches crud créer des enregistrements utilisez le bouton “ajouter un enregistrement” pour insérer de nouvelles entrées dans une collection lire/mettre à jour des enregistrements cliquez sur un enregistrement pour voir ou modifier ses détails supprimer des enregistrements supprimez les enregistrements obsolètes en utilisant l'option de suppression cette interface intuitive améliore l'interaction des utilisateurs en simplifiant la gestion des données étape 4 – connecter marionette js avec back4app avec votre backend configuré et géré via l'application admin, l'étape suivante consiste à intégrer votre frontend marionette js avec back4app option a utiliser le sdk parse (si applicable) installer le sdk parse npm install parse initialiser parse dans votre application marionette js créer un fichier de configuration (par exemple, app/parseconfig js ) // app/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; intégrer parse dans une vue marionette par exemple, créez une vue pour récupérer et afficher des éléments // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>éléments\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("erreur lors de la récupération des éléments ", error); } }, serializedata() { return { items this items }; } }); option b utiliser rest ou graphql si le sdk parse n'est pas une option, vous pouvez interagir avec back4app en utilisant des appels rest ou graphql par exemple, pour récupérer des éléments via rest // example rest call to retrieve items async function fetchitems() { 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); incorporez ces appels d'api dans vos vues ou contrôleurs marionette js selon les besoins étape 5 – sécuriser votre backend configuration des listes de contrôle d'accès (acl) sécurisez vos données en définissant des acl sur les objets par exemple, pour créer un élément accessible uniquement à son propriétaire async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } définir les autorisations au niveau de la classe (clp) dans le tableau de bord back4app, configurez les clp pour chaque collection afin d'appliquer des règles d'accès par défaut, garantissant que seuls les utilisateurs autorisés peuvent accéder aux données sensibles étape 6 – authentification des utilisateurs création de comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre application marionette js, gérez l'enregistrement et la connexion des utilisateurs comme indiqué ci dessous // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); un modèle similaire peut être suivi pour la connexion et la gestion des sessions des fonctionnalités supplémentaires telles que la connexion sociale ou la réinitialisation de mot de passe peuvent être configurées via le tableau de bord back4app étape 7 – déployer votre frontend marionette js avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre frontend marionette js sans effort en liant votre dépôt github 7 1 – construire votre version de production naviguez vers votre répertoire de projet dans un terminal exécutez la commande de construction npm run build cela génère un dossier de construction contenant des fichiers statiques optimisés (html, js, css, images) confirmez la construction assurez vous que le dossier de construction contient un fichier index html ainsi que les actifs requis 7 2 – organiser et télécharger votre code source votre dépôt doit contenir tout le code source de votre frontend marionette js un exemple de structure de fichiers est basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md exemple de fichier de configuration app/parseconfig js // app/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; exemple de fichier d'application app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); s'engager sur github initialiser un dépôt git (si ce n'est pas déjà fait) git init mettez vos fichiers en scène git add engagez vos modifications git commit m "engagement initial pour le frontend marionette js" créez un dépôt sur github (par exemple, basic crud app marionettejs frontend ) poussez votre code git remote add origin https //github com/votre nom utilisateur/basic crud app marionettejs frontend git git push u origin main 7 3 – intégrer votre dépôt avec le déploiement web accéder au déploiement web dans votre tableau de bord back4app, sélectionnez votre projet (basic crud app marionettejs) et cliquez sur déploiement web connectez vous à github suivez les instructions pour lier votre compte github afin que back4app puisse accéder à votre dépôt sélectionnez le dépôt et la branche choisissez le dépôt (par exemple, basic crud app marionettejs frontend ) et la branche (par exemple, main ) qui contient votre code 7 4 – configurer votre déploiement spécifiez des paramètres supplémentaires commande de construction si un dossier de construction pré construit est manquant, définissez la commande de construction (par exemple, npm run build ) back4app exécutera cela lors du déploiement répertoire de sortie indiquez build comme le dossier contenant vos fichiers statiques variables d'environnement fournissez toutes les variables d'environnement nécessaires (comme les clés api) dans les paramètres de déploiement 7 5 – dockeriser votre application marionette js si vous préférez docker pour le déploiement, conteneurisez votre application en incluant un dockerfile dans votre dépôt \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configurez le déploiement web pour utiliser l'option docker si désiré 7 6 – déployer votre application cliquez sur le bouton déployer finalisez vos paramètres de déploiement et cliquez sur déployer surveillez la construction back4app va récupérer votre code github, exécuter la commande de construction et déployer votre conteneur obtenez votre url une fois déployé, back4app fournira une url où votre application marionette js est hébergée 7 7 – vérifier votre déploiement visitez l'url fournie ouvrez l'url de déploiement dans votre navigateur testez l'application assurez vous que l'application se charge correctement et que toutes les fonctionnalités (routes, actifs) sont opérationnelles déboguez si nécessaire utilisez les outils de développement du navigateur et vérifiez les journaux de déploiement sur back4app si des problèmes surviennent étape 8 – conclusion et prochaines étapes bien joué ! vous avez réussi à créer une application crud en utilisant marionette js et back4app vous avez configuré un projet nommé basic crud app marionettejs , créé des collections de base de données détaillées pour les articles et les utilisateurs, et géré vos données via l'admin app vous avez également connecté votre frontend marionette js à votre backend et mis en œuvre des mesures de sécurité solides améliorations futures affinez votre frontend ajoutez des fonctionnalités comme des vues détaillées, des capacités de recherche et des mises à jour en temps réel élargissez la fonctionnalité du backend envisagez d'intégrer des fonctions cloud, des api tierces ou des contrôles d'accès avancés basés sur les rôles apprentissage supplémentaire explorez des ressources supplémentaires dans la documentation back4app https //www back4app com/docs pour des optimisations et intégrations plus avancées en suivant ce tutoriel, vous possédez maintenant les connaissances nécessaires pour créer une application crud robuste et évolutive en utilisant marionette js et back4app bon codage !