Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Meteor Learning :GuestBook with bootstrap

github

學習目標:

  1. 使用meteor新增與讀出留言
  2. 使用簡單的jquery幫助程式
  3. 了解client與server的差異
  4. 了解如何從js傳參數到html
  5. 了解如何使用bootstrap
  6. 學會使用trello進行scrum專案管理
  7. 了解如何deploy你的meteor應用程式

準備工作

1. 安裝MRT

  1. cd projectName
  2. parts install meteor
  3. npm install -g meteorite
  4. 輸入mrt即可執行

注意:在本機端安裝的時候,需要先安裝npm與node.js,第一次裝的方法是到官網去下載pkg,內有npm與node.js
錯誤訊息:在本機輸入npm install -g meteorite時,出現了npm ERR! Please try running this command again as root/Administrator.這個錯誤訊息。輸入了以下兩個指令就解決了sudo chown -R `whoami` ~/.npmsudo chown -R `whoami` /usr/local/lib/node_modules參考連結

2. 建立專案

輸入mrt create guestbook
接著輸入cd guestbook切換至meteor專案資料夾中

3. 安裝需要套件

這個專案中我們會用到bootstrap3和query
輸入mrt add bootstrap-3mrt add jquery

正式開始

接下來把要做的事情切成4個Task

  1. 設計並完成html版面
  2. 新增Post進資料庫
  3. 顯示Post到html的table上
  4. 將成品deploy到meteor.com上面

每個Task又可以切成更細的iteration

Task1: 設計並完成html版面

1. 畫好草稿

2. 在Layoutit拉出需要的版面,並下載之。(你也可以使用tutorialrepublic拼出想要的畫面)這是我用layoutit做的html檔body之間的部分,我們也只會需要這一部分。第一次做你可以先用以下程式碼貼到你的template裡面。

<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" autocomplete="off" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDiEFu6xIcAAAAXhJREFUOMvNk8FLVFEUxn/ffRdmIAla1CbBFDGCpoiQWYlBLty7UHAvEq2HYLhveDMws2/TIly6E9SdIEj+AVYgRaTgXhe2C968x2nhTOjow8pNZ/ede/ide893Lvx3UavVhkMIk30dQqiGECpF9e68CCG8LpfL3yStAAIk6Z2kT3Ect68C+AGdSroFVEII82aWSXoGYGYHVwE0qOM43pU0BXw3s1zSI2AnSZKXhYB6vT7inLvd7XZ/eu8fOOe2JEW9zjkwZ2bHkoayLDtpt9ufLzzBe/8GWC6VSpc7nIE2pLPLeu/fA0uDQ3T/6pp6039uZnfN7Ieke1EUrQOu3/VawPloNBrbwIyZ7TvnLvg/+mKOJ3xk88NR4R4sADM92fp9MDRMdXaRxenHVMbuFy8SMAFkZval2Wyu9ZN3Hk4zWx0nAtKsWwxotVrNNE2f5nn+CrB+/nRvlSR5y2EK0TWbSKfT+fo3Lribfr4bA/yfl56y2kkuZX8BjXVyqMs8oFcAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                </div>
                <div class="form-group">
                     <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" autocomplete="off" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDiEFu6xIcAAAAXhJREFUOMvNk8FLVFEUxn/ffRdmIAla1CbBFDGCpoiQWYlBLty7UHAvEq2HYLhveDMws2/TIly6E9SdIEj+AVYgRaTgXhe2C968x2nhTOjow8pNZ/ede/ide893Lvx3UavVhkMIk30dQqiGECpF9e68CCG8LpfL3yStAAIk6Z2kT3Ect68C+AGdSroFVEII82aWSXoGYGYHVwE0qOM43pU0BXw3s1zSI2AnSZKXhYB6vT7inLvd7XZ/eu8fOOe2JEW9zjkwZ2bHkoayLDtpt9ufLzzBe/8GWC6VSpc7nIE2pLPLeu/fA0uDQ3T/6pp6039uZnfN7Ieke1EUrQOu3/VawPloNBrbwIyZ7TvnLvg/+mKOJ3xk88NR4R4sADM92fp9MDRMdXaRxenHVMbuFy8SMAFkZval2Wyu9ZN3Hk4zWx0nAtKsWwxotVrNNE2f5nn+CrB+/nRvlSR5y2EK0TWbSKfT+fo3Lribfr4bA/yfl56y2kkuZX8BjXVyqMs8oFcAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
                </div>
                <div class="form-group">
                     <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile">
                    <p class="help-block">
                        Example block-level help text here.
                    </p>
                </div>
                <div class="checkbox">
                     <label><input type="checkbox"> Check me out</label>
                </div> <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Product
                        </th>
                        <th>
                            Payment Taken
                        </th>
                        <th>
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            01/04/2012
                        </td>
                        <td>
                            Default
                        </td>
                    </tr>
                    <tr class="active">
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            01/04/2012
                        </td>
                        <td>
                            Approved
                        </td>
                    </tr>
                    <tr class="success">
                        <td>
                            2
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            02/04/2012
                        </td>
                        <td>
                            Declined
                        </td>
                    </tr>
                    <tr class="warning">
                        <td>
                            3
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            03/04/2012
                        </td>
                        <td>
                            Pending
                        </td>
                    </tr>
                    <tr class="danger">
                        <td>
                            4
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            04/04/2012
                        </td>
                        <td>
                            Call in to confirm
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>

我的畫面長這樣

3. 刪除一些不必要的部份並且與guestbook.html結合。

<head>
  <title>GBpractice02</title>
</head>

<body>
  {{> main}}
</body>

<template name="main">
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Text</label><input type="email" class="form-control" id="exampleInputEmail1" autocomplete="off">
                </div>
                 <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            
                        </th>
                        <th>
                            Payment Taken
                        </th>
                        <th>
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            TB - Monthly
                        </td>
                        <td>
                            01/04/2012
                        </td>
                        <td>
                            Default
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>

</template>

這時候你在你在你的專案資料夾下輸入mrt執行程式,可以在瀏覽器中看到剛剛刪減過的html畫面。長這樣。

4. 接著增加一些需要的欄位

1. 把輸入增加為兩個,
2. 增加name這個欄位,為之後使用jquery存取這兩個input做準備。
3. 把input type改成text

前面三個步驟完成後結果會是這樣

                <label for="exampleInputEmail1">Name</label><input type="text" class="form-control" autocomplete="off" name="username">
                 <label for="exampleInputEmail1">Text</label><input type="text" class="form-control" autocomplete="off" name="text">

5. 檢查一下button的type是否為submit

 <button type="submit" class="btn btn-default">Submit</button>

Task2: 新增Post進資料庫

建立新的Collection

在guetsbook.js的最上方輸入var Posts = new Meteor.Collection("myPosts");

撰寫Template events listener

 var Posts = new Meteor.Collection("myPosts");

 Template.main.events({
      "submit form":function(e){      //這裡對應的是submit按鈕

        var post = {
          "name":$(e.target).find("[name=username]").val(), //這邊的name對應html檔設定的name

          "text":$(e.target).find("[name=text]").val()
        };
        post._id=Posts.insert(post); //將建立好的post存進資料庫

          $(e.target).find("[name=name]").val(""),
          $(e.target).find("[name=text]").val("")

      }
  });

把網頁run起來,輸入幾筆資料試試

因為現在還沒有把資料讀出來,必須開一個終端機輸入mrt mongo從資料庫中查看資料儲存情形
接著輸入db.myPosts.find()看看輸入有沒有成功,裡面有資料代表成功!

Task3: 顯示Post到html的table上

在js中把myPost這個collection的資料讀出來存進posts
var Posts = new Meteor.Collection("myPosts");

if (Meteor.isClient) {
  Template.main.helpers({
      "posts":Posts.find()
  });
}
最後對html稍作修改,把Table的內容用each讀出即可

完整檔案如下

<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                    <label for="exampleInputEmail1">Name</label><input type="text" class="form-control" autocomplete="off" name="username">
                     <label for="exampleInputEmail1">Text</label><input type="text" class="form-control" autocomplete="off" name="text">
                </div>
                 <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            name
                        </th>
                        <th>
                            text
                        </th>
                    </tr>
                </thead>
                <tbody>
                {{#each posts}}
                    <tr>
                        <td>
                            {{name}}
                        </td>
                        <td>
                            {{text}}
                        </td>
                    </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>

Task 4:把你的應用程式deploy上meteor.com

step 1: 到https://www.meteor.com申請一個帳號
step 2: 輸入cd guestbook 切換到自己的專案下
step 3: 輸入mrt deploy 網域名稱 就會開始deploy結束之後就會產生一個網址。

guestbook-with-bootstrap.meteor.com

看完之後動手做做看吧:D

deploy第一個guestbook

根據本文試試看deploy你的guestbook with bootstrap吧!

使用trello來管理進度

請在學習過程中,試著將task拆成多個更細的iteration,如果是正在執行的部分就擺到doing。例如:用layoutit建構bootstrap版面正在執行,那就在doing中加入「用layoutit建構bootstrap版面」這個task,並標註自己,完成之後拖曳到done。