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