Buduj Klon Postman: Dodawanie PUT, PATCH i DELETE

Aktualizacja menu rozwijanego i opcji w aplikacji

Tim zaczyna, pokazując konfigurację aplikacji. Obecnie menu rozwijane pozwala na wybór GET i POST. Aby zbudować w pełni funkcjonalny klon Postmana, musimy dodać do listy opcji PUT, PATCH i DELETE.

W właściwościach Tim aktualizuje elementy menu rozwijanego, aby wszystkie pięć czasowników HTTP pojawiło się jako wybory: GET, POST, PUT, PATCH, DELETE. Podkreśla, że wybór w menu rozwijanym musi odpowiadać Enum używanemu w backendzie, który definiuje poprawne działania HTTP dla klienta API. To zapewnia, że gdy użytkownik wybiera opcję z menu rozwijanego, proces prawidłowo mapuje ją na logikę kodu zasadniczego.

Mapowanie wyboru użytkownika na działania HTTP

Tim wyjaśnia, jak aplikacja konwertuje wybór użytkownika w menu rozwijanym na konkretną metodę żądania HTTP. System najpierw waliduje URL wprowadzony w formularzu HTML, a następnie analizuje wybraną opcję jako działanie HTTP w czystym JavaScript.

To ustawienie pozwala aplikacji przekazać trzy kluczowe elementy informacji do metody CallApiAsync:

1. URL z formularza HTML.

2. Zawartość ciała, zazwyczaj w JSON, wprowadzana poprzez obszar formularza JavaScript lub edytor tekstu JSON.

3. Wybranego działania odpowiadającego czasownikowi HTTP.

To zapewnia, że klon Postmana może przetwarzać różne typy żądań i zwrócić prawidłowy odpowiedź JavaScript do wyświetlenia w sekcji odpowiedzi HTML.

Implementacja metod PUT, PATCH i DELETE

Tim demonstruje kod potrzebny do obsługi PUT, PATCH i DELETE:

• PUT: Aktualizuje cały rekord. Klient API wysyła pełny obiekt JSON, nadpisując wszystkie pola dla danego ID.

• PATCH: Aktualizuje tylko określone pola. To jest użyteczne, gdy chcesz zmodyfikować część rekordu bez wpływu na inne dane.

• DELETE: Całkowicie usuwa rekord. Wymaga tylko URL i ID; brak przesyłanej treści.

Tim zauważa, że DELETE jest nieco inny, ponieważ nie zwraca treści—tylko potwierdzenie sukcesu. Te zmiany są w całości wdrożone w zwykłym JavaScript, modyfikując metodę CallApiAsync, aby obsłużyć wszystkie wybory i działania.

Testowanie funkcji

Tim podkreśla znaczenie weryfikacji, czy każda metoda HTTP działa zgodnie z oczekiwaniami.

1. GET: Tim wybiera GET w rozwijanym menu i pobiera posty. Klient API zwraca poprawną odpowiedź JavaScript, wyświetlając dane w sekcji odpowiedzi HTML.

2. PUT (5:01): Dla PUT, Tim aktualizuje pełny rekord z ID, tytułem, treścią i ID użytkownika. Pokazuje, że zwrócony JSON pasuje do przesłanych danych, potwierdzając, że proces działa poprawnie.

3. PATCH (6:10): Tim demonstruje PATCH, aktualizując tylko tytuł rekordu. Klon Postman pozostawia inne pola nienaruszone, udowadniając, że może skutecznie obsługiwać częściowe aktualizacje.

4. DELETE (7:32): DELETE wymaga tylko ID rekordu. Tim uruchamia żądanie i potwierdza sukces poprzez puste nawiasy, wskazujące, że rekord został usunięty bez zwracania zbędnych danych.

Poprzez ten proces, Tim przedstawia, jak klon Postman może wykonywać wszystkie operacje CRUD: Create (POST), Read (GET), Update (PUT/PATCH), and Delete (DELETE).

Podsumowanie zmian i konfiguracji

Tim podsumowuje kluczowe kroki i zmiany w kodzie potrzebne do ulepszenia klienta API:

• Zaktualizuj menu rozwijane, aby zawierało wszystkie czasowniki HTTP (opcje).

• Upewnij się, że Enum w backendzie pasuje do każdego czasownika, aby wybór prawidłowo odwzorował metodę.

• Zmodyfikuj metodę CallApiAsync w JavaScript, aby obsłużyć dodatkowe czasowniki i odpowiednio przetwarzać dane.

Zauważa opcjonalne ulepszenie: dla DELETE, można zwrócić prostą wiadomość o sukcesie zamiast serializowanego wyjścia, upraszczając doświadczenie użytkownika.

Aktualny stan i funkcje klonu Postman

Na tym etapie klon Postman jest całkowicie funkcjonalny z wszystkimi pięcioma czasownikami HTTP. Użytkownicy mogą wprowadzić URL, przesłać dane JSON za pomocą edytora formularzy JavaScript i otrzymać odpowiedzi w wyświetlaczu HTML odpowiedzi.

Jednak Tim wskazuje na kilka dodatkowych funkcji, które mogą ulepszyć aplikację:

• Wsparcie dla żądań XML.

• Obsługa uwierzytelniania.

• Dodanie niestandardowych nagłówków.

Są to możliwości dla deweloperów, aby rozszerzyć klon i uczynić go bardziej wszechstronnym.

Porady Tima dotyczące ulepszenia własnego Postmana

Tim rzuca wyzwanie widzom, aby kontynuowali budowę i ulepszanie swojego klonu Postman:

• Dodaj interfejsy użytkownika webowe z użyciem frameworków jak WPF, Blazor lub zwykłego HTML/JavaScript.

• Zawieraj dodatkowe API i obsługuj różne formaty danych.

• Testuj różne opcje w rozwijanym menu i rozszerz funkcje dla bogatszej funkcjonalności.

• Udostępnij swój projekt na GitHub, aby pokazać repozytorium, kod i proces potencjalnym pracodawcom.

Podkreśla, że praktyka jest kluczowa: budowanie, testowanie i iterowanie nad swoim projektem pomaga głęboko zrozumieć koncepcje API i programowania.

Wnioski

Tim kończy wideo zachęcając do eksperymentowania. Lubi majsterkować przy aplikacjach testowych i podkreśla, że deweloperzy poprawiają umiejętności poprzez powtarzalne iteracje.

Podczas gdy kod GitHub dla serii nie jest natychmiastowo dostarczony, może stać się dostępny w Dev Pass w przyszłości. Na razie celem jest, aby uczący się samodzielnie zbudowali swój klon Postman od zera, ćwicząc konfigurację, proces i wdrażanie kodu, jednocześnie czyniąc projekt wyjątkowo ich własnym.

Przez podążanie za podejściem Tima, deweloperzy mogą stworzyć funkcjonalnego klienta API, zrozumieć metody HTTP i stworzyć projekt gotowy do portfolio, który demonstruje praktyczne umiejętności z formularzami HTML, odpowiedziami JavaScript i przetwarzaniem JSON.