狠狠撸

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" }
]
}
]
}
}
}

設定ファイルのパターン 1
? pageオブジェクトのプロパティ => name, title
? “home”という名前のページから次のファイルを生成
? home.html, home.js, home_controller.js
? ファイル名とルート名はスネークケースで書く
? my_app_name
? テンプレート名はキャメルケースで書く
? MyAppName

設定ファイルのパターン2
? menuオブジェクトのプロパティ => name, class,
items
? classプロパティは<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": [
]
}
]
}
]
}

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

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

コンポーネント
コンポーネント役割
menu navbars, navs, side-menus and tab-menus
form データの追加、更新
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 ジョイン

顿补迟补痴颈别飞コンポーネント

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が使える
? ユーザーロールによるアクセス制限ができる
? とはいえ、覚えることはそれなりに多い (^^;)

狠狠撸

Meteor kitchen て?楽々ウェフ?アフ?リ開発

More Related Content

Meteor kitchen て?楽々ウェフ?アフ?リ開発