Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sails workshop1

1,258 views

Published on

This is a slide at in-house sails workshop.

Published in: Engineering
  • Be the first to comment

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

×