[Rails] 12 in 12 挑戰 1 - AReddit

專案概述

網頁連結看板，提供使用者瀏覽，並提供有登入的使用者建立/修改/刪除，有喜歡和不喜歡的功能，並可於該連結留言。

步驟

Step1. 起步走

1. 建立新專案

    rails new AReddit
   

2. 初始化git

     git init
     git add .
     git commit -m "Initial Commit"
   

3. 先建立branch來做開發（之後確定ＯＫ再merge回master）

   git checkout -b link_scaffold
   

4. 打開編輯器

   atom .
   

Step2. 打造雛形

1. 使用scaffod建立links

   rails g scaffold Link title:string url:string --no-stylesheet
   

2. 建立table

   rake db:migrate
   

3. 執行內建的WEBrick server

   rails s
   

4. 查看瀏覽器 http://localhost:3000

5. 加入首頁

   # [path] route.rb
   root 'link#index'
   

6. 先加入兩個網站 ex. http://www.google.com 、 http://www.yahoo.com

7. 記錄支線版本

   git add .
   git commit -m 'Add a link scaffold'
   

8. 合併回主線

   git checkout master
   git merge link_scaffold
   

Step3. 建立使用者

1. 新增一個支線

   git checkout -b 'add_users'
   

2. 加入devise

   gem 'devise', '~> 4.1'
   

3. 執行bundle並重啟伺服器

   bundle install
   rails s
   

4. 安裝devise

   rails g devise:install
   rails g devise User
   rake db:migrate
   rails g devise:views
   

   # [path] config/environments/development.rb
   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
   

5. 先註冊一個帳號 http://localhost:3000/users/sign_up

6. 存擋

   git add .
   git commit -m 'add devise and create User model'
   

Step4. 加入登入介面

1. 加入簡易登入介面

    <!-- [path] application.html.erb -->
    <% if user_signed_in? %>
      <li><%= link_to('New Link', new_link_path) %></li>
      <li><%= link_to("Account", edit_user_registration_path) %></li>
      <li><%= link_to("Sign Out", destroy_user_session_path, method: :delete ) %></li>
    <% else %>
      <li><%= link_to("Sign In", new_user_session_path) %></li>
      <li><%= link_to("Sign Up", new_user_registration_path) %></li>
    <% end %>
   

Step5. User只能編輯/刪除自己的連結

1. 新增 migration links 加入 user_id

   rails g migration add_user_id_to_links user_id:string
   rake db:migrate
   

2. 加入關聯

   # [path] user.rb
   has_many :link, dependent: :destroy
   

   # [path] link.rb
   belongs_to :users
   

3. 記錄支線版本

   git add .
   git commit -m 'Add User interface'
   

4. 合併回主線

   git checkout master
   git merge add_users
   

Step6. 加入 boostrap 美化

1. 新增支線版本

   git checkout -b 'add_bootstrap'
   

2. 安裝 bootstrap 及 simple_form_for

   • bootstrap: https://github.com/twbs/bootstrap-sass

       # [path] gemfile
       gem 'bootstrap-sass', '~> 3.3.6'
     

       bundle install
     

       mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
     

     ```scss app/assets/stylesheet/application.scss @import “bootstrap-sprockets”; @import “bootstrap”;

     
       ```js
     // [path] app/assets/javascripts/application.js
       //= require bootstrap-sprockets
     

   • simple_form_for: https://github.com/plataformatec/simple_form

      # [path] gemfile
      gem 'simple_form'
     

      bundle install
      rails generate simple_form:install --bootstrap
     

3. 調整相關頁面

風格部分採用 http://startbootstrap.com/template-overviews/sb-admin-2/ ( 我只需要用到panel部分所以放 app/assets/stylesheets/sb-admin-2.css 就好 )

有調整的頁面

• layouts/application.html.erb
• common/_navbar.html.erb
• common/_footbar.html.erb
• links/_form.html.erb
• links/index.html.erb
• links/show.html.erb
• devise/registrations/edit.html.erb
• devise/registrations/new.html.erb
• devise/session/new.html.erb

Step7. 加入喜歡/不喜歡功能

1. 使用acts_as_votable

    # [path] gemfile
    gem 'acts_as_votable', '~> 0.10.0'
   

    bundle install
   

2. 在 Link 的 model 中加入 acts_as_votable

3. route.rb 加入喜歡/不喜歡連結

# [path] route.rb
resources :links do
  member do
    get 'upvote'
    get 'downvote'
  end
end

1. 在links_controller加入

def upvote
  @link = Link.find(params[:id])
  @link.liked_by(current_user)
  redirect_to :back
end

def downvote
  @link = Link.find(params[:id])
  @link.disliked_by(current_user)
  redirect_to :back
end

Step8. 加入留言功能

…未完待續