Pour t\u00e9l\u00e9charger le code source de cet article, vous pouvez visiter notre d\u00e9p\u00f4t GitHub<\/a> .<\/p>\n<\/blockquote>\n\n\n\n Plongeons dedans.<\/p>\n\n\n Lorsque les d\u00e9veloppeurs consomment des API, ils veulent probablement essayer de r\u00e9soudre des probl\u00e8mes commerciaux importants. Par cons\u00e9quent, il est tr\u00e8s important pour eux de comprendre comment utiliser efficacement les API. C’est l\u00e0 que la documentation de l’API entre en jeu.<\/p>\n\n\n\n La documentation de l’API est le processus consistant \u00e0 donner des instructions sur la mani\u00e8re d’utiliser et d’int\u00e9grer efficacement une API. Ainsi, il peut \u00eatre consid\u00e9r\u00e9 comme un manuel de r\u00e9f\u00e9rence concis contenant toutes les informations n\u00e9cessaires pour travailler avec une API, avec des d\u00e9tails sur les fonctions, les classes, les types de retour, les arguments, et bien plus encore, soutenus par des tutoriels et des exemples.<\/p>\n\n\n\n Ainsi, disposer de la documentation appropri\u00e9e pour une API permet aux consommateurs d’int\u00e9grer cette API le plus rapidement possible<\/strong> et d’avancer dans leur d\u00e9veloppement. En outre, cela les aide \u00e9galement \u00e0 comprendre la valeur et l’utilisation de l’API, am\u00e9liore les chances d’adoption de l’API et facilite la maintenance et la prise en charge des API en g\u00e9n\u00e9ral<\/strong> .<\/p>\n\n\n\n Bon, parlons d’un outil que nous allons utiliser pour cr\u00e9er la documentation de l’API.<\/p>\n\n\n\n Swagger est un ensemble d’outils cr\u00e9\u00e9s par la soci\u00e9t\u00e9 SmartBear pour nous aider dans le processus de production et de documentation de l’API. Bien que nous entendions toujours Swagger \u00eatre appel\u00e9 OpenAPI, ce n’est plus vrai<\/strong> . OpenAPI fait r\u00e9f\u00e9rence \u00e0 la sp\u00e9cification standard de l’industrie pour la conception d’API RESTful.<\/p>\n\n\n\n En bref, OpenAPI est une sp\u00e9cification standard de l’industrie pour les API Restful, et Swagger est compos\u00e9 des outils utilis\u00e9s pour impl\u00e9menter OpenAPI.<\/strong><\/p>\n\n\n\n Les outils Swagger open source se composent de :<\/p>\n\n\n\n Dans ce didacticiel, nous allons parler de la configuration et de l’utilisation de l’interface utilisateur Swagger.<\/p>\n\n\n\n Swagger UI offre une interface Web qui permet \u00e0 quiconque d’interagir avec l’API sans avoir \u00e0 conna\u00eetre l’impl\u00e9mentation. Il est g\u00e9n\u00e9r\u00e9 automatiquement \u00e0 partir de notre sp\u00e9cification OpenAPI et permet une visualisation facile de la documentation.<\/p>\n\n\n\n Nous pouvons utiliser le package Swashbuckle pour int\u00e9grer facilement Swagger dans nos projets d’API Web .NET Core. Il g\u00e9n\u00e9rera la sp\u00e9cification Swagger pour notre projet. De plus, l’interface utilisateur Swagger est \u00e9galement contenue dans Swashbuckle.<\/p>\n\n\n\n Il y a trois composants principaux dans le package Swashbuckle :<\/p>\n\n\n\n La premi\u00e8re \u00e9tape consiste \u00e0 installer le package Swashbuckle.<\/p>\n\n\n\n Nous pouvons ex\u00e9cuter la commande suivante dans la fen\u00eatre de la console du gestionnaire de packages :<\/p>\n\n\n\n Cela installera le package Swashbuckle dans notre application. Vous pouvez mettre \u00e0 niveau la version de votre c\u00f4t\u00e9, mais cet article est compatible avec la version 6.1.4.<\/p>\n\n\n\n L’\u00e9tape suivante consiste \u00e0 configurer le Swagger Middleware.<\/p>\n\n\n\n Apportons les changements suivants dans la Par cons\u00e9quent, cela ajoute le g\u00e9n\u00e9rateur Swagger \u00e0 la collection de services. <\/p>\n\n\n\n Dans la En ex\u00e9cutant ces \u00e9tapes, le Swagger est configur\u00e9 et pr\u00eat \u00e0 \u00eatre utilis\u00e9 dans notre projet.<\/p>\n\n\n\n Dans un premier temps, nous allons cr\u00e9er une classe Ensuite, cr\u00e9ons un contr\u00f4leur d’API avec des m\u00e9thodes d’action. Nous allons utiliser des donn\u00e9es fictives et nous concentrer sur la compr\u00e9hension des capacit\u00e9s de Swagger :<\/p>\n\n\n\n Maintenant, lan\u00e7ons l’application et naviguons vers Pour inspecter l’interface utilisateur Swagger, nous pouvons acc\u00e9der \u00e0 Nous pouvons maintenant explorer l’API via l’interface utilisateur Swagger et il sera plus facile de l’int\u00e9grer \u00e0 d’autres applications. De plus, nous pouvons voir chaque contr\u00f4leur et ses m\u00e9thodes d’action.<\/p>\n\n\n\n Une fois que nous avons cliqu\u00e9 sur une m\u00e9thode d’action, nous pouvons voir des informations d\u00e9taill\u00e9es telles que les param\u00e8tres, la r\u00e9ponse et des exemples de valeurs. Il existe \u00e9galement une option pour essayer chacune de ces m\u00e9thodes d’action :<\/p>\n\n\n\n En cliquant sur le bouton \u00ab\u00a0Essayer\u00a0\u00bb, nous pouvons tester le point de terminaison et voir la r\u00e9ponse :<\/p>\n\n\n\n Swagger fournit des options pour \u00e9tendre la documentation et personnaliser l’interface utilisateur.<\/p>\n\n\n\n Regardons les diff\u00e9rentes options pour \u00e9tendre la documentation.<\/p>\n\n\n\n Voyons d’abord comment nous pouvons sp\u00e9cifier les informations et la description de l’API.<\/p>\n\n\n\n L’ Ex\u00e9cutons \u00e0 nouveau l’application et explorons l’interface utilisateur Swagger :<\/p>\n\n\n\n Nous pouvons voir que le document Swagger est maintenant mis \u00e0 jour avec API Info.<\/p>\n\n\n\n Pour activer les commentaires XML, nous devons suivre les \u00e9tapes suivantes :<\/p>\n\n\n\n Dans la D\u00e9sormais, l’ajout de commentaires \u00e0 triple barre oblique \u00e0 la m\u00e9thode d’action am\u00e9liore l’interface utilisateur Swagger en ajoutant une description \u00e0 l’en-t\u00eate de section.<\/p>\n\n\n\n Ajoutons un r\u00e9sum\u00e9 :<\/p>\n\n\n\n Cela affiche le r\u00e9sum\u00e9 par rapport \u00e0 la m\u00e9thode d’action :<\/p>\n\n\n\n Nous pouvons en outre ajouter des Cela am\u00e9liorera l’interface utilisateur avec des informations suppl\u00e9mentaires :<\/p>\n\n\n\n Nous avons appris \u00e0 am\u00e9liorer la documentation \u00e0 l’aide de commentaires XML.<\/p>\n\n\n\n Nous pouvons d\u00e9corer un mod\u00e8le avec des attributs pour am\u00e9liorer la documentation.<\/p>\n\n\n\n Ajoutons un Les d\u00e9veloppeurs qui utilisent nos API sont g\u00e9n\u00e9ralement plus int\u00e9ress\u00e9s par ce qu’elles renvoient, en particulier les types de r\u00e9ponse et les codes d’erreur. Il est donc tr\u00e8s important de d\u00e9crire nos types de r\u00e9ponses. Ceux-ci sont indiqu\u00e9s \u00e0 l’aide de commentaires XML et d’annotations de donn\u00e9es.<\/p>\n\n\n\n Am\u00e9liorons un peu les types de r\u00e9ponse :<\/p>\n\n\n\n Cela se refl\u00e9tera dans la section R\u00e9ponses :<\/p>\n\n\n\n Dans cette section, nous avons examin\u00e9 diverses options pour \u00e9tendre la documentation.<\/p>\n\n\n\n L’interface utilisateur par d\u00e9faut de Swagger est plut\u00f4t bonne. Mais nous pouvons le personnaliser si nous le souhaitons. Nous pouvons modifier les pages de documentation pour repr\u00e9senter notre marque ou notre th\u00e8me. La personnalisation des composants Swagger n\u00e9cessite l’ajout de ressources pour servir les fichiers statiques et la cr\u00e9ation de la structure de dossiers pour h\u00e9berger ces fichiers.<\/p>\n\n\n\n Tout d’abord, nous allons activer le middleware de fichier statique dans la app.UseStaticFiles();<\/p>\n\n\n\n Apr\u00e8s cela, acqu\u00e9rons le contenu du Cr\u00e9ons un De plus, cr\u00e9ons un Nous devons r\u00e9f\u00e9rencer custom.css<\/em> dans le Enfin, naviguons jusqu’\u00e0 la Nous pouvons voir que l’interface utilisateur est maintenant personnalis\u00e9e avec les modifications que nous avons apport\u00e9es :<\/p>\n\n\n\n \u00c0 ce stade, nous connaissons les diff\u00e9rentes options de personnalisation de l’interface utilisateur Swagger.<\/p>\n\n\n\n Nous avons examin\u00e9 les sujets suivants dans cet article :<\/p>\n\n\n\n Si vous aimez mes articles, pensez \u00e0 m\u2019acheter quelques caf\u00e9s !<\/strong><\/p>\n\n\n\nPourquoi devrions-nous documenter notre API<\/h2>\n\n\n\n
Swagger UI\/OpenAPI<\/h2>\n\n\n\n
\n
Int\u00e9gration de Swagger UI dans nos applications<\/h2>\n\n\n\n
Swashbuckle.AspNetCore.Swagger<\/code>: Cela contient le mod\u00e8le d’objet Swagger et le middleware pour exposer les objets SwaggerDocument en tant que JSON.<\/p>\n\n\n\nSwashbuckle.AspNetCore.SwaggerGen<\/code>: Un g\u00e9n\u00e9rateur Swagger qui construit des objets SwaggerDocument directement \u00e0 partir de nos itin\u00e9raires, contr\u00f4leurs et mod\u00e8les. <\/p>\n\n\n\nSwashbuckle.AspNetCore.SwaggerUI<\/code>: Une version int\u00e9gr\u00e9e de l’outil d’interface utilisateur Swagger. Il interpr\u00e8te Swagger JSON pour cr\u00e9er une exp\u00e9rience riche et personnalisable pour d\u00e9crire la fonctionnalit\u00e9 de l’API Web.<\/p>\n\n\n\nInstallation du paquet<\/h3>\n\n\n\n
Install-Package Swashbuckle.AspNetCore -version 6.1.4<\/code><\/p>\n\n\n\nConfiguration du middleware Swagger UI<\/h3>\n\n\n\n
ConfigureServices()<\/code>m\u00e9thode de la Startup.cs<\/code> classe :<\/p>\n\n\n\npublic void ConfigureServices(IServiceCollection services)\n{\n \/\/ Register the Swagger generator, defining 1 or more Swagger documents\n services.AddSwaggerGen(c =>\n {\n c.SwaggerDoc(\"v1\", new OpenApiInfo { Title = \"My API\", Version = \"v1\" }); \n });\n services.AddControllers();\n}<\/pre>\n\n\n\nConfigure()<\/code> m\u00e9thode, activons le middleware pour servir le document JSON g\u00e9n\u00e9r\u00e9 et l’interface utilisateur Swagger :<\/p>\n\n\n\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n{\n \/\/ Enable middleware to serve generated Swagger as a JSON endpoint.\n app.UseSwagger();\n \/\/ Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),\n \/\/ specifying the Swagger JSON endpoint.\n app.UseSwaggerUI(c =>\n {\n c.SwaggerEndpoint(\"\/swagger\/v1\/swagger.json\", \"My API V1\");\n });\n}<\/pre>\n\n\n\nExplorer Swagger UI<\/h3>\n\n\n\n
Employee<\/code> : <\/p>\n\n\n\npublic class Employee\n{\n public int Id { get; set; }\n public string FirstName { get; set; }\n public string LastName { get; set; }\n public string EmailId { get; set; }\n}<\/pre>\n\n\n\n[Route(\"api\/[controller]\")]\n [ApiController]\n public class EmployeeController : ControllerBase\n {\n \/\/\/ <summary>\n \/\/\/ Gets the list of all Employees.\n \/\/\/ <\/summary>\n \/\/\/ <returns>The list of Employees.<\/returns>\n \/\/ GET: api\/Employee\n [HttpGet]\n public IEnumerable<Employee> Get()\n {\n return GetEmployees();\n }\n\n \/\/ GET: api\/Employee\/5\n [HttpGet(\"{id}\", Name = \"Get\")]\n public Employee Get(int id)\n {\n return GetEmployees().Find(e => e.Id == id);\n }\n\n \/\/\/ <summary>\n \/\/\/ Creates an Employee.\n \/\/\/ <\/summary>\n \/\/\/ <remarks>\n \/\/\/ Sample request:\n \/\/\/ \n \/\/\/ POST api\/Employee\n \/\/\/ { \n \/\/\/ \"firstName\": \"Oussama\",\n \/\/\/ \"lastName\": \"Saidi\",\n \/\/\/ \"emailId\": \"oussama.saidisbz@gmail.com\" \n \/\/\/ }\n \/\/\/ <\/remarks>\n \/\/\/ <param name=\"employee\"><\/param>\n \/\/\/ <returns>A newly created employee<\/returns>\n \/\/\/ <response code=\"201\">Returns the newly created item<\/response>\n \/\/\/ <response code=\"400\">If the item is null<\/response> \n [HttpPost]\n [ProducesResponseType(201)]\n [ProducesResponseType(400)]\n [Produces(\"application\/json\")]\n public Employee Post([FromBody] Employee employee)\n {\n \/\/ Logic to create new Employee\n return new Employee();\n }\n\n \/\/ PUT: api\/Employee\/5\n [HttpPut(\"{id}\")]\n public void Put(int id, [FromBody] Employee employee)\n {\n \/\/ Logic to update an Employee\n }\n\n \/\/ DELETE: api\/Employee\/5\n [HttpDelete(\"{id}\")]\n public void Delete(int id)\n {\n }\n\n private List<Employee> GetEmployees()\n {\n return new List<Employee>()\n {\n new Employee()\n {\n Id = 1,\n FirstName= \"Oussama\",\n LastName = \"Saidi\",\n EmailId =\"oussama.saidisbz@gmail.com\"\n },\n new Employee()\n {\n Id = 2,\n FirstName= \"Jane\",\n LastName = \"Doe\",\n EmailId =\"Jane.Doe@gmail.com\"\n }\n };\n }\n }<\/pre>\n\n\n\nhttps:\/\/localhost:<port>\/swagger\/v1\/swagger.json<\/code>. Nous pouvons voir qu’un document d\u00e9crivant les endpoints est g\u00e9n\u00e9r\u00e9 :<\/p>\n\n\n\n![\"Swagger](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image.png\")
<\/figure>\n\n\n\nhttps:\/\/localhost:<port>\/swagger<\/code> :<\/p>\n\n\n\n![\"Swagger](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-15-1024x411.png\")
<\/figure>\n\n\n\n![\"Swagger](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-2.png\")
<\/figure>\n\n\n\n![\"Swagger](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-4-1024x693.png\")
<\/figure>\n\n\n\nExtension et personnalisation <\/h2>\n\n\n\n
Enrichir la documentation<\/h3>\n\n\n\n
Informations et description de l’API<\/h4>\n\n\n\n
configuration<\/code> action transmise \u00e0 la AddSwaggerGen()<\/code>m\u00e9thode ajoute des informations telles que le contact, la licence et la description. Donnons quelques valeurs pour ceux-ci :<\/p>\n\n\n\n\/\/ This method gets called by the runtime. Use this method to add services to the container.\npublic void ConfigureServices(IServiceCollection services)\n{\n \/\/ Register the Swagger generator, defining 1 or more Swagger documents\n services.AddSwaggerGen(c =>\n {\n c.SwaggerDoc(\"v1\", new OpenApiInfo\n {\n Title = \"Employee API\",\n Version = \"v1\",\n Description = \"An API to perform Employee operations\",\n TermsOfService = new Uri(\"https:\/\/example.com\/terms\"),\n Contact = new OpenApiContact\n {\n Name = \"John Walkner\",\n Email = \"John.Walkner@gmail.com\",\n Url = new Uri(\"https:\/\/twitter.com\/jwalkner\"),\n },\n License = new OpenApiLicense\n {\n Name = \"Employee API LICX\",\n Url = new Uri(\"https:\/\/example.com\/license\"),\n }\n });\n });\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-12-1024x508.png\")
<\/figure>\n\n\n\nCommentaires XML<\/h4>\n\n\n\n
\n
XML documentation file<\/code>. Conservons le chemin du fichier g\u00e9n\u00e9r\u00e9 automatiquement.<\/li>\n\n\n\n![\"\"](\"https:\/\/code--maze-com.translate.goog\/wp-content\/uploads\/2019\/10\/generate-xml-documentation-setting.png?_x_tr_sl=en&_x_tr_tl=fr&_x_tr_hl=fr&_x_tr_pto=wapp\")
<\/li>\n<\/ol>\n\n\n\nConfigureServices()<\/code>m\u00e9thode, configurez Swagger pour utiliser le fichier XML g\u00e9n\u00e9r\u00e9 \u00e0 l’\u00e9tape ci-dessus :<\/p>\n\n\n\npublic void ConfigureServices(IServiceCollection services)\n{\n \/\/ Register the Swagger generator, defining 1 or more Swagger documents\n services.AddSwaggerGen(c =>\n {\n c.SwaggerDoc(\"v1\", new OpenApiInfo\n {\n Title = \"Employee API\",\n Version = \"v1\",\n Description = \"An API to perform Employee operations\",\n TermsOfService = new Uri(\"https:\/\/example.com\/terms\"),\n Contact = new OpenApiContact\n {\n Name = \"Oussama Saidi\",\n Email = \"oussama.saidisbz@gmail.com\",\n Url = new Uri(\"https:\/\/twitter.com\/OsaidiPro\"),\n },\n License = new OpenApiLicense\n {\n Name = \"Employee API LICX\",\n Url = new Uri(\"https:\/\/example.com\/license\"),\n }\n });\n \/\/ Set the comments path for the Swagger JSON and UI.\n var xmlFile = $\"{Assembly.GetExecutingAssembly().GetName().Name}.xml\";\n var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFile);\n c.IncludeXmlComments(xmlPath);\n });\n services.AddControllers();\n}<\/pre>\n\n\n\n\/\/\/ <summary>\n\/\/\/ Gets the list of all Employees.\n\/\/\/ <\/summary>\n\/\/\/ <returns>The list of Employees.<\/returns>\n\/\/ GET: api\/Employee\n[HttpGet]\npublic IEnumerable<Employee> Get()\n{\n return GetEmployees();\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-6.png\")
<\/figure>\n\n\n\n<remarks><\/code> \u00e9l\u00e9ments \u00e0 la documentation. Il compl\u00e8te les informations sp\u00e9cifi\u00e9es dans l’ <summary><\/code> \u00e9l\u00e9ment et fournit une interface utilisateur Swagger plus robuste. Le <remarks><\/code> contenu de l’\u00e9l\u00e9ment peut \u00eatre compos\u00e9 de texte, JSON ou XML :<\/p>\n\n\n\n\/\/\/ <summary>\n\/\/\/ Creates an Employee.\n\/\/\/ <\/summary>\n\/\/\/ <remarks>\n\/\/\/ Sample request:\n\/\/\/ \n\/\/\/ POST api\/Employee\n\/\/\/ { \n\/\/\/ \"firstName\": \"Mike\",\n\/\/\/ \"lastName\": \"Andrew\",\n\/\/\/ \"emailId\": \"Mike.Andrew@gmail.com\" \n\/\/\/ }\n\/\/\/ <\/remarks>\n\/\/\/ <param name=\"employee\"><\/param> \n[HttpPost]\n[Produces(\"application\/json\")]\npublic Employee Post([FromBody] Employee employee)\n{\n \/\/ Logic to create new Employee\n return new Employee();\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-7.png\")
<\/figure>\n\n\n\nUtilisation des annotations de donn\u00e9es<\/h4>\n\n\n\n
[Required]<\/code>attribut au EmailId<\/code> champ du Employee<\/code> mod\u00e8le :<\/p>\n\n\n\npublic class Employee\n{\n public int Id { get; set; }\n public string FirstName { get; set; }\n public string LastName { get; set; }\n [Required]\n public string EmailId { get; set; }\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-8.png\")
<\/figure>\n\n\n\nDescription des types de r\u00e9ponse<\/h4>\n\n\n\n
\/\/\/ <summary>\n\/\/\/ Creates an Employee.\n\/\/\/ <\/summary>\n\/\/\/ <remarks>\n\/\/\/ Sample request:\n\/\/\/ \n\/\/\/ POST api\/Employee\n\/\/\/ { \n\/\/\/ \"firstName\": \"Oussama\",\n\/\/\/ \"lastName\": \"Saidi\",\n\/\/\/ \"emailId\": \"oussama.saidisbz@gmail.com\" \n\/\/\/ }\n\/\/\/ <\/remarks>\n\/\/\/ <param name=\"employee\"><\/param>\n\/\/\/ <returns>A newly created employee<\/returns>\n\/\/\/ <response code=\"201\">Returns the newly created item<\/response>\n\/\/\/ <response code=\"400\">If the item is null<\/response> \n[HttpPost]\n[ProducesResponseType(201)]\n[ProducesResponseType(400)]\n[Produces(\"application\/json\")]\npublic Employee Post([FromBody] Employee employee)\n{\n \/\/ Logic to create new Employee\n return new Employee();\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-9.png\")
<\/figure>\n\n\n\nPersonnalisation de l’interface utilisateur<\/h3>\n\n\n\n
Configure()<\/code>m\u00e9thode du Startup.cs<\/code> fichier :<\/p>\n\n\n\ndist<\/code> dossier \u00e0 partir du r\u00e9f\u00e9rentiel<\/a> Swagger UI GitHub . Ce dossier contient les ressources n\u00e9cessaires pour la page de l’interface utilisateur Swagger.<\/p>\n\n\n\nwwwroot\/swagger\/ui<\/code> dossier et copions-y le contenu du dossier dist.<\/p>\n\n\n\ncustom.css<\/code> fichier wwwroot\/swagger\/ui<\/code> avec le CSS suivant pour personnaliser l’en-t\u00eate de la page :<\/p>\n\n\n\n.swagger-ui .topbar {\n background-color: grey;\n border-bottom: 3px solid black;\n}<\/pre>\n\n\n\nindex.html<\/code> fichier \u00e0 l’int\u00e9rieur du dossier UI, apr\u00e8s tout autre fichier CSS :<\/p>\n\n\n\n<link rel=\"stylesheet\" type=\"text\/css\" href=\".\/swagger-ui.css\">\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"custom.css\"><\/pre>\n\n\n\n
index.html<\/code> page \u00e0 https:\/\/localhost:<port>\/swagger\/ui\/index.html<\/code>, entrez https:\/\/localhost:<port>\/swagger\/v1\/swagger.json<\/code> dans la zone de texte de l’en-t\u00eate et cliquez sur le bouton Explorer. <\/p>\n\n\n\n![\"\"](\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2023\/01\/image-13-1024x437.png\")
<\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
\n
Derniers articles<\/h2>\n\n\n\n
\n
\n
Vous aimez le contenu ?<\/strong><\/h2>\n\n\n\n
\n\n\n\n