すぐにREST APIをノードに構築する方法.タイプスクリプト(絶対初心者)のためのJS－4のパート1

ノードで簡単なREST APIを構築しましょう.JS使用TypeScript . 多くの議論があるので、このシリーズは4つの部分に分割されます.また、プログラミングを開始する絶対初心者や人々のためのものです.それと同時に、いくつかの高度なトピックについて言及します.そうすれば、残りのAPIをどのように構築するかを知っていても、このチュートリアルを読んで何かを得ることができます.
あなたが記事を読む代わりに、このアプリケーションをコーディングするのを見るのを好むならば、このビデオをチェックしてください
また、あなたがそれを好めば、より多くのために購読を考慮してください.
このシリーズではHuncwot , Webアプリケーションをすばやく構築するツールです.それは、フロントエンド、バックエンドとの間のすべてをカバーする統合ソリューションです.
インストールから始めましょうHuncwot . 世界的にそれをするほうがよい.

npm install -g huncwot

少しの理論
コードに飛び込む前に、いくつかの理論から始めましょう.これは包括的な導入ではありません.私の目標は、いくつかの概念を説明し、いくつかの実用的な例を示しています.私はこれが迅速に対象に適切な直感を得るための最良の方法だと思います.

原研
APIはアプリケーションプログラムインタフェースを表します.ここで重要なビットは、インターフェース/単語です.インターフェイスは、我々が何かと対話するために会うこのポイントです.例えば、私たちの携帯電話の画面は、インターフェイス、ユーザーインターフェイス(またはUI)正確にすることです.このインターフェイスは、デバイスと対話することができます.触れることによって、押すと、我々はいくつかのアクションを行うには、電話を指示画面を交換します.これらのジェスチャーは、中間の地面です:人間のために、それは行動することについて考えるだけで簡単です、電話のために、それは直接に0と1 sのチェーンとして指示を受けるのが簡単です;代わりに、妥協点、人間にどのように携帯電話と対話することができます間のポイント-インターフェイス.

Web API
APIの多くの種類があります.このチュートリアルでは、Web APIを議論しています.Web APIは、Web上での場所です.言い換えれば、Web APIは、エンドポイント(URL)を介して公開されたインターフェイスです.それらのメッセージは、我々が送る要求と我々が受ける反応です.Web APIは概念的にオブジェクト指向プログラミングに近いものです.

URL
要求は、ウェブAPIが私たちのために何かを指示する.それを送るために、我々はアドレスを必要とします:URL.URLにはいくつかの部分があります.プロトコルがあります:Web APIのためにhttp(s) . このウェブAPIが住んでいるウェブ上の場所を指定するドメインがあります.最後に、経路があります.そして、それは情報の特定の部分集合を記述するそのドメインの中の場所です.

資源
我々が我々の地域の今後のイベントまたは過去に起こった最高の技術会議を求めることができるように、我々が技術的なイベントのためにウェブAPIを構築したいと想像しましょう.そのコンテキスト内のすべてのエンティティに必要な抽象化を作成することから始めます.これらの抽象化はリソースと呼ばれます.私たちはEvent それぞれが持つ資源name フィールドとdate フィールド.後に他のリソースを追加することができますAttendee , Organizer , Speaker など.
我々は現在、我々のウェブAPIのURLのパスとして、各リソースを公開することができます/event のパスEvent リソース/speaker のパスSpeaker 資源など.リソースが公開されると、リクエストの送信と応答の受信によって相互作用を開始できます.例えば、特定のリソースの現在の状態を取得したり、特定の条件に基づいてリソースをフィルタリングしたり、名前を入力したためにリソースを更新したりすることができます.

ヘッダ
リクエストを送信して、我々のウェブAPIに対する応答を受け取るとき、我々はこのAPIがどのようにふるまうかをパラメータ化する必要があるかもしれません.このAPIの特定のコンテキストに関係なく、我々は技術的なイベントのAPIを構築しているかどうか、本屋を管理したり、予定を予定しています.たとえば、応答形式を変更したい場合があります.我々は、それをヘッダーを通してAPIに伝えます.

ハンドラ
各パスは関数に関連付けられており、このパスが訪れたときやこのリソースが要求されたときに何が起こるかを説明します.これらの関数ハンドラを呼び出します.ハンドラは、入力として要求を受け取り、出力として応答を生成します.

路線
Web APIは、パス(リソースを記述することができる)とハンドラの間のマッピングです.パスとそのハンドラの特定のペアをルートと呼びます.これは、ルートを定義するためのデータ駆動アプローチです.私たちは、ほとんどのプログラミング言語で既に利用可能な単純なデータ構造を使用します.

実例
最後にコードにジャンプしましょう.techevents .

huncwot new techevents

プロジェクトをVSコードで開きましょう.我々は、興味だけですconfig/server/routes.ts ファイル.

import { Routes } from 'huncwot';
import { OK } from 'huncwot/response';

const routes: Routes = {
  GET: {
    // implicit `return` with a `text/plain` response
    '/hello': _ => 'Hello Huncwot',

    // explicit `return` with a 200 response of `application/json` type
    '/json': _ => {
      return OK({ a: 1, b: 2 });
    },

    // set your own headers
    '/headers': _ => {
      return { body: 'Hello B', statusCode: 201, headers: { 'Authorization': 'PASS' } };
    }
  },
  POST: {
    // request body is parsed in `params` by default
    '/bim': request => {
      return `Hello POST! ${request.params.name}`;
    }
  }
};

export default routes;

huncwotは私たちのためにルートの基本構造を生成しました.サーバを起動してテストしましょう.

huncwot server

このコマンドはポート上のサーバを起動します:5544 . 我々は今それがどのように動作するかを確認するいくつかのリクエストを送信することができます.コマンドラインから直接リクエストを送信するにはhttpieを使いますが、Postman API Client .
リクエストを送りましょう/hello パス

http :5544/hello

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 13
Content-Type: text/plain
Date: Sun, 29 Dec 2019 16:56:23 GMT

Hello Huncwot

サーバーが動いているのでlocalhost 私はその部分をスキップすることができて、経路とともにポートを指定するだけです.

http :5544/json

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 13
Content-Type: application/json
Date: Sun, 29 Dec 2019 16:56:44 GMT

{
    "a": 1,
    "b": 2
}

HuncwotはJavaScriptオブジェクトをJSONに自動的に変換することができます.さらに、レスポンスヘルパーを使用しますOK お好みのHTTPステータスコードを指定します.

http :5544/headers

HTTP/1.1 201 Created
Authorization: PASS
Connection: keep-alive
Content-Length: 7
Content-Type: text/plain
Date: Sun, 29 Dec 2019 16:57:11 GMT

Hello B

huncwotの応答がちょうどオブジェクトであるので、あなたはheaders 選択したヘッダーを持つレスポンスオブジェクトへのフィールド.この場合、Authorization 値を持つヘッダPASS .
Huncwotでは、ルートへの変更は自動的に再ロードされます.サーバーを再起動する必要もありませんnodemon . それは箱からうまくいきます.あなたはこれについて心配する必要はありません.
The config/server/routes.ts 単純なJavaScriptハッシュマップ(または正確であるオブジェクト)です.私たちはRoutes Huncwotからさらにその事実を抑制するタイプ.各々のハンドラは、入力として要求を受けますRequest を返します.Response 種類).
私たちは今、Web APIに関連するいくつかの概念をよく理解しています.我々は、将来の残りのAPIの基礎を構築しました.まだ重要な要素がまだ残っていないので、我々はまだそこにいません.私は、今後の記事でそれをカバーします.ステイ!