Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Sails WorkShop (1)
立命館大学 経営学部3回生 
井口智勝
SailsWorkShop
の目的
<for All>
Watnowにリアルタイム通信技術を導入する
<for One>
取り敢えず、書けるようになること。(スピード重視)
ある程度、体系的な知識化もしていく。
Sails WorkShop
Menu
1回目:Sailsって何?CRUDappを作ろう!
2回目:Policiesの使い方 ∼sessionや認証∼
3回目:appをリアルタイム化しよう!
4回目:Sails✕Marionette
5回目:細...
今日のアウトライン
sailsとは?
Sailsを導入した時の開発の全体像
sailsでCRUDappを作ろう!(1)
sailsの感想
2014/11/24(Mon)
sailsとは?
node.jsのMVCフレームワーク
2013/3月くらい誕生(github上では2012年)
現在v0.10.2が最新(14/11/22現在)
sailsとは?
Socket.io
Waterline (ORM部分)
lodash (Underscoreとほぼ同じ)
less
sailsとは?
設定より規約(CoC)
テスト駆動開発(TDD)
Don’t repeat yourself
リソース指向アーキテクチャー(ROA) REST
http://sailsjs.org/#/getStarted
今日のアウトライン
sailsとは?
Sailsを導入した時の開発の全体像
sailsでCRUDappを作ろう!(1)
sailsの感想
2014/11/24(Mon)
C
V
MDB
CM
V
Marionette.js
(フロントエンド)
Cake.php
(バックエンド)
JSON
HandleBars
ItemView/CompositeViewModel/Collection
これまで
C
V
MDB
CM
V
Marionette.js
(フロントエンド)
Cake.php
(バックエンド)
JSON
HandleBars
ItemView/CompositeViewModel/Collection
これまで
2つの言語を扱う必要があった。
リアルタイム通信に向いていない(可能ではあ
ると思うが)
これまで
C
V
MDB
CM
V
Marionette.js
(フロントエンド)
Sails.js
(バックエンド)
JSON
HandleBars
Model/Collection
リアルタイムapp
ItemView/CompositeView
C
V
MDB
CM
V
Marionette.js
(フロントエンド)
Sails.js
(バックエンド)
JSON
HandleBars
Model/Collection
リアルタイムapp
ItemView/CompositeView
今日のアウトライン
sailsとは?
Sailsを導入した時の開発の全体像
sailsでCRUDappを作ろう!(1)
sailsの感想
2014/11/24(Mon)
Sailsでappを
作ってみよう!
参考:http://irlnathan.github.io/sailscasts/
アプリ制作の流れ
アプリ全体像把握
環境設定・必要ファイル用意(MVC)
Controller内を主に解説
今回作るapp
https://github.com/igtm/sails-sample-app1
ページ遷移図
TOP
ページ
GET: /
新規
作成
GET: /user/new
詳細
GET: /user/:id
一覧
GET: /user
編集
GET: /user/edit/:id
削除
GET: /user/destroy/:i...
C
V
MDB
Sails.js
(バックエンド)
リアルタイムapp
アプリ制作の流れ
アプリ全体像把握
環境設定・必要ファイル用意(MVC)
Controller内を主に解説
環境設定
npm install -g sails
cd 好きなディレクトリへ
sails new SailsWorkShop
cd SailsWorkShop
npm install その後エディタ起動
環境設定
必要ファイルをダウンロードして下さい!
bootstrap,jquery,jquery.validate
オリジナルjs,css等
assets内にmove、(dependency内に入れる
と、先に読み込まれる) view/layo...
controllerとmodel
sails generate api user
api : controllerとmodelを作るよ!
User.js (model)
schema: true,
attributes: {
name: {
type: 'string',
required: true
},
title: {
type: 'string'
},
email: {
...
module.exports = function(req, res, next){
res.locals.flash = {};
if(!req.session.flash) return next();
res.locals.flash =
_....
View作成
view/userフォルダ作成(user関連)
index.ejs edit.ejs new.ejs show.ejs
view/staticフォルダ作成(初期ページ)
index.ejs(Topページ)
user/index.ejs
<div class="container">
<h3>Users</h3>
<table class="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Title</th>
...
<form action="/user/create" method="POST" id="sign-up-form" class="form-
signin">
<h2 class="form-signin-heading">Create a...
<form action="/user/update/<%= user.id %>" method="POST"
class="form-signin">
<h2>編集画面</h2>
<input value="<%= user.name %>...
<div class="container">
<h1><%= user.name %></h1>
<h3><%= user.title %></h3>
<hr>
<h3>Contact: <%= user.email %> </h3>
<a ...
<div class="container">
<div class="jumbotron">
<h1>activeOverload</h1>
<h2>.....tracking app activity better than
the NSA...
設定
config/routes内
'/': {
view: 'static/index'
}
config/policies内
// '*': true,
'*': ‘flash’
config/csrf内
true
config/bluep...
アプリ制作の流れ
アプリ全体像把握
環境設定・必要ファイル用意(MVC)
Controller内を主に解説
こっから本題!
(コピペせずに書いていくと理解が深
まると思います)
CRUDアプリをつくる
C (作成)を作る
CRUD
new
new : function(req,res{
res.view();
},
/user/newのリクエストでここに来る。
res.view()で自動的にuser/new.ejsに飛ぶ
ここで一回
見てみましょう!!
TOP
ページ
GET: /
新規
作成
GET: /user/new
CRUD
sails liftでOK
R (表示)を作る
CRUD
index
// 一覧表示。user全ての配列を取得
index: function(req, res, next){
User.find(function foundUsers (err, users){
if(err) return next...
show
// 個別ページ id -> そのidのuserオブジェクトをviewへ送り描画
show: function(req, res, next){
User.findOne(req.param('id'), function foundU...
TOP
ページ
GET: /
新規
作成
GET: /user/new
詳細
GET: /user/:id
一覧
GET: /user
CRUD
ここで一回
見てみましょう!!
sails liftでOK
/userを見てみよう!
U (編集)を作る
CRUD
edit
edit: function(req, res){
User.findOne(req.param('id'), function foundUser (err,
user){
if(err) return next(err);
if(!...
update
update: function(req, res, next){
User.update(req.param('id'), req.params.all(),
function userUpdated(err){
if(err)...
TOP
ページ
GET: /
新規
作成
GET: /user/new
詳細
GET: /user/:id
一覧
GET: /user
編集
GET: /user/edit/:id
CRUD
ここで一回
見てみましょう!!
editを押してみよ...
D (削除)を作る
CRUD
destroy
destroy: function(req, res, next){
User.findOne(req.param('id'), function foundUser(err, user)
{
if(err)return next...
TOP
ページ
GET: /
新規
作成
GET: /user/new
詳細
GET: /user/:id
一覧
GET: /user
編集
GET: /user/edit/:id
削除
GET: /user/destroy/:id
CRUD
...
Good Job!
今日はここまでです!
(というか僕の理解が追いついて無いだけなんですが(笑))
まとめ
今回使ったSailsのまとめ
【基本】
・アクション定義
index: function(req, res, next){
// 操作
}
【Model】//RESTは最初からある
・model全件返す(Modelは任意の名前)
Model.find(callback(err, models))
・1つmodelを見つける
Model.findOne(req.param(‘id’)...
【View】
・JSON返却
res.json({ hoge: hoge });
・view描画
res.view({ hoge: hoge });
【その他】
・リダイレクト
res.redirect(URL);
・よくあるエラー処理
if(...
今日のアウトライン
sailsとは?
Sailsを導入した時の開発の全体像
sailsでCRUDappを作ろう!(1)
sailsの感想
2014/11/24(Mon)
Sailsの感想
非常に考えられている
Sailsの感想
フォルダ分けがきっちりとされていて、構成を
考えなくて住む
コメントが非常に丁寧
sailsを
勉強するときの注意事項
バージョンに気をつける!(--linkerとか無
くなってる)
リソースは基本英語
参考文献
ソース公開してます!https://github.com/igtm/sails-
sample-app1
http://nantokaworks.com/sails0-10-tips/ v0.1.0の
sails新機能まとめ
http...
Sails workshop1
Prochain SlideShare
Chargement dans…5
×

Sails workshop1

1 252 vues

Publié le

This is a slide at in-house sails workshop.

Publié dans : Ingénierie
  • Soyez le premier à commenter

Sails workshop1

  1. 1. Sails WorkShop (1) 立命館大学 経営学部3回生  井口智勝
  2. 2. SailsWorkShop の目的 <for All> Watnowにリアルタイム通信技術を導入する <for One> 取り敢えず、書けるようになること。(スピード重視) ある程度、体系的な知識化もしていく。
  3. 3. Sails WorkShop Menu 1回目:Sailsって何?CRUDappを作ろう! 2回目:Policiesの使い方 ∼sessionや認証∼ 3回目:appをリアルタイム化しよう! 4回目:Sails✕Marionette 5回目:細かい部分の共有など...
  4. 4. 今日のアウトライン sailsとは? Sailsを導入した時の開発の全体像 sailsでCRUDappを作ろう!(1) sailsの感想 2014/11/24(Mon)
  5. 5. sailsとは? node.jsのMVCフレームワーク 2013/3月くらい誕生(github上では2012年) 現在v0.10.2が最新(14/11/22現在)
  6. 6. sailsとは? Socket.io Waterline (ORM部分) lodash (Underscoreとほぼ同じ) less
  7. 7. sailsとは? 設定より規約(CoC) テスト駆動開発(TDD) Don’t repeat yourself リソース指向アーキテクチャー(ROA) REST http://sailsjs.org/#/getStarted
  8. 8. 今日のアウトライン sailsとは? Sailsを導入した時の開発の全体像 sailsでCRUDappを作ろう!(1) sailsの感想 2014/11/24(Mon)
  9. 9. C V MDB CM V Marionette.js (フロントエンド) Cake.php (バックエンド) JSON HandleBars ItemView/CompositeViewModel/Collection これまで
  10. 10. C V MDB CM V Marionette.js (フロントエンド) Cake.php (バックエンド) JSON HandleBars ItemView/CompositeViewModel/Collection これまで
  11. 11. 2つの言語を扱う必要があった。 リアルタイム通信に向いていない(可能ではあ ると思うが) これまで
  12. 12. C V MDB CM V Marionette.js (フロントエンド) Sails.js (バックエンド) JSON HandleBars Model/Collection リアルタイムapp ItemView/CompositeView
  13. 13. C V MDB CM V Marionette.js (フロントエンド) Sails.js (バックエンド) JSON HandleBars Model/Collection リアルタイムapp ItemView/CompositeView
  14. 14. 今日のアウトライン sailsとは? Sailsを導入した時の開発の全体像 sailsでCRUDappを作ろう!(1) sailsの感想 2014/11/24(Mon)
  15. 15. Sailsでappを 作ってみよう! 参考:http://irlnathan.github.io/sailscasts/
  16. 16. アプリ制作の流れ アプリ全体像把握 環境設定・必要ファイル用意(MVC) Controller内を主に解説
  17. 17. 今回作るapp https://github.com/igtm/sails-sample-app1
  18. 18. ページ遷移図 TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id 削除 GET: /user/destroy/:id CRUD
  19. 19. C V MDB Sails.js (バックエンド) リアルタイムapp
  20. 20. アプリ制作の流れ アプリ全体像把握 環境設定・必要ファイル用意(MVC) Controller内を主に解説
  21. 21. 環境設定 npm install -g sails cd 好きなディレクトリへ sails new SailsWorkShop cd SailsWorkShop npm install その後エディタ起動
  22. 22. 環境設定 必要ファイルをダウンロードして下さい! bootstrap,jquery,jquery.validate オリジナルjs,css等 assets内にmove、(dependency内に入れる と、先に読み込まれる) view/layoutをチェッ ク!詳しい設定はtask/pipeline.js内で設定!
  23. 23. controllerとmodel sails generate api user api : controllerとmodelを作るよ!
  24. 24. User.js (model) schema: true, attributes: { name: { type: 'string', required: true }, title: { type: 'string' }, email: { type: 'string', email: true, required: true, unique: true }, encryptedPassword: { type: 'string' } }
  25. 25. module.exports = function(req, res, next){ res.locals.flash = {}; if(!req.session.flash) return next(); res.locals.flash = _.clone(req.session.flash); return next(); }; policies/flash.js作成
  26. 26. View作成 view/userフォルダ作成(user関連) index.ejs edit.ejs new.ejs show.ejs view/staticフォルダ作成(初期ページ) index.ejs(Topページ)
  27. 27. user/index.ejs <div class="container"> <h3>Users</h3> <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Title</th> <th>Email</th> <th></th> <th></th> <th></th> </tr> <% _.each(users, function(user) {%> <tr data-id="<%= user.id %>" data- model="user"> <td><%= user.id %></td> <td><%= user.name %></td> <td><%= user.title %></td> <td><%= user.email %></td> <td><a href='/user/show/<%= user.id %>' class="btn btn-sm btn-primary">Show</a></ td> <td><a href='/user/edit/<%= user.id %>' class="btn btn-sm btn-warning">Edit</a></td> <td><form action="/user/destroy/<%= user.id %>" method="POST"> <input type="hidden" name="_method" value="delete"/> <input type="submit" class="btn btn- sm btn-danger" value="Delete"/> <input type="hidden" name="_csrf" value="<%= _csrf %>"/> </form></td> <!-- <td><a href='/user/destroy/<%= user.id %>' class="btn btn-sm btn- danger">Delete</a></td> --> </tr> <% })%> </table> </div>
  28. 28. <form action="/user/create" method="POST" id="sign-up-form" class="form- signin"> <h2 class="form-signin-heading">Create an account</h2> <input type="text" class="form-control" placeholder="your name" name="name"/> <input type="text" class="form-control" placeholder="your title" name="title"/ > <input type="text" class="form-control" placeholder="email" name="email"/> <input type="password" id="password" class="form-control" placeholder="password" name="password"/> <input type="password" class="form-control" placeholder="password confirmation" name="confirmation"/> <br/> <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create Account"/> <input type="hidden" name="_csrf" value="<%= _csrf %>"/> </form> user/new.ejs
  29. 29. <form action="/user/update/<%= user.id %>" method="POST" class="form-signin"> <h2>編集画面</h2> <input value="<%= user.name %>" name="name" type="text" class="form-control"/> <input value="<%= user.title %>" name="title" type="text" class="form-control"/> <input value="<%= user.email %>" name="email" type="text" class="form-control"/> <input value="編集" type="submit" class="btn btn-lg btn- primary btn-block"/> <input value="<%= _csrf %>" name="_csrf" type="hidden"/> </form> user/edit.ejs
  30. 30. <div class="container"> <h1><%= user.name %></h1> <h3><%= user.title %></h3> <hr> <h3>Contact: <%= user.email %> </h3> <a class="btn btn-medium btn-primary" href="/user/edit/<%= user.id%>">Edit</a> </div> user/show.ejs
  31. 31. <div class="container"> <div class="jumbotron"> <h1>activeOverload</h1> <h2>.....tracking app activity better than the NSA since 1899.</h2> <a href="/user/new" class="btn btn-lg btn-success">sign up now!</a> </div> </div> static/index.ejs
  32. 32. 設定 config/routes内 '/': { view: 'static/index' } config/policies内 // '*': true, '*': ‘flash’ config/csrf内 true config/blueprints内 action rest shortcut をtrue
  33. 33. アプリ制作の流れ アプリ全体像把握 環境設定・必要ファイル用意(MVC) Controller内を主に解説
  34. 34. こっから本題! (コピペせずに書いていくと理解が深 まると思います) CRUDアプリをつくる
  35. 35. C (作成)を作る CRUD
  36. 36. new new : function(req,res{ res.view(); }, /user/newのリクエストでここに来る。 res.view()で自動的にuser/new.ejsに飛ぶ
  37. 37. ここで一回 見てみましょう!! TOP ページ GET: / 新規 作成 GET: /user/new CRUD sails liftでOK
  38. 38. R (表示)を作る CRUD
  39. 39. index // 一覧表示。user全ての配列を取得 index: function(req, res, next){ User.find(function foundUsers (err, users){ if(err) return next(err); res.view({ users: users }); }); },
  40. 40. show // 個別ページ id -> そのidのuserオブジェクトをviewへ送り描画 show: function(req, res, next){ User.findOne(req.param('id'), function foundUser(err, user){ if(err) return next(err); if(!user) return next(); res.view({ user:user }); }); },
  41. 41. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user CRUD ここで一回 見てみましょう!! sails liftでOK /userを見てみよう!
  42. 42. U (編集)を作る CRUD
  43. 43. edit edit: function(req, res){ User.findOne(req.param('id'), function foundUser (err, user){ if(err) return next(err); if(!user) return next(); res.view({ user: user }); }); },
  44. 44. update update: function(req, res, next){ User.update(req.param('id'), req.params.all(), function userUpdated(err){ if(err){ return res.redirect('/user/edit/'+ req.param('id')); } res.redirect('/user/show/' + req.param('id')); }) },
  45. 45. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id CRUD ここで一回 見てみましょう!! editを押してみよう!
  46. 46. D (削除)を作る CRUD
  47. 47. destroy destroy: function(req, res, next){ User.findOne(req.param('id'), function foundUser(err, user) { if(err)return next(err); if(!user) return next("User doesn't exist."); User.destroy(req.param('id'), function userDestroyed(err) { if(err) return next(err); }); res.redirect('/user'); }); }
  48. 48. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id 削除 GET: /user/destroy/:id CRUD CRUD完成!! deleteを押してみよう!
  49. 49. Good Job! 今日はここまでです! (というか僕の理解が追いついて無いだけなんですが(笑))
  50. 50. まとめ
  51. 51. 今回使ったSailsのまとめ 【基本】 ・アクション定義 index: function(req, res, next){ // 操作 }
  52. 52. 【Model】//RESTは最初からある ・model全件返す(Modelは任意の名前) Model.find(callback(err, models)) ・1つmodelを見つける Model.findOne(req.param(‘id’), callback(err, model)) ・アップデート Model.update(req.param(‘id), req.params.all(), callback(err)) ・削除 Model.destroy(req.param(‘id), callback(err)) 今回使ったSailsのまとめ
  53. 53. 【View】 ・JSON返却 res.json({ hoge: hoge }); ・view描画 res.view({ hoge: hoge }); 【その他】 ・リダイレクト res.redirect(URL); ・よくあるエラー処理 if(err) return next(err) if(!model) return next(); 今回使ったSailsのまとめ
  54. 54. 今日のアウトライン sailsとは? Sailsを導入した時の開発の全体像 sailsでCRUDappを作ろう!(1) sailsの感想 2014/11/24(Mon)
  55. 55. Sailsの感想 非常に考えられている
  56. 56. Sailsの感想 フォルダ分けがきっちりとされていて、構成を 考えなくて住む コメントが非常に丁寧
  57. 57. sailsを 勉強するときの注意事項 バージョンに気をつける!(--linkerとか無 くなってる) リソースは基本英語
  58. 58. 参考文献 ソース公開してます!https://github.com/igtm/sails- sample-app1 http://nantokaworks.com/sails0-10-tips/ v0.1.0の sails新機能まとめ http://magnet88jp.hateblo.jp/entry/ 2014/08/10/162358 lift時に123を選ぶときのtips http://hiyokur.hatenablog.com/entry/ 2013/12/17/165140

×