Meteor Kitchen で楽々ウェブアプリ開発YAMADA Junji

Meteor Kitchen

Meteor Kitchen とは？Meteor のソースコードを自動生成JSON で設定ファイルを書くコマンド一発でアプリが完成URL: http://www.meteorkitchen.com/紹介ビデオ :

https://www.youtube.com/watch?v=9k5YRxjP58Y

コマンドはこんな感じ$ meteor-kitchen [ 設定ファイル ] [ 出力フォルダ名 ]$ meteor-kitchen myapp.json myapp

myapp/ フォルダにアプリが生成される$ cd myapp$ meteor

メリット時間とお金を節約

数時間の代わりに数分でコードをビルド1 行もコードを書かずに完成することもある

プロトタイピングに最適高品質なコード

コンポーネントと呼ばれる部品を使ってアプリを生成コードは読みやすく、安定して、バグがない

一度書けば何度でも使える

インストール$ curl http://www.meteorkitchen.com/install | /bin/sh

設定ファイルはこんな感じ{ "application": { "free_zone": { "pages": [ { "name": "home", "title": "Home page" }, { "name": "about", "title": "About" } ],

"components": [ { "name": "main_menu", "type": "menu", "items": [ { "title": "Home page", "route": "home" }, { "title": "About", "route": "about" } ] } ] } }}

設定ファイルのパターン 1page オブジェクトのプロパティ => name, title

“home” という名前のページから次のファイルを生成 home.html, home.js, home_controller.js

ファイル名とルート名はスネークケースで書くmy_app_name

テンプレート名はキャメルケースで書くMyAppName

設定ファイルのパターン 2menu オブジェクトのプロパティ => name,

class, itemsclass プロパティは <ul> 要素にマッピング

menu の各 item のプロパティ => title, route

サブページ{ "name": "home", "title": "Home page", "pages": [ { "name": "subpage_1", "title": "Home - Subpage 1", "pages": [ { "name": "subsub_1", "title": "Home - Subpage 1 - Sub-Sub page 1", "pages": [

] } ] } ]}

フロントエンドフレームワークbootstrapsemantic-ui ※ 未完成materialize ※ 未完成

ビジュアルテーマbootswatch の各テーマデフォルトは bootswatch-amelia

コンポーネントコンポーネント 役割menu navbars, navs, side-menus and tab-menusform データの追加、更新data_view コレクションのデータを表形式で表示 ( 検索、並べ替

え )tree_view 階層データをツリー形式で表示jumbotron 大きな文字のクールなテキスト ( 表紙用 )markdown Markdown 形式のテキストdiv <div> 要素section <section> 要素

コレクションapplication オブジェクトに collections 配列を追加{ "application": { "title": "Example application", "collections": [ { "name": "customers" "fields": [ { "name": "name", "title": "Name", "required": true }, { "name": "phone", "title": "Phone", "default": "-" }, { "name": "email", "title": "E-mail", "type": "email" } ] } ], }}

データベース関連機能Queries クエリJoins ジョイン

DataView コンポーネント

Form コンポーネント read_only

Form コンポーネント insert

Form コンポーネント update

OAuth "login_with_password": true,

"login_with_google": true, "login_with_github": true, "login_with_linkedin": true, "login_with_facebook": true, "login_with_twitter": true, "login_with_meteor": true

ユーザーロールrole 配列にロールを追加

"roles": ["admin", "manager", "user"],"default_role": "user",

ページへのアクセスを制限"pages": [ { "name": "home_private", "title": "Private home page" }, { "name": "admin_panel", "title": "Admin panel", "roles": ["admin"] }, { "name": "logout", "template": "logout" }],

ロールでコレクションを制限"collections": [ { "name": "customers", "roles_allowed_to_read": [], "roles_allowed_to_insert": ["admin", "manager"], "roles_allowed_to_update": ["admin", "manager"], "roles_allowed_to_delete": ["nobody"], }],

ドキュメントオーナー{ "name": "customers",

"owner_field": "ownerId", "roles_allowed_to_read": ["admin", "owner"], "roles_allowed_to_insert": ["admin", "user"], "roles_allowed_to_update": ["owner"], "roles_allowed_to_delete": ["nobody"],}

まとめ設定ファイルだけでアプリが書けるウェブアプリに必要なコンポーネントがそろっているOAuth が使えるユーザーロールによるアクセス制限ができるとはいえ、覚えることはそれなりに多い (^^;)