2014年2月21日金曜日

Meteor on Nitrous.IOで簡単CRUDアプリ

Webアプリ開発を劇的に省力化出来ると言われるMeteorで簡単なCRUDアプリを作ってみました。 更に60秒で開発環境を作れると触れ込みのNitrous.IOを使って省力化。
データの保存は気にしていませんでしたがMongoDBになりました。
Node.jsもMongoDBも全く知らない筆者がNitrous.IOアカウント作成後にインストールからアプリ公開までに掛かった時間は 12時間ぐらいで驚異的です。

やりたい事は
  • 無料、ただ、ゼロエン
  • 出来るだけ簡単にサーバー上に開発環境を準備する
  • 使うのはHTML/CSS/JavaScriptだけ
  • 追加、表示、編集、削除(CRUD)が出来る1ページだけのアプリ
    • 格好良く言えばSingle Page Application, SPAと言ふ
    • 入力フォーマット確認など一切無し!
先ずは使った技術の簡単な紹介

Meteor
  • Open Source
  • Node.jsをベースにした全部入りフレームワーク
  • クライアント側もサーバー側もJavaScriptで記述
  • HTML, JavaScriptコードを編集するとクライアントをリロードせずに自動更新
  • データが更新されるとクライアントをリロードせずに自動更新
    • 正直に言ってデモを見ても魔法のようで何が起こっているのかさっぱり分かりませんでした。
  • 出来上がったアプリは1コマンドでTAR化して移動可能 
  • 出来上がったアプリは1コマンドでmeteor.comで公開可能
    • 認証すら不要ってどうゆ〜事?

Nitrous.IO
  • 384MBメモリ、750MBストレージが無料
    •  GitHubやFacebookとリンクしたり紹介すると使えるリソースが増える。
  • 開発言語はRuby on Rails, Node.js, Python/Django, Go, PHPから選べる。
    • サーバーは普通にLinuxなのでShellとかPerlとかも使えます。
  • Web IDEを使う事でiPadやChromebookでも開発が出来る
    • 普通にSSHやFTPも使えますし専用アプリもあり
 ではではアカウントを作ってBoxを作った後の作業から
  1. 環境準備
    1. Nitrous.IOでアカウント作成
    2. Meteorには1GBのストレージが必要で作りたてではポイント(N2Oと呼びます)が足りません。 GitHub のアカウントと連携させるなどしてポイントを増やして下さい。
    3. Box(サーバー)を立ち上げたら以下のコマンドでMeteorを準備
      parts install meteor
      npm install -g meteorite
      # for debug
      npm install -g node-inspector 
      
  2. プロジェクト作成
    • より簡単にする為にTwitter BootStrapとjQueryも使いましょう。
    • meteor create プロジェクト名
      cd プロジェクト名
      meteor add bootstrap
      meteor add jquery
      
  3. 開発
    1. HTMLの全体構造
    2. <head>
      </head>
      
      <body>
        <div class="container">
          {{> tables}}
          {{> send}}
        </div>
      </body>
      
      <template name="send">
        <form>
        </form>
        <input type="button" id="send" value="登録" />
        <input type="button" id="update" value="更新" />
        <input type="button" id="cancel" value="中止" />
      </template>
      
      <template name="tables">
        <table>
          <thead>
          </thead>
          <tbody>
            {{#each items}}
              <tr></tr>
            {{/each}}
          </tbody>
        </table>
      </template>
      
    3. JavaScriptの構造
    4. Items = new Meteor.Collection('items');
      
      if (Meteor.isClient) {
        Template.ibeacons.items = function () {
        };
        
        Template.send.events({
          'click #send': function (evt, tmpl) {
          },
          'click #update': function (evt, tmpl) {
          },
          'click #cancel': function (evt, tmpl) {
          }
        });
        
        function clearForm(tmpl) {
        }
        
        Template.ibeacons.events({
          'click .modify': function (evt, tmpl) {
          },
          'click .delete': function () {
          }
        });
      }
      
      if (Meteor.isServer) {
        Meteor.startup(function() {
          if(Items.find().count() === 0) {
            // Itemsが0件だった場合、追加
            Items.insert(
            );
          }
        });
      }
       
  4. デプロイ
  5. コマンド一つでmeteor.comに公開される。
    meteor deploy --password プロジェクト名.meteor.com
  6. 削除
  7. 削除もコマンド一つ
    meteor deploy -delete プロジェクト名.meteor.com
  8. その他
    1. Meteorプロセスが残っているか確認
      ps -ef | grep meteor | grep node 
      
    2. Meteorプロセスが残っていれば強制終了
      kill -9 `ps ax | grep meteor | grep node | awk '{print $1}'`
      
    3. デバッグ
      1. プロセス起動時前にオプションを追加
        NODE_OPTIONS="--debug" meteor
        
      2. 別ターミナルでデバッガーを起動
        $ node-inspector                                                                                                                
        Node Inspector v0.7.0-2                                                                                                                                            
           info  - socket.io started                                                                                                                                       
        Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.
        
      3. http://hostname/debug?port=5858にアクセスするとデバッグ出来るらしい、、、


疲れたので今日はここまで。

0 件のコメント:

コメントを投稿