Utilisation d'une API de test avec WinForms et Blazor

Introduction à l'API d'échantillonnage et à Visual Studio

Tim commence par souligner l'importance d'un exemple d'API lors de l'apprentissage du développement web ou de la programmation Windows Forms. Une API fiable sert de base stable pour tester les fonctionnalités dans divers environnements d'interface utilisateur. À l'aide de l'IDE Visual Studio, Tim navigue vers la création de nouveaux projets, présentant à la fois les plateformes Blazor et Windows Forms.

Démarrer avec une application web Blazor

À l'aide de la boîte de dialogue "Nouveau projet" de Visual Studio, Tim sélectionne une application Blazor WebAssembly. Il nomme le projet "BlazorDemo" au sein d'une solution intitulée "DemoApps" Cette configuration utilise le mode "auto" pour prendre en charge le rendu côté serveur et WebAssembly.

Ajouter un modèle à partir de l'API

Tim crée un nouveau fichier nommé CourseModel.cs dans le projet côté client. En copiant une charge utile JSON à partir du point de terminaison /courses de l'API, il utilise l'outil "Coller JSON en tant que classes" de Visual Studio pour générer automatiquement la structure des classes. Bien que l'outil ne soit pas parfait, Tim affine la classe en utilisant la casse Pascal et les chaînes nullables pour correspondre aux normes C#.

Adaptation des types de données et du mappage JSON

Tim révise manuellement les propriétés générées, en convertissant des valeurs telles que priceUSD en décimales pour plus de précision. Il configure également un objet JsonSerializerOptions pour rendre les noms de propriété insensibles à la casse, en veillant à ce que les clés JSON correspondent correctement aux propriétés C#.

Création et câblage d'une page Razor

Ensuite, Tim ajoute un composant Razor nommé Courses.razor, ce qui en fait une page accessible via l'URL /courses. Il initialise une List et injecte un HttpClient pour appeler l'API de l'échantillon. La logique du composant comprend la gestion des erreurs avec try-catch et le rendu conditionnel de l'interface utilisateur en fonction de la disponibilité des données.

Affichage des informations sur le cours

À l'aide de HTML de base et de la syntaxe Razor, Tim parcourt en boucle la liste des cours et affiche l'image de chaque cours sous la forme d'un lien cliquable. Il applique des styles en ligne pour contrôler la mise en page et attribue des attributs alt pour l'accessibilité.

Enregistrement du client HTTP dans Program.cs

Tim configure le client HTTP dans le Program.cs de l'application Blazor, en l'enregistrant à l'aide de builder.Services.AddScoped(...) et en lui attribuant l'adresse de base https://thesampleapi.com. Il explique que cet enregistrement doit se faire dans les configurations client et serveur pour prendre en charge le modèle de rendu hybride de Blazor.

Réparation du problème du double appel API

En raison du comportement de pré-rendu par défaut de Blazor, la page effectue deux appels d'API au chargement. Tim désactive le pré-rendement en définissant @rendermode InteractiveAuto et pre-render=false, ce qui permet d'éviter les demandes d'API en double et d'améliorer les performances lorsque l'on traite des données à distance.

Changement de vitesse : Création d'une application Windows Forms

À l'aide de l'environnement Visual Studio, Tim crée une nouvelle application Windows Forms nommée WinFormDemo ciblant le .NET Framework. Il change le nom du formulaire par défaut en Cours et modifie la taille de la police via la fenêtre Propriétés pour rendre l'interface utilisateur plus lisible.

Organisation du projet avec l'explorateur de solutions

Tim ajoute deux dossiers : Modèles et Services. Dans Services, il crée une classe statique HttpService avec une instance HttpClient. Ce client est configuré pour cibler la même URL de base de l'API. Bien que Tim utilise une approche statique pour des raisons de simplicité, il recommande l'injection de dépendances pour un développement de qualité.

Conception de l'interface utilisateur du formulaire avec les contrôles de la boîte à outils

Dans le concepteur de formulaires Windows, Tim fait glisser une PictureBox et deux boutons ("Précédent" et "Suivant") sur le formulaire. Il règle le SizeMode de la boîte d'image sur Zoom, afin que les images de cours s'intègrent parfaitement dans le contrôle. Il renomme également le titre du formulaire en "Cours DevForge", reflétant ainsi l'image de marque de son entreprise.

Mise en œuvre de la logique Code-Behind

À l'aide de l'événement Form_Load (déclenché par un double-clic dans la fenêtre Propriétés), Tim écrit la logique asynchrone pour récupérer les données de l'API. Il définit également une méthode d'aide LoadCourse(int index) qui gère l'affichage de l'image et la validation des limites. La méthode est robuste, elle gère les listes nulles et les index hors plage avec élégance.

Naviguer dans les cours avec des boutons

Tim connecte les boutons "Précédent" et "Suivant" en double-cliquant dessus pour générer leurs gestionnaires d'événements (object sender, EventArgs e). Chaque bouton ajuste l'index du cours actuel et appelle LoadCourse() pour mettre à jour l'image affichée. Cela permet d'offrir à l'utilisateur une expérience fluide, semblable à celle d'un diaporama.

Passer au développement local avec Docker

Tim illustre comment utiliser un conteneur Docker local au lieu de l'API distante. Il extrait la dernière image, l'exécute sur un port aléatoire et met à jour l'URI de base dans HttpService.cs. Après avoir confirmé la fonctionnalité, il montre comment arrêter le conteneur Docker pour tester la gestion des pannes et le redémarrer pour vérifier la reprise.

Réflexions finales et applications pratiques

Tim conclut en soulignant l'utilité d'un exemple d'API lors de l'apprentissage de la création d'applications de bureau Windows ou de frontaux Blazor. Grâce à une source de données fiable, les développeurs peuvent se concentrer sur la maîtrise de la conception de l'interface utilisateur graphique, des contrôles de formulaire, des événements et des outils de mise en page, sans être gênés par la configuration du backend.

Conclusion

En suivant le tutoriel détaillé de Tim Corey vidéo, les développeurs acquièrent une expérience pratique à la fois de Blazor et de la programmation Windows Forms. À l'aide de Visual Studio et d'une API de test, ils apprennent à créer des interfaces utilisateur modernes et à les connecter à des sources de données vivantes, ce qui fait de ce didacticiel une ressource précieuse pour les développeurs qui explorent l'écosystème .NET.

Que vous soyez novice en matière de programmation de formulaires ou que vous cherchiez à améliorer vos compétences dans la création d'applications Windows, ce guide propose des informations pratiques et actualisées ainsi que les meilleures pratiques pour vous aider dans votre parcours de développement.