intermediate rails week-1 #2

54
Rails #2

Upload: xditerails

Post on 24-Jun-2015

591 views

Category:

Technology


3 download

DESCRIPTION

http://learn-rails.today/workshops/intermediate 第一堂投影片第二部分

TRANSCRIPT

Page 1: INTERMEDIATE RAILS  Week-1 #2

Rails #2

Page 2: INTERMEDIATE RAILS  Week-1 #2

http://github.com/rocodev/artstore

( 請⼤大家 fork ⼀一下 )

Page 3: INTERMEDIATE RAILS  Week-1 #2

PlainTaskSublime ⼩小⼯工具

Page 4: INTERMEDIATE RAILS  Week-1 #2
Page 5: INTERMEDIATE RAILS  Week-1 #2

安裝⽅方式

• 打開 SublimtText

• ⌘ + shift + p ( install package )

• 選擇 PlainTasks

( 請⼤大家時間裝⼀一下 )

Page 6: INTERMEDIATE RAILS  Week-1 #2

⼀一些技巧

• 「檔名為 TODO」或者是「副檔名為 TODO 」的會⾃自動變⿈黃筆記本。

• ⌘ + i (新增 TODO)

• ⌘ + d (完成 TODO)

• ⌘ + c (取消 TODO)

( 請⼤大家把剛剛的 TODO 貼到這裡⾯面 )

Page 7: INTERMEDIATE RAILS  Week-1 #2

(分隔線)

Page 8: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣

2. ⾝身為商家的管理者,我要能夠在後台設定權限,權限分成管理者以及消費者

3. 作為⼀一個消費者,我要在前台能夠找到商品並結賬

Page 9: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣!! - 管理者必須要有⼀一個後台! - 後台必須要可以新增產品! - 產品內容必須要有標題、⽂文字、數量、圖⽚片!!

Page 10: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣!! - 管理者必須要有⼀一個後台 ( /admin/products/)! - 後台必須要可以新增產品! - 產品內容必須要有標題、⽂文字、數量、圖⽚片!!

rails g controller admin::products

Page 11: INTERMEDIATE RAILS  Week-1 #2

http://artstore.dev/admin/products

Page 12: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣!! - 管理者必須要有⼀一個後台! - 後台必須要可以新增產品! - 產品內容必須要有標題、⽂文字、數量、圖⽚片!!

rails g model product title:string description:text quantity:integer

Page 13: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣!! - 管理者必須要有⼀一個後台! - 後台必須要可以新增產品! - 產品內容必須要有標題、⽂文字、數量、圖⽚片!!

Page 14: INTERMEDIATE RAILS  Week-1 #2

http://artstore.dev/admin/products/new

strong_parameters

Page 15: INTERMEDIATE RAILS  Week-1 #2

app/views/admin/products/new.html.erb

Page 16: INTERMEDIATE RAILS  Week-1 #2
Page 17: INTERMEDIATE RAILS  Week-1 #2

( 請動⼿手做把 index 完成)

Page 18: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣

2. ⾝身為商家的管理者,我要能夠在後台設定權限,權限分成管理者以及消費者! - ⾝身為管理者,才可以進⼊入後台! - ⾝身為管理者,必須要登⼊入且是 admin ! - 管理者⾝身份必須要被分為 admin / user

3. 作為⼀一個消費者,我要在前台能夠找到商品並結賬

Page 19: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣

2. ⾝身為商家的管理者,我要能夠在後台設定權限,權限分成管理者以及消費者! - ⾝身為管理者,才可以進⼊入後台! - ⾝身為管理者,必須要登⼊入且是 admin ! - 管理者⾝身份必須要被分為 admin / user

3. 作為⼀一個消費者,我要在前台能夠找到商品並結賬

Page 20: INTERMEDIATE RAILS  Week-1 #2

(安裝 devise)

Page 21: INTERMEDIATE RAILS  Week-1 #2

Gemfilebundle install

Page 22: INTERMEDIATE RAILS  Week-1 #2

rails g devise:install

rails g devise user

rake db:migrate

Page 23: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣

2. ⾝身為商家的管理者,我要能夠在後台設定權限,權限分成管理者以及消費者! - ⾝身為管理者,才可以進⼊入後台! - ⾝身為管理者,必須要登⼊入且是 admin ! - 管理者⾝身份必須要被分為 admin / user

3. 作為⼀一個消費者,我要在前台能夠找到商品並結賬

Page 24: INTERMEDIATE RAILS  Week-1 #2

app/controllers/admin/products_controller.rb

Page 25: INTERMEDIATE RAILS  Week-1 #2

Version 3!!1. ⾝身為商家的管理者,我要能夠在後台上架我的東⻄西,並設定能夠販賣

2. ⾝身為商家的管理者,我要能夠在後台設定權限,權限分成管理者以及消費者! - ⾝身為管理者,才可以進⼊入後台! - ⾝身為管理者,必須要登⼊入且是 admin ! - 管理者⾝身份必須要被分為 admin / user

3. 作為⼀一個消費者,我要在前台能夠找到商品並結賬

Page 26: INTERMEDIATE RAILS  Week-1 #2

app/controllers/admin/products_controller.rb

Page 27: INTERMEDIATE RAILS  Week-1 #2

app/controllers/application_controller.rb

Page 28: INTERMEDIATE RAILS  Week-1 #2

app/models/user.rb

Page 29: INTERMEDIATE RAILS  Week-1 #2

rails g migration add_is_admin_to_user

Page 30: INTERMEDIATE RAILS  Week-1 #2
Page 31: INTERMEDIATE RAILS  Week-1 #2

u = User.new(:email=> “[email protected]”,:password => “12345678”, :password_confirmation => “12345678”)

u = User.new(:email=> “[email protected]”,:password => “12345678”, :password_confirmation => “12345678”)

u.save

u.is_admin = true

u.save

rails c

Page 32: INTERMEDIATE RAILS  Week-1 #2

http://artstore.dev/admin/products/new

Page 33: INTERMEDIATE RAILS  Week-1 #2
Page 34: INTERMEDIATE RAILS  Week-1 #2

(不過能登⼊入不能登出怎麼辦)

Page 35: INTERMEDIATE RAILS  Week-1 #2

app/views/layout/application.html.erb

Page 36: INTERMEDIATE RAILS  Week-1 #2

(分隔線)

Page 37: INTERMEDIATE RAILS  Week-1 #2

⺫⽬目前的版⾯面超醜的

Page 38: INTERMEDIATE RAILS  Week-1 #2

(分隔線)

Page 39: INTERMEDIATE RAILS  Week-1 #2

Bootstrap

Page 40: INTERMEDIATE RAILS  Week-1 #2
Page 41: INTERMEDIATE RAILS  Week-1 #2

Gemfile

Page 42: INTERMEDIATE RAILS  Week-1 #2

app/assets/stylesheets/application.css

asset pipeline mount

Page 43: INTERMEDIATE RAILS  Week-1 #2

app/assets/stylesheets/application.css

Page 44: INTERMEDIATE RAILS  Week-1 #2

作業 • 寫後台的 User Story

• 實作圖⽚片上傳 carrierwave

• ⽤用 Bootstrap 做⼀一個「有 Nav bar 」的 layout

• 使⽤用 simple_form 換掉 form

• products/show, products,index 也請實作

Page 45: INTERMEDIATE RAILS  Week-1 #2

提⽰示 #1• User Story

• ⽤用 Plantask 拆

• 儘量列出你想得到細節

Page 46: INTERMEDIATE RAILS  Week-1 #2

提⽰示 #2• 上傳圖⽚片

• 安裝 carrierwave

• product has_many:photos

• photos mount ImageUploader

Page 47: INTERMEDIATE RAILS  Week-1 #2

提⽰示 #3• Bootstrap

• layout 在網路上找

• 要有 Login / Logout 的 bar

Page 48: INTERMEDIATE RAILS  Week-1 #2

提⽰示 #3• Simpleform

• simpleform with bootstrap form initializer

Page 49: INTERMEDIATE RAILS  Week-1 #2

提⽰示 #4• Product # show

Page 50: INTERMEDIATE RAILS  Week-1 #2

(分隔線)

Page 51: INTERMEDIATE RAILS  Week-1 #2

交作業

Page 52: INTERMEDIATE RAILS  Week-1 #2

Github pull-request• fork repo

• git checkout -b store-v1

• git push origin store-v1

• 對 rocodev/artstore 拉 pull-request

• 參考有誰拉了 pull-request

Page 53: INTERMEDIATE RAILS  Week-1 #2

解答(禮拜六給)

Page 54: INTERMEDIATE RAILS  Week-1 #2

(分隔線)