184 lines
6.3 KiB
Markdown
184 lines
6.3 KiB
Markdown
# hn-dotnet : un clone d'Hacker News en dotnet !
|
|
|
|
Le but est de réaliser de A à Z une application Web imitant le fonctionnement de Hacker News en abordant des bonnes pratiques de développement en .Net.
|
|
|
|
## Plan de la formation
|
|
|
|
- Présentation d'ASP.Net Core
|
|
- Mise en place du domaine (Création de librairies de classes)
|
|
- Mise en place d'une couche applicative découplée avec MediatR
|
|
- Persistence des données avec EF Core
|
|
- Aperçu de l'outil
|
|
- Définir le modèle grâce à l'API Fluent
|
|
- Gérer les migrations
|
|
- Réalisation d'un projet MVC
|
|
- Rappels sur l'architecture MVC
|
|
- Injection de dépendances
|
|
- Afficher une page et naviguer entre les pages
|
|
- Gestion des formulaires
|
|
- Routage conventionnel / par attributs
|
|
- Découpage des vues grâce aux vues partielles et composants
|
|
- Utilisation de TempData pour les messages de statut
|
|
- Authentification et autorisation
|
|
- Déploiement
|
|
- Réalisation d'une API Rest
|
|
- Rappels sur l'architecture REST
|
|
- Exposer nos cas d'utilisations au travers de ressources
|
|
- Documenter l'API
|
|
- Réalisation d'un client en Blazor
|
|
- Présentation
|
|
- Découpage en composants
|
|
- Gestion des formulaires
|
|
|
|
## Ressources utiles
|
|
|
|
- https://aspnetcore.readthedocs.io/en/stable/mvc/index.html
|
|
- https://andrewlock.net/an-introduction-to-viewcomponents-a-login-status-view-component/
|
|
- https://stackoverflow.com/a/47011478
|
|
- https://stackoverflow.com/a/34291650
|
|
- https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/
|
|
|
|
## Commençer par le domaine !
|
|
|
|
Mise en place de la librairie du domaine qui contiendra nos objets métiers.
|
|
|
|
## Notre premier cas d'utilisation
|
|
|
|
Mise en place de la couche applicative avec `MediatR` et implémentation du premier cas d'utilisation.
|
|
|
|
## Le site internet en MVC
|
|
|
|
### Présentation de l'architecture du projet de base
|
|
|
|
Aborder l'injection de dépendances et le fichier `Startup.cs` en général.
|
|
|
|
### Options pattern
|
|
|
|
Permet d'avoir des objets de configuration facilement sortable depuis l'appsettings. Utilisation de https://docs.microsoft.com/fr-fr/aspnet/core/fundamentals/configuration/options?view=aspnetcore-5.0.
|
|
|
|
### Ajout des messages "flashs"
|
|
|
|
Permet de notifier l'utilisateur d'une action. Utilisation des `TempData` (données supprimées à la prochaine requête ou après la lecture).
|
|
|
|
### Factoriser des éléments d'interface
|
|
|
|
#### Partial views
|
|
|
|
Simple fichier permettant de partager du markup sans logique.
|
|
|
|
```razor
|
|
@await Html.PartialAsync("_Partial", model)
|
|
<partial name="_Partial" model="@Model">
|
|
```
|
|
|
|
#### View components
|
|
|
|
Permet de partager du rendu ET de la logique. Plusieurs manière de le déclarer (étendre `ViewComponent`, fichier terminant par `ViewComponent` ou décorateur associé).
|
|
|
|
```razor
|
|
@await Component.InvokeAsync("VComponent")
|
|
<component type="@typeof(VComponent)" param-arg="@Model" />
|
|
<vc:VComponent arg="@Model"> // Nécessite d'ajouter les tag helpers et de builder avec (dans le ViewImports) `@addTagHelper *, YourAssembly`
|
|
```
|
|
|
|
#### Razor components (rendu statique)
|
|
|
|
Proche de ce qui est fait en Blazor mais sans la partie interactivité. Possibilité de les afficher sans utiliser Blazor du tout mais plusieurs concession, notamment plus de TagHelper type `asp-action`...
|
|
|
|
#### Tag Helpers
|
|
|
|
### Authentification avec ASP.Net Identity Core
|
|
|
|
```console
|
|
$ cd Infrastructure
|
|
$ dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
|
|
```
|
|
|
|
On fait hériter notre `HNDbContext` de `IdentityDbContext`. On peut créer des types customs pour nos User et Role de manière à utiliser des Guid et rester cohérent.
|
|
|
|
Côté web, on s'assure d'avoir bien ajouter `AddIdentity` avec les options qui nous intéressent.
|
|
|
|
Grâce à ça, nous aurons à notre disposition un `UserManager<User>` et un `SignInManager<User>` nous permettant de réaliser les opérations d'authentification. Bien penser au `UseAuthentication` avant le `UseAuthorization` afin que l'authentification puisse avoir lieu.
|
|
|
|
## Démarche
|
|
|
|
On crée un fichier solution avec `dotnet new sln`. On pourra alimenter ce fichier sln avec la commande `dotnet sln add DirProjet`.
|
|
|
|
Commençons par le commencement, les building blocks, des classes pour nous faciliter la vie !
|
|
|
|
```console
|
|
$ mkdir BuildingBlocks
|
|
$ cd BuildingBlocks
|
|
$ dotnet new classlib && dotnet new gitignore
|
|
```
|
|
|
|
Ensuite viens le domaine :
|
|
|
|
```console
|
|
$ mkdir Domain
|
|
$ cd Domain
|
|
$ dotnet new classlib && dotnet new gitignore
|
|
```
|
|
|
|
On crée ensuite les différentes classes nécessaires au fonctionnement de l'application...
|
|
|
|
Ensuite viens la couche applicative avec nos **commands** et nos **queries** pour un couplage faible.
|
|
|
|
```console
|
|
$ mkdir Application
|
|
$ cd Application
|
|
$ dotnet new classlib && dotnet new gitignore
|
|
```
|
|
|
|
On ajoute aussi le package MediatR avec `dotnet add package MediatR` et la référence au domaine avec `dotnet add reference ../Domain`.
|
|
|
|
Création du répertoire et de la première appli razor pour exposer le domaine.
|
|
|
|
```console
|
|
$ mkdir Apps
|
|
$ cd Apps
|
|
$ dotnet new mvc -o Website
|
|
$ cd Website
|
|
$ dotnet new gitignore
|
|
```
|
|
|
|
On peut aussi installer les outils de scaffolding avec `dotnet tool install -g dotnet-aspnet-codegenerator`...
|
|
|
|
On ajoute les extensions MediatR pour pouvoir facilement enregistrer les services dans le conteneur IoC d'ASP.Net Core avec `dotnet add package MediatR.Extensions.Microsoft.DependencyInjection`.
|
|
|
|
Pour la couche d'infrastructure, il nous faut implémenter notre `ILinkRepository` avec EF Core dans un nouveau projet `Infrastructure`.
|
|
|
|
```console
|
|
$ dotnet new classlib -o Infrastructure
|
|
$ cd Infrastructure
|
|
$ dotnet new gitignore
|
|
$ dotnet add package Microsoft.EntityFrameworkCore.Sqlite
|
|
$ dotnet add package Microsoft.EntityFrameworkCore.Design
|
|
```
|
|
|
|
On installe les outils Entity framework `dotnet tool install --global dotnet-ef`.
|
|
|
|
On crée un projet d'api web vide (pour permettre de mieux comprendre comment fonctionne Asp.Net) avec :
|
|
|
|
```console
|
|
$ cd Apps
|
|
$ dotnet new web -o Api
|
|
$ cd Api
|
|
$ dotnet new gitignore
|
|
```
|
|
|
|
Pour plus tard, pour la génération de doc :
|
|
|
|
project.csproj
|
|
|
|
<PropertyGroup>
|
|
<GenerateDocumentationFile>true</GenerateDocumentationFile>
|
|
<DocumentationFile>bin\YourApi.XML</DocumentationFile>
|
|
</PropertyGroup>
|
|
|
|
## Docker
|
|
|
|
On build à la racine de la solution avec `docker build -f .\Apps\Website\Dockerfile -t hn .`.
|
|
|
|
Et on lance avec `docker run -it --rm -p "8000:80" hn`.
|