第6章 クライアントアプリの変更

クライアントアプリを変更して、受け取ったサーバー応答から timestamp 属性を表示するようにします。

まず、応答のプレースホルダーを作成します。

  1. アプリ、クラウドアプリ & サービス ページに移動します。
  2. Cordova App クライアントアプリを開きます。
  3. エディター を開きます。
  4. www/index.html ファイルを開きます。

  5. 受信した timestamp を表示する <div> を新たに追加します。

    この要素は、受信した値のプレースホルダーとして機能します。

    以下の行を見つけます。 

    <div id="cloudResponse" class="cloudResponse"></div>

    これを以下のコードで置き換えます。 

    <div id="cloudResponse" class="cloudResponse"></div>
<div id="timestamp" class="cloudResponse"></div>
  6. ファイル > 保存 を使用するか、Ctrl + S (Windows の場合) もしくは cmd + S (Mac の場合) のショートカットを使用して変更を保存します。

Say Hello From The Cloud ボタンのハンドラーを編集して、受信した timestamp の値をプレースホルダーに表示するようにします。

  1. エディターで www/js/hello.js ファイルを開きます。

    このファイルには、Say Hello From The Cloud ボタンのクリックハンドラーが含まれています。これは $fh.cloud API を使用してクラウドアプリの /hello エンドポイントを呼び出し、プレースホルダー <div id="timestamp"> 要素を作成します。

  2. プレースホルダーに受信した timestamp の値を設定します。

    以下のコードを見つけます。 

    document.getElementById('cloudResponse').innerHTML = "<p>" + res.msg + "</p>";

    これを以下のコードで置き換えます。 

    document.getElementById('cloudResponse').innerHTML = "<p>" + res.msg + "</p>";
document.getElementById('timestamp').innerHTML = "<p>" + res.timestamp + "</p>";

  3. 変更を保存します。

    プレビューが自動的に更新されます。

  4. Say Hello From The Cloud をプレビューでクリックします。

    ボタンの下のエリアには、タイムスタンプを表す数字が表示されるようになります。これが表示されていない場合には、ページを更新します。

    タイムスタンプ