PUT、PATCH、DELETEを追加してPostman Cloneを構築

Tim Coreyのビデオ"PUT, PATCH, DELETE: Postmanクローンコースの構築"で、残りのHTTP動詞を処理する方法を学びながらPostmanクローンの構築を続けます。 前回のレッスンでは、POSTコマンドとGETリクエストを実装しました。 このレッスンでは、PUT、PATCH、およびDELETEに焦点を当て、独自のPostmanスタイルAPIクライアントの基本機能を完成させます。 Timの指導に従うことで、APIの動作や開発者がどのようにプログラム上でやり取りするかについての理解が深まります。

Timは、完全なコースのレッスン8番であることを説明し、新機能の導入からレッスンを始めます。 彼は、このプロジェクトは初心者に優しいもので、ポートフォリオの例として役立つかもしれないが、単にコードを直接コピーするのではなく、自分の作品をユニークにすることの重要性を強調しています。

アプリでのドロップダウンとオプションの更新

ティムはアプリのセットアップを見せながら始めます。現在、ドロップダウンメニューではGETとPOSTを選択できます。完全に機能するPostmanクローンを構築するためには、OPションリストにPUT、PATCH、DELETEを追加する必要があります。

プロパティでは、ティムはドロップダウンアイテムを更新し、すべての5つのHTTP動詞が選択肢として表示されるようにします：GET, POST, PUT, PATCH, DELETE。 彼は、ドロップダウンの選択肢が、APIクライアントのために有効なHTTPアクションを定義するバックエンドで使用されるEnumと一致する必要があることを強調します。 これにより、ユーザーがドロップダウンからオプションを選択したときに、プロセスがそれを基礎となるコードロジックに正しくマッピングすることが保証されます。

ユーザー選択をHTTPアクションにマッピングする

ティムは、アプリがドロップダウンでのユーザーの選択を特定のHTTPリクエストメソッドにどのように変換するかを説明します。 システムは最初にフォームHTML入力で入力されたURLを検証し、選択された選択肢をプレーンJavaScriptでHTTPアクションとして解析します。

この設定により、アプリはCallApiAsyncメソッドに3つの重要な情報を渡すことができます：

1. フォームHTML入力からのURL。

2. JSONであることが多い本文コンテンツで、フォームJavaScriptエリアまたはJSONテキストエディタを通じて入力されます。

3. HTTP動詞に対応する選択されたアクション。

これにより、Postmanクローンがさまざまなタイプのリクエストを処理し、応答HTMLセクションに表示するための正しい応答JavaScriptを返すことができます。

PUT, PATCH, DELETEメソッドの実装

ティムはPUT, PATCH, DELETEを処理するために必要なコードを示します：

• PUT: 完全なレコードを更新します。 APIクライアントは完全なJSONオブジェクトを送信し、指定されたIDに対してすべてのフィールドを上書きします。

• PATCH: 特定のフィールドのみを更新します。 これは、他のデータに影響を与えずにレコードの一部を変更したい場合に便利です。

• DELETE: レコードを完全に削除します。 URLとIDのみが必要であり、 コンテンツは送信されません。

ティムは、DELETEがコンテンツを返さず、成功確認のみを行うため、わずかに異なることを指摘します。 これらの変更はすべてプレーンJavaScriptで実装され、CallApiAsyncメソッドを変更してすべての選択肢とアクションを処理します。

機能のテスト

ティムは、各HTTPメソッドが期待通りに動作することを確認することの重要性を強調します。

1. GET: ティムはドロップダウンでGETを選択し、投稿を取得します。 APIクライアントは正しい応答JavaScriptを返し、応答HTMLセクションにデータを表示します。

2. PUT (5:01): PUTの場合、ティムはID、タイトル、本文、ユーザーIDを含む完全なレコードを更新します。 彼は、返されたJSONが送信されたデータと一致していることを示し、プロセスが正しく動作していることを確認します。

3. PATCH (6:10): ティムはタイトルのみを更新することでPATCHを実演します。 Postmanクローンは他のフィールドを無傷のままにし、部分的な更新を効果的に処理できることを証明します。

4. DELETE (7:32): DELETEではレコードIDのみが必要です。 ティムはリクエストを実行し、空のブラケットを介して成功を確認します。これは、不要なデータを返さずにレコードが削除されたことを示しています。

このプロセスを通じて、ティムは、PostmanクローンがすべてのCRUD操作（作成（POST）、読み取り（GET）、更新（PUT/PATCH）、削除（DELETE））を実行できることを示しています。

変更とセットアップの概要

ティムは、APIクライアントを強化するために必要な主要な手順とコードの変更をまとめます：

• すべてのHTTP動詞（オプション）を含むようにドロップダウンメニューを更新します。

• バックエンドのEnumが各動詞と一致することを確認し、選択が正しくメソッドにマッピングされるようにします。

• JavaScriptでCallApiAsyncメソッドを変更し、追加の動詞を処理し、データを適切に処理します。

彼はオプションの改善策として、DELETEの場合、シリアライズされた出力の代わりに単純な成功メッセージを返すことで、ユーザー体験を簡素化することができると述べています。

Postmanクローンの現在のステータスと機能

この時点で、Postmanクローンはすべての5つのHTTP動詞が完全に機能しています。 ユーザーはURLを入力し、フォームJavaScriptエディタを介してJSONデータを送信し、応答HTMLディスプレイで応答を受け取ることができます。

しかし、ティムはいくつかの追加機能がアプリケーションを強化し得ることを指摘します：

• XMLリクエストのサポート。

• 認証の処理。

• カスタムヘッダーの追加。

これらは、開発者がクローンを拡張し、より汎用性を持たせる機会です。

自分のPostmanを強化するためのTimの助言

ティムは視聴者に自分たちのPostmanクローンを構築し続けるよう挑戦します：

• WPF, BlazorまたはプレーンHTML/JavaScriptのようなフレームワークを使用してウェブユーザーインターフェイスを追加します。

• 追加のAPIを含め、異なるデータフォーマットを処理します。

• ドロップダウンの異なるオプションをテストし、より豊富な機能のために機能を拡張します。

• リポジトリ、コード、プロセスを潜在的な雇用者に示すためにGitHubでプロジェクトをシェアします。

彼は練習が鍵であることを強調します：プロジェクトを構築、テスト、反復し続けることで、APIとプログラミングのコンセプトを深く理解することができます。

結論

ティムはビデオを締めくくり、実験を奨励します。 彼はテストアプリケーションをいじるのを楽しんでおり、開発者は繰り返しの反復を通じて向上すると強調しています。

このシリーズのGitHubコードはすぐには提供されませんが、将来的にはDev Passで利用可能になるかもしれません。 当面の目標は、学習者に独自のPostmanクローンをゼロから構築させ、セットアップ、プロセス、コード実装を実践しながらプロジェクトを独自にすることです。

ティムのアプローチに従うことで、開発者は機能的なAPIクライアントを作成し、HTTPメソッドを理解し、フォームHTML、応答JavaScript、JSON処理の実践的なスキルを示すポートフォリオ対応のプロジェクトを生み出すことができます。