新規プロジェクト をクリックします。

プロジェクトの名前を「アプリ名」フィールドに入力します。

Cordova App のオプションまでスクロールダウンします。プロジェクト名を「アプリ名」フィールドに記入し、チェックボックスにチェックを入れます。

アプリの詳細 画面で クラウドアプリのステータス フィールドの値を確認します。

ステータスが Stopped の場合は、クラウドアプリをデプロイする必要があります。Running の場合は、3. クライアントアプリのプレビュー セクションに進みます。

左側のサイドバーにある デプロイ をクリックします。

アプリ、クラウドアプリ & サービス 画面の アプリ ボックスで Cordova App をクリックします。

これで アプリ詳細 ページが開きます。右側で実行中のアプリのプレビューを操作することができ、左側にはアプリの名前、ID、git リポジトリー URL などのメタデータが表示されます。

プレビューするクラウドアプリが「アプリのプレビュー」セクションで選択されてることを確認します。

Say Hello From The Cloud をクリックします。

クライアントアプリがプロジェクトのクラウドアプリを呼び出し、ボタンの下に応答が表示されます。

ビルド をクリックします。

しばらくするとバイナリーが構築され、URL と QR コードが表示されます。

モバイルデバイスにクライアントアプリのバイナリーをインストールするには、以下のいずれかの方法に従います。

左側のサイドバーにある エディター をクリックします。

このエリアでは、クラウドアプリの Git リポジトリーにあるファイルのソースコードを編集できます。このプロジェクトのクラウドアプリは、Express と呼ばれる Node.js web アプリケーションです。

application.js ファイルを開きます。

application.js は、クラウドアプリへのリクエストすべてを処理します。クライアントアプリがリクエストを /hello エンドポイントに送信し、application.js ファイルがこれらのリクエストを hello.js と呼ばれる別のファイルに転送します。

app.use('/hello', require('./lib/hello.js')());

Express での転送についての詳細は、Express Router documentation を参照してください。

timestamp 属性を POST 応答オブジェクトに追加し、値は現在の UNIX タイムスタンプにします。

POST ハンドラーで以下の行を探します。

res.json({msg: 'Hello ' + world});

この行を以下のように変更します。

res.json({msg: 'Hello ' + world, timestamp: new Date().getTime() });

POST ハンドラーは以下のようになります。

hello.post('/', function(req, res) {
  console.log(new Date(), 'In hello route POST / req.body=', req.body);
  var world = req.body && req.body.hello ? req.body.hello : 'World';

  // see http://expressjs.com/4x/api.html#res.json
  res.json({msg: 'Hello ' + world, timestamp: new Date().getTime() });
});

エディターで ファイル > 保存 をクリックして変更を保存します。

変更はクラウドアプリの Git リポジトリーに保存されます。実行中のインスタンスに変更を適用するには、クラウドアプリを再度デプロイする必要があります。

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

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

以下の行を見つけます。

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

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

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

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

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

プレースホルダーに受信した 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>";

変更を保存します。

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

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

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