Rails Camp

Information Technology Association Club - ITAC

Transcript

1. 邁向鐵道⼯工⼈人之路路 Speaker:Eric Wu
2. Eric (@eric0324) • C++ • Ruby • Ruby on Rails • Android • PHP • Python • JavaScript • One Piece • FB:fb.me/eric0324
3. 招募鐵道⼯工注意事項 • 勇於發問：碰到任何問題，別慌張！歡迎在活動中舉 ⼿手問⼯工⼈人，讓我們⼀一起解決。 • 持之以恆：精通⼀一項技藝需要持續練習與恆⼼心，寫程 式也是如此，遇到問題請別灰⼼心。 • 享受其中： 玩的開⼼心！ 如果妳沒有享受寫程式的過 程，那這也許不是妳的菜。
4. 招募鐵道⼯工注意事項 為了了確保鐵路路⼯工⼈人的順利利，我們提供你⼀一個好的清單。 任務⼀一 任務⼆二 任務三
5. 環境設定 (for Windows)
6. 環境設定 • 下載 RailsInstaller(http://railsinstaller.org/) • 使⽤用預設選項，⼀一直按下⼀一步完成安裝
7. 更更新 RubyGems 下載檔案 https://drive.google.com/open? id=0B2MD7C4KUaERbGlWZkdfb0NoS0k
8. 更更新 RubyGems 解壓縮後，在⽬目錄下執⾏行行 ruby setup.rb
9. 認識⼯工具 • 編輯器 • Sublime、TextAtom、Bracketst、Vim 以及 Emacs都是你 可以⽤用來來寫程式的好⼯工具。 • 命令提⽰示字元 • 啟動 Rails 伺服器與執⾏行行命令的好夥伴。 • 瀏覽器 • 火狐、Safari、Chrome可以⽤用來來預覽你的網站。
10. 環境設定 你會需要⼀一個⽂文字編輯器來來編碼，我們推薦： • Sublime Text • Atom • Brackets • 或是其他
11. 環境設定 現在我們要確認 Rails 有沒有安裝成功，試試在命令提 ⽰示字元輸入下⾯面的命令： rails new ITACrails
12. 環境設定 太好了了！ 你已經完成設定， 並且創建了了你的第⼀一個網站！ 你不相信？
13. 社員招募中
14. 第⼀一個網站
15. 建立網站 rails new ITACrails 剛剛我們好像做了了...
16. 建立網站 所以，我們可以使⽤用 cd 切換到 Rails APP 資料夾 cd ITACrails
17. 建立網站 rails server 在瀏覽器打開 http://localhost:3000 應該會看到 "Welcome aboard" 的⾴頁⾯面 代表網站產⽣生成功了了！
18. 建立網站 在終端按 CTRL-C 來來關閉伺服器。
19. 建立 Idea Scaffold 使⽤用 Rails 內建的 Scaffold 功能來來起步。 讓我們可以： 列列出、新增、移除、編輯、檢視 idea。 rails generate scaffold idea name:string description:text picture:string
20. 建立 Idea Scaffold 需要執⾏行行⼀一些指令，來來更更新資料庫。 rake db:migrate
21. 建立 Idea Scaffold 重新啟動伺服器 到瀏覽器打開 http://localhost:3000/ideas 到處玩耍⼀一下！
22. 設計 糟糕！ 網站現在看起來來不太專業。 讓我們來來妝扮妝扮。 試試 Bootstrap。
23. 設計 打開 app/views/layouts/application.html.erb，找到這⾏行行 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 在這⾏行行上⾯面加入 <link rel="stylesheet" href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
24. 設計 並將這⾏行行 <%= yield %> <div class="container"> <%= yield %> </div> 換成
25. 設計 讓我們也加入選單與 footer 到⾴頁⾯面吧。 在同⼀一個檔案裡，<body> 標籤下⾯面，加入 <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">The Idea app</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> </ul> </div> </div> </nav>
26. 設計 在 </body> 之前，加入 <footer> <div class="container"> ITAC Rails 2015 </div> </footer> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/ bootstrap.min.js"></script>
27. 設計 footer { margin-top: 100px; } td { text-align: center; padding-left: 10px; } th { border-bottom: 1px solid #DDD; padding- left: 20px; } 改變⼀一下 ideas 表格的風格。 打開 app/assets/stylesheets/application.css 到最下⾯面加入
28. 加入圖片上傳 gem 'sqlite3' ⽤用編輯器打開Gemfile，找到這⾏行行 下⾯面加入 gem 'carrierwave' 命令提⽰示字元執⾏行行 bundle
29. 加入圖片上傳 ⼀一定要重新啟動 Rails 伺服器！ ⼀一定要重新啟動 Rails 伺服器！ ⼀一定要重新啟動 Rails 伺服器！ 因為需要載入剛剛加入的函式庫。
30. 加入圖片上傳 我們需要產⽣生處理理上傳的相關程式 rails generate uploader Picture
31. 加入圖片上傳 打開 app/models/idea.rb 並在這⾏行行下⾯面 class Idea < ActiveRecord::Base 加入 mount_uploader :picture, PictureUploader
32. 加入圖片上傳 打開 app/views/ideas/_form.html.erb 將這⾏行行 <%= f.text_field :picture %> 改成 <%= f.file_field :picture %>
33. 加入圖片上傳 打開 app/views/ideas/show.html.erb 並將這兩兩⾏行行 <strong>Picture:</strong> <%= @idea.picture %> 改成 <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
34. 調整路路由 打開 config/routes.rb 在第⼀一⾏行行下⾯面加入 root to: redirect('/ideas') ⽤用瀏覽器打開網站的根⽬目錄，看看有沒有改變。
35. 廣告時間 台北的風，混雜著六百多萬⼈人⼝口， 看似平靜的城市，其實充滿了了未 知的資訊，現在你只有打開裝置 的gps功能後，立刻查詢！ 開⾞車車吧 台北 是 ITAC 在 HackNTU 2015 的作品 想跟我們⼀一起出征？活動後火速聯聯絡⼯工⼈人！
36. 加入留留⾔言
37. 建立 Comment Scaffold 有留留⾔言者的姓名、留留⾔言內容以及給哪個 idea 留留⾔言 rails g scaffold comment user_name:string body:text idea_id:integer 在資料庫建立 comment rake db:migrate
38. 建立 Model 的 Relation 要確定 Rails 知道 ideas 與 comments 之間的關係 打開 app/models/idea.rb，在這⾏行行的後⾯面： class Idea < ActiveRecord::Base 加入 has_many :comments
39. 建立 Model 的 Relation ⼀一個 comment 也需要知道它⾃自⼰己屬於那個 idea。 打開 app/models/comment.rb，在這⾏行行的後⾯面： class Comment < ActiveRecord::Base 加入 belongs_to :idea
40. 加入留留⾔言表單 打開 app/views/ideas/show.html，並在 image_tag 之後 <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %> 加入 <h3>Comments</h3> <% @comments.each do |comment| %> <div> <strong><%= comment.user_name %></strong> <br /> <p><%= comment.body %></p> </div> <% end %> <%= render 'comments/form' %>
41. 加入留留⾔言表單 打開 app/controllers/ideas_controller.rb 在 show action 新增這⾏行行 @comments = @idea.comments.all @comment = @idea.comments.build
42. 加入留留⾔言表單 打開 app/views/comments/_form.html.erb 並在這段程式後⾯面： <div class="field"> <%= f.label :body %><br /> <%= f.text_area :body %> </div> 加入 <%= f.hidden_field :idea_id %>
43. 加入留留⾔言表單 接下來來移除這段程式碼 <div class="field"> <%= f.label :idea_id %><br> <%= f.number_field :idea_id %> </div> 就這麼簡單！
44. Bootstrap 現代化設計
45. 現在 app 執⾏行行的很好， 但看起來來仍像是⽤用 Scaffold 產⽣生出來來的。 讓我們加點設計到，讓它看起來來像專業的網站吧。
46. 調整應⽤用的版⾯面 刪除這個檔案 app/assets/stylesheets/scaffolds.css.scss
47. 調整選單 打開 app/views/layouts/application.html.erb，在這⾏行行下⾯面 <li class="active"><a href="/ideas">Link</a></li> 加入 <li ><%= link_to 'New Idea', new_idea_path %></li>
48. 設計 idea 清單 打開 app/views/ideas/index.html.erb 把整個檔案換成下⾯面這段程式碼： <h1>Listing ideas</h1> <% @ideas.in_groups_of(3) do |group| %> <div class="row"> <% group.compact.each do |idea| %> <div class="col-md-4"> <%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%> <h4><%= link_to idea.name, idea %></h4> <%= idea.description %> </div> <% end %> </div> <% end %>
49. 設計 idea 細節⾴頁⾯面 打開 app/views/ideas/show.html.erb 把整個檔案的內容換成下⾯面的程式碼： <p id="notice"><%= notice %></p> <div class="row"> <div class="col-md-9"> <%= image_tag(@idea.picture_url, width: "100%") if @idea.picture.present? %> </div> <div class="col-md-3"> <p><b>Name: </b><%= @idea.name %></p> <p><b>Description: </b><%= @idea.description %></p> <p> <%= link_to 'Edit', edit_idea_path(@idea) %> | <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> | <%= link_to 'Back', ideas_path %> </p> </div> </div>
50. ⽤用 Devise 加入驗證功能
51. 安裝 devise RubyGem 打開專案的 Gemfile，並加入下⾯面這兩兩⾏行行 gem 'devise' gem 'bcrypt' 終端機輸入 bundle install
52. 安裝 devise 到 Rails APP 終端機輸入 rails generate devise:install
53. 設定 Devise 先⽤用 rake secret 來來產⽣生⼀一組密鑰 將產⽣生的內容貼⾄至 config/initializers/devise.rb 的這⼀一⾏行行 config.secret_key = '填入剛剛 rake secret 產⽣生的內容'
54. 設定 Devise 接著需要設定 mailer 預設的網址選項 打開 config/environments/development.rb 在最後⼀一個 end 上⾯面加入這⾏行行： config.action_mailer.default_url_options = { host: 'localhost:3000' }
55. 設定 Devise 打開 app/views/layouts/application.html.erb 找到 <%= yield %>，並在上⾯面加入這段程式碼： <% if notice %> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <p class="alert alert-danger"><%= alert %></p> <% end %>
56. 設定User Model 使⽤用 devise 的 generator 來來建立出 User Model rails generate devise user rake db:migrate
57. 加入註冊與登入連結 編輯 app/views/layouts/application.html.erb，在這段的後⾯面 <ul class="nav"> <li class="active"><a href="/ideas">Ideas</a></li> </ul> 加入 <p class="navbar-text pull-right"> <% if user_signed_in? %> Logged in as <strong><%= current_user.email %></strong>. <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> | <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link' %> <% else %> <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link' %> | <%= link_to "Login", new_user_session_path, :class => 'navbar-link' %> <% end %> </p>
58. 需要權限 打開 app/controllers/application_controller.rb 在這⾏行行後⾯面：protect_from_forgery with: :exception新增⼀一⾏行行： before_action :authenticate_user!
59. 活動過後
60. • 讓你的網站更更炫！ • 持續寫程式：透過課程、書籍、影片課程。 • 做些實際的東⻄西。 • 保持聯聯絡。 • 加入 ITAC
61. Thank you!