spa30

Projet MarketPlace

Nous allons créer une application Web simple permettant aux utilisateurs de gérer les produits qu'ils souhaitent vendre.

• Tout le monde peut parcourir les produits existants.
• Seuls les utilisateurs authentifiés peuvent ajouter de nouveaux produits.
• Seul un propriétaire de produit peut modifier ou supprimer un produit.

Nous allons construire 3 projets. Le projet FrontEnd sera une application Web progressive construite à l'aide de Vuejs, Vue Router et Vuetify, tandis que côté serveur, nous allons créer deux applications Web .NET Core 3.0 à l'aide de Visual Studio 2019 : l'une exposera une API REST tandis que la seconde s'en chargera. d'authentification, à l'aide d'Identity Server 4.

1. Client frontal
   • Javascript (ECMAScript 2015+)
   • HTML5
   • CSS3
   • Vue.js 2
   • Routeur Vue
   • Vuetifier
   • Ouvrir le client ID Connect
   • Récupérer l'API
   • API de caméra native

Ce projet interagira avec l'utilisateur via un navigateur en construisant de manière dynamique une interface utilisateur HTML et communiquera avec le serveur en utilisant javascript et json.

2. Service REPOS
   • Contrôleur d'API Web .NET Core 3.0
   • Entité Framework Core 3.0
   • Base de données du serveur SQL
   • Authentification client du serveur d'identité

Ce projet sera chargé de stocker les données sur le serveur et de répondre aux demandes des clients via http et json.

3. Serveur d'authentification
   • Serveur d'identité 4
   • Noyau du cadre d'entité

Ce projet s'occupera de la partie authentification. Il émettra des jetons JWT qui seront utilisés par l'application client pour accéder au serveur.

Ce que vous devez déjà savoir :

• C#
• Javascript (ECMAScript 2015+)
• HTML5
• CSS3

Ce que vous allez apprendre :

• Qu'est-ce que le repos
• Qu'est-ce que .NET Core
• Noyau ASP.NET
• Qu'est-ce qu'un contrôleur d'API Web
• Crécerelle
• Intergiciel
• Variables d'environnement
• Configuration de base ASP.NET
• Injection de dépendance
• Noyau du cadre d'entité
• Facteur
• CORS
• Vue.js
• Routeur Vue
• Récupérer l'API
• WebPack
• Vuetifier
• Authentification et autorisation
• OAuth 2 et Open ID Connect
• Serveur d'identité 4
• Autorisation du propriétaire de la ressource

Avant de commencer, vous avez besoin

• Visual Studio 2019 (Community Edition suffit)

Assurez-vous d'avoir installé la charge de travail « Développement multiplateforme .NET Core ». Vous pouvez vérifier et installer des charges de travail en lançant Visual Studio Installer.

• Code de Visual Studio
• Nœud

Pour plus d'informations sur l'installation de .NET Core

Veuillez consulter https://www.microsoft.com/net/download/windows

---

Notre flux de travail

Nous allons diviser nos projets en étapes simples. Chaque étape se concentrera sur une tâche et s’appuiera sur l’étape précédente. Nous commencerons par des projets simples qui deviendront de plus en plus complexes au fur et à mesure. Par exemple, nous ne nous concentrerons pas dans un premier temps sur l’authentification et l’autorisation. Nous l'ajouterons ultérieurement.

Ce dossier contient différents sous-dossiers. Chaque sous-dossier représente une phase de notre projet. Les dossiers « Démarrer » sont les points de départ de chaque étape. Les dossiers "Solution" sont les versions finales de chaque étape, qui vous sont remises au cas où vous souhaiteriez vérifier ce que votre projet est censé devenir à la fin de chaque laboratoire. Il vous suffit d'ouvrir un dossier de démarrage correspondant au laboratoire que vous souhaitez essayer (par exemple Lab01/Start pour commencer) et de suivre les instructions que vous trouverez dans le fichier readme.md . Lorsque vous avez terminé, n'hésitez pas à comparer votre travail avec la solution fournie dans le dossier Solution.

Pour COMMENCER

1. Ouvrez le dossier Labs
2. Accédez au sous-dossier Lab01
3. Accédez au sous-dossier Démarrer
4. Suivez les instructions contenues dans le fichier readme.md pour continuer

Si vous voulez voir la candidature finale

Configurer et démarrer l'application Identity Server

• Ouvrez Lab08SolutionMarketPlaceIdentityServerIdentityServer.sln dans Visual Studio
• Construisez le projet mais ne le démarrez pas à partir de Visual Studio
• Ouvrez une invite de commande sous le dossier Lab08SolutionMarketPlaceIdentityServer
• Tapez dotnet run /seed
• Accédez à http://localhost:5002 et assurez-vous que le projet est opérationnel

Configurer et démarrer le service REST

• Ouvrez Lab08SolutionMarketPlaceMarketplaceMarketPlace.sln dans Visual Studio
• Construisez le projet et démarrez-le à partir de Visual Studio

Configurer et démarrer le client Javascript

• Ouvrez Lab08SolutionMarketPlacespaclient dans Visual Studio Code
• Ouvrir une fenêtre de terminal
• Tapez npm install
• Tapez npm run serve

Pour vous connecter

• Nom d'utilisateur : Alice
• Mot de passe : Pass123$