Verwendung einer Test-API mit WinForms und Blazor

Einführung in die Beispiel-API und Visual Studio

Tim beginnt damit, dass er die Bedeutung einer Beispiel-API beim Erlernen der Webentwicklung oder der Windows Forms-Programmierung hervorhebt. Eine zuverlässige API dient als stabiles Backend für das Testen von Funktionen in verschiedenen Benutzeroberflächenumgebungen. Mit Hilfe der Visual Studio IDE navigiert Tim zur Erstellung neuer Projekte und stellt dabei sowohl die Blazor- als auch die Windows Forms-Plattform vor.

Beginn mit einer Blazor Web-Anwendung

Über das Dialogfeld "Neues Projekt" von Visual Studio wählt Tim eine Blazor WebAssembly-Anwendung aus. Er nennt das Projekt "BlazorDemo" innerhalb einer Lösung mit dem Namen "DemoApps" Dieses Setup verwendet den "Auto"-Modus, um sowohl serverseitiges als auch WebAssembly-Rendering zu unterstützen.

Hinzufügen eines Modells über die API

Tim erstellt eine neue Datei namens CourseModel.cs im clientseitigen Projekt. Er kopiert eine JSON-Nutzlast vom /courses-Endpunkt der API und verwendet das Werkzeug "JSON als Klassen einfügen" von Visual Studio, um die Klassenstruktur automatisch zu generieren. Auch wenn das Tool nicht perfekt ist, verfeinert Tim die Klasse mit Pascal-Gehäusen und nullbaren Strings, um den C#-Standards zu entsprechen.

Anpassen von Datentypen und JSON Mapping

Tim überprüft die generierten Eigenschaften manuell und konvertiert Werte wie PreisUSD in Dezimalzahlen, um die Genauigkeit zu gewährleisten. Er konfiguriert auch ein JsonSerializerOptions-Objekt, um die Groß- und Kleinschreibung von Eigenschaftsnamen zu ignorieren und sicherzustellen, dass JSON-Schlüssel korrekt auf C#-Eigenschaften abgebildet werden.

Erstellen und Verdrahten einer Razor-Seite

Als Nächstes fügt Tim eine Razor-Komponente mit dem Namen Courses.razor hinzu und macht sie zu einer Seite, die über die URL /courses. Er initialisiert eine List und fügt einen HttpClient ein, um die Beispiel-API aufzurufen. Die Logik der Komponente umfasst Fehlerbehandlung mit try-catch und bedingtes UI-Rendering auf der Grundlage der Datenverfügbarkeit.

Kursinformationen anzeigen

Mit grundlegendem HTML und Razor-Syntax durchläuft Tim die Kursliste und zeigt jedes Kursbild als klickbaren Link an. Er wendet Inline-Stile an, um das Layout zu steuern, und vergibt Alt-Attribute für die Barrierefreiheit.

Registrierung des HTTP-Client in Program.cs

Tim konfiguriert den HTTP-Client in der Program.cs der Blazor-App, indem er ihn mit builder.Services.AddScoped(...) registriert und ihm die Basisadresse https://thesampleapi.com zuweist. Er erklärt, dass diese Registrierung sowohl in Client- als auch in Serverkonfigurationen erfolgen muss, um das hybride Rendering-Modell von Blazor zu unterstützen.

Behebung des Problems mit doppelten API-Aufrufen

Aufgrund des standardmäßigen Pre-Rendering-Verhaltens von Blazor führt die Seite beim Laden zwei API-Aufrufe aus. Tim deaktiviert das Pre-Rendering, indem er @rendermode InteractiveAuto und pre-render=false setzt, was doppelte API-Anfragen verhindert und die Leistung beim Umgang mit Remote-Daten verbessert.

Gangwechsel: Erstellen einer Windows Forms-Anwendung

Mit der Visual Studio-Umgebung erstellt Tim eine neue Windows Forms-App namens WinFormDemo, die auf das .NET Framework abzielt. Er ändert den Standardformularnamen in Kurse und ändert die Schriftgröße über das Eigenschaftsfenster, um die Benutzeroberfläche besser lesbar zu machen.

Projektorganisation mit dem Solution Explorer

Tim fügt zwei Ordner hinzu: Modelle und Dienste. In Services erstellt er eine statische Klasse HttpService mit einer HttpClient-Instanz. Dieser Client ist so konfiguriert, dass er auf die gleiche API-Basis-URL abzielt. Obwohl Tim der Einfachheit halber einen statischen Ansatz verwendet, empfiehlt er die Injektion von Abhängigkeiten für die produktionsnahe Entwicklung.

Gestaltung der Formular-UI mit Toolbox-Steuerelementen

Im Windows Forms Designer zieht Tim eine PictureBox und zwei Button-Steuerelemente ("Zurück" und "Weiter") auf das Formular. Er setzt den SizeMode des Bildfeldes auf Zoom, um sicherzustellen, dass die Kursbilder genau in das Steuerelement passen. Außerdem benennt er den Titel des Formulars in "DevForge Courses" um, um das Branding seines Unternehmens widerzuspiegeln.

Implementierung von Code-Behind-Logik

Mithilfe des Form_Load-Ereignisses (ausgelöst durch einen Doppelklick im Eigenschaftsfenster) schreibt Tim die asynchrone Logik zum Abrufen von Daten aus der API. Er definiert auch eine Hilfsmethode LoadCourse(int index), die die Anzeige von Bildern und die Validierung von Begrenzungen übernimmt. Die Methode ist robust und kann Null-Listen und Indizes, die außerhalb des zulässigen Bereichs liegen, problemlos verarbeiten.

Navigieren in Kursen mit Schaltflächen

Tim verdrahtet die Schaltflächen "Zurück" und "Weiter", indem er auf sie doppelklickt, um ihre Event-Handler zu generieren (object sender, EventArgs e). Jede Schaltfläche passt den currentCourse-Index an und ruft LoadCourse() auf, um das angezeigte Bild zu aktualisieren. Dies sorgt für eine reibungslose Benutzererfahrung, ähnlich wie bei einer Diashow.

Umstellung auf lokale Entwicklung mit Docker

Tim veranschaulicht, wie man einen lokalen Docker-Container anstelle der Remote-API verwendet. Er zieht das neueste Image, führt es auf einem zufälligen Port aus und aktualisiert den Basis-URI in HttpService.cs. Nachdem er die Funktionalität bestätigt hat, demonstriert er das Anhalten des Docker-Containers, um die Fehlerbehandlung zu testen, und das erneute Starten, um die Wiederherstellung zu überprüfen.

Abschließende Überlegungen und praktische Anwendungen

Abschließend betont Tim, wie nützlich eine Beispiel-API sein kann, wenn man lernt, Windows-Desktop-Anwendungen oder Blazor-Frontends zu erstellen. Mit einer zuverlässigen Datenquelle können sich die Entwickler auf die Beherrschung der grafischen Benutzeroberfläche, Formularsteuerungen, Ereignisse und Layout-Tools konzentrieren, ohne sich mit der Einrichtung des Backends aufhalten zu müssen.

Abschluss

Anhand des detaillierten Videos von Tim Corey können Entwickler praktische Erfahrungen mit der Programmierung von Blazor und Windows Forms sammeln. Mithilfe von Visual Studio und einer Test-API lernen sie, moderne Benutzeroberflächen zu erstellen und sie mit Live-Datenquellen zu verbinden, was dieses Tutorial zu einer wertvollen Ressource für Entwickler macht, die das .NET-Ökosystem erkunden.

Unabhängig davon, ob Sie neu in der Formularprogrammierung sind oder Ihre Fähigkeiten bei der Erstellung von Windows-Anwendungen verbessern möchten, bietet dieses Handbuch praktische, aktuelle Informationen und bewährte Verfahren zur Unterstützung Ihrer Entwicklung.