ASP.NET Core & Entity Framework & Angular - Architecture d'une application professionnelle

Voici une stack stable ASP.NET Core & Angular et bien sûr Entity Framework Core pour l'accès aux données. Une stack avec laquelle on peut développer durablement des applications webs. Dans ce post j'aborde les solutions pour réaliser une vraie application ASP.NET Core & Angular (full stack).

Après la mise en bouche de l'article 1 :

ASP.NET Core & Angular Template - 1
Apprendre à installer et à exécuter une Application ASP.NET Core & Angular

Suivi de l'article 2 :

ASP.NET Core & Angular Template - 2
Apprendre à lancer le Server Angular CLI depuis Visual Studio Code indépendamment du processus ASP.NET Core.

Je définis l'architecture d'une véritable application du monde réel avec des vraies données.

ASP.NET Core et Visual Studio Community 2019 nous donne maintenant accès à un Template d'application Angular. Angular c'est du langage TypeScript, ce langage développé par Miscrosoft et adoubé par Google, alors allons y.

Etude de faisabilité et architecture

Les Design Patterns de notre Application :

Microsoft - Implémenter la couche de persistance de l’infrastructure avec Entity Framework Core

Le schéma suivant est intéressant :



Utilisation de dépôts personnalisés par rapport à un simple DbContext

Voici les deux Patterns principaux de notre Application ASP.NET Core & Angular, le "Repository" et le "UnitOfWork" qui rassemblent les objets récupérés depuis la base de donnée.

Ce projet est du type SPA (Single Page Application) ce qui implique cette organisation avec un Repository pour tout charger au lancement de l'application. Cela donne une bien meilleure réactivité à l'interface utilisateur.

Voici un peu de code avec la page suivante :

Micorsoft - Tom Dykstra - Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application

Pattern IoC, Repository and Unit Of Woks sont des mots clefs qui sonnent bons dans le cadre de ce projet. Alors allons y défrichons !

Il s'agit donc du DDD (Domain Driven Design).

Je regarde les travaux de Tugberk Ugurlu

Tugberk Ugurlu - Generic Repository Pattern - Entity Framework, ASP.NET MVC and Unit Testing Triangle

Ce sont les travaux les plus avancés en matière de "Repository Pattern" mais dans sa "Best approach" à mon sens il va trop loin en générifiant également le contexte dans la classe abstraite suivante :

public abstract class GenericRepository<C, T> :
    IGenericRepository<T> where T : class where C : DbContext, new() {

Autres liens utiles pour travailler avec ASP.NET Core EF et Angular

Arch - UnitOfWork
Joli projet à étudier, bel exemple de pattern Repository et Unit Of Work

CODE MAZE - Implementing Asynchronous Generic Repository in ASP.NET Core
Le modèle Repository augmente le niveau d'abstraction dans votre code. Cela peut rendre le code plus difficile à comprendre pour les développeurs qui ne sont pas familiarisés avec ce pattern. Mais une fois que vous en aurez pris connaissance, cela réduira la quantité de code redondant et facilitera la maintenance de la logique.

Et encore Ici :

.NET Entity Framework Core Generic Async Operations With Unit Of Work Generic Repository

Voilà, avec tous ces éléments, nous sommes en mesure de réaliser le projet d'un Dashboard Universel qu'il suffirait de brancher sur une base de données pour en connaitre les éléments essentiels et afficher dans une interface Web en Angular leurs évolutions dans le temps.

Spécifications du projet

Je souhaite utiliser au maximum les possibilités d'Angular et le rafraichissement des datas en provenance d'une base de données afin de réaliser un Dashboard Universel (un Tableau de bord) afin de maitriser le SI (Système d'Information de l'entreprise).

Mon projet réalise du Monitoring de données et permet à l'utilisateur de positionner des indicateurs, des "vue mètres", des gauges, des graphiques afin de permettre l'observation des données en fonction du temps (en temps réel ;-).

Exemple : J'ai à traiter 1000 tickets sur ma plateforme de Call Center. Tout au long de la journée des opérateurs interviennent pour traiter ces tickets, ils mettent à jour la case "NbTicket" dont la valeur augmente d'heure en heure.

Voici le graphique que j'obtiens à la fin de la journée :

Le Graphe de mon Data Monitor sur les tickets traités

Les opérateurs démarrent à 8 h et terminent à 19 h.

Voici encore quelques exemples de projets Dashboard desquels s'inspirer :

Dashing - The exceptionally handsome dashboard framework

Et ceux qui en parlent le mieux, ce sont eux :

Agile Tribu - DASHING DEUX EN UN : POUR UN DASHBOARD ÉTINCELANT !

Je sais ça fait des dizaines d'années que l'on cherche à faire un "Dashboard" pour ma part, j'ai débuté en 2011 avec Silverlight ce fut un fiasco. Je crois qu'avec Angular, on peut faire quelque choses de bien.

Ici c'est magique
Attention cela ne fonctionne pas pour le navigateur IE !

Mon projet, c'est donc de faire un Shopify/dashing en C#.NET

dashing.net is a direct .net port of the dashing framework originally created by Shopify/dashing

De faire du monitoring de données et le meilleur site pour en parler que j'ai trouvé c'est ici :

Informatica - What is Data Monitoring?

Un autre site avec des acteurs du "Data Monitoring"

solarwinds - Server & Application Monitor

Et là, il y de superbes graphiques :

https://solutionsreview.com/network-monitoring/

IHM ou Front

C'est une application Angular CLI que l'on ouvre avec Visual Studio Code pour y lancer la commande du type :

>ng serve

Exemple de Dashboard :

DevExpress - Sales & Revenue Dashboard

Application ASP.NET Core & Angular

Le répertoire ClientApp héberge l'application Angular au sein du répertoire src autour de l'application Angular pour qu'elle fonctionne il y a plein de trucs "Windows".

Autour du Répertoire "ClientApp" nous avons :

Le fichier Startup.cs

Avec ASP.NET Core contrairement à ASP.NET Framework, il y a plus d'ouvertures vers des extensions "libres" et donc plus de choses à configurer à travers le fichier Startup.cs.

J'ai une erreur du type :

Severity Code Description Project File Line Suppression State
Error CS1929 'CompatibilityVersion' does not contain a definition for 'SetCompatibilityVersion' and the best extension method overload 'MvcCoreMvcBuilderExtensions.SetCompatibilityVersion(IMvcBuilder, CompatibilityVersion)' requires a receiver of type 'IMvcBuilder'

Heureusement il y a StackOverFlow :

StackOverflow - How to fix 'IMvcBuilder' doesn't contain a definition for 'AddXmlDataContractSerializerFormatters'

>PM Install-Package Microsoft.AspNetCore.Mvc.Formatters.Xml

Mais je croyais que les Packages Nugets étaient réinstallés automatiquement !

IConfigurationSection

IServiceCollection.Configure

Fichier de configuration appsettings.json

D'où viennent les paramètres de configuration ? Il n'y a plus de fichier Web.Config mais il y a ce code :

var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");

var config = new ConfigurationBuilder()
                .SetBasePath(pathToContentRoot)
                .AddJsonFile("appSettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{environment}.json", optional: true)
                .Build();

Alors d'où vient la variable d'environnement : ASPNETCORE_ENVIRONMENT

ASPNETCORE_ENVIRONMENT value = Development

MSDN - Utiliser plusieurs environnements dans ASP.NET Core 

Dependency Injection

Un sujet à travailler autour de la fonction AddMvc : MVC services to the specified Microsoft.Extensions.DependencyInjection.IServiceCollection

AddMvc Extensions.DependencyInjection AddJsonOptions

Localisation

Localization de l'application c'est un sujet qu'il faut prendre en compte au début du développement. Le meilleur site que j'ai trouvé pour ça :

Blog of Joonas W. - ASP.NET Core Localization Deep Dive

Couche Model

Implémentation des Models de base de données avec EF Core, c'est un jeu d'enfant.

Couche Business

Autour de l'objet DbContext elle crée les services de l'application liés au métier, du type :

ObjetQueryBusiness
ObjetDefinitionBusiness

Implémente le Pattern UnitOfWork

Implémente l'interface de l'ensemble des données du projet : MyProject

IMyProjectBusiness

Création d'un objet SQL Server Connector

Il s'agit de créer un Multiconnectors pour gérer les liaisons aux bases de données, il faut être capable de se connecter à tout type de base données c'est prévu de base par EF Core.

Ca me rappelle mes bonnes vielles applications webs asp.net avec des connecteurs multiples à des bases multiples et puis à maintenir, c'était tellement compliqué qu'à la fin on finissait par ne choisir plus qu'un seul modèle de connecteur : SQLServer !

ASP.NET Core SqlServeur Connector

Entity Framework - Fournisseurs de base de données

GetQueryResultJsonAsync
  ReceiveToJsonAsync
    Exécution d'une query et retour en Json
    REST services with ASP.NET Core and SQL Database
    syed-afraz-ali/SqlDataReaderExtensions.cs
    Mais aussi par ici : blog4rami - SqlDataReader to JSON string

EntityDatabaseTransaction

On regardera également du côté de :

GitHub - EntityFramework.SqlServerCompact

Couche Data Access Layer (DAL)

On doit y Implémenter le Pattern Repository
Possède le répertoire "Migrations" et les éléments nécessaires à l'accès aux base de données.

Implémente la Class MyProjectDbContext qui dérive de DbContext.

Question : Quelles différences entre les fonctions DbSet et Set() dans Entity Framework Core ? Avec la réponse sur ce site intéressant :

Entity Framework Core Tutorial
Vous utilisez DbSet lorsque vous connaissez le type d'entité avec lequel vous souhaitez jouer. Vous utilisez Set<> lorsque vous ne connaissez pas le type d'entité avec lequel vous voulez jouer.

Les Widgets

L'avantage avec l'utilisation de JavaScripts, c'est qu'il existe bon nombre de librairies graphiques de contrôles utilisateurs prêts à être utilisés. Pour n'en citer qu'une je prendrai ZingChart :

Zingchart - Gauge Chart Type Demos
De magnifiques Gauges


Zingchart - Your First JavaScript Chart



Conclusion

L'architecture des applications ASP.NET Core est complexe avec de nombreuses possibilités de configuration grâce à l'Injection des Dépendances et des modules tiers. Nous allons aborder chacun de ces morceaux pour créer l'architecture d'une Véritable application ASP.NET Core & Angular.

Pour terminer l'étude de ce projet de "Dashboard Universel", encore un peu de lecture au sujet des Widgets, je vous laisse avec la lecture de la page suivante :

BFM Business - Le standard Universal Widget API

Et maintenant notre produit final, une solution Open Source : 

Dashboard Universel

ASP.NET Core & Angular - Dashboard Universel

Come and visit us you'll be always welcome !

Have great fun!


ASP.NET Web API - Créer une véritable application - #2

Vous souhaitez  utiliser une Web API pour fournir un service RESTful (autrement dit API REST) vers un Client ASP.NET et ce n'est pas si facile. En effet cette techno est faite pour fournir une API vers le poste de travail, la tablette, le mobile. Mais pour afficher des données en provenance d'une Web API dans une application ASP.NET, il va falloir écrire pas mal de javascript et oui ... alors allons-y.

Démarrons avec une bonne application de départ, un bon Template, je vous conseille BookService de Mike Wasson qui s'illustre en écrivant la série d'articles suivants :

Using Web API 2 with Entity Framework 6



https://docs.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-1

Voilà, on est en plein dans le vif du sujet, la plus part des sujets sont résolus dans cette série d'articles seulement maintenant, comment aller plus loin. En effet, le CRUD (Create Read Update Delete) n'est pas complet. On ne peut en définitive pas faire grand chose avec cette simple application.

Je vais adapter les codes sources de ce sample pour en faire une Filmothèque, et vous permettre de gérer vos films favoris.

Eviter un premier écueil, le piège du cache

Il ne faut pas oublier le cache de votre navigateur. Pour développer, ici on est en JavaScripts et donc si vous devez modifier les scripts associés à votre projet, comme par exemple le script "app.js" vous devrez supprimer les données du cache de votre navigateur sinon vous restez avec l'ancien script et vous ne verrez pas vos modifications :



JavaScripts de mon application ASP.NET WebAPI

Vous trouverez pour chaque navigateur le moyen de supprimer les données du cache :

Supprimer les données du cache de votre navigateur !

Plus pratique, le raccourcis :

Ctrl + F5 : démarrer et vider le cache

 

Qui démarre le navigateur en supprimant les données du cache.

Gestion des données avec le Package Manager et "Code First Migrations"

Je ne connaissais pas, alors je prends des notes d'un truc assez cool. C'est l'utilisation de "Code First Migrations" avec Entity Framework. C'est à dire d'écrire du code C# pour remplir la BD avec des données en utilisant la fonction Configuration.Seed.

Puis simplement avec les commandes :

PM> Enable-Migrations
PM> Update-Database

Le plus difficile, c'est de trouver comment afficher la Console du Gestionnaire de packages, c'est ici :



Outils->Gestionnaire de packages NuGet->Console du Gestionnaire de package

Dans cet exemple :
On va apprendre à maitriser le script app.js qui est le ViewModel de notre vue sur le service WebAPI
On fera également du bootstrap Framework CSS
On ajoutera un bouton "Delete" pour pouvoir supprimer une entité et ainsi réaliser le CRUD complet.

Architecture de l'application WebAPI

Il s'agit bien entendu d'une architecture MVC (Model View Controller). Avec un contrôleur sécifique dédié aux WebApi.

Model

Le Model est calqué sur la base de donnée grâce à l'utilisation de "Code First". Le modèle peut être modifier dans le code et la base mise à jour.

Le fichier Configuration.cs du répertoire Migrations permet en utilisant la fonction Seed de créer des enregistrements dans la BD.



Utilisation de Code first et création d'éléments dans la Base de Données

Controller

Il s'agit d'une WebAPI le contrôleur dérive donc d'un ApiController

La fonction GetFilm de l'ApiController qui permet de retourner le film demandé par "id" :


GetFilm FilmsController : ApiController

View

La View Index.cshtml est posée sur un ViewModel définit dans le JavaScript app.js que l'on a vu au dessus. C'est à la fois la difficulté et la simplicité de de ce choix d'application.

Simplicité car l'application est fluide et toutes les opérations sur les objets découlent de ce choix d'architecture, difficulté car il faut modifier le JavaScript pour l'adapter au besoin de lapplication.

On va ajouter une table pour nous permettre d'afficher nos données et de les manipuler : afficher la Vue détails de notre objet film.



Ajouter une légende

Et on ajoute un href deleteFilm qui va déclencher la fonction JavaScript :

app.js function deleteFilm

Voici donc le CRUD de mon application FilmService

Démonstration rapide du CRUD par quelques copies d'écrans. Au démarrage de l'application nous avons dans le navigateur la page suivante :



Home/Index

J'ajoute mon film, je choisi comme Author : Cédric clapich, je clique sur le bouton Submit.

Add Film

Le nouveau film apparait dans la liste des Films :

Je peux alors choisir d'afficher les détails du film ou de le supprimer. Je choisis d'afficher les détails en cliquant sur Details :

La partie détails apparait

Je choisis en suite de supprimer ce film, je clique sur Delete.

Suppression du film

Si je reclique sur "Delete" un message "Not Found" apparait...



Voilà, c'est un CRUD avec une Application ASP.NET qui utilise knockout.js pour fabriquer le ViewModel du pattern MVC.

Pour ajouter un film, j'ai utilisé un POST. Il faudrait utiliser un PUT pour effectuer une mise à jour mais l'Update du CRUD peut toujours être vu comme une suppression suivi d'une recréation. Nous avons donc une application complète qui résous quelques petits soucis laissés en suspend par M. Wasson.

Vous êtes intéressé par des détails supplémentaires... n'hésitez pas, faites moi signe, laissez moi un commentaire. Je vous expliquerai la partie qu'il vous manque.

Voilà on vient de débuter un vrai projet d'API REST.

To Be Continued ...

Download Source Code

Je vous livre les sources, je reviendrais les commenter de façon plus approfondi une prochaine fois. A l'intérieur du .zip il y a un petit fichier readme.txt qui vous permet d'installer la BD de l'application.

Download Source Code ASP.NET WebAPI FilmLibrary in C#

Je dois partir faire du "ASP.NET Core" multiplateforme ...

Don't forget to Have fun!