クラウドでの天気追跡アプリケーションの構築、パート 2

パート 1 では、基本的な PHP アプリケーションを作成し、オンライン サービスを使用して世界中の都市の緯度と経度の座標を取得して保存する方法を説明しました。

ここで、IBM の新しい Insights for Weather サービスを追加し、パート 1 の都市情報を使用して、選択した世界 5 つの都市の天気の追跡を開始しましょう。また、最終的なアプリケーションを IBM Bluemix でホストする方法も学習します。

サンプル アプリケーションを実行する

サンプル アプリケーションのコードを取得する

Vikram がコードをステップごとに説明するのを見る

トランスクリプト

アプリケーションを完成させるための前提条件

前提知識とソフトウェアについては、パート 1 を参照してください。

ステップ 1. Insights for Weather Service インスタンスを初期化する

ストレージ データベース内の各位置レコードにはその場所の緯度と経度も含まれるため、これでアプリケーションを Insights for Weather Service と統合できます。最初は、このサービス インスタンスはバインドされていない状態で実行されます。これにより、サービス インスタンス自体を Bluemix 上でリモートでホストしながら、アプリケーションをローカルで開発できるようになります。

読む: Insights for Weather 入門

1. 新しい Insights for Weather インスタンスを作成するには、Bluemix アカウントにログインし、ダッシュボードの サービスまたは API の使用 ボタンをクリックします。表示されたサービスのリストから Insights for Weather を選択します。

2. サービスの説明を確認し、作成 をクリックして開始します。 [アプリ] フィールドが [無制限のままにする] に設定されていること、および 無料プラン を使用していることを確認してください。

サービス インスタンスが初期化され、サービス情報ページが表示されます。必要に応じてサービス名をメモしておいてください。左側にナビゲーション バーが表示され、
3. サービス資格情報 をクリックしてサービス インスタンスのアクセスの詳細を表示します。

URL フィールドの内容をアプリケーションの $APP_ROOT/config.php ファイルの Weather_uri キーにコピーします。これにより、アプリケーションはリモートの Insights for Weather インスタンスに接続し、そこから気象データの取得を開始できるようになります。

ステップ 2. 現在の気象データを表示する

Insights for Weather サービスを使用するには、前のセクションで示したサービス URL をリクエストし、それに API 署名を追加するだけです。たとえば、API エンドポイント https://USERNAME:PASSWORD@twcservice.mybluemix.net/api/weather/v2/observations/current?units=m& language=en-US&geocode=51.50853-0.12574 へのリクエストは、次のレスポンスを生成します。ロンドンの現在の天気を表示します:
具体的には、JSON 出力には、現在の天気 (「部分的に曇り」など) を説明するフレーズのほか、現在の温度、風速、湿度、その他のデータが含まれます。アプリケーションで同じ情報を表示するには、/index ルート ハンドラー関数を更新して、保存されている場所のリストを取得してから、上記の Insights for Weather サービスに接続して、各場所の現在の気象状況を取得します。次に、 $APP_ROOT /views/index.twig にある Twig テンプレートを更新して、この情報を表示します。

<?php// index page handlers$app->get('/', function () use ($app) {  return $app->redirect($app["url_generator"]->generate('index'));});$app->get('/index', function () use ($app, $db) {  // get list of locations from database  // for each location, get current weather from Weather service  $collection = $db->locations;    $locations = iterator_to_array($collection->find());  foreach ($locations as &$location) {    $uri = $app->config['weather_uri'] . '/api/weather/v2/observations/current?units=m&language=en-US&geocode=' . urlencode(sprintf('%f,%f', $location['lat'], $location['lng']));    $json = file_get_contents($uri);    if ($json === FALSE) {     throw new Exception("Could not connect to Weather API.");      }    $location['weather'] = json_decode($json, true);  }  return $app['twig']->render('index.twig', array('locations' => $locations));})->bind('index');

テンプレートは次のようになります。テキストの代わりにアイコンを使用したい場合は、Insights for Weather サービスがアイコンの完全なセットとその使用方法の説明を提供します。
4. 各場所の隣には、/delete ルート ハンドラーにリンクし、場所の一意の MongoDB レコード識別子をこのハンドラーに渡す [削除] ボタンがあることに注意してください。 /delete ハンドラー関数は、指定されたレコードを MongoDB データベースから削除します:

<div data-role="content">               <h2 class="ui-bar ui-bar-a">Current Weather</h2>        <div class="ui-body">          <ul data-role="listview" data-split-icon="minus" data-split-theme="d">                    {% for item in locations %}            <li>              <a href="{{ app.url_generator.generate('forecast', {'id': item._id|trim}) }}" data-ajax="false">{{ item.location }}, {{ item.country }}              <br/>              {{ item.weather.observation.metric.temp }}&deg; C | {{ item.weather.observation.phrase_22char }}              </a>              <a href="{{ app.url_generator.generate('delete', {'id': item._id|trim}) }}" data-ajax="false">Remove</a>                             </li>          {% endfor %}          </ul>        </div>                     <div>          <p><a href="{{ app.url_generator.generate('search') }}" data-ajax="false" data-inline="true" data-role="button" data-icon="plus" data-theme="a">Add Location</a></p>        </div>                   </div>

ステップ 3. 天気予報を取得する

任意の場所の現在の気象状況を取得できるのと同じように、Insights for Weather サービスを使用すると、次のこともできます。その場所の 10 日間の天気予報を取得します。 API リクエストを https://USERNAME:PASSWORD@twcservice.mybluemix.net/api/weather/v2/forecast/daily/10day?units=m& language=en-US&geocode=51.50853-0.12574 に更新すると、昼と夜の天気が表示されます。条件については以下で詳しく説明します。入力内の dow フィールドと narative フィールドに注目してください。これらはアプリケーションで使用される主要なフィールドであり、曜日とその日の予測情報の断片を表します。

この機能をアプリケーションに追加するには、/forecast ルートの新しいハンドラー関数を作成し、データベースからの位置識別子をそれに渡し、その値の座標を上記の API リクエストに挿入します。関連するコードは次のとおりです:

<?php// handler to remove location from database$app->get('/delete/{id}', function ($id) use ($app, $db) {  $collection = $db->locations;  $collection->remove(array('_id' => new MongoId($id)));  return $app->redirect($app["url_generator"]->generate('index'));})->bind('delete');

この新しいハンドラー関数のページ テンプレートを追加し、メインのインデックス ページからリンクすることもできます。テンプレートはアプリケーションのコード リポジトリにあります。このタブの例は次のとおりです。
3. ステップ 4. アプリケーションを IBM Bluemix にデプロイする

この時点で、アプリケーションは完成し、IBM Bluemix にデプロイする準備が整いました。

1. 首先，更新应用程序配置文件并修改数据库凭证，让它们指向您的远程 MongoDB 数据库部署。
2. 然后，创建应用程序清单文件，记住通过附加一个随即字符串（比如您姓名的首字母）来使用唯一的主机和应用程序名称。

   ---applications:- name: weather-tracker-[initials]memory: 256Minstances: 1host: weather-tracker-[initials]buildpack: https://github.com/cloudfoundry/php-buildpack.gitstack: cflinuxfs2

3. CloudFoundry PHP buildpack 默认情况下不包含 PHP MongoDB 扩展，所以您必须配置该 buildpack，以便在部署期间启用该扩展。另外，如果您希望自动从 Bluemix 获取 Insights for Weather 服务凭证，那么可以更新该代码来使用 Bluemix VCAP_SERVICES 变量，如下所示：

   <?phpif ($services = getenv("VCAP_SERVICES")) {  $services_json = json_decode($services, true);  $app->config['weather_uri'] = $services_json["weatherinsights"][0]["credentials"]["url"];}

4. 您现在看可以继续将该应用程序推送到 Bluemix，然后将 Insights for Weather 服务绑定到该应用程序。

   shell> cf api https://api.ng.bluemix.netshell> cf loginshell> cf pushshell> cf bind-service weather-tracker-[initials] "Insights for Weather-[id]"shell> cf restage weather-tracker-[initials]

现在可以浏览到应用程序清单中指定的主机来开始使用该应用程序，例如 http://weather-tracker- [initials] .mybluemix.net。如果看到一个空白页或其他错误，可以尝试调试您的 PHP 代码来查找出错的地方。

阅读： 在 IBM Bluemix 上调试 PHP 错误

结束语

Insights for Weather 服务使得将特定于位置的天气数据和预报添加到移动或 Web 应用程序变得很容易。因为您可以通过 REST API 访问该服务，因此可以将它与任何编程语言相集成。此外，因为该服务托管在 Bluemix 上，所以很容易将它连接到您由 Bluemix 托管的应用程序，只需将该服务绑定到您的应用程序并重新载入它。

您可以从上面的链接下载本教程中实现的所有代码，以及 PHP buildpack 的配置文件。推荐您获取该代码，使用它，并尝试添加一些新特性。我保证您不会造成任何破坏，而且它肯定对您的学习有所帮助。祝您开发愉快！