首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

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

论坛元老

Rank: 8Rank: 8

UID
1066743 
1#
打印
tT
look_w发表于 2018-1-20 21:02 | 只看该作者

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

步骤 1. 分析现有应用程序单击本文的 Run the app 按钮，尝试与销售图应用程序进行交互：
  • 打开一个桌面或手机浏览器的多个实例，并将它们都指向应用程序
  • 选择并单击（或敲击）标准的任意销售图，修改编号，然后单击 OK 进行更新。通过观察您会发现，所有应用程序实例中的表和饼图都被更新了。
  • 尝试从另一个浏览器实例或移动设备更新销售图。
如果其他读者和您在同时试用这个应用程序，那么您还会看到他们的更新。
步骤 2. 创建项目代码
  • 单击本文的 Get the code 按钮。
  • 在我在 DevOps Services 上的 meteorsales 项目页面上，单击位于右上方的 EDIT CODE 按钮：     
        试用您的 IBM ID 和密码登录 DevOps Services。
  • 单击 FORK 创建一个新项目。
    部署在 Bluemix 上时，您的应用程序应该与 DevOps Services 项目同名。目前所有 Bluemix 项目都共享一个命名空间，因此您的项目（应用程序）名称必须是独一无二的。

           输入一个不同于 meteorsales 的项目名称。您的项目可以是公共项目或私有项目。
  • 检查项目的目录结构：
    • manifest.yml：Manifest DevOps Services 用于将应用程序部署到 Bluemix
    • sales.css：用于销售图应用程序的 CSS 样式
    • sales.html：用于应用程序的 Meteor 模板
    • sales.js：应用程序的客户端与服务器端 JavaScript 代码
    • client/*— 应用程序使用的插件库
    • client/css/*：jQuery 插件库使用的 CSS 样式
Meteor 代码的工作原理使用 Meteor 时，您将使用 JavaScript 编写客户端逻辑和服务器逻辑。这个应用程序的客户端与服务器端代码都位于 sales.js 中。（此外，客户端服务器代码均位于各自的子目录中。）
Meteor 扫描客户端目录（与子目录）中的 CSS 样式文件和 JS 文件，这是它选择 jQuery 插件的方式。对于 HTML 文件，它通常会将所找到文件的 <head> 与 <body> 部分进行合并。
UI 通常使用 Spacebar 构造，它是一个类似于 Handlebars 的 Meteor 特定模板。在 sales.html 中，销售图应用程序的模板代码如下所示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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 实例：
1
2
3
4
5
6
7
8
9
10
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
  • 单击 DEPLOY AS 并选择 Deploy application from Web IDE to Bluemix。如果您以前从未从 DevOps Services 部署到 Bluemix，那么请输入您的 Bluemix 用户 ID 和密码。
  • 选择 dev 空间作为目标的 Bluemix 部署空间，然后单击 DEPLOY：  
  • 等待部署时，您会看到页面顶部弹出的状态消息。
最终，您会看到一条失败消息，说明另一应用程序已经在使用名为 meteorsales 的 Bluemix 路由。清单中的应用程序名称（目前为 meteorsales）必须是您自己应用程序的惟一名称。此外，该清单目前指向我在 Bluemix 上的 MongoDB 服务实例，meteorsales 应用程序使用该实例进行存储。您的应用程序不能访问该实例。（您将在步骤 5 中更新清单。）
步骤 4. 创建一个 Bluemix MongoDB 服务实例现在创建您自己的 MongoDB 服务实例，并将它绑定到您的应用程序：
  • 登录 。
  • 向下滚动并单击 Add a service。
  • 在可用的 Data Management 服务中单击 mongodb，然后单击 CREATE AND ADD TO APP。
  • 为 Add to: 选项选择 Do not associate，然后为服务取一个名字。单击 Create。
右上角的一条通知简要显示了 MongoDB 新实例的名称。如果您没有看到这条通知，那么可以滚动查看服务实例的列表，从中找到已命名的 MongoDB 实例。
步骤 5. 更新部署清单在 DevOps Services 项目中打开 manifest.yml 文件进行编辑。现在，它与我项目中的 manifest.yml 文件完全相同。
请注意，该清单使用了一个自定义的 buildpack。 基于 ，它专门针对将 Meteor 应用程序部署到 Bluemix 进行了修改。

1
2
3
4
5
6
7
8
9
10
11
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




针对您的项目自定义清单：
  • 将 host: 与 name: 设置修改为包含项目的惟一名称。
  • 将服务实例名称修改为您在步骤 4 中创建的 MongoDB 服务名称。
  • 保存修改后的清单（File >  Save）。
步骤 6. 重新部署到    Bluemix
  • 单击 DEPLOY 按钮。过一会，您会看到一条部署状态消息。这次的部署成功了。
  • 在 Manual Deployment Information 区域中，可以看到应用程序名称后面跟着一个大大的圆点。如果这个圆点是绿色的，则表示 Meteor 应用程序正运行在 Bluemix 上，您可以跳过余下的步骤。如果圆点是红色的，单击它，然后单击 Start application：      
          红点最终变为绿色，这表示应用程序正在运行。您还将获得应用程序的一个 URL 和指向开发与部署日志的链接。
  • 单击应用程序 URL 可以运行您自己的销售图应用程序。
现在，您可以尝试着修改代码并根据需要重新部署它。
结束语您不再需要一排昂贵的部署工作站和开发服务器来开发运行在桌面浏览器与移动设备上的、高度交互的流数据更新 Web 应用程序。借助新一代的快速开发全堆栈平台，比如 Meteor（您可以将它与 DevOps Services 和 Bluemix 提供的基于云的开发人员工具结合使用），您可以在任何地方使用联网的浏览器来实现自己的创意。
收藏 分享 评分
回复 引用

订阅 TOP

返回列表