Meteorパッケージの作成

コラム 9.5

翻訳の進捗

本章で学ぶこと:

  • アプリ内でパッケージを書く
  • パッケージのためにテストを書く
  • Atmosphereにパッケージを公開する
  • 私たちは、エラーが動作して再利用可能なパターンを構築しましたので、 スマートパッケージにそれをパッケージ化し、 Meteorのコミュニティとそれを共有しませんか?

    開始するには、我々はMeteorデベロッパーアカウントを持っていることを確認する必要があります。 meteor.comにて作れます。 ですがこの本のためにサインアップしたときは、すでにそのようにしたかもしれません! いずれの場合でも、この章で、アカウントを頻繁に使用するので、 ユーザ名が何であるかを把握する必要があります。

    この章では、ユーザ名tmeasdayを使用します - あなた自身のアカウントに置き換えてください。

    まず、パッケージのためのいくつかの構造を作成する必要があります。 これを行うには、 meteor create --package tmeasday:errorsコマンドを使用します。 Meteorはpackages/tmeasday:errors/というフォルダ名を作成し、 内部のいくつかのファイルを作成することに注意してください。 ファイルpackage.jsを編集するところから始めます。 それは、パッケージをどのように使用するかのMeteorを知らせ、 オブジェクトもしくは関数を必要とあれば、エクスポートします。

    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

    実世界の使用のためにパッケージを開発するとき、 あなたレポジトリのGitのURLでPackage.describeブロックのgitセクションを埋めるのは 良い練習になります。(例えばhttps://github.com/tmeasday/meteor-errors.git) ユーザーがソースコードを読むことができます、そして、(あなたがGitHubを使っているなら) AtmosphereにあなたのパッケージのReadmeが表示されます。

    パッケージに3つのファイルを追加してみましょう。私たちは、いくつかの適切な名前空間と 少しのクリーナーAPIを除きあまり変化せずにMicroscopeからこれらのファイルを引き抜くことができます。 (Meteor配下のコードを削除し共通化できるということです):

    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

    Microscopeでパッケージをテスト

    今、私たちは、変更されたコードが動作することを確認するために、 Microscopeを使用してローカルにテストします。 私たちのプロジェクトにパッケージをリンクするために、我々はmeteor add tmeasday:errorsを実行します。 その後、新しいパッケージにより冗長化されてきた既存のファイルを削除する必要があります。

    rm client/helpers/errors.js
    rm client/templates/includes/errors.html
    rm client/templates/includes/errors.js
    
    removing old files on the bash console

    もう一つ行う事は適切なAPIを使用するためにいくつかのマイナーなアップデートをすることです:

      {{> header}}
      {{> meteorErrors}}
    
    client/templates/application/layout.html
    Meteor.call('postInsert', post, function(error, id) {
      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

    コミット 9-5-1

    Created basic errors package and linked it in.

    これらの変更が行われた後、私たちは私たちのオリジナルのプレパッケージの振る舞いが戻ってるはずです。

    テストを書く

    パッケージを開発する際の最初のステップで、アプリケーションに対してテストしてますが、 次は正常にパッケージの動作をテストするテストスイートを書きます。 Meteorに付属しているTinytest(パッケージ用に作られました。)を使います。 これは簡単にテストを実行でき、他の人とパッケージを共有するときに心の平和を維持することを可能にします。

    いくつかのテストを実行するためにTinytestを使用してテストファイルを作成してみましょう:

    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

    テストで基本的なMeteor.Errors関数の動きをチェックします。 同様にテンプレート内でrenderedコードがまだ機能している事をダブルチェックします。

    我々は、(APIがまだ確定しておらず改変の可能性があるため)ここでMeteorパッケージテストを書く詳細をカバーしていませんが、 うまくいけばそれがどのように動作するか、かなり自明にできます。

    Meteorがpackage.jsでテストをどのように動かすか指示可能です。以下のコードを確認ください。:

    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

    コミット 9-5-2

    Added tests to the package.

    以下のようにテストを動かします。

    meteor test-packages tmeasday:errors
    
    Terminal
    Passing all tests
    Passing all tests

    パッケージの置き換え

    今、パッケージをリリースし、世界でそれを利用できるようにします。私たちは、 Meteorのパッケージサーバーにそれをプッシュし、Atmopshereから取得できるようにします。

    幸いなことに、それは非常に簡単です。cdで、パッケージのディレクトリに入り、 meteor publish --createを実行します。:

    cd packages/tmeasday:errors
    meteor publish --create
    
    Terminal

    今すぐパッケージがリリースされていることを、プロジェクトから一旦削除して、再度追加し、 確認することができます。

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

    コミット 9-5-4

    Removed package from development tree.

    今、私たちはMeteorが初めて私達のパッケージをダウンロードし表示されるはずです。よくやった!