-
Notifications
You must be signed in to change notification settings - Fork 4
/
09s-creating-a-meteor-package.md.erb
214 lines (160 loc) · 8.38 KB
/
09s-creating-a-meteor-package.md.erb
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
---
title: Tạo một Meteor Package
slug: creating-a-meteor-package
date: 0009/01/02
number: 9.5
points: 10
sidebar: true
photoUrl: http://www.flickr.com/photos/rxb/7779426142/
photoAuthor: Richard
contents: Viết một gói package tích hợp cục bộ.|Viết một số mã kiểm thử cho package.|Release package của bạn trên Atmosphere.
paragraphs: 22
---
Chúng ta vừa mới tạo mô hình thông báo lỗi mà có thể tái sử dụng, vậy tại sao không đóng gói nó lại và chia sẻ với toàn bộ cộng đồng Meteor nhỉ?
Để bắt đầu, chắc chắn rằng bạn có một tài khoản phát triển của Meteor. Bạn có thể yêu cầu một tài khoản tại [meteor.com](meteor.com), nhưng cũng có thể là bạn đã tạo sẵn khi bạn đăng ký cuốn sách này! Dù trong trường hợp nào, hãy kiểm tra tên tài khoản của bạn, vì nó sẽ được dùng trong suốt chương này.
Chúng ta sẽ sử dụng tài khoản tên là `tmeasday` cho chương này -- bạn cũng có thể thay thế bằng tài khoản của riêng mình.
Trước hết chúng ta cần phải tạo cấu trúc cho package để lưu trú vào đó. Việc này có thể thực hiện bằng lệnh `meteor create --package tmeasday:errors`. Chú ý rằng Meteor sẽ tạo một thư mục tên là `packages/tmeasday:errors/` với một số file bên trong. Chúng ta sẽ bắt đầu bằng việc biên tập lại file `package.js`. File này thông báo cho Meteor biết package nên được dùng như thế nào, và object hoặc hàm nào cần phải xuất ra.
~~~js
Package.describe({
name: "tmeasday:errors",
summary: "A pattern to display application errors to the user",
version: "1.0.0"
});
Package.onUse(function (api, where) {
api.versionsFrom('0.9.0');
api.use(['minimongo', 'mongo-livedata', 'templating'], 'client');
api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');
if (api.export)
api.export('Errors');
});
~~~
<%= caption "packages/tmeasday:errors/package.js" %>
Khi phát triển một gói package dùng cho thế giới thực, sẽ rất tốt nếu chúng ta nhập vào phần `git` của `Package.describe` với kho chứa Git URL (ví dụ như là `https://github.com/tmeasday/meteor-errors.git`). Bằng cách này người dùng có thể đọc mã nguồn của bạn, và (mặc định là bạn dùng GitHub) readme của gói package cũng sẽ xuất hiện trên Atmosphere.
Hãy cùng thêm ba file vào package. (Chúng ta có thể xoá bỏ bản mẫu mà Meteor đưa vào) Chúng ta có thể lấy những file này từ Microscope mà không cần phải thay đổi nhiều trừ một số thuộc tính namespacing và một vài tinh chỉnh nhỏ cho API:
~~~js
Errors = {
// Local (client-only) collection
collection: new Mongo.Collection(null),
throw: function(message) {
Errors.collection.insert({message: message, seen: false})
}
};
~~~
<%= caption "packages/tmeasday:errors/errors.js" %>
~~~html
<template name="meteorErrors">
<div class="errors">
{{#each errors}}
{{> meteorError}}
{{/each}}
</div>
</template>
<template name="meteorError">
<div class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
{{message}}
</div>
</template>
~~~
<%= caption "packages/tmeasday:errors/errors_list.html" %>
~~~js
Template.meteorErrors.helpers({
errors: function() {
return Errors.collection.find();
}
});
Template.meteorError.rendered = function() {
var error = this.data;
Meteor.setTimeout(function () {
Errors.collection.remove(error._id);
}, 3000);
};
~~~
<%= caption "packages/tmeasday:errors/errors_list.js" %>
### Kiểm thử gói package với Microscope
Bây giờ chúng ta sẽ thử kiểm tra cục bộ với Microscope để chắc chắn rằng code đã thay đổi vẫn hoạt động tốt. Để kết nối package với dự án của chúng ta, hãy chạy lệnh `meteor add tmeasday:errors`. Sau đó, chúng ta cần xoá những file tồn tại mà đã trở thành dư thừa do có package mới:
~~~bash
rm client/helpers/errors.js
rm client/templates/includes/errors.html
rm client/templates/includes/errors.js
~~~
<%= caption "removing old files on the bash console" %>
Một điều nữa chúng ta cần phải làm là cập nhật một số thay đổi để API trở về hoạt động đúng:
~~~html
{{> header}}
{{> meteorErrors}}
~~~
<%= caption "client/templates/application/layout.html" %>
~~~js
Meteor.call('postInsert', post, function(error, result) {
if (error) {
// display the error to the user
Errors.throw(error.reason);
~~~
<%= caption "client/templates/posts/post_submit.js" %>
~~~js
Posts.update(currentPostId, {$set: postProperties}, function(error) {
if (error) {
// display the error to the user
Errors.throw(error.reason);
~~~
<%= caption "client/templates/posts/post_edit.js" %>
<%= scommit "9-5-1", "Created basic errors package and linked it in." %>
Sau khi những thay đổi đã được tạo, chúng ta sẽ có được tính năng như trước khi tạo package.
### Viết mã kiểm thử
Việc đầu tiên khi phát triển một package là kiểm thử đối với ứng dụng, nhưng việc tiếp theo phải làm là viết mã kiểm thử để kiểm tra hoạt động của package.
Hãy cùng tạo một file kiểm thử dùng Tinytest để làm việc này:
~~~js
Tinytest.add("Errors - collection", function(test) {
test.equal(Errors.collection.find({}).count(), 0);
Errors.throw('A new error!');
test.equal(Errors.collection.find({}).count(), 1);
Errors.collection.remove({});
});
Tinytest.addAsync("Errors - template", function(test, done) {
Errors.throw('A new error!');
test.equal(Errors.collection.find({}).count(), 1);
// render the template
UI.insert(UI.render(Template.meteorErrors), document.body);
Meteor.setTimeout(function() {
test.equal(Errors.collection.find({}).count(), 0);
done();
}, 3500);
});
~~~
<%= caption "packages/tmeasday:errors/errors_tests.js" %>
Trong đoạn kiểm thử này, chúng ta kiểm tra hoạt động cơ bản của hàm `Meteor.Errors`, và ngoài ra cũng kiểm tra thêm lần nữa code trong `rendered` của template vẫn hoạt động đúng.
Chúng ta sẽ không đi vào tất cả khía cạnh của việc viết kiểm thử cho Meteor package, (vì API vẫn chưa phải là bản cuối cùng và vẫn còn thay đổi rất nhiều), nhưng hi vọng rằng nó đủ để tìm hiểu cách thức hoạt động.
Để bảo cho Meteor biết làm thế nào để chạy kiểm thử trong `package.js`, sử dụng đoạn mã sau:
~~~js
Package.onTest(function(api) {
api.use('tmeasday:errors', 'client');
api.use(['tinytest', 'test-helpers'], 'client');
api.addFiles('errors_tests.js', 'client');
});
~~~
<%= caption "packages/tmeasday:errors/package.js" %>
<%= scommit "9-5-2", "Added tests to the package." %>
Sau đó chúng ta có thể chạy kiểm thử với:
~~~bash
meteor test-packages tmeasday:errors
~~~
<%= caption "Terminal" %>
<%= screenshot "s7-1", "Passing all tests" %>
### Release Package
Bây giờ, chúng ta sẽ release package và làm cho nó hiện hữu với toàn bộ thế giới. Chúng ta làm việc này bằng cách đẩy nó lên server package của Meteor, và cho nó vào trong Atmopshere.
May mắn thay việc đó khá đơn giản. Chúng ta chỉ cần `cd` tới thư mục của package, và chạy lệnh `meteor publish --create`:
~~~bash
cd packages/tmeasday:errors
meteor publish --create
~~~
<%= caption "Terminal" %>
Bây giờ gói package đã được release, chúng ta có thể xoá nó ra khỏi dự án và thêm vào sau đó một cách trực tiếp:
~~~bash
rm -r packages/errors
meteor add tmeasday:errors
~~~
<%= caption "Terminal (run from the top level of the app)" %>
<%= scommit "9-5-4", "Removed package from development tree." %>
Bạn sẽ thấy Meteor tải package lần đầu tiên. Chúng ta đã làm rất tốt!
Như với các chương sidebar khác, chắc chắn rằng bạn đã khôi phục lại những thay đổi trước khi đi tiếp (hoặc là chắc chắn là bạn sẽ chịu trách nhiệm xem xét chúng kỹ càng trong khi đi tiếp phần còn lại của cuốn sách).