Comment Créer une Application CRUD de Base avec Angular ?

introduction dans ce guide, nous vous guiderons à travers le processus de construction d'une application crud (créer, lire, mettre à jour, supprimer) de base en utilisant angular vous apprendrez à développer une application qui gère efficacement les opérations de données en tirant parti du cadre robuste d'angular pour commencer, vous créerez et configurerez un nouveau projet back4app intitulé basic crud app angular , qui servira de colonne vertébrale pour la gestion de vos données backend ensuite, vous concevrez un modèle de base de données évolutif en décrivant des collections et des champs détaillés—soit manuellement, soit avec l'aide de l'agent ia de back4app cette étape garantit que votre système est bien préparé à gérer toutes les fonctionnalités crud après avoir configuré votre schéma, vous explorerez l'application admin de back4app, une interface intuitive de glisser déposer, pour gérer facilement vos collections et enregistrements enfin, vous intégrerez votre frontend angular avec back4app en utilisant rest/graphql (ou le sdk parse, si vous le préférez), tout en mettant en œuvre des mesures de sécurité avancées pour protéger votre backend à la fin de ce tutoriel, vous aurez construit une application angular prête pour la production avec authentification des utilisateurs et capacités crud complètes principaux enseignements maîtrisez la construction d'applications crud qui gèrent les données efficacement avec un backend fiable obtenez des informations pratiques sur la création d'un modèle de données évolutif et son lien avec un frontend angular apprenez à utiliser l'interface conviviale de l'application admin de back4app pour une gestion des données sans effort comprenez les stratégies de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application angular prérequis avant de commencer, veuillez vous assurer que vous avez ce qui suit un compte back4app avec un nouveau projet configuré besoin d'aide ? consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement angular installez angular cli en exécutant npm install g @angular/cli et créez un nouveau projet en utilisant ng new assurez vous que node js (version 14 ou supérieure) est installé une compréhension de base de typescript, angular et des api rest pour un rappel, visitez la documentation angular https //angular io/docs étape 1 – configuration de votre projet lancement d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” depuis votre tableau de bord entrez le nom du projet basic crud app angular et suivez les instructions de configuration créer un nouveau projet une fois le projet créé, il apparaîtra sur votre tableau de bord back4app, fournissant une base solide pour votre configuration backend étape 2 – élaboration de votre schéma de base de données construction de votre modèle de données pour cette application crud, vous définirez plusieurs collections voici des exemples des collections et de leurs champs qui formeront la base de votre schéma de base de données ces collections permettent à l'application d'effectuer des opérations crud essentielles 1 collection d'articles cette collection stocke des informations pour chaque article champ type de données détails id identifiant d'objet identifiant unique généré automatiquement titre chaîne le titre de l'élément description chaîne un bref résumé de l'élément créé à date horodatage pour quand l'élément a été ajouté mis à jour le date horodatage de la dernière mise à jour 2 collection des utilisateurs cette collection maintient les identifiants et les données d'authentification des utilisateurs champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne un identifiant unique pour l'utilisateur email chaîne une adresse e mail distincte hash de mot de passe chaîne mot de passe haché de manière sécurisée pour l'authentification créé à date horodatage indiquant quand le compte a été créé mis à jour le date horodatage de la mise à jour la plus récente vous pouvez configurer ces collections manuellement dans le tableau de bord back4app en créant une nouvelle classe pour chacune et en ajoutant des colonnes pour définir les champs créer une nouvelle classe ajoutez des colonnes en choisissant un type de données, en nommant le champ, en définissant une valeur par défaut et en indiquant s'il est requis créer une colonne exploiter l'agent ai de back4app pour la configuration du schéma l'agent ai de back4app est un outil polyvalent disponible dans votre tableau de bord qui vous permet de générer automatiquement votre schéma de base de données en fonction d'une invite descriptive cette fonctionnalité fait gagner du temps et garantit que votre backend est parfaitement adapté aux opérations crud étapes pour utiliser l'agent ai ouvrez l'agent ai connectez vous à votre tableau de bord back4app et trouvez l'option agent ai décrivez votre schéma entrez une invite détaillée décrivant les collections et les champs dont vous avez besoin examinez et confirmez après soumission, examinez le schéma généré et appliquez le à votre projet exemple d'invite create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) cette approche alimentée par l'ia rationalise le processus et garantit un schéma cohérent et optimisé étape 3 – activation de l'application admin et gestion des opérations crud un aperçu de l'application admin l'application admin de back4app fournit une interface sans code, par glisser déposer, qui vous permet de gérer vos données backend sans effort avec cela, vous pouvez facilement effectuer des opérations crud telles que l'ajout, la visualisation, la modification et la suppression d'enregistrements activation de l'application admin naviguez vers le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez vos identifiants d'administrateur créez votre utilisateur administrateur initial, qui configurera également les rôles (par exemple, b4aadminuser ) et les collections système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos collections et enregistrements tableau de bord de l'application admin utilisation de l'application admin pour les tâches crud dans l'application admin, vous pouvez ajouter de nouveaux enregistrements cliquez sur “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir et modifier des enregistrements sélectionnez un enregistrement pour voir ses détails ou mettre à jour ses champs supprimer des enregistrements utilisez l'option de suppression pour retirer les enregistrements obsolètes cette interface intuitive simplifie grandement la gestion de vos données backend étape 4 – connecter votre frontend angular à back4app maintenant que votre backend est entièrement configuré et géré via l'application admin, il est temps de lier votre frontend angular à back4app option a intégration du sdk parse avec angular installer le sdk parse npm install parse configurer parse dans votre projet angular créer un fichier de configuration (par exemple, src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // remplacez par vos véritables identifiants back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } et dans le modèle html ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} option b utiliser rest ou graphql si vous préférez ne pas utiliser le sdk parse, vous pouvez exécuter des opérations crud via rest ou graphql par exemple, pour récupérer des articles en utilisant rest dans angular, créez une méthode de service comme ceci // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } vous pouvez intégrer ces appels d'api dans vos composants angular selon vos besoins étape 5 – protéger votre backend mise en œuvre des listes de contrôle d'accès (acl) améliorez la sécurité de vos données en attribuant des acl à vos objets par exemple, pour créer un élément accessible uniquement par son propriétaire async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de définir des règles d'accès par défaut, en veillant à ce que seuls les utilisateurs authentifiés ou autorisés puissent accéder aux données sensibles étape 6 – gestion de l'authentification des utilisateurs création et gestion des comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre projet angular, vous pouvez gérer l'enregistrement et la connexion des utilisateurs comme suit // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } et le modèle html correspondant ( auth component html ) register register register une approche similaire peut être appliquée pour la connexion des utilisateurs et la gestion des sessions pour des fonctionnalités telles que les connexions sociales ou les réinitialisations de mot de passe, ajustez vos paramètres dans le tableau de bord back4app étape 7 – déploiement de votre frontend angular la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application angular en déployant le code directement depuis un dépôt github dans cette section, vous préparerez votre build de production, engagerez votre code source et intégrerez votre dépôt pour le déploiement 7 1 construction de votre version de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de build de production ng build prod cette commande compile votre application angular dans un dossier dist/ optimisé vérifiez le build assurez vous que le dossier dist/ contient le index html et tous les actifs nécessaires 7 2 structuration et téléchargement de votre code source votre dépôt devrait contenir l'ensemble de votre projet angular une structure de fichiers typique pourrait ressembler à basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md exemple src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemple src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } engagement de votre code sur github initialisez un dépôt git dans votre dossier de projet si ce n'est pas déjà fait git init ajoutez vos fichiers de projet git add engagez vos modifications git commit m "engagement initial pour le frontend angular" créez un dépôt github par exemple, nommez le basic crud app angular poussez votre code sur github git remote add origin https //github com/votre nom utilisateur/basic crud app angular 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 connectez vous à votre tableau de bord back4app, sélectionnez votre projet ( basic crud app angular ), et choisissez déploiement web connectez votre compte github suivez les instructions pour intégrer votre compte github, permettant à back4app d'accéder à votre dépôt sélectionnez votre dépôt et votre branche choisissez votre dépôt (par exemple, basic crud app angular ) et la branche (par exemple, main ) qui contient votre code 7 4 configurer vos paramètres de déploiement fournissez les détails de configuration nécessaires commande de construction si votre dépôt ne contient pas de dossier pré construit dist/ , spécifiez la commande de construction (par exemple, ng build prod ) répertoire de sortie définissez le répertoire de sortie sur dist/your project name afin que back4app sache où se trouvent vos fichiers statiques variables d'environnement ajoutez toutes les variables d'environnement requises (telles que les clés api) dans la configuration de déploiement 7 5 conteneuriser votre application angular avec docker si vous préférez un déploiement basé sur docker, incluez un dockerfile dans votre dépôt par exemple # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] incluez ce dockerfile dans votre dépôt, puis sélectionnez l'option de déploiement docker dans les paramètres de déploiement web de back4app 7 6 lancement de votre application cliquez sur le bouton déployer une fois vos paramètres de déploiement configurés, cliquez sur déployer surveillez le processus de déploiement back4app va récupérer votre code, exécuter la commande de construction si nécessaire, et déployer votre application angular récupérez votre url après un déploiement réussi, back4app fournira une url où votre application est en ligne 7 7 tester votre application déployée visitez l'url fournie ouvrez l'url dans votre navigateur vérifiez la fonctionnalité assurez vous que votre application angular se charge correctement, que toutes les routes fonctionnent comme prévu, et que les ressources sont servies correctement déboguez si nécessaire utilisez les outils de développement du navigateur pour identifier et résoudre tout problème vérifiez les journaux de déploiement de back4app et votre configuration si des problèmes surviennent étape 8 – conclusion et orientations futures félicitations ! vous avez réussi à créer une application crud de base en utilisant angular et back4app vous avez configuré un projet nommé basic crud app angular , conçu des collections de base de données complètes pour les éléments et les utilisateurs, et géré vos données à l'aide de l'application admin intuitive de plus, vous avez connecté votre frontend angular à votre backend et mis en œuvre des mesures de sécurité robustes prochaines étapes améliorez votre frontend étendez votre application angular avec des fonctionnalités avancées telles que des vues détaillées des éléments, une fonctionnalité de recherche et des mises à jour en temps réel élargissez la fonctionnalité envisagez d'intégrer une logique backend supplémentaire (comme des fonctions cloud) ou de mettre en œuvre un contrôle d'accès basé sur les rôles explorez d'autres ressources consultez la documentation de back4app https //www back4app com/docs et d'autres ressources angular pour approfondir votre compréhension avec ce guide, vous êtes maintenant équipé pour construire des backends crud robustes et évolutifs pour vos applications angular en utilisant back4app bon codage !