Korzystanie z testowej API w WinForms i Blazor

Wprowadzenie do przykładowego API i Visual Studio

Tim zaczyna od zaznaczenia, jak ważne jest przykładowe API przy nauce programowania stron internetowych lub programowania w Windows Forms. Niezawodne API działa jako stabilne zaplecze do testowania funkcji w różnych środowiskach interfejsu użytkownika. Korzystając z IDE Visual Studio, Tim przechodzi do tworzenia nowych projektów, pokazując zarówno platformy Blazor, jak i Windows Forms.

Rozpoczęcie od aplikacji webowej Blazor

Korzystając z dialogu "Nowy projekt" w Visual Studio, Tim wybiera aplikację Blazor WebAssembly. Nadaje projektowi nazwę "BlazorDemo" w ramach rozwiązania zatytułowanego "DemoApps." Ta konfiguracja korzysta z trybu "auto", aby wspierać zarówno renderowanie po stronie serwera, jak i WebAssembly.

Dodawanie modelu z API

Tim tworzy nowy plik o nazwie CourseModel.cs w projekcie po stronie klienta. Kopiując ładunek JSON z punktu końcowego /courses w API, korzysta z narzędzia Visual Studio "Wklej JSON jako klasy" do automatycznego generowania struktury klasy. Chociaż narzędzie nie jest doskonałe, Tim modyfikuje klasę, używając wielkich liter (Pascal casing) i nullable stringów, aby spełniały standardy C#.

Dostosowywanie typów danych i mapowanie JSON

Tim ręcznie sprawdza wygenerowane właściwości, konwertując wartości, takie jak priceUSD, do typu decimal dla zachowania dokładności. Konfiguruje także obiekt JsonSerializerOptions, aby właściwości były nieczułe na wielkość liter, co zapewnia poprawne mapowanie kluczy JSON do właściwości C#.

Tworzenie i łączenie strony Razor

Następnie Tim dodaje komponent Razor o nazwie Courses.razor, tworząc stronę dostępną pod URL-em /courses. Inicjuje List i wstrzykuje obiekt HttpClient do wywoływania przykładowego API. Logika komponentu obejmuje obsługę błędów za pomocą try-catch i warunkówe renderowanie UI w oparciu o dostępność danych.

Wyświetlanie informacji o kursach

Używając podstawowego HTML i składni Razor, Tim przegląda listę kursów i wyświetla każdy obraz kursu jako klikalny link. Stosuje style inline, aby kontrolować układ i przypisuje atrybuty alt dla dostępności.

Rejestrowanie Klienta HTTP w Program.cs

Tim konfiguruje klienta HTTP w aplikacji Blazor w Program.cs, rejestrując go przy użyciu builder.Services.AddScoped(...) i przypisując adres bazowy https://thesampleapi.com. Wyjaśnia, że ta rejestracja musi mieć miejsce zarówno w konfiguracjach klienta, jak i serwera, aby wspierać hybrydowy model renderowania Blazor.

Usuwanie problemu z podwójnym wywołaniem API

Ze względu na domyślne przetwarzanie wstępne Blazor, strona wykonuje dwa wywołania API na załadowanie. Tim wyłącza przetwarzanie wstępne, ustawiając @rendermode InteractiveAuto i pre-render=false, co zapobiega zduplikówanym żądaniom API i poprawia wydajność podczas pracy z danymi zdalnymi.

Przejście na tworzenie aplikacji Windows Forms

Korzystając z środowiska Visual Studio, Tim tworzy nową aplikację Windows Forms o nazwie WinFormDemo, przeznaczoną dla .NET Framework. Zmienia nazwę domyślnego formularza na Courses i modyfikuje rozmiar czcionki przez okno właściwości, aby interfejs użytkownika był bardziej czytelny.

Organizowanie projektu z Eksploratorem rozwiązań

Tim dodaje dwa foldery: Models i Services. W folderze Services tworzy klasę statyczną HttpService z instancją HttpClient. Ten klient jest skonfigurowany do celowania w ten sam bazowy URL API. Chociaż Tim stosuje podejście statyczne dla prostoty, zaleca wstrzykiwanie zależności dla rozwoju na poziomie produkcyjnym.

Projektowanie interfejsu formularza za pomocą kontrolek ToolBox

W projektancie Windows Forms Tim przeciąga PictureBox i dwa przyciski ('Poprzedni' i 'Następny') na formularz. Ustawia tryb SizeMode dla pola obrazu na Zoom, zapewniając, że obrazy kursów pasują do kontrolki. Zmienia też tytuł formularza na "DevForge Courses", odzwierciedlając markę swojej firmy.

Implementacja logiki Code-Behind

Korzystając z wydarzenia Form_Load (wywoływanego przez dwukrotne kliknięcie w oknie właściwości), Tim pisze asynchroniczną logikę pobierania danych z API. Definiuje także pomocniczą metodę LoadCourse(int index), obsługującą wyświetlanie obrazów i walidację granic. Metoda jest solidna, obsługując listy null i indeksy wychodzące poza zakres.

Nawigacja po kursach za pomocą przycisków

Tim łączy przyciski "Poprzedni" i "Następny" poprzez podwójne kliknięcie, generując ich obsługiwacze zdarzeń (object sender, EventArgs e). Każdy przycisk dostosowuje bieżący indeks kursu i wywołuje LoadCourse(), aby zaktualizować wyświetlany obraz. To zapewnia płynne doznania użytkownika przypominające prezentację slajdów.

Przejście na lokalny rozwój za pomocą Dockera

Tim ilustruje, jak używać lokalnego kontenera Docker zamiast zdalnego API. Pobiera najnowszy obraz, uruchamia go na losowym porcie i aktualizuje URI podstawowe w HttpService.cs. Po potwierdzeniu funkcjonalności, demonstruje zatrzymywanie kontenera Docker w celu przetestowania obsługi awarii i ponowne uruchomienie go, aby zweryfikować odbudowę.

Ostatnie przemyślenia i praktyczne zastosowania

Tim podsumowuje, podkreślając, jak przydatne może być przykładowe API podczas nauki budowania aplikacji desktopowych Windows lub front-endów Blazor. Dzięki niezawodnemu źródłu danych, programiści mogą skupić się na opanowaniu projektowania interfejsu użytkownika, kontroli formularzy, zdarzeń i narzędzi układu bez obciążeń związanych z konfiguracją zaplecza.

Wnioski

Śledząc szczegółowy wideoporadnik Tima Coreya, deweloperzy zyskują praktyczne doświadczenie zarówno w programowaniu Blazora, jak i Windows Forms. Korzystając z Visual Studio i testowego API, uczą się budować nowoczesne interfejsy użytkownika i łączyć je z żywymi źródłami danych, co sprawia, że ten poradnik jest cennym źródłem dla deweloperów eksplorujących ekosystem .NET.

Niezależnie od tego, czy jesteś nowicjuszem w programowaniu formularzy, czy chcesz udoskonalić swoje umiejętności w budowaniu aplikacji Windows, ten przewodnik oferuje praktyczne, aktualne informacje i najlepsze praktyki wspierające Twoją ścieżkę rozwoju.