Comment créer une application CRUD avec Ember.js ?

introduction dans ce guide, vous apprendrez à créer une application crud simple (créer, lire, mettre à jour, supprimer) en utilisant ember js nous nous appuierons sur back4app comme service backend pour gérer vos données sans effort ce guide couvre toutes les opérations de base d'un système crud, vous montrant comment configurer un projet back4app, concevoir un modèle de données dynamique et intégrer des opérations crud dans une application ember js au départ, vous établirez un projet back4app nommé basic crud app ember qui fournit une solution de stockage de données non relationnelles fiable pour votre application vous définirez votre structure de données en configurant des modèles et des champs soit manuellement, soit avec l'aide de l'agent ia de back4app ensuite, vous explorerez l'application admin de back4app—une interface sans code qui vous permet de gérer des données avec de simples interactions par glisser déposer enfin, vous intégrerez votre application ember js avec back4app via des appels api, en mettant en œuvre des contrôles d'accès sécurisés en cours de route à la fin de ce tutoriel, vous disposerez d'une application ember js prête pour la production capable d'effectuer toutes les opérations crud, y compris l'authentification sécurisée des utilisateurs et la gestion efficace des données points clés à retenir construire une application crud basée sur ember js soutenue par une plateforme backend robuste comprendre comment structurer et intégrer un backend évolutif avec un front end ember js utiliser l'application admin intuitive de back4app pour effectuer facilement des opérations de création, de lecture, de mise à jour et de suppression apprendre les stratégies de déploiement, y compris la conteneurisation docker, pour une livraison d'application sans faille prérequis avant de plonger, veuillez confirmer que vous avez un compte back4app avec un projet nouvellement créé besoin d'aide ? visitez commencer avec back4app https //www back4app com/docs/get started/new parse app une configuration de développement ember js installez ember cli et configurez votre environnement en suivant les guides ember js https //guides emberjs com/release/ une familiarité de base avec ember js, javascript et les api rest révisez ces sujets si nécessaire étape 1 – configuration du projet initier un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” depuis votre tableau de bord attribuez le nom du projet basic crud app ember et suivez les instructions suivantes pour compléter la configuration du projet créer un nouveau projet une fois le projet créé, il apparaîtra dans votre tableau de bord et constituera la base de votre configuration backend étape 2 – conception du modèle de données structuration de vos modèles de données pour cette application crud, vous définirez plusieurs modèles dans votre projet back4app ci dessous, des exemples décrivant les modèles principaux et leurs champs nécessaires pour effectuer des opérations crud 1\ modèle d'articles ce modèle stocke des informations sur 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 résumé bref de l'article créé à date horodatage marquant quand l'élément a été ajouté mis à jour le date horodatage marquant la dernière mise à jour 2\ modèle d'utilisateurs ce modèle gère l'authentification des utilisateurs et les informations d'identification champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour l'utilisateur email chaîne adresse e mail unique de l'utilisateur hashdemotdepasse chaîne mot de passe utilisateur crypté créé à date horodatage de la création du compte mis à jour le date horodatage lorsque le compte a été mis à jour vous pouvez créer ces modèles et définir leurs champs directement dans le tableau de bord back4app créer une nouvelle classe vous pouvez ajouter des champs en sélectionnant un type de données, en entrant le nom du champ, en définissant une valeur par défaut et en indiquant s'il est obligatoire créer une colonne utilisation de l'agent ai de back4app pour la génération de schémas l'agent ai de back4app est une fonctionnalité intelligente dans votre tableau de bord qui peut configurer automatiquement votre schéma de données en fonction de vos spécifications cet outil simplifie l'initialisation du projet en garantissant que votre modèle de données est optimisé pour les opérations crud comment utiliser l'agent ai ouvrez l'agent ai connectez vous à votre tableau de bord back4app et trouvez l'agent ai dans les paramètres du projet fournissez les détails de votre modèle soumettez une description détaillée des modèles et des champs dont vous avez besoin examinez et confirmez l'agent ai générera un schéma suggéré confirmez les détails pour appliquer la configuration exemple de prompt create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette approche assistée par ai permet de gagner du temps et garantit que votre structure de données est cohérente et optimisée étape 3 – activation de l'application admin et gestion des opérations crud aperçu de l'application admin l'application admin back4app fournit une plateforme conviviale sans code pour gérer vos données backend son interface de glisser déposer vous permet d'effectuer facilement des tâches crud telles que l'ajout, la visualisation, la mise à jour et la suppression d'enregistrements activation de l'application admin allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant un compte administrateur initial cela configurera également des rôles (par exemple, b4aadminuser ) et des modèles système activer l'application admin une fois activée, connectez vous à l'application admin pour gérer les données de votre application tableau de bord de l'application admin gestion des opérations crud via l'application admin dans l'application admin, vous pouvez insérer des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans un modèle (par exemple, articles) pour saisir de nouvelles données inspecter/modifier des enregistrements sélectionnez un enregistrement pour voir ses détails ou modifier ses champs supprimer des enregistrements supprimez les entrées qui ne sont plus nécessaires cette interface simplifiée améliore considérablement l'efficacité de la gestion des données étape 4 – connecter votre application ember js à back4app avec votre backend configuré, il est temps de connecter votre application ember js à back4app utiliser les appels api dans ember js ember js utilise ember data pour gérer les opérations de données dans ce tutoriel, vous utiliserez l'adaptateur rest pour interagir avec votre backend back4app 1\ configurer l'adaptateur rest créez ou mettez à jour l'adaptateur de votre application (par exemple, app/adapters/application js ) avec la configuration suivante import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ définir les modèles ember data créez un modèle ember pour item (par exemple, app/models/item js ) import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } et de même pour user (par exemple, app/models/user js ) import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ implémenter les opérations crud utilisez le service store d'ember data pour effectuer des opérations crud par exemple, pour récupérer tous les éléments, vous pourriez créer une route similaire à import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } vous pouvez également ajouter, mettre à jour ou supprimer des enregistrements en utilisant les méthodes api d'ember data alternative utiliser fetch natif pour les appels api si vous préférez ne pas utiliser ember data, vous pouvez utiliser des appels fetch natifs par exemple, pour récupérer des éléments async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } intégrez ces appels api dans vos composants ou services ember selon vos besoins étape 5 – améliorer la sécurité de votre backend mise en œuvre des contrôles d'accès protégez vos données en configurant des listes de contrôle d'accès (acl) pour chaque objet par exemple, lors de la création d'un élément qui ne doit être visible que par son propriétaire, vous pouvez ajuster les paramètres acl via vos appels api permissions au niveau de la classe (clp) dans le tableau de bord back4app, configurez les clp pour vous assurer que seuls les utilisateurs authentifiés ont accès à certains modèles cela ajoute une couche de sécurité supplémentaire en appliquant des règles d'accès par défaut étape 6 – mise en œuvre de l'authentification des utilisateurs dans ember js configuration des comptes utilisateurs back4app utilise le modèle d'utilisateur parse pour gérer l'authentification dans votre application ember js, vous pouvez créer des services pour gérer l'inscription et la connexion des utilisateurs via des appels api par exemple, créez un service d'authentification ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let response = await fetch('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' }, body json stringify({ username, password, email }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } ce service peut être injecté dans vos routes ou composants pour gérer la gestion des sessions, les réinitialisations de mot de passe et d'autres tâches liées à l'authentification étape 7 – déployer votre application ember js back4app prend en charge diverses stratégies de déploiement vous pouvez déployer votre application ember js en utilisant des méthodes telles que la conteneurisation docker 7 1 construire votre application ember construisez votre application exécutez la commande suivante dans votre terminal ember build environment=production vérifiez la sortie assurez vous que le dist/ dossier contient vos actifs prêts pour la production 7 2 aperçu de la structure du projet un projet ember js typique pourrait être organisé comme suit basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 dockeriser votre application ember si vous préférez un déploiement conteneurisé, incluez un dockerfile à la racine de votre projet \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 déploiement via back4app web deployment connectez votre dépôt github hébergez votre projet ember js sur github configurer les paramètres de déploiement dans votre tableau de bord back4app, accédez à web deployment , liez votre dépôt (par exemple, basic crud app ember ), et sélectionnez la branche souhaitée définir les commandes de construction définissez votre commande de construction (par exemple, ember build environment=production ) et spécifiez le répertoire de sortie déployez votre application cliquez sur déployer et surveillez les journaux jusqu'à ce que votre application soit en ligne étape 8 – conclusion et prochaines étapes bon travail ! vous avez maintenant construit une application crud basée sur ember js intégrée à back4app dans ce tutoriel, vous avez configuré un projet appelé basic crud app ember , conçu des modèles pour les éléments et les utilisateurs, et géré votre backend via l'application d'administration back4app vous avez également connecté votre application ember js en utilisant des appels api et mis en œuvre des pratiques de sécurité robustes prochaines étapes améliorez votre application envisagez d'ajouter des fonctionnalités telles qu'une recherche avancée, des vues détaillées ou des mises à jour en temps réel élargissez les capacités du backend explorez les fonctions cloud, intégrez des api tierces ou mettez en place un contrôle d'accès basé sur les rôles approfondissez votre compréhension visitez la documentation de back4app https //www back4app com/docs et d'autres ressources ember js pour des sujets plus avancés bonne programmation et meilleurs vœux pour votre parcours avec ember js !