More Related Content
Similar to Meteor kitchen で楽々ウェブアプリ開発 (20)
Meteor kitchen で楽々ウェブアプリ開発
- 3. Meteor Kitchen とは?
Meteor のソースコードを自動生成
JSONで設定ファイルを書く
コマンド一発でアプリが完成
URL: http://www.meteorkitchen.com/
紹介ビデオ:
https://www.youtube.com/watch?v=9k5YRxjP58Y
- 7. 設定ファイルはこんな感じ
{
"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" }
]
}
]
}
}
}
- 8. 設定ファイルのパターン 1
pageオブジェクトのプロパティ => name, title
“home”という名前のページから次のファイルを生成
home.html, home.js, home_controller.js
ファイル名とルート名はスネークケースで書く
my_app_name
テンプレート名はキャメルケースで書く
MyAppName
- 10. サブページ
{
"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": [
]
}
]
}
]
}
- 13. コンポーネント
コンポーネント 役割
menu navbars, navs, side-menus and tab-menus
form データの追加、更新
data_view コレクションのデータを表形式で表示 (検索、並べ替え)
tree_view 階層データをツリー形式で表示
jumbotron 大きな文字のクールなテキスト(表紙用)
markdown Markdown形式のテキスト
div <div>要素
section <section>要素
- 14. コレクション
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" }
]
}
],
}
}
- 21. ユーザーロール
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" }
],