内容


受 Cloudant 和 Bluemix 支持的动态 Google Gauge

Comments

添加一个 Google Gauge,它使用 Bluemix 从一个 Cloudant 数据库获取数据并放在您网站上。

该图显示了指针被设置为 550 的刻度盘

为了创建这个动态 Google Gauge,我构建并部署一个在 Bluemix 上运行的新 PHP 应用程序,将它连接到一个 Cloudant 数据库,读取一个 JSON 文档,还填充了 Google Gauge 的值。

这个新 Bluemix 应用程序依赖于一个来自 GitHub 的公开的构件包,因为该应用程序是使用 PHP 构建的,PHP 目前还不能在 Bluemix 中使用。本文将介绍一些基本步骤,您可以使用这些步骤构建类似的应用程序:

  • 创建一个新的 Cloudant 数据库。
  • 在数据库中填入一个 JSON 文档。
  • 设置一个 PHP 应用程序来连接到该数据库,读取该文档来填充 Google Gauge 的值。

实现您的应用程序的前提条件

  • 一个 Bluemix 帐户 — 使用您的 IBM 用户 ID 和密码注册。
  • 访问 IBM DevOps Services:如果系统提示您将一个现有的 IBM DevOps 帐户链接到您的新 Bluemix 帐户,那么请单击 Yes
  • 熟悉 Bluemix 这个 IBM 平台即服务 (PaaS),因为应用程序代码是在 Bluemix 上运行的。
  • 熟悉 IBM DevOps Services(以前称为 JazzHub),这是在 Web 中开发和部署应用程序的工具,这些工具基于 IBM 云,可以使用这些工具创建应用程序代码并将它们部署到 Bluemix。
  • 熟悉 Cloudant,这是云中的 IBM NoSQL JSON 数据库,请访问应用商店,并从此数据库检索数据(存储为 JSON 格式的文档)。

提示:同时打开多个浏览器选项卡,以方便参阅:BluemixDevOps ServicesCloudant

运行应用程序获取代码

第 1 步. 创建您自己的应用程序实例

要创建该代码的副本供自己使用,请执行以下操作:

  1. 单击 Get the code(如上所述)。此操作会在 DevOps Services 中打开该项目。
  2. 如果获得系统提示,则登录到 DevOps Services 中。
  3. 单击 Edit Code该图显示了项目中的 edit code 选项卡
    该图显示了项目中的 edit code 选项卡
  4. 如果希望创建自己的项目并继续操作,那么您需要创建该代码的分支,所以请单击 Fork该图显示了项目中的 Fork 选项
    该图显示了项目中的 Fork 选项

    此操作会在您的 DevOps Services 环境中创建一个新项目。该应用程序不需要任何修改即可运行,但您需要创建该数据库,并向其中添加一个文档,它才能成功运行。在尝试运行应用程序之前,请执行以下步骤。

  5. 单击 Deploy,在您的 Bluemix 仪表板内创建一个新应用程序。留出部署它的时间。 该图显示了 Deploy 菜单按钮
    该图显示了 Deploy 菜单按钮

    此刻,您的应用程序正在上传到 Bluemix,您的环境正在做准备。对于这个特定的应用程序,您可以使用一个 PHP 运行时环境来显示网页,该网页来自 GitHub。在根目录下,这是一个 IBM WebSphere® Liberty Server,它已经过增强,包含 Zend PHP 运行时引擎。

  6. 登录到 Bluemix 并找到您新部署的应用程序。在完成部署后,您会看到您的应用程序已在正常运行。 该图显示该应用程序正在 Bluemix 仪表板中运行
    该图显示该应用程序正在 Bluemix 仪表板中运行
  7. 单击应用程序图标,查看您应用程序的更多详细信息。

第 2 步. 向您的应用程序添加一个 Cloudant 服务

  1. 单击 Add a service 向应用程序添加一个 Cloudant 服务。这个应用程序需要与一个 Cloudant 服务建立关联。 该图显示了向现有应用程序添加一个服务的过程
    该图显示了向现有应用程序添加一个服务的过程
  2. 从目录中的可用服务列表中选择 Cloudant 服务。 该图显示了选择 Cloudant 的图标
  3. 单击 Create

    备注:应用程序名称和实例名称值已自动填入。单击 Create 会在 IBM 托管的共享环境中创建一个新实例。

    该图显示了 Create 按钮
    该图显示了 Create 按钮

    在提示时重新启动应用程序,以便让更改生效。

  4. 查看 VCAP_SERVICES 变量。在您应用程序的 Bluemix 仪表板中,可以看到您有一个 Cloudant 数据库服务与您的应用程序有关联。

    单击 Runtime 选项卡查看与您应用程序有关联的 VCAP_SERVICES 环境变量。此变量被读入应用程序中来填入连接信息,以便您可以访问 Cloudant 数据库。请注意,这是一个 JSON 数据对象。

    备注:VCAP_SERVICES 变量使您能够在应用程序中使用敏感数据,而不会在应用程序代码中公开它。

    该图显示了 Runtime 选项卡中的 VCAP_SERVICES 变量
    该图显示了 Runtime 选项卡中的 VCAP_SERVICES 变量

第 3 步. 创建一个新 Cloudant 数据库并添加一个文档

  1. 要启动 Cloudant 管理控制台,请单击 Bluemix 仪表板左侧的 Cloudant NoSQL DB 服务选项卡,然后单击 Launch该图显示了 Cloudant NoSQL DB 选项卡
    该图显示了 Cloudant NoSQL DB 选项卡

    在此控制台中,您可以创建和管理数据库。下一步是创建一个新数据库并在其中创建一个新文档。

  2. 在 Cloudant 管理控制台中,单击 Add New Database该图显示了添加新数据库的过程
    该图显示了添加新数据库的过程
  3. 将数据库命名为 gauge
  4. 向 gauge 数据库添加一个文档。 该图显示了添加新文档的过程
    该图显示了添加新文档的过程
  5. 将以下 JSON 数据添加到新文档中并单击 Save
    		{
     		   "_id": "Gauge-Data",
     		   "id": "Gauge-Data",
     		   "GaugeValue": "550"
    		}

    备注:保存 JSON 数据后,会自动添加一个新字段 _rev,如下面这个代码清单所示。这是 Cloudant 添加到所有文档中的一个惟一值。这个值是必不可少的,但忽略它不会带来任何安全问题。

    		{
    		   "_id": "Gauge-Data",
    		   "_rev": "8-6513e30087b34680b45739ca720d8a25",
    		   "id": "Gauge-Data",
    		   "GaugeValue": "550"
    		}

第 4 步. 测试您的 Bluemix 应用程序

  1. 打开 Bluemix 仪表板并找到您的应用程序。
  2. 单击与您的应用程序有关联的 URL。 该图显示您的应用程序正在 Bluemix 仪表板中运行: 显示了路由链接
    该图显示您的应用程序正在 Bluemix 仪表板中运行: 显示了路由链接
  3. 您会看到一个包含 Google Gauge 的页面。该值现在已从您的 Cloudant 数据库获取。 该图显示了指针设置为 550 的量表
  4. 修改 Cloudant 数据库中的值,看看刻度盘有何变化。
  5. 从仪表板选择 gauge 数据库。
  6. 要编辑 Cloudant 文档,可以单击 Edit doc该图显示了 Edit doc 按钮
    该图显示了 Edit doc 按钮
  7. 将该值修改为 300
    		{
    		   "_id": "Gauge-Data",
    		   "_rev": "9-f4b99af836a3a7f0a1436c585b418cfd",
    		   "id": "Gauge-Data",
    		   "GaugeValue": "300"
    		}
  8. 刷新显示您的刻度盘的页面。留意 Google Gauge 中的变化。 该图显示刻度盘上的指针指向 300
    该图显示刻度盘上的指针指向 300

恭喜您!您现在已经有了一个在 Bluemix 中正常运行的应用程序。

第 5 步. 查看 PHP 代码

现在您已经有了一个能正常工作的示例,我们来看一看连接到 Cloudant 数据库,并检索 Google Gauge 的数据的 PHP 代码:

  1. 打开一个浏览器并登录到 DevOps Services。
  2. 选择 DynamicGoogleGauge-dw-demo 项目。
  3. 在项目内,找到 index.php 文件,其中包含连接到数据库并检索数据的 PHP 逻辑。

在 index.php 文件中,可以同时看到 PHP 和 HTML 标记。PHP 标记内的操作在服务器上运行。

index.php 文件中的第一行代码的用途是获取 SAG PHP 库。SAG 主库位于项目的 sag-master 目录中。

	require('sag-master/src/Sag.php');

在能够访问 SAG 库之后,就可以使用 index.php 文件中的代码连接到数据库并检索数据。

如下所示,下一部分 PHP 代码将读取 VCAP_SERVICES 环境变量,并提取用户 ID 和密码。此变量仅位于服务器上;因此可以使用它存储您代码中需要的敏感数据。请记住,访问您的 DevOps Services 项目的任何人都可以看到您的代码。

	// vcap_services Extraction
	   $services_json = json_decode(getenv('VCAP_SERVICES'),true);
	   $VcapSvs = $services_json["user-provided"][0]["credentials"];
	// Extract the VCAP_SERVICES variables for Cloudant connection.
	    $myUsername = $VcapSvs["username"];
	    $myPassword = $VcapSvs["password"];
    // Create the URL for the SAG PHP utility.
    $myUrl = ($myUsername . ".cloudant.com");

以下代码将与 Cloudant 建立连接:

	   $sag = new Sag($myUrl);
	   $sag->login($myUsername, $myPassword);

接下来,让该连接指向 gauge 数据库。

	   $sag->setDatabase('gauge');

下一步是从 Gauge-Data 文档请求数据,该文档被存储在 gauge 数据库中。结果被存储在 $resp 对象中。稍后在 JavaScript 中会用到该值。

	   $resp = $sag->get('Gauge-Data')->body->GaugeValue;

最后一步是使用从数据库返回的数据来填充 Google Gauge 的值(量表中的刻度盘)。

备注:以下 JavaScript 在浏览器中的客户端上运行。清单中的 PHP 代码在服务器端运行,echo 语句的结果嵌入在 HTML 中,然后再发送给客户端。如果查看客户端上的 HTML 源代码,则不会看到任何 PHP 代码,只会看到从数据库返回的值。

	var gaugeData = google.visualization.arrayToDataTable([
	    ['Label', 'Value'],
	    ['Value', <?php echo $resp; ?>]
	]);

结束语

IBM Cloudant 服务是一个易于使用的分布式 NoSQL 数据库即服务。借助云的强大能力,您可以集中精力来构建和改进您的应用程序,无需担忧自行扩展和管理数据库。Bluemix 与 DevOps Services 相结合,为开发和部署复杂应用程序来利用 Cloudant 等服务提供了所有必要的工具。

致谢

感谢 Mark Frederick 在编写本文过程中提供的所有帮助。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Cloud computing, Web development
ArticleID=982929
ArticleTitle=受 Cloudant 和 Bluemix 支持的动态 Google Gauge
publish-date=09112014