yungshin - csie.iotechccu.csie.io/2014/slides/session2-introduction_to... · 2017-12-01 ·...
TRANSCRIPT
![Page 1: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/1.jpg)
Introduction to Sails.jsyungshin
![Page 2: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/2.jpg)
About Me
• yungshin
• 大學化學系念不下去,碩班跳坑念資工
• III IDEAS
• 上班爬網站,下班寫網站
• 喜愛鑽研前端技術
![Page 3: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/3.jpg)
投資新技術有賺有賠,使用前請先詳閱公開說明書(官方文件)
![Page 4: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/4.jpg)
![Page 5: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/5.jpg)
Sails.js• Web MVC Framework for Node.js
• Auto Routing
• Express based
• Scaffolding
![Page 6: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/6.jpg)
Sails.js• Socket.io support
• Restful blueprint
• Model module, ORM, use Waterline
![Page 7: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/7.jpg)
MVC• M - Model
• V - View
• C - Controller
![Page 8: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/8.jpg)
MVC• User see the views
• User use controllers
• Controllers manipulate models
• Models update views
![Page 9: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/9.jpg)
Get Started
![Page 10: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/10.jpg)
Get Started• Install Command-line tools
sudo npm install -g sails
![Page 11: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/11.jpg)
Get Started• Create a new app:
!
• Now lift the server:
!
• See the default home page:
sails new testProject
cd testProject sails lift
http://localhost:1337/
![Page 12: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/12.jpg)
Sails.js Command Line• Generate Model and Controller
• sails generate [Name]
• Generate Controller
• sails generate controller [Name] [Action]…
• Ex: sails generate controller post create find update destroy
• Path: api/controller
![Page 13: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/13.jpg)
Sails.js Command Line• Generate Model
• sails generate model [Name] [Attribute:Type]…
• Ex: sails generate model person firstName:string lastName:string age:integer birthDate:date
• Path: api/model
![Page 14: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/14.jpg)
Controller
![Page 15: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/15.jpg)
Controller• http://sailsjs.org/#!documentation/controllers
• Think of controllers as being the middleman between your model and your views.
sails generate controller comment create destroy tag like
![Page 16: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/16.jpg)
Controller
![Page 17: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/17.jpg)
Controller• generate routes would be the following: (Action blueprints)
• /comment/create
• /comment/destroy
• /comment/tag
• /comment/like
![Page 18: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/18.jpg)
Controller• REST blueprints
• You can disable it in “config/controller.js”
• find(id) -> GET /:controller/:id
• create() -> POST /:controller
• update(id) -> PUT /:controller/:id
• destroy(id) -> DELETE /:controller/:id
![Page 19: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/19.jpg)
Request and Response• If you need to dive deeper, check out the express guide.
![Page 20: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/20.jpg)
Request and Response• req.param()
• /:controller/:action/:foo
• var foo = req.param(“foo”);
• req.body.val
• form data, query string
![Page 21: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/21.jpg)
Request and Response• res.view([view, options[, fn]])
• res.send(body|status[, headers|status[, status]])
• res.json(obj[, headers|status[, status]])
• res.redirect(url[, status])
![Page 22: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/22.jpg)
Routes
![Page 23: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/23.jpg)
Routes• http://sailsjs.org/#!documentation/routes
• routes urls to controllers/actions
• Path: “config/routes.js”
![Page 24: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/24.jpg)
Routes• static routes
!
!
!
• controller name
• controller action (function)
/post: { controller: ‘PostController', action: 'findAll' }
![Page 25: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/25.jpg)
Routes• route point to a view
!
!
!
• the followings point to the “view/home/index.ejs”
‘/': { view: ‘home/index’ }
![Page 26: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/26.jpg)
Routes• set routes for particular http verbs
'POST /signup': { controller: controller_name, action: controller_action }
![Page 27: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/27.jpg)
Model
![Page 28: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/28.jpg)
Model• http://sailsjs.org/#!documentation/models
• Path: api/models
• ORM -> Waterline
• multiple adapters for databases
![Page 29: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/29.jpg)
Model
module.exports = { attributes: { firstName: ‘STRING', lastName: ‘STRING', age: { type: ‘INTEGER', max: 150, required: true } } };
![Page 30: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/30.jpg)
Model
module.exports = { attributes: { firstName: ‘STRING', lastName: ‘STRING', age: { type: ‘INTEGER', max: 150, required: true } } };
attribute name
![Page 31: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/31.jpg)
Model
module.exports = { attributes: { firstName: ‘STRING', lastName: ‘STRING', age: { type: ‘INTEGER', max: 150, required: true } } };
attribute name
attribute type
![Page 32: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/32.jpg)
Model
module.exports = { attributes: { firstName: ‘STRING', lastName: ‘STRING', age: { type: ‘INTEGER', max: 150, required: true } } };
attribute name
attribute type
validation
![Page 33: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/33.jpg)
Model
Person.create({ firstName: ‘foo', lastName: ‘bar', age: 18 }).done(function(err, post) { if(err) { /* ... */ } ! /* ... */ });
![Page 34: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/34.jpg)
View
![Page 35: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/35.jpg)
View• http://sailsjs.org/#!documentation/views
• render pages
• Path: views/…
• Supports:
• ejs (default) (http://embeddedjs.com/)
• jade (http://jade-lang.com/)
• ...
![Page 36: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/36.jpg)
View• render views in controller
• response.view()
return res.view("home/index", { title: "Foo", posts: post });
![Page 37: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/37.jpg)
Asset Management
![Page 38: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/38.jpg)
Asset Management• Path: assets/…
• css, js, images
• Grunt.js
• less, coffeescript
• concat, cssmin, uglify, …
![Page 39: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/39.jpg)
Pros & Cons• Pros
• Use command line to generate controllers and models
• Developing routes / Restful API is fast
• other good things: policy…
• Cons
• Documentation (especially waterline)
• No support for associations
• Devs have not been very responsive lately
![Page 40: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/40.jpg)
Conclusion• Sails.js is good mvc framework for Node.js
• Building routes / Restful API is fast
![Page 41: yungshin - csie.iotechccu.csie.io/2014/slides/Session2-Introduction_to... · 2017-12-01 · Sails.js • Socket.io support • Restful blueprint • Model module, ORM, use Waterline](https://reader036.vdocuments.mx/reader036/viewer/2022063006/5fb7c93d3ed63e627f30ada3/html5/thumbnails/41.jpg)
?