Comment créer une application CRUD avec Backbone ?

introduction dans ce guide, vous apprendrez à créer une application crud fonctionnelle (créer, lire, mettre à jour, supprimer) en utilisant backbone js ce guide vous aidera à comprendre les opérations de base d'une application web en vous montrant comment construire un système crud qui manipule et gère efficacement les données vous commencerez par configurer un projet back4app intitulé basic crud app backbone pour servir de backend fiable pour votre application après cela, vous concevrez un schéma de base de données flexible en définissant des collections et des champs spécifiques—soit manuellement, soit avec l'aide de l'agent ia de back4app ce processus garantit que votre structure de données est adaptée pour des interactions crud sans faille ensuite, vous utiliserez l'application admin de back4app, qui dispose d'une interface de glisser déposer, pour gérer facilement vos collections de données cet outil simplifie les opérations crud, rendant la gestion des données backend simple enfin, vous connecterez votre frontend backbone js à back4app en utilisant l'api rest et le guide repose sur des appels api standard pour interagir avec votre backend vous apprendrez également à sécuriser vos données avec des contrôles d'accès robustes à la fin de ce tutoriel, vous aurez construit une application web prête pour la production qui prend en charge les fonctionnalités crud et inclut l'authentification des utilisateurs ainsi que des fonctionnalités avancées de gestion des données principaux enseignements maîtrisez l'art de créer des applications crud qui gèrent les données efficacement en utilisant un service backend fiable découvrez des stratégies pour créer un design de base de données évolutif et l'intégrer avec un frontend backbone js apprenez à utiliser les fonctionnalités de glisser déposer de l'application admin back4app pour simplifier les tâches de création, de lecture, de mise à jour et de suppression familiarisez vous avec les méthodes de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application prérequis avant de plonger, assurez vous d'avoir un compte back4app et un projet actif référez vous à commencer avec back4app https //www back4app com/docs/get started/new parse app si vous avez besoin d'aide une configuration de développement backbone js vous pouvez inclure backbone js via un gestionnaire de paquets comme npm ou en le liant directement depuis un cdn une compréhension de base de javascript, backbone js et des api restful consultez la documentation de backbone js https //backbonejs org/#getting started pour un rappel si nécessaire étape 1 – initialisation du projet création de votre projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app backbone et suivez les instructions pour le configurer créer un nouveau projet une fois votre projet créé, il sera visible sur votre tableau de bord, prêt à être configuré comme votre backend pour l'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 configurer plusieurs collections ci dessous se trouvent des collections d'exemple avec les champs et types dont vous avez besoin pour établir votre schéma, garantissant que votre application peut effectuer toutes les opérations crud 1\ collection d'articles cette collection contiendra des détails pour chaque article champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne nom ou titre de l'élément description chaîne un bref aperçu de l'article créé à date horodatage indiquant quand l'élément a été ajouté mis à jour le date horodatage de la mise à jour la plus récente 2\ collection des utilisateurs cette collection stocke les détails des utilisateurs et les informations d'authentification 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 de l'utilisateur hash de mot de passe chaîne mot de passe haché en toute sécurité créé à date horodatage de création du compte mis à jour le date dernière date de modification des données utilisateur vous pouvez créer ces collections manuellement via le tableau de bord back4app en ajoutant une nouvelle classe pour chaque collection et en configurant les champs correspondants créer une nouvelle classe il suffit de choisir un type de données, de définir le nom du champ, de fournir une valeur par défaut si nécessaire et de marquer le champ comme requis créer une colonne exploiter l'agent ai de back4app pour la création de schémas l'agent ai de back4app est un outil pratique dans votre tableau de bord qui aide à automatiser la création de schémas de base de données en saisissant une invite descriptive pour vos collections et champs souhaités, l'agent ai peut rapidement générer la structure de base de données nécessaire, vous faisant gagner du temps et garantissant la cohérence comment utiliser l'agent ai accéder à l'agent ai connectez vous à votre tableau de bord back4app et localisez l'agent ai dans la navigation ou les paramètres du projet détailler votre modèle de données saisissez une invite qui décrit les collections et les champs dont vous avez besoin examiner et mettre en œuvre évaluez le schéma suggéré et appliquez les modifications à votre projet exemple d'invite create the following collections for 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) l'utilisation de l'agent ai garantit que votre schéma est correctement structuré pour les besoins de votre application étape 3 – activation de l'application admin et gestion des opérations crud présentation de l'application admin l'application admin de back4app est une interface sans code qui vous permet de gérer efficacement vos données backend son design intuitif par glisser déposer rend l'exécution des opérations crud telles que l'ajout, la visualisation, la modification et la suppression d'enregistrements incroyablement simple activation de l'application admin ouvrez le menu “plus” depuis votre tableau de bord back4app sélectionnez “admin app” puis choisissez “activer l'application admin ” configurez vos identifiants d'administrateur en créant le compte administrateur initial cette étape établit également des rôles (comme b4aadminuser ) et des collections système activer l'application admin après l'activation, connectez vous à l'application admin pour gérer vos données sans effort tableau de bord de l'application admin gestion des opérations crud à l'aide de l'application admin dans l'application admin, vous pouvez ajouter de nouvelles entrées utilisez l'option “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir/modifier des enregistrements cliquez sur un enregistrement pour inspecter ou modifier ses détails supprimer des enregistrements utilisez la fonction de suppression pour éliminer les données indésirables cette interface améliore l'expérience utilisateur en rationalisant toutes les tâches de gestion des données étape 4 – connecter backbone js avec back4app maintenant que votre backend est configuré, il est temps d'intégrer votre frontend backbone js avec back4app utiliser backbone js avec des appels api rest puisque le sdk parse n'est pas adapté pour backbone js, vous utiliserez les modèles, collections et vues intégrés de backbone en tandem avec des appels api rest pour interagir avec back4app configuration de vos modèles et collections backbone commencez par définir un modèle pour vos éléments et une collection correspondante par exemple // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; création d'une vue backbone pour les interactions crud créez une vue pour afficher la liste des éléments et gérer les actions des utilisateurs telles que l'ajout, la modification et la suppression // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; cette vue récupère des éléments de back4app en utilisant l'api rest et vous permet d'ajouter, de modifier et de supprimer des enregistrements étape 5 – sécuriser votre backend mise en œuvre des listes de contrôle d'accès (acl) protégez vos données en définissant des acl sur vos objets par exemple, pour restreindre l'accès d'un élément uniquement à son créateur function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } configuration des autorisations au niveau de la classe (clp) dans votre tableau de bord back4app, configurez des clp pour chaque collection afin de garantir que seuls les utilisateurs autorisés peuvent accéder ou modifier des données sensibles étape 6 – authentification des utilisateurs configuration des comptes utilisateurs dans backbone js back4app utilise un système de gestion des utilisateurs similaire à la classe utilisateur de parse pour l'authentification dans votre application backbone js, vous pouvez gérer l'enregistrement et la connexion des utilisateurs en utilisant des appels ajax à l'api rest de back4app par exemple, pour enregistrer un nouvel utilisateur function signupuser(username, password, email) { $ ajax({ url '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' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } une méthode similaire peut être appliquée pour connecter les utilisateurs et gérer les sessions étape 7 – déployer votre frontend backbone js la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application backbone js sans effort en liant votre dépôt github 7 1 création d'une version de production ouvrez votre répertoire de projet dans un terminal exécutez votre processus de construction si vous utilisez un gestionnaire de tâches ou un bundler (comme webpack ou gulp), exécutez la commande (par exemple, npm run build ) pour générer des actifs statiques optimisés confirmez la construction assurez vous que votre répertoire de sortie de construction contient le fichier html principal et tous les dossiers d'actifs nécessaires 7 2 organisation et envoi de votre code source votre dépôt github doit inclure tous les fichiers source de votre application backbone js une structure typique pourrait être basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md fichier de configuration exemple src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); pousser sur github initialiser git (si ce n'est pas fait) git init mettre en scène vos fichiers git add valider vos modifications git commit m "commit initial du code frontend backbone js" créer un dépôt github (par exemple, basic crud app backbone ) pousser votre dépôt git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 intégration de votre dépôt avec le déploiement web back4app accédez à la section déploiement web dans votre tableau de bord back4app, allez à votre projet et cliquez sur l'option déploiement web liez votre compte github suivez les instructions pour autoriser back4app à accéder à votre dépôt sélectionnez votre dépôt et votre branche choisissez votre basic crud app backbone dépôt et la branche principale 7 4 configuration de déploiement fournir des paramètres supplémentaires commande de construction si aucun actif pré construit n'existe, spécifiez la commande (par exemple, npm run build ) pour construire votre application répertoire de sortie désignez le dossier (par exemple, public ou dist ) contenant vos fichiers statiques variables d'environnement ajoutez toutes les clés api ou configurations nécessaires 7 5 dockeriser votre projet backbone js si vous choisissez docker pour le déploiement, incluez un dockerfile similaire à \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configurez back4app pour utiliser le déploiement docker si désiré 7 6 lancement de votre application cliquez sur le bouton déployer une fois votre configuration définie, appuyez sur déployer surveillez la construction back4app récupérera votre code, exécutera le processus de construction et déploiera votre application conteneurisée obtenez votre url en direct après le déploiement, une url sera fournie où votre application backbone js est hébergée 7 7 vérification de votre déploiement visitez l'url fournie ouvrez l'url dans votre navigateur pour confirmer que votre application se charge correctement testez la fonctionnalité assurez vous que la navigation, la récupération de données et les opérations crud fonctionnent comme prévu dépanner utilisez les outils du navigateur et les journaux de back4app pour résoudre tout problème étape 8 – conclusion et orientations futures bravo ! vous avez réussi à créer une application crud en utilisant backbone js et back4app vous avez configuré un projet nommé basic crud app backbone , défini des collections détaillées pour les éléments et les utilisateurs, et géré votre backend en utilisant l'application admin de plus, vous avez intégré votre frontend backbone js via des appels api rest et appliqué des mesures de sécurité essentielles prochaines étapes améliorer le frontend développez votre application backbone js avec des vues plus détaillées, des capacités de recherche et des mises à jour en temps réel ajouter de nouvelles fonctionnalités envisagez d'intégrer une logique backend plus avancée, des api tierces ou des contrôles d'accès affinés apprentissage supplémentaire visitez la documentation de back4app https //www back4app com/docs pour plus d'informations sur les améliorations de performance et les intégrations personnalisées en suivant ce tutoriel, vous avez maintenant l'expertise pour créer un backend crud robuste et évolutif pour votre application backbone js en utilisant back4app amusez vous à coder et à explorer de nouvelles fonctionnalités !