内容


将丰富的报告嵌入到应用程序中

结合使用 Bluemix 上的 dashDB、MongoLab 和 Embeddable Reporting 服务,在 Liberty for Java 上构建一个计步器应用程序

Comments

在本教程中,将了解如何构建一个应用程序来拉取数据和嵌入报告。我们的示例应用程序 OnTrack 是一个显示计步器活动的健康应用程序。它使用了 Bluemix 中的 Embeddable Report 服务,将结果存储在一个 Bluemix 数据存储工具 dashDB 中。我们首先会添加一个 Liberty for Java® 运行时,然后添加 dashDB、Embeddable Reporting 和 MongoLab 服务。Embeddable Reporting 使用了 MongoLab 存储报告工件。

Bluemix 上的 Embeddable Reporting 服务提供了一个功能丰富的报告创作环境。可以创建可视化表示、图表、格式化列表等。

构建您的应用程序需要做的准备工作

  • 一个 Bluemix 帐户,用于构建和运行应用程序。
  • 一个 DevOps Services 帐户,用于下载示例应用程序。
  • 示例 ontrack.zip 文件。使用获取代码按钮从 DevOps Services 下载它:

运行应用程序获取代码

第 1 步. 在 Bluemix 上创建一个 Java 应用程序

首先在 Bluemix 上创建一个应用程序,您的报告会部署在该应用程序中。

  1. 登录到 Bluemix
  2. 单击 CREATE AN APP 访问目录。创建应用程序的界面的屏幕截图
  3. 单击 WEB,因为您创建的是一个 Web 应用程序。指定 Web 应用程序的界面的屏幕截图
  4. 单击 Liberty for Java 运行时,然后单击 CONTINUE添加 Liberty 运行时的界面的屏幕截图
  5. 为应用程序提供一个名称并单击 FINISH
  6. 单击 ADD A SERVICE 并将以下 3 个服务添加到您应用程序中:MongoLab(在 Data Management 下)、dashDB(在 Big Data 下)和 Embeddable Reporting(在 Business Analytics 下)。对于每个服务,都可以保留 Service name 不变。单击 CREATE向应用程序添加服务的界面的屏幕截图
    向应用程序添加服务的界面的屏幕截图

第 2 步. 向 dashDB 填充数据

创建您的应用程序后,可以向该数据源填入示例计步器数据。

  1. 在仪表板上,单击 dashDB 服务,然后单击 LAUNCH
  2. 单击 Load Data
  3. 单击 Browse File 按钮选择一个要上传的文件。选择 PEDOMETER.csv(包含在代码中)。
  4. Does the file have columns that contain dates or times? 下选择 Yes
  5. 单击 Load File,然后单击 NEXT
  6. 选择 Create a new table and load,然后单击 NEXT
  7. 检查您的数据并单击 FINISH
  8. 记下表名称,因为以后要使用它来创建报告。例如: 成功加载后的屏幕截图,显示了表和模式名称
    成功加载后的屏幕截图,显示了表和模式名称
  9. 在仪表板上,单击您的应用程序转到 Environment Variables 部分。记下 dashDB 服务的 usernamepasswordjdbcurl 值。dashDB 服务的环境变量的屏幕截图
    dashDB 服务的环境变量的屏幕截图

第 3 步. 创建报告

  1. 在应用程序的 Environment Variables 页面上,记下 MongoLab 服务的 URI 特性。 MongoLab 服务的环境变量的屏幕截图
    MongoLab 服务的环境变量的屏幕截图
  2. 单击 Embeddable Reporting 服务,然后单击 LAUNCH 启动 Embeddable Reporting 控制台。
  3. 单击 CONNECT 连接到您的 MongoLab 数据存储。输入上面记下的 MongoLab URI。
  4. 单击 Import 图标。
  5. 单击 Select File to Import 并导航到之前保存的 ontrack.zip 包。单击 Import导入数据的界面的屏幕截图
    导入数据的界面的屏幕截图
  6. OnTrack/Data Sources 选项卡上,输入第 2.9 步中的 jdbcurlusernamepassword数据源的屏幕截图
    数据源的屏幕截图
  7. 返回到 Applications 选项卡,单击 folder 图标,然后单击 Reports。您会看到列出了两个报告。单击 viz-report 选择它,然后单击 pencil 图标在 IBM Cognos Business Intelligence Report Studio 中编辑该报告。编辑报告的界面的屏幕截图
  8. 此报告是使用原生 SQL 编写的。要检查查询,可以选择 View,然后选择 Queries 并双击任何查询旁边的 SQL 图标。检查查询的界面的屏幕截图
  9. 请注意这个简单的 SQL 查询。单击 OK一个简单 SQL 查询的屏幕截图
    一个简单 SQL 查询的屏幕截图
  10. 双击 Query1 并检查此查询中包含的数据项。一些项来自 SQL 结果;其他项已经创建(例如 Total Steps)。
  11. 可以根据需要自由修改该报告。例如,可以更改颜色方案或更改图表类型。可以单击 Run > Run Report - HTML 菜单项来预览报告。 报告预览模式的屏幕截图
    报告预览模式的屏幕截图
  12. 在感觉满意之后,保存报告。

第 4 步. 将报告嵌入您的应用程序中

  1. 要通过 ID 嵌入报告,则需要找到报告的惟一 ID,单击 Embeddable Reporting 控制台中的 folder 图标并选择 Reports查找报告 ID 的界面的屏幕截图
    查找报告 ID 的界面的屏幕截图
  2. 记下 viz-reportnumber-of-steps 报告的 ID。
  3. DevOps 项目 或本地更新 src/main/webapp/WEB-INF/public/index.html 文件,以便使用新报告 ID。为此,更新 insertReports 函数中的 getReportgetReportAsJSON 调用。
    function insertReports() {
    		    	getReportAsJSON("549474f1bb6ed2feff16b8b7", "insertReport");
    		    	getReport("549474f1bb6ed2feff16b8b4", "insertViz");
    		    }
  4. 重新构建该应用程序,并将它部署到 Bluemix 中。
  5. 大功告成!转到您的应用程序路由并查看嵌入的报告。
    嵌入的报告的屏幕截图
    嵌入的报告的屏幕截图

    要实时查看报告更改,可以转到 Upload 选项卡并将数据上传到您的数据源。上传更多数据的界面的屏幕截图
    上传更多数据的界面的屏幕截图

结束语

试验示例应用程序,开始将您自己的报告集成到更复杂的应用程序中!


相关主题


评论

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Cloud computing, Java technology
ArticleID=1003943
ArticleTitle=将丰富的报告嵌入到应用程序中
publish-date=04212015