Tạo một Meteor Package

Sidebar 9.5

Percentage Translated

In this chapter, you will:

  • 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.
  • 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, 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.

    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');
    });
    
    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:

    Errors = {
      // Local (client-only) collection
      collection: new Mongo.Collection(null),
    
      throw: function(message) {
        Errors.collection.insert({message: message, seen: false})
      }
    };
    
    packages/tmeasday:errors/errors.js
    <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">&times;</button>
        {{message}}
      </div>
    </template>
    
    packages/tmeasday:errors/errors_list.html
    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);
    };
    
    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:

    rm client/helpers/errors.js
    rm client/templates/includes/errors.html
    rm client/templates/includes/errors.js
    
    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:

      {{> header}}
      {{> meteorErrors}}
    
    client/templates/application/layout.html
    Meteor.call('postInsert', post, function(error, result) {
      if (error) {
        // display the error to the user
        Errors.throw(error.reason);
    
    
    client/templates/posts/post_submit.js
    Posts.update(currentPostId, {$set: postProperties}, function(error) {
      if (error) {
        // display the error to the user
        Errors.throw(error.reason);
    
    client/templates/posts/post_edit.js

    Commit 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:

    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);
    });
    
    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:

    Package.onTest(function(api) {
      api.use('tmeasday:errors', 'client');
      api.use(['tinytest', 'test-helpers'], 'client');  
    
      api.addFiles('errors_tests.js', 'client');
    });
    
    packages/tmeasday:errors/package.js

    Commit 9-5-2

    Added tests to the package.

    Sau đó chúng ta có thể chạy kiểm thử với:

    meteor test-packages tmeasday:errors
    
    Terminal
    Passing all tests
    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:

    cd packages/tmeasday:errors
    meteor publish --create
    
    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:

    rm -r packages/errors
    meteor add tmeasday:errors
    
    Terminal (run from the top level of the app)

    Commit 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).