Comment construire une application CRUD de base avec Knockout.js : Un guide étape par étape

aperçu dans ce guide, vous apprendrez à créer une application crud (créer, lire, mettre à jour, supprimer) complète en utilisant knockout js ce tutoriel démontre comment mettre en œuvre des opérations essentielles au sein d'une application web tout en utilisant back4app comme service backend nous commencerons par configurer un projet back4app intitulé basic crud app knockout , établissant un système de gestion des données 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—soit manuellement, soit avec l'aide de l'agent ia de back4app—pour garantir que votre application puisse gérer toutes les opérations crud efficacement ensuite, vous utiliserez l'application admin de back4app, un outil convivial de glisser déposer, pour gérer vos collections avec facilité cette interface simplifie le processus d'exécution des opérations crud enfin, vous intégrerez votre frontend knockout js avec back4app en utilisant des appels api rest cette intégration couvrira également les pratiques de backend sécurisées avec des contrôles d'accès appropriés à la fin de ce tutoriel, vous aurez construit une application web prête pour la production qui prend en charge les fonctionnalités crud de base, inclut l'authentification des utilisateurs et dispose d'une gestion des données robuste points clés à retenir comprendre comment développer des applications crud qui gèrent les données de manière efficace en utilisant back4app acquérir une expérience pratique dans la conception d'un backend évolutif et le lier à un frontend knockout js apprendre à utiliser un outil d'administration sans code (back4app admin app) pour exécuter des opérations de création, de lecture, de mise à jour et de suppression découvrir des stratégies de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application web prérequis avant de commencer, assurez vous d'avoir un compte back4app et un projet actif consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app si vous avez besoin d'aide un environnement de développement configuré pour knockout js incluez des bibliothèques via cdn ou installez les via npm si vous préférez une configuration modulaire des connaissances de base en javascript, knockout js et rest apis consultez la documentation de knockout js https //knockoutjs com/documentation/introduction html pour une introduction étape 1 – initialisation du projet configuration de votre projet back4app accédez à votre compte back4app sélectionnez l'option “nouvelle application” depuis votre tableau de bord entrez le nom du projet basic crud app knockout et complétez le processus de configuration créer un nouveau projet une fois créé, votre projet sera visible sur votre tableau de bord, formant la base de votre configuration backend étape 2 – élaboration de votre schéma de base de données conception de la structure de données pour cette application crud, vous allez créer plusieurs collections ci dessous se trouvent des collections d'exemple avec des champs et des types de données suggérés pour guider la conception de votre base de données ce schéma prend en charge les opérations crud fondamentales 1 collection d'articles champ type de données détails id identifiant d'objet clé unique générée automatiquement titre chaîne le titre de l'article description chaîne un bref résumé de l'article créé à date horodatage lorsque l'élément est créé mis à jour le date horodatage de la dernière mise à jour 2 collection des utilisateurs champ type de données détails id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne identifiant unique pour chaque utilisateur email chaîne adresse e mail unique de l'utilisateur hash de mot de passe chaîne hachage sécurisé du mot de passe de l'utilisateur créé à date horodatage de création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez créer manuellement ces collections dans le tableau de bord back4app en ajoutant une nouvelle classe pour chaque collection et en définissant les champs créer une nouvelle classe définissez vos champs en choisissant un type de données, en nommant le champ, en définissant des valeurs par défaut et en marquant les champs requis créer une colonne utiliser l'agent ai de back4app pour l'automatisation du schéma l'agent ai de back4app simplifie la génération de schémas directement depuis votre tableau de bord il peut créer automatiquement des collections et des champs en fonction de votre description étapes pour utiliser l'agent ai lancez l'agent ai accédez y via votre tableau de bord back4app ou les paramètres du projet détaillez votre modèle de données collez une invite descriptive énumérant vos collections et champs requis examinez et appliquez l'agent proposera un schéma examinez et confirmez les suggestions pour les intégrer dans votre projet 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) ce processus permet de gagner du temps et garantit un schéma cohérent et optimisé pour votre application étape 3 – activation de l'application admin et gestion des opérations crud aperçu de l'interface d'administration l'application d'administration back4app fournit une solution sans code pour gérer vos données backend son interface intuitive de glisser déposer permet des opérations crud sans effort comment activer l'application d'administration allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application d'administration ” configurez vos identifiants d'administrateur en créant le premier utilisateur administrateur, ce qui configure également des rôles comme b4aadminuser et des collections système essentielles activer l'application d'administration après activation, connectez vous à l'application d'administration pour commencer la gestion des données tableau de bord de l'application d'administration utiliser l'interface d'administration pour crud dans l'application d'administration, vous pouvez ajouter des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour créer de nouvelles entrées voir/modifier des enregistrements sélectionnez un enregistrement pour inspecter ses détails ou mettre à jour des champs supprimer des enregistrements supprimez toutes les entrées qui ne sont plus nécessaires cette interface simplifiée améliore l'utilisabilité et accélère la gestion de vos données étape 4 – connecter knockout js avec back4app avec votre backend en place, il est temps d'intégrer votre frontend knockout js en utilisant des appels d'api rest utilisation de l'api rest pour les opérations crud puisque le sdk parse n'est généralement pas utilisé avec knockout js, vous effectuerez des appels d'api directement voici des exemples de la façon de gérer les tâches crud exemple de récupération d'éléments // example rest call to retrieve items function fetchitems() { fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(response => response json()) then(data => { viewmodel items(data results); }) catch(error => console error('error retrieving items ', error)); } fetchitems(); exemple de viewmodel knockout js voici un exemple de viewmodel pour gérer vos éléments function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var newitem = { title self newtitle(), description self newdescription() }; 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(newitem) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; self deleteitem = function(item) { fetch('https //parseapi back4app com/classes/items/' + item objectid, { method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }) then(() => { self items remove(item); }) catch(error => console error('error deleting item ', error)); }; // additional methods for update and read operations can be added similarly } // activate knockout js ko applybindings(new appviewmodel()); ce viewmodel intègre des appels api pour créer et supprimer des éléments tout en gérant l'état avec les observables de knockout js étape 5 – sécuriser votre backend listes de contrôle d'accès (acls) protégez vos données en attribuant des acl à chaque objet par exemple, pour rendre un élément accessible uniquement à son créateur function createsecureitem(itemdata, owneruserid) { var newitem = { title itemdata title, description itemdata description, acl { " " { "read" false, "write" false }, \[owneruserid] { "read" true, "write" true } } }; 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(newitem) }) then(response => response json()) then(data => console log('secure item created ', data)) catch(error => console error('error creating item ', error)); } autorisations au niveau de la classe (clps) dans le tableau de bord back4app, définissez les clps pour chaque collection afin de garantir que seuls les utilisateurs authentifiés ou autorisés peuvent accéder à des informations sensibles étape 6 – mise en œuvre de l'authentification des utilisateurs configuration des comptes utilisateurs back4app utilise une classe utilisateur pour gérer l'authentification dans votre application knockout js, gérez l'enregistrement et la connexion des utilisateurs en utilisant des appels api rest exemple enregistrement d'un utilisateur function registeruser(username, password, email) { var user = { username username, password password, email email }; 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(user) }) then(response => response json()) then(data => alert('registration successful!')) catch(error => alert('registration error ' + error message)); } une approche similaire peut être suivie pour la connexion des utilisateurs et la gestion des sessions des fonctionnalités supplémentaires comme la vérification par e mail et la réinitialisation des mots de passe peuvent être configurées via back4app étape 7 – déploiement de votre frontend knockout js en utilisant le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre frontend knockout js sans effort en liant votre dépôt github suivez ces étapes 7 1 construisez vos fichiers de production ouvrez votre répertoire de projet dans un terminal exécutez votre processus de construction si vous utilisez un outil de construction comme webpack, exécutez la commande appropriée (par exemple, npm run build ) pour compiler vos ressources confirmez la construction assurez vous que votre dossier de construction contient un index html et tous les actifs statiques requis 7 2 organisez et engagez votre code sur github votre dépôt doit inclure tous les fichiers source pour votre frontend knockout js une structure d'exemple pourrait être basic crud app knockout frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── appviewmodel js │ └── styles css ├── package json └── readme md fichier d'exemple src/appviewmodel js function appviewmodel() { var self = this; self items = ko observablearray(\[]); self newtitle = ko observable(""); self newdescription = ko observable(""); self additem = function() { var itemdata = { title self newtitle(), description self newdescription() }; 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(itemdata) }) then(response => response json()) then(data => { self items push(data); self newtitle(""); self newdescription(""); }) catch(error => console error('error adding item ', error)); }; // additional crud methods (update, delete) can be defined similarly } // apply knockout bindings ko applybindings(new appviewmodel()); engagement et envoi de code sur github initialiser git (si ce n'est pas déjà fait) git init mettez vos fichiers en attente git add validez vos modifications git commit m "commit initial pour le frontend knockout js" créer un dépôt github (par exemple, basic crud app knockout frontend ) poussez votre code git remote add origin https //github com/your username/basic crud app knockout frontend git git push u origin main 7 3 lier votre dépôt github avec le déploiement web accédez à la fonctionnalité de déploiement web dans votre tableau de bord back4app, sélectionnez votre projet (basic crud app knockout) et cliquez sur déploiement web connectez vous à github suivez les instructions pour intégrer votre compte github choisissez votre dépôt et votre branche sélectionnez votre dépôt (par exemple, basic crud app knockout frontend ) et la branche (par exemple, main ) contenant votre code 7 4 paramètres de déploiement commande de construction si votre dépôt n'inclut pas de dossier pré construit, spécifiez la commande de construction (par exemple, npm run build ) répertoire de sortie définissez ceci sur le dossier contenant vos fichiers statiques (par exemple, build ou public ) variables d'environnement ajoutez toutes les variables d'environnement requises, telles que les clés api 7 5 conteneuriser votre application avec docker (optionnel) si vous souhaitez utiliser docker, incluez un dockerfile dans votre dépôt # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source code and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 déployer votre application cliquez sur le bouton déployer après avoir configuré les paramètres, lancez le déploiement surveillez le processus back4app récupérera votre code, le construira (si nécessaire) et déploiera votre application conteneurisée accédez à votre application une fois terminé, back4app fournira une url pour accéder à votre application knockout js 7 7 tester le déploiement ouvrez l'url fournie vérifiez si votre application se charge correctement exécutez des tests assurez vous que toutes les routes et les ressources (css, js, images) fonctionnent déboguez si nécessaire utilisez les outils de développement pour inspecter les erreurs et consultez les journaux de déploiement de back4app étape 8 – conclusion et orientations futures bien joué ! vous avez réussi à créer une application crud de base en utilisant knockout js et back4app vous avez configuré un projet nommé basic crud app knockout , élaboré des collections détaillées pour les articles et les utilisateurs, et géré vos données via l'admin app de plus, vous avez intégré votre frontend knockout js avec votre backend en utilisant des appels api rest et mis en œuvre des contrôles d'accès sécurisés prochaines étapes développez votre frontend améliorez votre application avec des fonctionnalités telles que des vues détaillées des articles, des capacités de recherche ou des mises à jour en direct ajoutez une logique backend avancée explorez l'utilisation des cloud functions ou l'intégration de services tiers plongez plus profondément consultez la documentation de back4app https //www back4app com/docs pour une optimisation supplémentaire et des intégrations avancées en suivant ce tutoriel, vous avez maintenant les connaissances nécessaires pour créer une application crud robuste et évolutive avec knockout js en utilisant back4app bon codage !