HackNTU-2014.pdf

Transcript

1. 台⼤大⿊黑客松 HackNTU Ruby on Rails Workshop 2014.6.21 1
2. Mars Chen Founder @ scoopr.in Founder @ 5fpro.com Speaker @ 5ruby.tw Coach @ RailsGirls.tw @marsz everywhere Ruby on Rails developer 2
3. Agenda 環境設定 Linux & Rails 指令 Database 概念 Rails - 鷹架 ( scaffold ) 使⽤用 Rails - view 的修改 3
4. 環境設定 http://nitrous.io 線上的虛擬完整開發環境 跨平台，只要有瀏覽器就能⽤用 省去複雜繁瑣的環境安裝程序 4
5. nitrous.io (cont.) 註冊 https://www.nitrous.io/ 5
6. nitrous.io (cont.) step 2 - 新增 box 6
7. nitrous.io (cont.) step 3 - 選擇模版 (template) 7
8. nitrous.io (cont.) step 4 - 啟動 8
9. nitrous.io (cont.) 9
11. Linux 指令 透過指令能⾃自動化的完成許多⼯工作 Mac : 終端機 Windows : 命令列 (開始 -> 執⾏行 -> cmd ) 11
12. Linux 指令 (cont.) pwd 列出⺫⽬目前所在的⺫⽬目錄位置 `/` 代表根⺫⽬目錄 12
13. Linux 指令 (cont.) ls 列出⺫⽬目前所在⺫⽬目錄下的⼦子⺫⽬目錄和檔案 try `ls -la` 13
14. Linux 指令 (cont.) cd 進⼊入到某個⺫⽬目錄內 14
15. Linux 指令 (cont.) cd .. 回到上⼀一層⺫⽬目錄 15
16. Linux 指令 (cont.) 絕對路徑 (demo) 16
17. Linux 指令 (cont.) 相對路徑 (demo) 必須先知道⺫⽬目前在哪裡 17
18. 其他 Linux 指令 cp : 拷⾙貝檔案 mv : 移動或更名檔案 rm : 刪除檔案或⺫⽬目錄 mkdir : 建⽴立⺫⽬目錄 18
19. Linux 指令⼩小技巧 ↑ ↓ 可以翻之前下過的指令 Ctrl + A , Ctrl + E 可以把命令列的游標跳 到⾏行頭或⾏行尾 Tab 可以⾃自動完成路徑
20. rails new rails new [專案名稱] 專案名稱限⽤用半型英數, underline, dash 專案名稱不能是 test 在所在的⺫⽬目錄下建⽴立[專案名稱]的⺫⽬目錄，並且 於該⺫⽬目錄內產⽣生檔案 例如: rails new app 20
21. rails server rails server 啟動 rails server 必須 cd 到 rails 專案⺫⽬目錄內才能執⾏行 21
22. rails server (cont.) 成功啟動後的 server 可以透過 port 3000 進⾏行預覽 Mac or Win : http://127.0.0.1:3000 nitrous.io 參考以下⽅方式預覽 22
23. rails server (cont.) 因 rails server 啟動後就會掛著了，所以若 要再執⾏行其他指令必須另開命令列視窗 Ctrl + C 可以停⽌止 rails server，回復到可 執⾏行指令的狀態 23
24. rails scaffold (demo) rake db:create ! rails generate scaffold topic title:string description:text …… …… rake db:migrate ! rails server ! http://xxxxx/topics 24
25. Rails 指令簡寫 “rails g” 相當於 “rails generate” “rails s” 相當於 “rails server”
26. Database 概念 名詞解釋: Table Column Database 範例: http://goo.gl/dk4Ns3 26
27. Database 概念 (cont.) Data Types integer 1,2,3 float 3.14, 9.2, 0.92 string “123”, “abc” text “123”, “abc” boolean true / false, 1 / 0 date 2014-06-20 datetime 2014-06-20 12:00 27
28. Database 概念 (cont.) 資料庫關聯 table 與 table 之間的關係 ⼀一對多 與 多對多 範例 http://sql.5fpro.com/erds/2?keyword=RB http://goo.gl/WobHJw 28
29. Rails 觀念篇 MVC (Model View Controller) ! ! ! ! 來源: http://ihower.tw/rails3/intro.html 29
30. Rails Scaffold ⼀一條指令，告訴 rails 欲建⽴立的 table 以及 column 後，就幫你把對應的 MVC 程式碼建 ⽴立起來。 # 格式 rails generate scaffold [model name] [column]:[data type] [column]:[data type] … ! # 範例 rails generate scaffold topic title:string description:text 30
31. scaffold 的前置作業 由於 rails 和 database 是各⾃自獨⽴立運作 的，因此對於 database 的修改是透過 rails 下指令執⾏行的 # 建⽴立 database, 僅需在專案建⽴立後執⾏行⼀一次即可 rake db:create ! # 刪除 database, 初學 rails 還不熟悉 database migration, 需要砍掉重練時, 這個指令能派上⽤用場 :p rake db:drop 31
32. DB Migration ⼀一個 migration 相當於對 DB schema 的變 更，例如新增 table、新增 column、刪除 table 等 rails 產⽣生 migration 後必須執⾏行後，才能讓 DB 實際的結構與程式碼同步 (指令在下⼀一⾴頁) migration 檔位於專案⺫⽬目錄下的: /db/migrate 32
33. DB Migration (cont.) 執⾏行 scaffold 後會產⽣生 create table 的 migration 檔，所以若要能正常運作，必須 跑完 migration 才算是完成 rake db:migrate ! # 執⾏行⼀一次就能把還沒跑過的 migration 都跑完，且重複⾄至 ⾏行也不⽤用擔⼼心重複跑 migration 33
34. DB Migration (cont.) 新⼿手問題排除: 因指令打錯等問題導致 rake db:migrate 頻頻噴錯 砍掉重練: 砍 DB => 建 DB => 跑 migrate rake db:drop rake db:create rake db:migrate 34
35. DB Migration (cont.) 更詳細的 DB migration 參考連結 [中] http://ihower.tw/rails3/migrations.html [中] http://guides.ruby.tw/rails3/ migrations.html [英] http://guides.rubyonrails.org/ migrations.html 伍樓專業的內部訓練教材 https://5fpro.hackpad.com/ Rails-DB-migration-Y3iAwXp5vzR 35
36. 再看⼀一次 scaffold rake db:create ! rails generate scaffold topic title:string description:text …… …… rake db:migrate ! rails server ! http://xxxxx/topics 36
37. scaffold 問題排除 (cont.) Q: rails generate scaffold … 打錯字怎麼辦? A: 已經跑了 migrate 的話: rake db:rollback rails destroy scaffold topic A: 還沒跑過 migrate 的話: rails destroy scaffold topic 37
38. DB migration 補充說明 db/schema.rb 可以看到⺫⽬目前 migrate 後的 DB 架構 每次 rake db:migrate 後可以查看 schema.rb 可以根據版本號知道⺫⽬目前是跑到哪個 migration rake db:rollback 會反向操作最後⼀一個已經執 ⾏行過的 migration
39. Rails 的路由 (route) # config/routes.rb resources :topics ! # 網址 http://xxxxx/topics # 路徑 app/views/topics/index.html.erb ! # 網址 http://xxxxx/topics/new # 路徑 app/views/topics/new.html.erb ! # 網址 http://xxxxx/topics/123/edit # 路徑 app/views/topics/edit.html.erb ! # 網址 http://xxxxx/topics/123 # 路徑 app/views/topics/show.html.erb 39
40. View & Layout Layout 是⽤用於網⾴頁整體的 view，網站最後呈 現的⾴頁⾯面內容是載⼊入 layout view 的結果 通常 Layout 是⽤用來放網⾴頁的 global 共⽤用區塊 以及 meta 資訊，例如側邊欄、header、 footer layout 檔位於 /app/views/layouts 預設的 layout 為 application.html.erb 40
41. Request Flow in Rails http://xxxxx/topics 到 config/routes.rb match 網址 ! app/controllers/topics_controller.rb 執⾏行 controller 內的⼯工作，例如呼叫 model 存取 DB 資料 讀取 view : app/views/index.html.erb 把讀取的 view 載⼊入到 layout (application.html.erb) 最 後輸出 resources :topics 41
42. Demo Time 修改 view 修改 layout 並且到不同的⾴頁⾯面看看 修改 routes.rb 42
43. Rails Route 的參考資料 [⼯工商] 伍樓專業內部教材 https://5fpro.hackpad.com/Routing-- LKb04YGy8Vo [中] http://ihower.tw/rails3/routing.html [英] http://guides.rubyonrails.org/ routing.html 43
44. Rails View Requirements HTML erb 語法 rails helper 應⽤用 link_to image_tag 44
45. HTML / CSS 學習資源 http://www.codecademy.com/tracks/web CodeCademy for HTML / CSS http://htmledit.squarefree.com/ HTML 線上編輯 http://jsfiddle.net/ HTML + CSS + JS 線上編輯 45
46. HTML 語法說明 <a href=“http://google.com” target=“_blank” class=“link”>Click ME</a> <img src=“xxxxxx” class=“image” /> ! 1. <a> 是標籤, 有開就有關。<img> 也是標籤，直接開 關。主要看該標籤的性質是否有需要包內容。 2. href, target, src, class都是標籤屬性，雙引號內則是該 屬性的值。 3. Click ME 則是該標籤所包住的內容，會對應出該標籤設定 呈現的結果。 4. 不同的標籤有其對應的屬性，例如 href 只在 <a> 有效。 5. 不同的標籤也有相同的共⽤用屬性。 6. 有些屬性是必備的，有些則可有可無。 46
47. HTML 基本標籤 # 超連結 <a href=“http://www.google.com”>Click Me</a> ! # 換⾏行, 注意: ⼀一般的 enter 在 HTML 輸出時是不會換⾏行的 <br /> ! # 段落⽂文字 <p> …… </p> ! # 標題⽂文字 <h1> …… </h1> <h2> …… </h2> … <h6> …… </h6> 47
48. HTML 基本標籤 (cont.) #圖⽚片 <img src=“http://www.google.com/pic.png” /> ! # 粗體 <b> … </b> ! # 斜體 <i> … </i> ! 48
49. HTML 基本標籤 (cont.) #表格 ! <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 49
50. ERB 語法 [⼯工商] 伍樓專業內部教材 http://goo.gl/4O5Ssd <% %> 和 <%= %> link_to 50
51. Demo Time 修改 rails 裡 view 和 layout 修改 <table> 修改 link_to 51
52. 進階 Demo 透過套件安裝以及資料庫關聯實作⼀一對多下拉選單 投票議題可以選擇分類 步驟 安裝 gem “simple_form” 建⽴立分類 model (category) 的 scaffold 新增 migration 讓 topic 對 category 進⾏行關聯 修改 controller (permit) 和 view 52
53. 安裝 gem ‘simple_form’ ! ! ! ! 官⽅方說明⽂文件 https://github.com/plataformatec/ simple_form # Gemfile ! gem ‘simple_form’ ! # 專案⺫⽬目錄下 ! bundle install 53
54. 建⽴立分類的 model 分類 model 名稱為 “category” # 專案⺫⽬目錄下 ! # 建⽴立 category 的 scaffold 並且順便關聯 topic ! rails generate scaffold category name:string ! # 跑 migration ! rake db:migrate 54
55. 關聯 model # 專案⺫⽬目錄下... # 建⽴立 migration 檔, 透過指令順便追加欄位 rails generate migration add_category_to_topics category:references ! # 找到產⽣生的 db/xxxxxx_ add_category_to_topics.rb ! def change add_reference :topics, :category, index: true end ! # 執⾏行 migration ! rake db:migrate 55
56. 關聯 model (cont.) # 找到 app/models/topic.rb 加⼊入⿈黃⾊色 ! class Topic < ActiveRecord::Base belongs_to :category end ! ! # 除了 DB 跑了 migration 把關聯的欄位建⽴立起來之外 # model 也必須寫程式進⾏行程式邏輯上的關聯 56
57. 修改 controller # app/controllers/topics_controller.rb # 在檔案尾端 ! def topic_params params.require(:topic).permit(:title, :description, :category_id) end ! ! # 這⾏行主要在防⽌止傳遞多餘的資訊對 model 造成安全性上的 更新，因為我們增加了關聯的欄位，所以在此開放對該欄位的 更新。 ! # [⼯工商] 更多資訊可參考: https://5fpro.hackpad.com/ cVwoWsm05JY?r=0 57
58. 修改 view # app/views/topics/_form.html.erb ! <%= form_for(@topic) do |f| %> # 改為 <%= simple_form_for(@topic) do |f| %> # 改⽤用套件所以提供的⽅方式來快速產⽣生關聯後的下拉選單 ! # 加⼊入以下 <%= f.association :category %> # 這是下拉選單的內容，可以塞在 simple_form_for 內 ! # 啟動 rails server 預覽 rails server ! http://xxxxx/categories/new http://xxxxx/topics/new 58
59. 修改 view (cont.) # app/views/topics/show.html.erb # 顯⽰示分類名稱 <%= @topic.category.name %>
61. Homework BBS 系統 看板 (board) 的 CRUD 看板都會有⼀一個分類 (category) User 可以在看板下發表⽂文章 (post) 每個看板可以⾃自訂分類 (label) 每個看板可以選擇⼀一位 User 做為板主 每篇⽂文章都可以推⽂文 (comment) 每則推⽂文可以選擇推或噓
62. 補充資料 - Ruby 語⾔言 https://5fpro.hackpad.com/Ruby-programming- language--Z0ba1Sr0FAf [⼯工商] 伍樓專業的內部訓練教材 http://tryruby.org http://www.codecademy.com/zh/tracks/ruby [中] http://guides.ruby.tw/ruby/ [中] http://ihower.tw/rails3/files/ruby-intro.pdf [英] http://rubylearning.com/satishtalim/tutorial.html 62
63. 補充資料 - Git / GitHub https://www.codeschool.com/ courses/try-git https://www.codeschool.com/ courses/git-real https://try.github.io/ 63
64. 更多的 Rails 學習資源 https://5fpro.hackpad.com/Ruby-on- Rails--V2tKSzJ31TT [⼯工商] 伍樓專業的內部訓練教材 http://guides.rubyonrails.org/ http://railsgirls.tw/app/ 64
65. Meetups & Workshops LTRT (Let’s Try Rails Tuesday) 每週⼆二 19:00 @ makerbar (捷運忠孝新⽣生) http://ltrt.kktix.cc/ 五倍紅寶⽯石 http://5xruby.tw 專業課程，學員招募中 Rails 新⼿手村 meetup https://www.facebook.com/groups/670532946312104/ 每週四 19:30 @ ⽥田中園 光華店 (捷運忠孝新⽣生) 65
66. Rails 相關社群 Ruby Taiwan https://www.facebook.com/groups/142197385837507/ 不定期公布 Ruby Tuesday 和 Taipei.rb 的時間 Ruby on Rails 讀書會 https://www.facebook.com/groups/208890269174940/ Rails 新⼿手村 https://www.facebook.com/groups/670532946312104/ 66
67. We are hiring Fulltime iOS developer 67 Internship Ruby on Rails developer iOS developer Android developer
68. Thanks 68