導入

今月、私は R2 Tester という新しいサイド プロジェクトに取り組み始めました。ChatGPT のおかげで、当初は Postman-frontend という名前でした。学習ツールとして設計された R2 Tester は、Postman のインターフェイスと機能を再現しており、API インタラクションについての理解を深めるのに役立ちます。このアイデアは、先月取り組み始めた別のサイド プロジェクトから生まれました (そうですか?‍♂️)。

R2テスターに​​ついて

これは、バックエンド (私の場合は Node.js) とのデータとファイル (未実装) の交換を練習するために作成したツールです。フロントエンドは、HTML、CSS/SASS、JavaScript、DOM 操作、Bootstrap、JSON フォーマット用の Prettify を使用して開発されています。

このツールはリクエストをブラウザのローカル ストレージに保存し、(ユーザー操作に基づいて) UI にロードします。ユーザーは、コレクション、フォルダー、および個々のリクエストを作成し、Prettify を通じてクリーンでフォーマットされたビューで応答を視覚化できます。

主な特長

• データ交換: R2 Tester は、ユーザーがバックエンドとのデータの送受信を練習できるように設計されています。
• 構築方法: HTML、CSS/SASS、JavaScript、DOM、ブートストラップ。
• リクエスト管理: ユーザーはコレクション、フォルダ、リクエストを作成および管理できます。
• LocalStorage: リクエストをブラウザの localStorage から直接保存およびロードします。
• Prettify: 読みやすいように JSON 応答をフォーマットします。

コードとライブデモ

次の URL にあるプロジェクトの GitHub リポジトリにアクセスすると、コードを詳しく調べて、ブラウザで直接プロジェクトのライブ デモンストレーションを確認できます。

https://github.com/adnannazir235/R2-Tester

プロジェクトのステータス

R2 Tester は開発中ですが、重要な機能が欠けています。その主な目的は、API インタラクションを学習することでした。中心となる概念を示していますが、実稼働環境での使用は目的としていません。教育目的でコードを調べてください。ただし、その制限事項に注意してください。

結論

R2 Tester は、Web 開発と API インタラクションの複雑さを探索できるようにする刺激的で教育的なプロジェクトです。このツールの開発を続ける中で、同様にバックエンド通信とデータ交換について理解を深めようとしている他の人たちにとって、このツールが有益なリソースとして役立つことを願っています。