L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Connexion d’une API Web à une application ASP.NET Core MVC
Les API Web sont courantes, en particulier dans le développement .NET. Mais une question que se posent de nombreux développeurs est de savoir comment les points de terminaison d’une API sont consommés, c’est-à-dire comment une API Web est-elle intégrée à une autre application ? Dans cet article, nous allons faire cette intégration de manière simple.
Les API Web sont présentes dans la plupart des systèmes modernes en raison de leurs hautes performances et de leur facilité d’intégration entre différents systèmes. Dans ce contexte, il y a beaucoup de contenu disponible lié aux API, mais une question très courante, en particulier pour les débutants ASP.NET Core, est de savoir comment s’intégrer à une API et utiliser ses points de terminaison. Dans cet article, nous allons créer de toutes pièces une API Web simple et une application en ASP.NET Core et l’intégrer à cette API de manière simple.
Informations utiles
L’objet de cet article sera l’intégration entre une API Web et une application ASP.NET Core, donc certains sujets ne seront pas abordés en détail, comme « Qu’est-ce qu’une API Web » par exemple. N’hésitez pas à parcourir le blog et à approfondir vos connaissances sur ces sujets, si tel est votre objectif.
Au lieu de cela, nous adopterons une approche pratique et nous nous concentrerons sur les détails de l’intégration entre ces technologies.
Vous pouvez accéder à l’intégralité code source du projet final sur ce lien.
Création de la solution et du projet Web API
Tout d’abord, nous allons créer le projet de solution, puis nous allons créer le projet d’API Web (dans ce cas, une API minimale disponible dans .NET 6) et l’ajouter à la solution. Donc, dans le terminal, exécutez les commandes suivantes :
dotnet new sln --name WeatherForecast
dotnet new web --name WeatherForecast.Web.Api
dotnet sln add WeatherForecast.Web.Api/
Ensuite, vous pouvez ouvrir le fichier « WeatherForecast.sln » avec votre IDE préféré. Dans cet article, j’utiliserai Visual Studio 2022.
Création de l’entité de solution
Notre API fournira des données météorologiques factices. Ci-dessous, nous allons créer une entité qui recevra les propriétés, qui seront affichées par l’application ASP.NET que nous créerons plus tard. Ainsi, dans le projet API, créez un dossier appelé « Models » et créez à l’intérieur une classe appelée « WeatherForecastModel ». Remplacez le code généré par le code ci-dessous :
namespace WeatherForecast.Web.Api.Models
{
public class WeatherForecastModel
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
public string Summary { get; set; }
}
}
Création des points de terminaison
Les API minimales nous permettent de placer les points de terminaison directement dans la classe Program ; cependant, pour rendre le code plus organisé, nous les créerons dans une classe séparée. Alors, créez un dossier appelé « Endpoints ». À l’intérieur de cela, créez une nouvelle classe appelée « LocationEndpointsConfig » et remplacez le code par le code ci-dessous :
using WeatherForecast.Web.Api.Models;
namespace WeatherForecast.Web.Api.Endpoints
{
public class LocationEndpointsConfig
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public static void AddEndpoints(WebApplication app)
{
app.MapGet("api/find", () =>
{
var rng = new Random();
var weatherForecast = Enumerable.Range(1, 5).Select(index => new WeatherForecastModel
{
Date = DateTime.Now.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
})
.ToArray();
return Results.Ok(weatherForecast);
});
}
}
}
Dans cette classe, nous créons un point de terminaison GET qui générera des données aléatoires et renverra un tableau « WeatherForecastModel » rempli avec les données générées.
Configuration des terminaux
Maintenant que nous avons créé le point de terminaison nécessaire pour renvoyer les données, nous allons ajouter la configuration de la classe qui contient les points de terminaison. Remplacez donc le code de la classe « Program » par le code ci-dessous :
using WeatherForecast.Web.Api.Endpoints;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddEndpointsApiExplorer();
var app = builder.Build();
LocationEndpointsConfig.AddEndpoints(app);
app.Run();
Et puis nous pouvons exécuter le projet. Si nous accédons à l’adresse « https://localhost:
(Comme les données sont aléatoires, elles seront probablement différentes sur votre machine.)
Avec cela, notre API Web est prête et fonctionne. Nous devons maintenant créer l’application qui consommera le point de terminaison que nous avons créé.
Création du projet d’application Web
Pour consommer le point de terminaison créé précédemment, nous allons créer une application simple dans ASP.NET Core MVC, qui fera une requête à l’API et affichera les données renvoyées. Ainsi, dans le même répertoire où vous avez créé le projet API, exécutez les commandes ci-dessous, ce qui créera le projet d’application et l’ajoutera à la solution.
dotnet new mvc --name WeatherForecast.Web
dotnet sln add WeatherForecast.Web/
Création de l’entité d’application Web
Dans le projet « WeatherForecast.Web » dans le dossier « Models », créez une nouvelle classe appelée « WeatherForecastModel » et remplacez le code généré par le code ci-dessous :
namespace WeatherForecast.Web.Models
{
public class WeatherForecastModel
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF { get; set; }
public string Summary { get; set; }
}
}
Création du Client
Le client sera responsable de la communication directe avec l’API. Il contiendra une méthode statique chargée de désérialiser la réponse de l’API et de la formater.
Créez donc un nouveau dossier appelé « Helpers » et ajoutez-y une nouvelle classe appelée « HttpClientExtensions », où vous pouvez remplacer le code généré par le code ci-dessous :
using System.Text.Json;
namespace WeatherForecast.Web.Helpers
{
public static class HttpClientExtensions
{
public static async Task<T> ReadContentAsync<T>(this HttpResponseMessage response)
{
if (response.IsSuccessStatusCode == false)
throw new ApplicationException($"Something went wrong calling the API: {response.ReasonPhrase}");
var dataAsString = await response.Content.ReadAsStringAsync().ConfigureAwait(false);
var result = JsonSerializer.Deserialize<T>(
dataAsString, new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
});
return result;
}
}
}
Création du service
La classe de service sera chargée d’implémenter les méthodes disponibles dans le client que nous venons de créer, dans ce cas, de récupérer les données via l’API.
Créez donc un nouveau dossier appelé « Services » et à l’intérieur, un dossier appelé « Interfaces ». Dans ce dossier, créez une nouvelle interface appelée « IWeatherForecastService » et remplacez le code généré par le code ci-dessous :
using WeatherForecast.Web.Models;
namespace WeatherForecast.Web.Services.Interfaces
{
public interface IWeatherForecastService
{
Task<IEnumerable<WeatherForecastModel>> Find();
}
}
Nous allons maintenant créer la classe qui implémentera l’Interface précédente. Il consommera également le point de terminaison de l’API via la route représentée par la variable « BasePath ».
Dans le dossier « Services », créez une classe appelée « WeatherForecastService » et remplacez le code généré par celui ci-dessous :
using WeatherForecast.Web.Models;
using WeatherForecast.Web.Helpers;
using WeatherForecast.Web.Services.Interfaces;
namespace WeatherForecast.Web.Services
{
public class WeatherForecastService : IWeatherForecastService
{
private readonly HttpClient _client;
public const string BasePath = "/api/find";
public WeatherForecastService(HttpClient client)
{
_client = client ?? throw new ArgumentNullException(nameof(client));
}
public async Task<IEnumerable<WeatherForecastModel>> Find()
{
var response = await _client.GetAsync(BasePath);
return await response.ReadContentAsync<List<WeatherForecastModel>>();
}
}
}
Création du contrôleur
Le nouveau contrôleur utilisera la méthode de service que nous venons de créer et renverra les données à l’interface. Ainsi, dans le dossier Controllers, créez un nouveau contrôleur appelé « WeatherForecastController » et remplacez votre code par les lignes ci-dessous :
using Microsoft.AspNetCore.Mvc;
using WeatherForecast.Web.Services.Interfaces;
namespace WeatherForecast.Web.Controllers
{
public class WeatherForecastController : Controller
{
private readonly IWeatherForecastService _service;
public WeatherForecastController(IWeatherForecastService service)
{
_service = service ?? throw new ArgumentNullException(nameof(service));
}
public async Task<IActionResult> WeatherForecastIndex()
{
var products = await _service.Find();
return View(products);
}
}
}
Ajout de paramètres de service
Maintenant que nous avons créé le client, le service et le contrôleur, nous devons ajouter leurs paramètres à la classe Program. Remplacez donc le code de la classe Program par le bloc ci-dessous. (Remplacer « <PORT NUMBER>” avec le port API local.)
using WeatherForecast.Web.Services;
using WeatherForecast.Web.Services.Interfaces;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
builder.Services.AddHttpClient<IWeatherForecastService, WeatherForecastService>(c =>
c.BaseAddress = new Uri("https://localhost:<PORT NUMBER>/"));
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
Configuration de l’interface
Notre application est presque prête, nous n’avons plus qu’à configurer l’affichage des données. Pour cela, dans le dossier « Vues », créez un dossier appelé « WeatherForecast » et à l’intérieur, une nouvelle vue appelée « WeatherForecastIndex.cshtml », où vous pouvez mettre le code ci-dessous :
@model IEnumerable<WeatherForecast.Web.Models.WeatherForecastModel>
<br/>
<br/>
<table class="table">
<tdead>
<tr>
<th>Date</th>
<th>Temperature C</th>
<th>Temperature F</th>
<th>Summary</th>
</tr>
</tdead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Date</td>
<td>@item.TemperatureC</td>
<td>@item.TemperatureF</td>
<td>@item.Summary</td>
</tr>
}
</tbody>
</table>
</div>
Et dans le fichier Views > Shared > _Layout.cshtml ajoutez le code suivant sous la balise Privacy :
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="WeatherForecast" asp-action="WeatherForecastIndex">Weather Forecast</a>
</li>
Exécution des deux projets
Pour exécuter le projet d’API en même temps que le projet d’application, nous devons le configurer, comme vous pouvez le voir sur l’image ci-dessous :
Enfin, nous pouvons démarrer l’application – le projet API et le projet d’application seront démarrés. En cliquant sur le menu « Weather Forecast », nous serons redirigés vers une autre page où les données de l’API seront affichées comme dans le GIF ci-dessous :
Conclusion
Dans cet article, nous avons créé une API Web simple et fourni un point de terminaison pour renvoyer des données aléatoires. Ensuite, nous avons créé une application ASP.NET Core qui consomme ce point de terminaison et affiche les données dans le navigateur.
Il existe de nombreuses façons de faire cette communication, mais celle enseignée dans l’article est certainement l’une des plus simples.
Source link