基本2 (所要時間： 5分)¶
WEB APIを作る¶
HTTPのリクエスト(GET)を受け付けて、応答するWEB APIを作成します。
- パレットの 入力カテゴリ から httpノード を ワークスペース にドラッグドロップします
- パレットの 出力カテゴリ から debugノード と http responseノード を ワークスペース にドラッグドロップします
- httpノード の右端から線を引き出して、 debugノード と http responseノード につなぎます。
- httpノード をダブルクリックして、 URL を /hello に変更します
- デプロイボタン を押します
これで準備完了です。
[エンドポイント]-[ブラウザで開く] で、ブラウザを開くと、FrontOpsのWEBサーバーのURLが確認できます。 [1]
URLの後ろに /hello を追加してアクセスしてみます。
すると、ブラウザに
{}
が表示されました。 デバッグウィンドウ にも同様の出力が確認できました。
続いて、/hello?id=123&name=ABC とパラメータを付けてアクセスします。
すると、ブラウザに
{"id":"123","name":"ABC"}
が表示されました。デバッグウィンドウ にも同様の出力が確認できました。
（上の画像をクリックしてアニメを見てください）
| [1] | Macの場合はSafariを使ってください。ChromeだとURLが外部から指定できず、FrontOpsのWEBサーバーのURLが確認できません。 |
動作説明¶
何が起こったのか説明します。
- httpノード は、 HTTPリクエストが来たのでメッセージを作成し、中にHTTPリクエストのデータを設定して、出力に流しました。
- メッセージは線上を流れて、http responseノード と debugノード に届きました。
- http responseノード は、メッセージが届いたので、HTTPリクエストに応答しました。
- debugノード は、メッセージが届いたので、 デバッグウィンドウ に表示しました。
応答内容を加工する¶
応答内容を加工してみます。
httpノード と http responseノード の間に パレットの 機能カテゴリ からオレンジの templateノード を追加します
templateノード をダブルクリックして、テンプレート を次のように変更します。 [2]
こんにちは {{payload.name}} さん。あなたのIDは {{payload.id}} です
| [2] | mustache というテンプレートエンジンを使っています。 {{}} の中は変数展開されます。 |
先程のブラウザページをリロードして、応答が変わるのを確認してください。 （上の画像をクリックしてアニメを見てください）