Sails workshop1

Sails WorkShop (1)

立命館大学経営学部３回生　井口智勝

SailsWorkShop の目的

＜for All＞

Watnowにリアルタイム通信技術を導入する

＜for One＞

取り敢えず、書けるようになること。(スピード重視)

ある程度、体系的な知識化もしていく。

Sails WorkShop Menu

１回目：Sailsって何？CRUDappを作ろう！

２回目：Policiesの使い方～sessionや認証～

３回目：appをリアルタイム化しよう！

４回目：Sails✕Marionette

５回目：細かい部分の共有など．．．

今日のアウトライン

sailsとは？

Sailsを導入した時の開発の全体像

sailsでCRUDappを作ろう！（１）

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

http://e-words.jp/w/O2FRE3839EE38383E38394E383B3E382B0.html

https://lodash.com/docs

sailsとは？設定より規約(CoC)

テスト駆動開発(TDD)

Don’t repeat yourself

リソース指向アーキテクチャー(ROA) ⇒ REST

http://sailsjs.org/#/getStarted

http://sailsjs.org/#/getStarted


sailsとは？



sailsの感想

2014/11/24(Mon)

CV

MDB

CMV

Marionette.js （フロントエンド）

Cake.php （バックエンド）

JSON

HandleBars

ItemView/CompositeViewModel/Collection

これまで

CV

MDB

CMV


Cake.php （バックエンド）

JSON

HandleBars

ItemView/CompositeViewModel/Collection

これまで

２つの言語を扱う必要があった。

リアルタイム通信に向いていない（可能ではあると思うが）

これまで

CV

MDB

CMV


Sails.js （バックエンド）

JSON

HandleBars

Model/Collection

リアルタイムapp

ItemView/CompositeView

CV

MDB

CMV



JSON

HandleBars

Model/Collection


ItemView/CompositeView


sailsとは？



sailsの感想

2014/11/24(Mon)

Sailsでappを

作ってみよう！

参考：http://irlnathan.github.io/sailscasts/

http://irlnathan.github.io/sailscasts/

アプリ制作の流れ

アプリ全体像把握

環境設定・必要ファイル用意(MVC)

Controller内を主に解説

今回作るapphttps://github.com/igtm/sails-sample-app1

http://www.apple.com/jp

https://github.com/igtm/sails-sample-app1

ページ遷移図

TOPページ

GET: / 新規作成

GET: /user/new

詳細

GET: /user/:id

一覧

GET: /user

編集

GET: /user/edit/:id

削除

GET: /user/destroy/:id

CRUD

CV

MDB







環境設定npm install -g sails

cd 好きなディレクトリへ

sails new SailsWorkShop

cd SailsWorkShop

npm install　その後エディタ起動

環境設定必要ファイルをダウンロードして下さい！

bootstrap,jquery,jquery.validate

オリジナルjs,css等

assets内にmove、(dependency内に入れる

と、先に読み込まれる)⇒view/layoutをチェッ

ク！詳しい設定はtask/pipeline.js内で設定！

controllerとmodel

sails generate api user

api : controllerとmodelを作るよ！

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'

}

}

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作成

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>

<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>



</tr>

<% })%>

</table>

</div>

<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

<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

<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

<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

設定config/routes内

'/': { view: 'static/index' }

config/policies内 // '*': true, '*': ‘flash’

config/csrf内 true

config/blueprints内 action rest shortcut をtrue





こっから本題！（コピペせずに書いていくと理解が深

まると思います）

CRUDアプリをつくる

C (作成)を作る

CRUD

new

‘new’ : function(req,res{

res.view();

},

/user/newのリクエストでここに来る。

res.view()で自動的にuser/new.ejsに飛ぶ

ここで一回見てみましょう！！

TOPページ

GET: / 新規作成

GET: /user/newCRUD

sails liftでOK

R (表示)を作る

CRUD

index // 一覧表示。user全ての配列を取得

index: function(req, res, next){

User.find(function foundUsers (err, users){

if(err) return next(err);

res.view({

users: users

});

});

},

show // 個別ページ id -> そのidのuserオブジェクトをviewへ送り描画

show: function(req, res, next){

User.findOne(req.param('id'), function foundUser(err, user){


if(!user) return next();

res.view({

user:user

});

});

},

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(!user) return next();

res.view({

user: user

});

});

},

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')); }) },

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(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'); }); }

TOPページ

GET: / 新規作成

GET: /user/new

詳細

GET: /user/:id

一覧

GET: /user

編集

GET: /user/edit/:id

削除

GET: /user/destroy/:id

CRUD

CRUD完成！！deleteを押してみよう！

Good Job!今日はここまでです！

（というか僕の理解が追いついて無いだけなんですが（笑））

まとめ

今回使ったSailsのまとめ

【基本】

・アクション定義

index: function(req, res, next){

// 操作

}

【Model】//RESTは最初からある

・model全件返す(Modelは任意の名前)

Model.find(callback(err, models))

・１つ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))


【View】

・JSON返却

res.json({ hoge: hoge });

・view描画

res.view({ hoge: hoge });

【その他】

・リダイレクト

res.redirect(URL);

・よくあるエラー処理

if(err) return next(err)

if(!model) return next();



sailsとは？



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://magnet88jp.hateblo.jp/entry/2014/08/10/162358 lift時に123を選ぶときのtips

http://hiyokur.hatenablog.com/entry/2013/12/17/165140

http://nantokaworks.com/sails0-10-tips/

http://magnet88jp.hateblo.jp/entry/2014/08/10/162358

http://hiyokur.hatenablog.com/entry/2013/12/17/165140

Engineering

Sails workshop1