查看: 7692|回复: 16

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

[复制链接]
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
发表于 2014-9-23 21:36 | 显示全部楼层 |阅读模式

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
一个 IBM ID 和密码
一个链接到您的 IBM ID 的 DevOps Services 帐号
一个 BlueMix 帐号
一个 Web 浏览器
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:36 | 显示全部楼层
步骤 1. 分析现有应用程序
单击本文的 Run the app 按钮,尝试与销售图应用程序进行交互:
打开一个桌面或手机浏览器的多个实例,并将它们都指向应用程序的 URL(http://meteorsales.ng.bluemix.net/)。
选择并单击(或敲击)标准的任意销售图,修改编号,然后单击 OK 进行更新。通过观察您会发现,所有应用程序实例中的表和饼图都被更新了。
尝试从另一个浏览器实例或移动设备更新销售图。
如果其他读者和您在同时试用这个应用程序,那么您还会看到他们的更新。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:36 | 显示全部楼层
步骤 2. 创建项目代码
单击本文的 Get the code 按钮。
在我在 DevOps Services 上的 meteorsales 项目页面上,单击位于右上方的 EDIT CODE 按钮: DevOps Services 项目页面上的 EDIT CODE 按钮的屏幕截图
试用您的 IBM ID 和密码登录 DevOps Services。
单击 FORK 创建一个新项目。
DevOps Services 中的 FORK 按钮的屏幕截图
部署在 BlueMix 上时,您的应用程序应该与 DevOps Services 项目同名。目前所有 BlueMix 项目都共享一个命名空间,因此您的项目(应用程序)名称必须是独一无二的。
输入一个不同于 meteorsales 的项目名称。您的项目可以是公共项目或私有项目。
检查项目的目录结构:
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});
                  
  });
}

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:37 | 显示全部楼层
步骤 3. 将应用程序部署到 BlueMix
单击 DEPLOY AS 并选择 Deploy application from Web IDE to BlueMix。如果您以前从未从 DevOps Services 部署到 BlueMix,那么请输入您的 BlueMix 用户 ID 和密码。
选择 dev 空间作为目标的 BlueMix 部署空间,然后单击 DEPLOY: Configure Application Deployment 对话框的屏幕截图
等待部署时,您会看到页面顶部弹出的状态消息。
最终,您会看到一条失败消息,说明另一应用程序已经在使用名为 meteorsales 的 BlueMix 路由。清单中的应用程序名称(目前为 meteorsales)必须是您自己应用程序的惟一名称。此外,该清单目前指向我在 BlueMix 上的 MongoDB 服务实例,meteorsales 应用程序使用该实例进行存储。您的应用程序不能访问该实例。(您将在步骤 5 中更新清单。)

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:37 | 显示全部楼层
步骤 4. 创建一个 BlueMix MongoDB 服务实例
现在创建您自己的 MongoDB 服务实例,并将它绑定到您的应用程序:
登录 BlueMix。
向下滚动并单击 Add a service。
在可用的 Data Management 服务中单击 mongodb,然后单击 CREATE AND ADD TO APP。
为 Add to: 选项选择 Do not associate,然后为服务取一个名字。单击 Create。
右上角的一条通知简要显示了 MongoDB 新实例的名称。如果您没有看到这条通知,那么可以滚动查看服务实例的列表,从中找到已命名的 MongoDB 实例。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:37 | 显示全部楼层
步骤 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
针对您的项目自定义清单:
将 host: 与 name: 设置修改为包含项目的惟一名称。
将服务实例名称修改为您在步骤 4 中创建的 MongoDB 服务名称。
保存修改后的清单(File > Save)。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:37 | 显示全部楼层
步骤 6. 重新部署到 BlueMix
单击 DEPLOY 按钮。过一会,您会看到一条部署状态消息。这次的部署成功了。
在 Manual Deployment Information 区域中,可以看到应用程序名称后面跟着一个大大的圆点。如果这个圆点是绿色的,则表示 Meteor 应用程序正运行在 BlueMix 上,您可以跳过余下的步骤。如果圆点是红色的,单击它,然后单击 Start application: Start Application 按钮的屏幕截图
红点最终变为绿色,这表示应用程序正在运行。您还将获得应用程序的一个 URL 和指向开发与部署日志的链接。
单击应用程序 URL 可以运行您自己的销售图应用程序。
现在,您可以尝试着修改代码并根据需要重新部署它。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-9-23 21:38 | 显示全部楼层
结束语
您不再需要一排昂贵的部署工作站和开发服务器来开发运行在桌面浏览器与移动设备上的、高度交互的流数据更新 Web 应用程序。借助新一代的快速开发全堆栈平台,比如 Meteor(您可以将它与 DevOps Services 和 BlueMix 提供的基于云的开发人员工具结合使用),您可以在任何地方使用联网的浏览器来实现自己的创意。

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-10-10 20:27 | 显示全部楼层
Xtext is a framework for development of textual domain specific languages (DSLs). You need to describe the DSL using Xtext's simple grammar and Xtext generates a parser, an editor and other goodies. You are on the way to create your own IDE for the DSL.
Xtext, out of the box, does not support using white spaces for creating block structure. With a small hack, you can make Xtext understand block structure defined using white space.
The basic idea is to replace Xtext's lexer with a custom lexer that adds the INDENT and DEDENT tokens into the parser.
My original answer in to a post on Xtext news group gives the generic procedure. However some points need to be modified.
Overriding bindLexer() does not really work. Xtext creates a concrete Lexer object in the parser. So for providing a CharStream, we need to bindIAntlrParser() and the in the parser class create the lexer that creates the CharStream.
You can access a sample project that implements this from google code. Use svn to checkout org.xtext.example.mydsl and org.xtext.example.mydsl.ui projects from http://eclipse-snippets.googlecode.com/svn/trunk/xtext-indenting.

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
 楼主| 发表于 2014-10-10 20:29 | 显示全部楼层
As soon as you generate the Xtext artifacts for a grammar, a code generator stub will be put into the runtime project of your language. Let's dive into Xtend and see how you can integrate your own code generator with Eclipse.

In this lesson you will generate Java Beans for entities that are defined in the domain model DSL. For each Entity, a Java class is generated and each Feature will lead to a private field in that class and public getters and setters. For the sake of simplicity, we will use fully qualified names all over the generated code.

package my.company.blog;

public class HasAuthor {
  private java.lang.String author;
  
  public java.lang.String getAuthor() {
    return author;
  }
  
  public void setAuthor(java.lang.String author) {
    this.author = author;
  }
}
First of all, locate the file DomainmodelGenerator.xtend in the package org.example.domainmodel.generator. This Xtend class is used to generate code for your models in the standalone scenario and in the interactive Eclipse environment.

package org.example.domainmodel.generator

import org.eclipse.emf.ecore.resource.Resource
import org.eclipse.xtext.generator.IGenerator
import org.eclipse.xtext.generator.IFileSystemAccess

class DomainmodelGenerator implements IGenerator {
  override void doGenerate(Resource resource, IFileSystemAccess fsa) {
  }
}

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表