使用 Meteor 构建一个响应式的销售图应用程序

在云中创建和部署您自己的单页交互式 Meteor 应用程序(实时更新),只需使用浏览器即可完成该操作。在 IBM DevOps Services 上编写代码,使用 Codename: BlueMix MongoDB 服务实现服务器端存储,并将应用程序部署到 BlueMix。

Sing Li, 顾问, Makawave

http://www.ibm.com/developerworks/i/p-sing.jpgSing 是一位活跃的作家,曾经参与编写了Beginning JavaServer PagesProfessional Apache Tomcat 5Pro JSP -- Third Edition、Early Adopter JXTA、Professional Jini、Beginning J2ME:From Novice to Professional, Third Edition以及其他许多书籍。他经常为技术杂志撰稿,而且是语音网络(Voice Over Network,VON)和对等(Peer to Peer,P2P)技术的热心推动者。



2014 年 6 月 09 日

Codename: BlueMix 是一款 beta 级产品,随着我们不断让其功能更加完善和更易于使用,它也将不断改进。我们会竭尽全力保持本文最新,但并不总是完全跟得上现状。感谢大家的理解!

Meteor 是一个面向 JavaScript 开发人员的完全实时的应用程序堆栈。它独一无二的响应式编程模型支持快速创建交互程度很高的、可实时更新的单页 Web 应用程序。

我在 developerWorks 文章 "使用 Meteor 创建即时的 Web 应用程序" 中深入探讨了 Meteor 开发和 Meteor 架构。该文中有一个编码示例是一个以单页 Web 应用程序形式生成的交互式销售图。当 BlueMix beta 计划开始时,我意识到 BlueMix 能够为我提供一种在云中演示和分享该应用程序的很好的途径。(您在本文中看到的代码已经在最新的 Meteor 预览版 V0.8.1.1 上测试过。而 "使用 Meteor 创建即时的 Web 应用程序" 一文中的代码基于较早的 Meteor 版本。)因为 BlueMix 并不完全适用于开发 Meteor 应用程序,所以我准备了一个自定义的 buildpack,用它来简化在 BlueMix 上开发 Meteor 应用程序的过程。

我将向您演示如何在 DevOps Services 上创建自己的 Meteor 实时销售图应用程序,并将它部署到 BlueMix,以供全球用户进行网络访问。Meteor 在服务器端使用 MongoDB 保存数据,因此您将使用在 BlueMix 上预先定义的 MongoDB 服务来保存应用程序的销售数据。运行自己的应用程序后,您可以通过修改代码来分析 Meteor 的响应式编程模型。

阅读:使用 Meteor 创建即时的 Web 应用程序

阅读:使用 Node.js 开始学习 BlueMix 和 DevOps Services

What you need

我准备了一个自定义的 buildpack 来简化在 BlueMix 上开发 Meteor 应用程序的过程。


步骤 1. 分析现有应用程序

单击本文的 Run the app 按钮,尝试与销售图应用程序进行交互:

  1. 打开一个桌面或手机浏览器的多个实例,并将它们都指向应用程序的 URL(http://meteorsales.ng.bluemix.net/)。
  2. 选择并单击(或敲击)标准的任意销售图,修改编号,然后单击 OK 进行更新。通过观察您会发现,所有应用程序实例中的表和饼图都被更新了。
  3. 尝试从另一个浏览器实例或移动设备更新销售图。

如果其他读者和您在同时试用这个应用程序,那么您还会看到他们的更新。


步骤 2. 创建项目代码

  1. 单击本文的 Get the code 按钮。
  2. 在我在 DevOps Services 上的 meteorsales 项目页面上,单击位于右上方的 EDIT CODE 按钮: DevOps Services 项目页面上的 EDIT CODE 按钮的屏幕截图
    试用您的 IBM ID 和密码登录 DevOps Services。
  3. 单击 FORK 创建一个新项目。
    DevOps Services 中的 FORK 按钮的屏幕截图

    部署在 BlueMix 上时,您的应用程序应该与 DevOps Services 项目同名。目前所有 BlueMix 项目都共享一个命名空间,因此您的项目(应用程序)名称必须是独一无二的。

    输入一个不同于 meteorsales 的项目名称。您的项目可以是公共项目或私有项目。
  4. 检查项目的目录结构:
    • manifest.yml:Manifest DevOps Services 用于将应用程序部署到 BlueMix
    • sales.css:用于销售图应用程序的 CSS 样式
    • sales.html:用于应用程序的 Meteor 模板
    • sales.js:应用程序的客户端与服务器端 JavaScript 代码
    • client/*jQuery 应用程序使用的插件库
    • client/css/*:jQuery 插件库使用的 CSS 样式

Meteor 代码的工作原理

使用 Meteor 时,您将使用 JavaScript 编写客户端逻辑和服务器逻辑。这个应用程序的客户端与服务器端代码都位于 sales.js 中。(此外,客户端服务器代码均位于各自的子目录中。)

Meteor 扫描客户端目录(与子目录)中的 CSS 样式文件和 JS 文件,这是它选择 jQuery 插件的方式。对于 HTML 文件,它通常会将所找到文件的 <head><body> 部分进行合并。

UI 通常使用 Spacebar 构造,它是一个类似于 Handlebars 的 Meteor 特定模板。在 sales.html 中,销售图应用程序的模板代码如下所示。

<head>
<title>Sales by Region</title>
</head>

<body>
  <div id="title">
  	<h1>Global Sales 2014</h1>
  </div>
  <div id="container">
  	<div id="salestable">
    	{{> salesdata}}
  	</div>
        {{> piechart}}
  </div>
</body>

<template name="piechart">
  	<div id="chart">
    </div>
</template>

<template name="salesdata">
  <div class="salesdata">
    {{#each dataset}}
      {{> datapoint}}
    {{/each}}
  </div>
</template>

<template name="datapoint">
  <div class="datapoint {{selected}}">
    <span id="{{_id}}_region" class="region">{{region}}</span>
    <span id="{{_id}}_total" class="sales editable">{{total}}</span>
  </div>
</template>

销售图的表是通过 salesdata 模板呈现的,其中包含一个用于每行的 datapoint 模板实例。chart <div>jqPlot 插件呈现饼图的位置。此处创建了 jEditable 插件的一个实例,用于支持销售图的就地编辑(in-place editing)。

只要在 UI 中修改销售图,就会调用 Meteor 的客户端 MongoDB 实现 (mini-mongo) 来更新数字。然后,Meteor 的响应引擎会与服务器端的 MongoDB 实例进行同步。这次修改的内容将被传播给查看相同页面的所有浏览器或移动实例,而 Meteor 引擎会相应地更新本地试图。

惟一的服务器端代码会使用种子数据来初始化 MongoDB 实例:

if (Meteor.isServer) {
  Meteor.startup(function () {
      Sales2013.remove({});
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});
                   
  });
}

步骤 3. 将应用程序部署到 BlueMix

  1. 单击 DEPLOY AS 并选择 Deploy application from Web IDE to BlueMix。如果您以前从未从 DevOps Services 部署到 BlueMix,那么请输入您的 BlueMix 用户 ID 和密码。
  2. 选择 dev 空间作为目标的 BlueMix 部署空间,然后单击 DEPLOYConfigure Application Deployment 对话框的屏幕截图
  3. 等待部署时,您会看到页面顶部弹出的状态消息。

最终,您会看到一条失败消息,说明另一应用程序已经在使用名为 meteorsales 的 BlueMix 路由。清单中的应用程序名称(目前为 meteorsales)必须是您自己应用程序的惟一名称。此外,该清单目前指向我在 BlueMix 上的 MongoDB 服务实例,meteorsales 应用程序使用该实例进行存储。您的应用程序不能访问该实例。(您将在步骤 5 中更新清单。)


步骤 4. 创建一个 BlueMix MongoDB 服务实例

现在创建您自己的 MongoDB 服务实例,并将它绑定到您的应用程序:

  1. 登录 BlueMix
  2. 向下滚动并单击 Add a service
  3. 在可用的 Data Management 服务中单击 mongodb,然后单击 CREATE AND ADD TO APP
  4. Add to: 选项选择 Do not associate,然后为服务取一个名字。单击 Create

右上角的一条通知简要显示了 MongoDB 新实例的名称。如果您没有看到这条通知,那么可以滚动查看服务实例的列表,从中找到已命名的 MongoDB 实例。


步骤 5. 更新部署清单

在 DevOps Services 项目中打开 manifest.yml 文件进行编辑。现在,它与我项目中的 manifest.yml 文件完全相同。

请注意,该清单使用了一个自定义的 buildpack。这个 buildpack 基于 Heroku Meteorite buildpack,它专门针对将 Meteor 应用程序部署到 BlueMix 进行了修改。

applications:
- services:
 - mongodb-bf
  host: meteorsales
  disk: 1024M
  name: meteorsales
  buildpack: https://github.com/Sing-Li/heroku-buildpack-meteorite
  path: .
  domain: ng.bluemix.net
  mem: 1024M
  instances: 1

针对您的项目自定义清单:

  1. host:name: 设置修改为包含项目的惟一名称。
  2. 将服务实例名称修改为您在步骤 4 中创建的 MongoDB 服务名称。
  3. 保存修改后的清单(File > Save)。

步骤 6. 重新部署到 BlueMix

  1. 单击 DEPLOY 按钮。过一会,您会看到一条部署状态消息。这次的部署成功了。
  2. Manual Deployment Information 区域中,可以看到应用程序名称后面跟着一个大大的圆点。如果这个圆点是绿色的,则表示 Meteor 应用程序正运行在 BlueMix 上,您可以跳过余下的步骤。如果圆点是红色的,单击它,然后单击 Start applicationStart Application 按钮的屏幕截图
    红点最终变为绿色,这表示应用程序正在运行。您还将获得应用程序的一个 URL 和指向开发与部署日志的链接。
  3. 单击应用程序 URL 可以运行您自己的销售图应用程序。

现在,您可以尝试着修改代码并根据需要重新部署它。


结束语

您不再需要一排昂贵的部署工作站和开发服务器来开发运行在桌面浏览器与移动设备上的、高度交互的流数据更新 Web 应用程序。借助新一代的快速开发全堆栈平台,比如 Meteor(您可以将它与 DevOps Services 和 BlueMix 提供的基于云的开发人员工具结合使用),您可以在任何地方使用联网的浏览器来实现自己的创意。

参考资料

学习

讨论

  • Codename: BlueMix 资源中心:本专题为您提供了文章、教程、演示等丰富的学习资源,带您由浅入深地了解 BlueMix。此外,还有关于 BlueMix 的最新活动信息。欢迎大家访问学习。
  • 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基,并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Cloud computing
ArticleID=973609
ArticleTitle=使用 Meteor 构建一个响应式的销售图应用程序
publish-date=06092014