Einen Postman-Klon bauen: Hinzufügen von PUT, PATCH und DELETE

Dropdown und Optionen in der App aktualisieren

Tim beginnt damit, die Einrichtung der App zu zeigen. Derzeit ermöglicht das Dropdown-Menü die Auswahl von GET und POST. Um einen voll funktionsfähigen Postman-Klon zu bauen, müssen wir PUT, PATCH und DELETE zur Optionsliste hinzufügen.

In den Eigenschaften aktualisiert Tim die Dropdown-Elemente, sodass alle fünf HTTP-Verben als Auswahlmöglichkeiten erscheinen: GET, POST, PUT, PATCH, DELETE. Er betont, dass die Dropdown-Auswahl dem Enum im Backend entsprechen muss, das gültige HTTP-Aktionen für den API-Client definiert. Dies stellt sicher, dass, wenn ein Benutzer eine Option aus dem Dropdown auswählt, diese korrekt auf die zugrunde liegende Code-Logik abgebildet wird.

Zuordnung der Benutzerauswahl zu HTTP-Aktionen

Tim erklärt, wie die App die Auswahl des Benutzers im Dropdown in eine spezifische HTTP-Anfragemethode umwandelt. Das System validiert zuerst die im Formular-HTML-Input eingegebene URL und parst dann die ausgewählte Wahl als HTTP-Aktion in einfachem JavaScript.

Diese Einrichtung ermöglicht es der App, drei wichtige Informationen an die CallApiAsync-Methode zu übergeben:

1. Die URL aus dem Formular-HTML-Input.

2. Den Body-Inhalt, normalerweise in JSON, eingegeben durch einen Formular-JavaScript-Bereich oder JSON-Texteditor.

3. Die gewählte Aktion, die dem HTTP-Verb entspricht.

Dies stellt sicher, dass der Postman-Klon verschiedene Anfragetypen verarbeiten und die korrekte Antwort-JavaScript in der Antwort-HTML-Sektion anzeigen kann.

Implementierung von PUT-, PATCH- und DELETE-Methoden

Tim demonstriert den Code, der benötigt wird, um PUT, PATCH und DELETE zu verarbeiten:

• PUT: Aktualisiert einen vollständigen Datensatz. Der API-Client sendet ein vollständiges JSON-Objekt, das alle Felder für die angegebene ID überschreibt.

• PATCH: Aktualisiert nur spezifische Felder. Dies ist nützlich, wenn Sie einen Teil eines Datensatzes ändern möchten, ohne andere Daten zu beeinträchtigen.

• DELETE: Entfernt einen Datensatz vollständig. Es erfordert nur die URL und ID; es werden keine Inhalte gesendet.

Tim merkt an, dass DELETE etwas anders ist, da es keine Inhalte zurückgibt – nur eine Erfolgsbestätigung. Diese Änderungen werden komplett in einfachem JavaScript implementiert und modifizieren die CallApiAsync-Methode, um alle Auswahlmöglichkeiten und Aktionen zu verarbeiten.

Testen der Funktionen

Tim betont die Wichtigkeit, sicherzustellen, dass jede HTTP-Methode wie erwartet funktioniert.

1. GET: Tim wählt GET im Dropdown aus und ruft Beiträge ab. Der API-Client liefert die korrekte Antwort-JavaScript und zeigt Daten in der Antwort-HTML-Sektion an.

2. PUT (5:01): Für PUT aktualisiert Tim einen vollständigen Datensatz mit ID, Titel, Body und Benutzer-ID. Er zeigt, dass das zurückgegebene JSON den eingereichten Daten entspricht, was bestätigt, dass der Prozess korrekt funktioniert.

3. PATCH (6:10): Tim zeigt PATCH, indem er nur den Titel eines Datensatzes aktualisiert. Der Postman-Klon lässt andere Felder unberührt, was beweist, dass er partielle Updates effektiv verarbeiten kann.

4. DELETE (7:32): DELETE erfordert nur die Datensatz-ID. Tim führt die Anfrage aus und bestätigt den Erfolg durch leere Klammern, die anzeigen, dass der Datensatz entfernt wurde, ohne unnötige Daten zurückzugeben.

Durch diesen Prozess veranschaulicht Tim, wie ein Postman-Klon alle CRUD-Operationen durchführen kann: Erstellen (POST), Lesen (GET), Aktualisieren (PUT/PATCH) und Löschen (DELETE).

Zusammenfassung der Änderungen und Einrichtung

Tim fasst die wichtigsten Schritte und Codeänderungen zusammen, die nötig sind, um den API-Client zu verbessern:

• Aktualisieren des Dropdown-Menüs, um alle HTTP-Verben (Optionen) einzuschließen.

• Sicherstellen, dass das Enum im Backend mit jedem Verb übereinstimmt, sodass die Auswahl korrekt einer Methode zugeordnet wird.

• Die CallApiAsync-Methode in JavaScript modifizieren, um die zusätzlichen Verben zu verarbeiten und Daten angemessen zu verarbeiten.

Er merkt eine optionale Verbesserung an: Für DELETE könnte man eine einfache Erfolgsmeldung zurückgeben, anstatt eine serialisierte Ausgabe, um die Benutzererfahrung zu straffen.

Aktueller Status und Funktionen des Postman-Klons

Zu diesem Zeitpunkt ist der Postman-Klon mit allen fünf HTTP-Verben voll funktionsfähig. Benutzer können eine URL eingeben, JSON-Daten über einen Formular-JavaScript-Editor übermitteln und Antworten in der Antwort-HTML-Anzeige erhalten.

Tim weist jedoch auf einige zusätzliche Funktionen hin, die die Anwendung verbessern könnten:

• Unterstützung für XML-Anfragen.

• Authentifizierungsverwaltung.

• Hinzufügen benutzerdefinierter Header.

Dies sind Möglichkeiten für Entwickler, den Klon zu erweitern und vielseitiger zu machen.

Tims Rat zur Verbesserung des eigenen Postmans

Tim fordert die Zuschauer auf, ihren Postman-Klon weiter zu bauen und zu verbessern:

• Fügen Sie Web-Benutzeroberflächen mit Frameworks wie WPF, Blazor oder einfachem HTML/JavaScript hinzu.

• Integrieren Sie zusätzliche APIs und verarbeiten Sie verschiedene Datenformate.

• Testen Sie verschiedene Optionen im Dropdown und erweitern Sie die Funktionen für reichhaltigere Funktionalität.

• Teilen Sie Ihr Projekt auf GitHub, um das Repo, den Code und den Prozess potenziellen Arbeitgebern zu präsentieren.

Er betont, dass Praxis der Schlüssel ist: Das Erstellen, Testen und Iterieren Ihres Projekts hilft Ihnen, APIs und Programmierkonzepte tief zu verstehen.

Abschluss

Tim schließt das Video mit der Ermutigung zum Experimentieren ab. Er liebt es, mit Testanwendungen herumzuspielen, und betont, dass sich Entwickler durch wiederholte Iteration verbessern.

Während der GitHub-Code für die Serie nicht sofort verfügbar ist, könnte er in Zukunft im Dev Pass verfügbar sein. Derzeit besteht das Ziel darin, den Lernenden zu ermöglichen, ihren eigenen Postman-Klon von Grund auf zu erstellen, wobei sie Einrichtung, Prozess und Codeimplementierung üben und dabei das Projekt zu ihrem eigenen machen.

Durch die Befolgung von Tims Ansatz können Entwickler einen funktionalen API-Client erstellen, HTTP-Methoden verstehen und ein portfoliofertiges Projekt vorweisen, das praktische Fähigkeiten mit Formular-HTML, Antwort-JavaScript und JSON-Verarbeitung demonstriert.