Aller au contenu principal

23-1 Créer les projets API et Client Admin

Comme présenté dans l'introduction, nous aurons besoin de 2 nouveaux projets:

  • Un projet d'API pour exposer des données au format JSON
  • Un projet Blazor WASM pour contenir la logique de l'interface utilisateur et la communication avec le serveur

Créer le projet API​

Il existe un gabarit de projet .NET Core d'API qu'il est possible d'utiliser.

  1. Sur la solution Snowfall, faire Add -> New Project... Imgur

  2. Créer un nouveau projet de type Web API et nommez-le Snowfall.Web.Api. IMPORTANT: décochez UseMinimalAPIs sous la section Advanced Settings. img

C'est tout pour le moment!

Créer le projet Blazor WASM (Client Admin)​

Dans un deuxième temps, on créera un projet pour l'interface d'administration. Ce projet sera de type Blazor WASM et un gabarit existe pour faciliter la création du projet.

  1. Sur la solution Snowfall, faire Add -> New Project... Imgur

  2. Créer un nouveau projet de type Blazor WebAssembly Standalone App, nommez-le Snowfall.Web.Admin et décochez Include sample pages. img

Les deux projets sont maintenant créés et vous devriez avoir les configurations de lancement suivantes:

img

Lancer l'API​

Vous pouvez démarrer le projet Snowfall.Web.Api: http et si vous vous rendez dans le navigateur, vous aurez une erreur 404.

img

D'une certaine façon, c'est normal puisqu'on ne demande pas à une API d'afficher du HTML. Par contre, il serait intéressant de pouvoir voir rapidement les points de terminaison exposés par l'API.

Installer Scalar​

.NET 9 configure OpenAPI par défaut, mais n'expose pas d'interface graphique pour consulter la documentation de l'API. Vous avez possiblement utilisé Swagger en Web 3. Nous allons utiliser dans le cadre du cours Scalar, qui est similaire à Swagger, mais avec une interface plus moderne et plus de fonctionnalités pour interagir avec l'API.

  1. Dans le projet Api, installez la dépendance NuGet suivante: Scalar.AspNetCore
  2. Dans Program.cs du projet Api, ajoutez le support pour Scalar.
    Snowfall.Web.Api/Program.cs
    if (app.Environment.IsDevelopment())
    {
        app.MapOpenApi();
        app.MapScalarApiReference();
    }
  3. Rendez-vous vers http://localhost:<votre-port>/scalar/v1 et vous devriez être accueillir par une vue comme celle-ci! img

Tester une requête avec Scalar​

Scalar exposera toutes les actions possibles avec l'API.

L'API de base créée par .NET viens avec une action GET /weatherForecast.

Pour tester une requête:

  1. Cliquer sur la requête en question et cliquer sur Test Request. img
  2. L'écran qui apparait vous permet d'entrer des paramètres optionnels et d'appuyer sur Send pour soumettre la requête. img
  3. Vous verrez apparaître le résultat de la requête. img

Tester le client admin​

Vous pouvez ensuite démarrer le projet Snowfall.Web.Admin et vous devriez obtenir ceci:

http://localhost:4200

Ce que vous voyez est une application WebAssembly roulant dans le navigateur.

Pas très emballant pour le moment, mais nous y reviendrons!