{"id":20527304,"url":"https://github.com/charlenry/angular-gestion-produits","last_synced_at":"2026-05-08T05:53:15.401Z","repository":{"id":239363277,"uuid":"799294526","full_name":"charlenry/Angular-Gestion-Produits","owner":"charlenry","description":"Partie Frontend de l'application \"Gestion de produits\"","archived":false,"fork":false,"pushed_at":"2024-06-29T00:58:46.000Z","size":193,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T01:49:14.996Z","etag":null,"topics":["angular","auth0-jwt","boostrap","css3","html5","keycloak","oauth2","openid-connect","toastr-notifications","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charlenry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-11T17:41:30.000Z","updated_at":"2024-12-23T12:54:52.000Z","dependencies_parsed_at":"2024-06-29T01:57:40.024Z","dependency_job_id":null,"html_url":"https://github.com/charlenry/Angular-Gestion-Produits","commit_stats":null,"previous_names":["charlenry/angular-gestion-produits"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/charlenry/Angular-Gestion-Produits","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlenry%2FAngular-Gestion-Produits","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlenry%2FAngular-Gestion-Produits/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlenry%2FAngular-Gestion-Produits/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlenry%2FAngular-Gestion-Produits/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charlenry","download_url":"https://codeload.github.com/charlenry/Angular-Gestion-Produits/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charlenry%2FAngular-Gestion-Produits/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32769110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","auth0-jwt","boostrap","css3","html5","keycloak","oauth2","openid-connect","toastr-notifications","typescript"],"created_at":"2024-11-15T23:18:12.687Z","updated_at":"2026-05-08T05:53:15.382Z","avatar_url":"https://github.com/charlenry.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Partie Frontend de l'application \"Gestion de produits\"\n\nCette application permet de gérer des produits avec des accès sécurisés selon les rôles attribués à chaque utilisateur. Il y a un rôle `administrateur` et un rôle `utilisateur`. L'application a été développée dans le cadre du projet fil rouge d'une formation MOOC pour devenir **`Développeur Full Stack Java Spring Boot 3 / Angular`**. Elle est composée de trois parties : \n\n1. Une partie `frontend` développée en Angular 17 (ce projet),\n2. Une partie `backend métier` connectée à une base de données MySQL qui permet de gérer les produits. Elle a été développée en Java avec Spring Boot 3 (voir le projet [spring-gestion-produits](https://github.com/charlenry/Spring-Gestion-Produits)),\n3. Une partie `backend IAM` **(Identity and Access Management)** connectée à une base de données MySQL qui gère les identités et les accès. Elle a été développée en Java avec Spring Boot 3 (voir le projet [spring-gestion-utilisateurs](https://github.com/charlenry/Spring-Gestion-Utilisateurs)).\n\n**Remarque :** La partie IAM développée en Java avec Spring Boot 3 est interchangeable avec l'IAM `Keycloak`. Pour ce faire, il y a deux branches dans la partie `frontend` et dans la partie `backend métier` :\n\n1. La branche `main` qui permet de faire fonctionner les parties frontend et backend métier avec la partie IAM développée en Java avec Spring Boot 3,\n2. La branche `secured_apis_with_keycloak_oauth2` qui permet de faire fonctionner les parties frontend et backend métier avec l'IAM Keycloak.\n\n\n## Installation et lancement\nPour que l'application fonctionne correctement, il faut exécuter le serveur de base de données MySQL plus les trois parties.\n\n### Serveur de base de données MySQL\n1. Téléchargez et installez le logiciel [XAMPP](https://www.apachefriends.org/fr/download.html),\n2. Lancez le serveur Apache et le serveur MySQL,\n3. Dans la console `XAMPP Control Panel`, cliquez sur le bouton `Admin` de MySQL pour accéder à l'interface de gestion des bases de données,\n4. Créez deux bases de données nommées respectivement `spring_produits_db` et `spring_users_iam_db`. Puis importez les tables à partir des fichiers `spring_produits_db.sql` et `spring_users_iam_db.sql` à télécharger depuis [GitHub](https://github.com/charlenry/Annexe-Gestion-Produits).\n\n\n### Partie backend métier\n1. Si vous utilisez `Spring Tool Suite` , importez le projet [spring-gestion-produits](https://github.com/charlenry/Spring-Gestion-Produits) à partir Git, fournissez l'URL du dépôt du projet et choisissez la branche `main` pour le faire fonctionner avec le projet [spring-gestion-utilisateurs](https://github.com/charlenry/Spring-Gestion-Utilisateurs). Sinon, choisissez la branche `secured_apis_with_keycloak_oauth2` pour le faire fonctionner avec [Keycloak](https://www.keycloak.org/downloads). Si vous utilisez VSCode, clonez le projet, puis choisissez la branche `main` ou `secured_apis_with_keycloak_oauth2` selon votre choix.\n2. Lancez le projet en tant qu'application Spring Boot. L'application sera accessible à l'adresse `http://localhost:8080`.\n\n\n### Partie backend IAM\n1. Si vous utilisez `Spring Tool Suite`, importez le projet [spring-gestion-utilisateurs](https://github.com/charlenry/Spring-Gestion-Utilisateurs) à partir Git, fournissez l'URL du dépôt du projet et choisissez la branche `main`. Si vous utilisez VSCode, clonez le projet et choisissez la branche `main`.\n2. Lancez le projet en tant qu'application Spring Boot. L'application sera accessible à l'adresse `http://localhost:8081`.\n\n\n### Partie frontend\n1. Clonez le projet,\n2. Tapez la commande `npm install` pour installer les dépendances,\n3. Tapez la commande `ng serve -o` pour lancer l'application. L'application sera accessible à l'adresse `http://localhost:4200`.\n\n\n### Keycloak\nSi vous utilisez la branche `secured_apis_with_keycloak_oauth2` pour la partie backend IAM, il faut installer Keycloak. Rendez-vous sur le site officiel de [Keycloak](https://www.keycloak.org/downloads) et téléchargez le premier fichier dans la rubrique `Server`. Décompressez-le puis rendez-vous dans le dossier `bin`. \n\nEntre-temps, créez une variable d'environnement système nommée `JAVA_HOME` qui contient le chemin de votre `JDK`. \n\nPour lancer Keycloak, tapez la commande suivante :\n\n```bash\nkc.[bat|sh] start-dev --http-port=8090\n```\n\n`kc.bat` ou `kc.sh` selon votre système d'exploitation. Keycloak sera accessible à l'adresse `http://localhost:8090`. Créez un compte administrateur pour accéder à l'interface d'administration. Une fois dans l'interface d'administration, cliquez sur la liste déroulante en haut à gauche puis sur le bouton `Create realm`. Ensuite, cliquez sur `Browse...` et choisissez le fichier `products-realm.json` à télécharger depuis [GitHub](https://github.com/charlenry/Annexe-Gestion-Produits). Enfin, cliquez sur le bouton `Create` pour importer le `realm`.\n\nPar la suite, vous pouvez vous connecter à l'interface de l'application à l'adresse `http://localhost:4200`. Vous pouvez vous connecter avec les mêmes identifiants que ceux mentionnés dans la partie `Page d'accueil` ci-dessous.\n\n\n## Utilisation\n\n### Page d'accueil\nLa page d'accueil permet de se connecter à l'application. Les nouveaux utilisateurs peuvent s'inscrire. Un code de confirmation est envoyé par email pour activer le compte. Pour faire fonctionner cette partie, il y a deux options :\n\n1. Vous utilisez le `backend IAM` développé avec Spring Boot 3. Dans ce cas, il faut configurer le serveur SMTP dans le fichier `application.properties` du projet [spring-gestion-utilisateurs](https://github.com/charlenry/Spring-Gestion-Utilisateurs). Vous pouvez utiliser le serveur SMTP [MailHog](https://github.com/mailhog/MailHog/releases) pour tester l'envoi d'email. L'application est configurée pour utiliser le serveur SMTP `MailHog` par défaut. Mais vous pouvez configurer un autre serveur SMTP de votre choix.\n\n2. Vous utilisez `Keycloak`. Dans ce cas, si vous avez importé le `realm` du projet, il est déjà préconfiguré pour fonctionner avec [MailHog](https://github.com/mailhog/MailHog/releases) que vous devez lancer. Mais vous pouvez configurer le serveur SMTP de votre choix. \n\nIl y a deux rôles : `ADMIN` et `USER`. Les identifiants et mots de passe sont les suivants :\n1. Pour le rôle `ADMIN` : \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;🔹 Identifiant : `admin`\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;🔹 Mot de passe : `123`\n\n2. Pour le rôle `USER` : \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;🔹 Identifiant : `charles`\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;🔹 Mot de passe : `123` \n\n### Page de gestion des produits\nLa page de gestion des produits permet de visualiser, ajouter, modifier et supprimer des produits. Seul l'utilisateur ayant le rôle `ADMIN` peut ajouter, modifier ou supprimer des produits. Il est également possible de rechercher des produits par nom ou par catégorie.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlenry%2Fangular-gestion-produits","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlenry%2Fangular-gestion-produits","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlenry%2Fangular-gestion-produits/lists"}