02-getting-started.md.erb

---
title: Khởi đầu
slug: getting-started
date: 0002/01/01
number: 2
contents: Cài đặt Meteor.|Tìm hiểu về 5 loại Meteor packages.|Thiết lập cấu trúc file của một Meteor app.
paragraphs: 49
---

Ấn tượng đầu tiên là quan trọng, và quá trình cài đặt của Meteor nên khá dễ dàng. Trong hầu hết các trường hợp, bạn sẽ sẵn sàng chạy được trong vòng chưa đầy năm phút.

Để bắt đầu, chúng ta có thể cài đặt Meteor bằng cách mở một cửa sổ terminal và gõ:

~~~bash
curl https://install.meteor.com | sh
~~~

Điều này sẽ cài đặt các `meteor` thực thi trên hệ thống của bạn và bạn đã sẵn sàng để sử dụng Meteor.

<% note do %>

### *Không* Cài đặt Meteor

Nếu bạn không thể (hoặc không muốn) cài đặt Meteor tại địa phương, chúng tôi khuyên bạn nên kiểm tra [Nitrous.io] (http://nitrous.io).

Nitrous.io là một dịch vụ cho phép bạn chạy các ứng dụng và chỉnh sửa mã nguồn của họ ngay trong trình duyệt của bạn, và chúng tôi đã viết [một hướng dẫn ngắn] (https://www.discovermeteor.com/blog/meteor-nitrous) để giúp bạn có được thiết lập.

Bạn có thể chỉ cần làm theo hướng dẫn cho tới (và bao gồm) phần "Cài đặt Meteor", và sau đó làm theo cuốn sách một lần nữa bắt đầu từ phần "Tạo một app đơn giản" của chương này.

<% end %>

### Tạo một app đơn giản

Bây giờ chúng ta đã cài đặt Meteor, chúng ta hãy tạo ra một ứng dụng. Để làm được điều này, chúng tôi sử dụng công cụ dòng lệnh 'meteor` của Meteor:

~~~bash
meteor create microscope
~~~

Lệnh này sẽ tải về Meteor, và thiết lập một dự án Meteor cơ bản, sẵn sàng để sử dụng cho bạn. Khi thực hiện xong, bạn sẽ thấy một thư mục, `microscope/`, có chứa những điều sau đây:

~~~bash
.meteor
microscope.css
microscope.html
microscope.js
~~~

App mà Meteor đã tạo ra cho bạn là một ứng dụng soạn sẵn thể hiện một vài mẫu đơn giản.

Mặc dù ứng dụng của chúng tôi không làm được gì nhiều, chúng ta vẫn có thể chạy nó. Để chạy ứng dụng này, quay về terminal và gõ:

~~~bash
cd microscope
meteor
~~~

Bây giờ trỏ trình duyệt của bạn đến `http://localhost:3000/` (hoặc tương đương 'http://0.0.0.0:3000/`) và bạn sẽ thấy một cái gì đó như thế này:

<%= screenshot "2-1", "Meteor's Hello World." %>

<%= commit "2-1", "Created basic microscope project." %>

Xin chúc mừng! Bạn đã có ứng dụng Meteor đầu tiên đang chạy của riêng mình. Ngoài ra, để dừng ứng dụng thì tất cả việc bạn cần phải làm là tới tab của terminal đang chạy ứng dụng, và nhấn `ctrl+c`.

Cũng lưu ý rằng nếu bạn đang sử dụng Git, đây là một thời điểm tốt để khởi tạo repo của bạn với `git init`.

<% note do %>

### Tạm biệt Meteorite

Có một thời gian, khi mà Meteor dựa vào một trình quản lý gói bên ngoài gọi là meteorite. Kể từ phiên bản 0.9.0 của Meteor, Meteorite trở nên không cần thiết nữa vì tính năng của nó đã được đồng hóa vào trong chính Meteor.

Vì vậy, nếu bạn gặp bất kỳ tài liệu tham khảo nào liên hệ với tiện ích dòng lệnh `mrt` của Meteorite trong suốt cuốn sách này hoặc trong khi duyệt các tài liệu liên quan đến Meteor, bạn có thể an toàn thay thế chúng bằng dòng lệnh `meteor` bình thường.

<% end %>

### Thêm một Package

Bây giờ chúng ta sẽ sử dụng hệ thống gói Meteor để thêm framework [Bootstrap] (http://getbootstrap.com/) vào dự án.

Điều này không khác gì so với việc thêm Bootstrap theo cách thông thường bằng tay bao gồm cả tập tin CSS và JavaScript, ngoại trừ chúng ta dựa vào trình quản lý package để giữ cho mọi thứ được cập nhật.

Ngoài ra, chúng tôi cũng sẽ thêm gói [Underscore] (http://underscorejs.org/). Underscore là một thư viện tiện ích JavaScript, và nó rất hữu ích khi thao tác với các cấu trúc dữ liệu JavaScript.

Theo văn bản này, gói `underscore` vẫn là một phần trong những package "chính thức" của Meteor, đó là lý do tại sao nó không có tên tác giả:

~~~bash
meteor add mizzao:bootstrap-3
meteor add underscore
~~~

Lưu ý rằng chúng ta đang thêm Bootstrap **3**. Một số ảnh chụp màn hình trong cuốn sách này được thực hiện với một phiên bản cũ của Microscope chạy Bootstrap **2**, có nghĩa là chúng có thể trông hơi khác nhau.

<%= commit "2-2", "Added bootstrap and underscore packages." %>

Ngay sau khi bạn đã thêm gói Bootstrap bạn sẽ nhận thấy một sự thay đổi trong khung trần của ứng dụng:

<%= screenshot "2-1b", "With Bootstrap." %>

Không giống như cách thêm vào tài nguyên từ bên ngoài theo cách "truyền thống", chúng ta đã không phải liên kết tới bất kỳ tập tin CSS hoặc JavaScript, vì Meteor sẽ quản lý tất cả những việc đó cho chúng ta! Đó chỉ là một trong nhiều ưu điểm của các gói trong Meteor.

<% note do %>

### Chú ý về các gói

Khi nói về các gói trong bối cảnh của Meteor, nó đáng giá để chúng ta đặc tả. Meteor sử dụng năm loại package cơ bản:

- Chính bản thân Meteor được chia thành các gói **các gói nền tảng Meteor**. Chúng bao gồm trong mọi ứng dụng Meteor, và thường thì bạn không cần phải lo lắng nhiều về .
- Gói Meteor chính quy được gọi là "**isopacks**", hoặc là các gói đẳng cấu (có nghĩa là họ có thể làm việc trên cả máy khách và máy chủ). **Gói của bên thứ nhất** như `tài khoản-ui` hoặc` appcache` được duy trì bởi đội ngũ nòng cốt Meteor và [đi kèm với Meteor] (http://docs.meteor.com/#packages).
- **Gói của bên thứ ba** là gói isopacks được phát triển bởi những người dùng khác mà đã được tải lên máy chủ quản lý gói Meteor. Bạn có thể duyệt chúng trên [Atmosphere] (http://atmosphere.meteor.com) hoặc với lệnh `meteor search`.
- **Gói địa phương** là các gói tùy chỉnh, bạn có thể tự tạo ra và đặt trong thư mục '/packages`.
- **Gói NPM** (Node.js Packaged Modules) là gói Node.js. Mặc dù chúng không làm việc trực tiếp với Meteor được, chúng *có thể* được sử dụng bởi các loại gói vừa được liệt kê.

<% end %>

### Cấu trúc file của một ứng dụng Meteor

Trước khi chúng ta bắt đầu code, chúng ta phải lập dự án theo đúng cách. Để đảm bảo chúng ta có một cấu trúc thoáng, hãy mở thư mục 'microscope` và xóa' microscope.html`, `microscope.js`, ` microscope.css`.

Tiếp theo, tạo ra bốn thư mục gốc bên trong `/microscope`:` /client`, `/server`,`/public`, và `/lib`.

Tiếp theo, chúng ta cũng sẽ tạo ra file rỗng `main.html` và `main.js` bên trong `/client`. Đừng lo lắng nếu điều này phá vỡ các ứng dụng hiện tại, chúng ta sẽ bắt đầu điền vào các tập tin này trong chương tiếp theo.

Chúng ta nên đề cập đến việc một số thư mục này là đặc biệt. Khi nói đến mã chạy, Meteor có một vài quy tắc:

- Mã trong thư mục `/server` chỉ chạy trên máy chủ.
- Mã trong thư mục `/client` chỉ chạy trên máy khách.
- Mọi thứ khác chạy trên cả máy khách và máy chủ.
- Tài nguyên tĩnh của bạn (font chữ, hình ảnh, vv) nằm trong thư mục `/public`.

Và cũng sẽ hữu ích nếu biết làm thế nào Meteor quyết định thứ tự nạp các file:

- Các tập tin trong `/lib` được nạp *trước* bất cứ điều gì khác.
- Bất kỳ tập tin `main.*` nào cũng được nạp *sau* tất cả mọi thứ khác.
- Mọi thứ khác tải trong thứ tự chữ cái dựa trên tên file.

Lưu ý rằng mặc dù Meteor có những quy tắc, nó không thực sự buộc bạn phải sử dụng bất kỳ cấu trúc tập tin được định nghĩa sẵn nào cho ứng dụng nếu bạn không muốn. Vì vậy, cấu trúc mà chúng tôi đề nghị chỉ là một cách để làm việc, không phải là một quy tắc cứng nhắc.

Chúng tôi khuyến khích bạn kiểm tra [tài liệu Meteor chính thức] (http://docs.meteor.com/#structuringyourapp) nếu bạn muốn biết thêm chi tiết về điều này.

<% note do %>

### Meteor có phải là MVC?

Nếu bạn đến từ các framework khác như Ruby on Rails, bạn có thể tự hỏi liệu Meteor có áp dụng mô hình MVC (Model View Controller).

Câu trả lời ngắn gọn là không. Không giống như Rails, Meteor không áp đặt bất kỳ cấu trúc được xác định trước nào đối với ứng dụng của bạn. Vì vậy, trong cuốn sách này, chúng tôi sẽ đơn giản đặt ra mã theo cách hợp lý nhất, mà không lo lắng quá nhiều về cụm từ MVC.

<% end %>

### Không có thư mục public?

OK, đó chỉ là chuyện đùa. Chúng ta không thực sự cần thư mục `public` vì một lý do đơn giản là Microscope không dùng dữ liệu tĩnh! Nhưng, vì hầu hết các ứng dụng Meteor khác sẽ bao gồm ít nhất là một vài hình ảnh, chúng tôi nghĩ cũng quan trọng để nói về nó.

Ngoài ra, bạn cũng có thể nhận thấy một thư mục `.meteor` ẩn. Đây là nơi Meteor lưu trữ code của mình, và thay đổi mọi thứ trong đó thường là một ý kiến tồi. Trong thực tế, bạn không thực sự cần phải quan tâm đến thư mục này. Các trường hợp ngoại lệ duy nhất này là các file `.meteor/packages` và `.meteor/release`, dùng để liệt kê các gói thông minh của bạn và phiên bản của Meteor để sử dụng. Khi bạn thêm gói và thay đổi bản phát hành Meteor, có thể sẽ hữu ích nếu kiểm tra các thay đổi trong những tập tin này.

<% note do %>

### Underscores vs CamelCase

Điều duy nhất chúng ta sẽ nói về cuộc tranh cãi giữa biến dùng gạch dưới lâu đời (`my_variable`) và biến theo kiểu camelCase (` myVariable`) là nó không thực sự có vấn đề nếu bạn chọn một trong hai loại miễn là bạn trung thành với nó.

Trong cuốn sách này, chúng tôi đang sử dụng camelCase vì đó là cách thông thường JavaScript làm việc (dù sao đi nữa, đó là JavaScript, không phải java_script!).

Các trường hợp ngoại lệ của luật này là tên các tập tin, mà sẽ sử dụng gạch dưới (`my_file.js`), và các lớp CSS, mà sử dụng dấu gạch nối (` .my-class`). Lý do cho điều này là trong tập tin hệ thống, gạch chân là phổ biến nhất, trong khi các cú pháp CSS tự nó đã sử dụng dấu gạch nối (`font-family`, `text-align`, vv).

<% end %>

### Chú trọng tới CSS

Cuốn sách này không phải là về CSS. Vì vậy, để tránh làm chậm tốc độ của bạn với các chi tiết về kiểu dáng, chúng tôi đã quyết định để cho toàn bộ stylesheet có sẵn từ đầu, vì vậy bạn không cần phải lo lắng về nó thêm một lần nữa.

CSS tự động được nạp và làm nhỏ bởi Meteor, vì vậy không giống như các tài nguyên tĩnh khác, nó được đặt trong `/client`, mà không phải là `/public`. Hãy bắt đầu và tạo một thư mục 'client/stylesheets/` bây giờ, và đặt file `style.css` sau đây bên trong đó:

~~~css
.grid-block, .main, .post, .comments li, .comment-form {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

body {
  background: #eee;
  color: #666666; }

.navbar {
  margin-bottom: 10px; }
  /* line 32, ../sass/style.scss */
  .navbar .navbar-inner {
    -webkit-border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -ms-border-radius: 0px 0px 3px 3px;
    -o-border-radius: 0px 0px 3px 3px;
    border-radius: 0px 0px 3px 3px; }

#spinner {
  height: 300px; }

.post {
  /* For modern browsers */
  /* For IE 6/7 (trigger hasLayout) */
  *zoom: 1;
  position: relative;
  opacity: 1; }
  .post:before, .post:after {
    content: "";
    display: table; }
  .post:after {
    clear: both; }
  .post.invisible {
    opacity: 0; }
  .post.instant {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none; }
  .post.animate{
    -webkit-transition: all 300ms 0ms ease-in;
    -moz-transition: all 300ms 0ms ease-in;
    -o-transition: all 300ms 0ms ease-in;
    transition: all 300ms 0ms ease-in; }
  .post .upvote {
    display: block;
    margin: 7px 12px 0 0;
    float: left; }
  .post .post-content {
    float: left; }
    .post .post-content h3 {
      margin: 0;
      line-height: 1.4;
      font-size: 18px; }
      .post .post-content h3 a {
        display: inline-block;
        margin-right: 5px; }
      .post .post-content h3 span {
        font-weight: normal;
        font-size: 14px;
        display: inline-block;
        color: #aaaaaa; }
    .post .post-content p {
      margin: 0; }
  .post .discuss {
    display: block;
    float: right;
    margin-top: 7px; }

.comments {
  list-style-type: none;
  margin: 0; }
  .comments li h4 {
    font-size: 16px;
    margin: 0; }
    .comments li h4 .date {
      font-size: 12px;
      font-weight: normal; }
    .comments li h4 a {
      font-size: 12px; }
  .comments li p:last-child {
    margin-bottom: 0; }

.dropdown-menu span {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #bbb;
  white-space: nowrap; }

.load-more {
  display: block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  text-align: center;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px; }
  .load-more:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1); }

.posts .spinner-container{
  position: relative;
  height: 100px;
}

.jumbotron{
  text-align: center;
}
.jumbotron h2{
  font-size: 60px;
  font-weight: 100;
}

@-webkit-keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 0;}
  10% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

.errors{
  position: fixed;
  z-index: 10000;
  padding: 10px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
}
.alert {
          animation: fadeOut 2700ms ease-in 0s 1 forwards;
  -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
     -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
  width: 250px;
  float: right;
  clear: both;
  margin-bottom: 5px;
  pointer-events: auto;
}
~~~
<%= caption "client/stylesheets/style.css" %>

<%= commit "2-3","Re-arranged file structure." %>

<% note do %>

### Chú ý về CoffeeScript

Trong cuốn sách này, chúng ta sẽ viết với JavaScript thuần. Nhưng nếu bạn thích CoffeeScript, Meteor cũng có thể đáp ứng. Đơn giản chỉ cần thêm các gói CoffeeScript và bạn sẽ sẵn sàng:

`meteor add coffeescript`

<% end %>