技術的に自由なブログ: 2月 2014

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

やりたい事は

無料、ただ、ゼロエン
出来るだけ簡単にサーバー上に開発環境を準備する
使うのはHTML/CSS/JavaScriptだけ
追加、表示、編集、削除(CRUD)が出来る１ページだけのアプリ

格好良く言えばSingle Page Application, SPAと言ふ
入力フォーマット確認など一切無し！

先ずは使った技術の簡単な紹介

Meteor

Open Source
Node.jsをベースにした全部入りフレームワーク
クライアント側もサーバー側もJavaScriptで記述
HTML, JavaScriptコードを編集するとクライアントをリロードせずに自動更新
データが更新されるとクライアントをリロードせずに自動更新

正直に言ってデモを見ても魔法のようで何が起こっているのかさっぱり分かりませんでした。

出来上がったアプリは１コマンドで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を作った後の作業から

環境準備

Nitrous.IOでアカウント作成
Meteorには1GBのストレージが必要で作りたてではポイント(N2Oと呼びます)が足りません。 GitHub のアカウントと連携させるなどしてポイントを増やして下さい。

Box(サーバー)を立ち上げたら以下のコマンドでMeteorを準備

parts install meteor
npm install -g meteorite
# for debug
npm install -g node-inspector

プロジェクト作成

より簡単にする為にTwitter BootStrapとjQueryも使いましょう。

meteor create プロジェクト名
cd プロジェクト名
meteor add bootstrap
meteor add jquery

開発

HTMLの全体構造

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

JavaScriptの構造

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

デプロイ

meteor deploy --password プロジェクト名.meteor.com

削除

meteor deploy -delete プロジェクト名.meteor.com

その他

Meteorプロセスが残っているか確認
```
ps -ef | grep meteor | grep node 
```

Meteorプロセスが残っていれば強制終了

kill -9 `ps ax | grep meteor | grep node | awk '{print $1}'`

デバッグ

プロセス起動時前にオプションを追加
```
NODE_OPTIONS="--debug" meteor
```

別ターミナルでデバッガーを起動

$ 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.

http://hostname/debug?port=5858にアクセスするとデバッグ出来るらしい、、、

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

技術的に自由なブログ

2014年2月21日金曜日

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