摘要：在我的機(jī)子上，運(yùn)行于端口，以避免和其他默認(rèn)運(yùn)行于端口的沖突。我們可以使用命令連接數(shù)據(jù)庫查看定義應(yīng)用層次創(chuàng)建的模板應(yīng)用有一個問題，客戶端和服務(wù)器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應(yīng)用。

編者注：我們發(fā)現(xiàn)了有趣的一系列文章《30天學(xué)習(xí)30種新技術(shù)》，正在翻譯中，一天一篇更新，年終禮包。下面是第15天的內(nèi)容。

到目前為止我們討論了Bower、AngularJS、GruntJS和PhoneGap等JavaScript技術(shù)。今天是“30天學(xué)習(xí)30種新技術(shù)”挑戰(zhàn)的第15天，我決定重返JavaScript，學(xué)習(xí)Meteor框架。雖然Meteor的文檔相當(dāng)好，但是它缺少為初學(xué)者準(zhǔn)備的教程。我覺得教程的學(xué)習(xí)效果更好，因?yàn)榻坛炭梢詭椭憧焖偕鲜忠环N技術(shù)。本文將介紹如何利用 Meteor 框架構(gòu)建一個epoll應(yīng)用。

Meteor是新一代的開發(fā)即時web應(yīng)用的開源框架，它能幫助你在最少的時間內(nèi)完成開發(fā)。它的理念和AngularJS、BackboneJS等框架大不相同。當(dāng)我們在backbone 和 angular 上工作時，客戶端（Angular或Backbone）和REST后端通訊。我們可以用任何技術(shù)寫 REST 后端，例如 Java、NodeJS、PHP。

Meteor使用DDP（分布式數(shù)據(jù)協(xié)議）在客戶端和服務(wù)器間傳送數(shù)據(jù)。客戶端JavaScript開發(fā)者需要解決的首要問題是：向后端的數(shù)據(jù)庫發(fā)起查詢，發(fā)送數(shù)據(jù)到客戶端，當(dāng)數(shù)據(jù)庫變動時，推送變動到客戶端。DDP是解決這一問題的標(biāo)準(zhǔn)做法。

Meteor應(yīng)用的后端基于Node和MongoDB。前端和后端的應(yīng)用同時使用Meteor的API。未來開發(fā)者可以選擇 MongoDB 之外的其他數(shù)據(jù)庫。

請閱讀Meteor的七大原則。

本文中我們將搭建一個 epoll 應(yīng)用，該應(yīng)用允許用戶發(fā)布問題并投票。這個應(yīng)用可以做到：

當(dāng)用戶訪問/時，會看到一個問題列表。用戶需要通過Twitter登錄，以便投票或發(fā)布新問題。如下圖所示，由于未登錄，投票按鈕不可用。

當(dāng)用戶點(diǎn)擊Sign in with Twitter之后，他將授權(quán) epoll 應(yīng)用使用他的賬號。授權(quán)成功之后，用戶可以投票或發(fā)布新問題。

今天的示例應(yīng)用的代碼可以從GitHub取得。

開始使用Meteor很容易。如果你使用Mac或Linux，只需輸入如下命令：

curl https://install.meteor.com | /bin/sh

Windows用戶請參閱文檔

創(chuàng)建Meteor應(yīng)用很容易。安裝之后，運(yùn)行create命令即可。

meteor create epoll

這將創(chuàng)建epoll目錄，該目錄下有一些模板文件。項(xiàng)目結(jié)構(gòu)如下所示：

讓我們解釋下這個結(jié)構(gòu)：

meteor文件夾下保存meteor特定的文件。.gitignore忽略存儲MongoDB數(shù)據(jù)庫文件和應(yīng)用文件的local文件夾。packages指明本應(yīng)用所需的包。你可以把它們看成是npm包。Meteor以包的形式提供功能。本文中會使用一些包。release保存了meteor版本。本文使用的版本是0.6.6.3。

epoll.css決定應(yīng)用的CSS樣式。

epoll.html是應(yīng)用的HTML標(biāo)記。目前meteor只支持handlebars模板引擎，不過未來可能支持其他模板引擎。

epoll.js是meteor應(yīng)用的核心。epoll.js同時部署在服務(wù)器段和客戶端。這允許開發(fā)者一次編寫、兩端使用。meteor創(chuàng)建的epoll.js模板如下所示：

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to epoll.";
  };

  Template.hello.events({
    "click input" : function () {
      // template data, if any, is available in "this"
      if (typeof console !== "undefined")
        console.log("You pressed the button");
    }
  });
}
if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteor.isServer和Meteor.isClient區(qū)分了服務(wù)器端和客戶端的代碼。

meteor命令可以運(yùn)行應(yīng)用：

cd epoll
meteor

可以通過 http://localhost:3000 訪問應(yīng)用。點(diǎn)擊按鈕后，在chrome developer tools中你可以看到You pressed the button.信息。

修改epoll.js的歡迎部分：

Template.hello.greeting = function () {
    return "The Missing Meteor Tutorial!!!";
  };

變動會自動應(yīng)用，頁面也會自動刷新。

前面提到Meteor使用MongoDB來存儲數(shù)據(jù)。當(dāng)我們安裝meteor的時候，它同時會下載最新版的MongoDB。我們可以看到，MongoDB安裝在/.meteor目錄。使用ps -ef可以找到MongoDB的安裝位置。

; ps -ef|grep mongo

501  1704  1687   0  2:22PM ttys001    0:09.28 /Users/shekhargulati/.meteor/tools/0b2f28e18b/mongodb/bin/mongod --bind_ip 127.0.0.1 --smallfiles --nohttpinterface --port 3002 --dbpath /Users/shekhargulati/day15/epoll/.meteor/local/db

在我的機(jī)子上，MongoDB運(yùn)行于3002端口，以避免和其他默認(rèn)運(yùn)行于27017端口的MongoDB沖突。

前面提到Meteor以包的形式實(shí)現(xiàn)功能。這些包在瀏覽器和服務(wù)器上都能使用。運(yùn)行以下命令可以得知Meteor支持的所有包：

meteor list

使用meteor add和meteor remove命令來添加刪除包。

我們將使用Twitter Bootstrap作為用戶界面的風(fēng)格。

meteor add bootstrap

注意，Meteor包不一定是最新版。

在我們的應(yīng)用中，用戶需要首先通過Twitter授權(quán)才能投票或添加問題。Meteor提供了accounts-ui包，可以為我們的應(yīng)用添加登錄組件：

meteor add accounts-ui

然后我們添加授權(quán)提供者。在這個應(yīng)用中，我們使用Twitter，不過我們其實(shí)也可以使用facebook、github、google、weibo或meetup。

meteor add accounts-twitter

添加包之后，我們需要更新下epoll.html，添加Twitter登錄按鈕：

  
 



    


      

        

          Epoll
          

            

              {{loginButtons}}
            
          
        
      



    

        {{> banner}}
    

然后調(diào)整一下樣式，增加下面的代碼到epoll.css：

/* CSS declarations go here */
.login-display-name{color: white }
.login-button{background-color: white}
 #main {
    padding-top:20px;
}

應(yīng)用會自動更新，你會見到這樣的頁面：

現(xiàn)在點(diǎn)擊Configure Twitter Login，會要求我們輸入 twitter 應(yīng)用的相關(guān)信息：

按照提示配置之后，我們可以使用twitter登錄了。

授權(quán)之后我們可以登錄應(yīng)用。使用完畢之后，我們可以登出。

MongoDB會在用戶集合內(nèi)創(chuàng)建新用戶。我們可以使用mongo命令連接數(shù)據(jù)庫查看：

; ~/.meteor/tools/0b2f28e18b/mongodb/bin/mongo --port 3002

MongoDB shell version: 2.4.6
connecting to: 127.0.0.1:3002/test
> show dbs
local   0.03125GB
meteor  0.0625GB
> use meteor
switched to db meteor

> show collections
meteor_accounts_loginServiceConfiguration
system.indexes
users
> db.meteor_accounts_loginServiceConfiguration.find()
{ "service" : "twitter", "consumerKey" : "xxx", "secret" : "xxx", "_id" : "xxx" }
> 
> 
> db.users.find().pretty()
{
    "createdAt" : ISODate("2013-11-11T18:03:23.488Z"),
    "_id" : "xx",
    "services" : {
        "twitter" : {
            "id" : "66993334",
            "screenName" : "shekhargulati",
            "accessToken" : "xxx-xxx",
            "accessTokenSecret" : "xxx",
            "profile_image_url" : "http://pbs.twimg.com/profile_images/378800000254412405/e4adcf8fb7800c3e5f8141c561cb57e4_normal.jpeg",
            "profile_image_url_https" : "https://pbs.twimg.com/profile_images/378800000254412405/e4adcf8fb7800c3e5f8141c561cb57e4_normal.jpeg",
            "lang" : "en"
        },
        "resume" : {
            "loginTokens" : [
                {
                    "token" : "xxx",
                    "when" : ISODate("2013-11-11T18:03:23.489Z")
                }
            ]
        }
    },
    "profile" : {
        "name" : "Shekhar Gulati"
    }
}
>

Meteor創(chuàng)建的模板應(yīng)用有一個問題，客戶端和服務(wù)器段的epoll.js代碼是一樣的。任何人的都可以使用瀏覽器的開發(fā)工具查看epoll.js。

如果我們不想將服務(wù)器端的特有代碼發(fā)送到客戶端，我們可以使用client和server目錄來分隔代碼。

cd epoll
mkdir client server

在兩個目錄下分別創(chuàng)建epollclient.js和epollserver.js文件。

client/epollclient.js內(nèi)存放客戶端代碼：

Template.hello.greeting = function () {
    return "The Missing Meteor Tutorial!!!";
};

Template.hello.events({
    "click input" : function () {
      // template data, if any, is available in "this"
      if (typeof console !== "undefined")
        console.log("You pressed the button");
    }
});

服務(wù)器端代碼存放在server/epollserver.js：

Meteor.startup(function () {
    // code to run on server at startup
 });
 ```

然后刪除`epoll.js`：

```sh
rm -f epoll.js

每一個Meteor應(yīng)用預(yù)裝了insecure包。這個應(yīng)用讓用戶端可以在數(shù)據(jù)庫上實(shí)施一切操作。對于原型開發(fā)這很有用，但是通常不適合生產(chǎn)環(huán)境。

meteor remove insecure

現(xiàn)在我們添加一個功能，已登錄的用戶可以提交新問題。

  




  


      

        

          Epoll
          

            

              {{loginButtons}}
            
          
        
      



  

    {{#if currentUser}}
      {{> addquestion}}
    {{/if}}
    {{#unless currentUser}}
      {{> banner}}
    {{/unless}}
    

僅當(dāng)用戶登錄的時候才會渲染addQuestion模板。如果用戶登出，則不會見到添加新問題的文本框。

我們需要同時更新客戶端和服務(wù)器端的代碼以便實(shí)現(xiàn)這一功能。

在client/epollclient.js中加入：

Template.addquestion.events({
    "click input.add-question" : function(event){
        event.preventDefault();
        var questionText = document.getElementById("questionText").value;
        Meteor.call("addQuestion",questionText,function(error , questionId){
          console.log("added question with Id .. "+questionId);
        });
        document.getElementById("questionText").value = "";

    }
});

以上代碼中：

我們首先將點(diǎn)擊input事件綁定到add-question類。

接著我們阻止默認(rèn)的點(diǎn)擊事件，從DOM中獲取問題文本。

然后我們調(diào)用Meteor服務(wù)器的方法addQuestion。由服務(wù)器負(fù)責(zé)插入、更新、刪除數(shù)據(jù)等有風(fēng)險(xiǎn)的操作。客戶端看不到實(shí)現(xiàn)，也無法私自修改數(shù)據(jù)。

現(xiàn)在我們需要修改server/epollserver.js。我們首先定義一個名為Questions的新集合。然后我們會操作這個集合。Meteor使用minimongo作為API接口。參閱Meteor.Collection.documentation查看minimongo支持的所有操作。

Questions = new Meteor.Collection("questions");

Meteor.startup(function () {
    // code to run on server at startup
});

Meteor.methods({
  addQuestion : function(questionText){
    console.log("Adding Question");
    var questionId = Questions.insert({
          "questionText" : questionText,
          "submittedOn": new Date(),
          "submittedBy" : Meteor.userId()
      });
    return questionId;
  }
});

現(xiàn)在訪問我們的應(yīng)用然后提交一個新問題：

查看下MongoDB中的數(shù)據(jù)

> db.questions.find().pretty()
{
    "questionText" : "Is Sachin Tendulkar the greatest batsman of all time?",
    "submittedOn" : ISODate("2013-11-11T18:23:02.541Z"),
    "submittedBy" : "Jnu6oXoAZ2um57rZ8",
    "_id" : "nhqvgDcZqgZgLdDB7"
}

我們接下來要實(shí)現(xiàn)的功能是問題列表。用戶不需登錄，就可以看到所有問題的列表。

在main div中加入：

{{> questions}}

然后添加問題模板：

注意我們使用了unless來確保用戶未登錄的情況下應(yīng)用disabled css。

為了獲取所有問題，我們需要在客戶端使用Question集合來獲取所有文本。在client/epollclient.js添加如下代碼：

Questions = new Meteor.Collection("questions");

Template.questions.items = function(){
    return Questions.find({},{sort:{"submittedOn":-1}});
};

最后我們需要實(shí)現(xiàn)投票功能。我們上面已經(jīng)在html文件中加入了相關(guān)的模板代碼，下面我們在client/epollclient.js加入如下代碼：

Template.question.events({

    "click": function () {
        Session.set("selected_question", this._id);
    },

    "click a.yes" : function (event) {
      event.preventDefault();
      if(Meteor.userId()){
        var questionId = Session.get("selected_question");
        console.log("updating yes count for questionId "+questionId);
        Meteor.call("incrementYesVotes",questionId);

      }
    },

    "click a.no": function(){
      event.preventDefault();
      if(Meteor.userId()){
        var questionId = Session.get("selected_question");
        console.log("updating no count for questionId "+questionId);
        Meteor.call("incrementNoVotes",questionId);
      }
    }
 });

上面的代碼實(shí)現(xiàn)了：

綁定點(diǎn)擊事件到問題模板。點(diǎn)擊任意問題的時，在session中設(shè)置questionId。session提供了一個客戶端的全局對象，你可以在里面存儲任意的鍵值對。

當(dāng)用戶點(diǎn)擊Yes按鈕時，我們會從session中取得選中的questionId，然后在服務(wù)器端調(diào)用incrementYesVotes方法。我們使用Meteor.userId()來確保用戶已經(jīng)登錄了。

當(dāng)用戶點(diǎn)擊No按鈕時，我們在服務(wù)器端調(diào)用incrementNoVotes函數(shù)。

最后我們在server/epollserver.js加入incrementYesVotes和incrementNoVotes函數(shù)。我們使用Meteor的集合更新功能來增加計(jì)數(shù)器。

incrementYesVotes : function(questionId){
    console.log(questionId);
    Questions.update(questionId,{$inc : {"yes":1}});
  },

incrementNoVotes : function(questionId){
    console.log(questionId);
    Questions.update(questionId,{$inc : {"no":1}});
}

這樣每次用戶點(diǎn)擊yes或no按鈕之后，計(jì)數(shù)器會更新。你可以訪問 http://localhost:3000 試驗(yàn)一番。

部署Meteor應(yīng)用有很多種方法。我們可以在Meteor提供的測試服務(wù)器上部署，也可以部署到OpenShift。

如果你打算部署到OpenShift上，請參閱Ryan的這篇博客。

運(yùn)行以下命令可以部署到Meteor測試服務(wù)器：

meteor deploy epoll

應(yīng)用可以通過 http://epoll.meteor.com/ 訪問。

今天就是這些了。歡迎繼續(xù)反饋。

原文：Day 15: Meteor——Building a Web App From Scratch in Meteor
翻譯整理: Segmentfault