Ting's Square 程式寫作之路

[2020] 第12屆鐵人賽Day 16 Rails專案開發 - 網站進度規劃

Tags:  #rail    #vue  
Total : 425 words.

前情提要:我們在第3天的時候為Rails專案裡導入了Vue.js框架,

接著花了10天左右的時間熟悉Vue重要的基本語法~

嘗試2週內走一輪敏捷開發

在接下來的兩週,我想開發一個系統,做出適合自己用的個人看板、或是未來2到5人團隊跑scrum流程的使用的看板Kanban來管理專案進度。

並且加上Rails Action Cable的即時互動效果,讓團隊能將看板上顯現出來的問題,一起討論分析、尋求每一次專案跑scrum流程後,都能調整與改進。

我在trello裡面找到一個適合致敬的Software Development template。

並且用這個鐵人賽開發的kanban來管理自己鐵人賽的專案 ;)

想開發的功能,及預期開發進度

  • [day16] 網站功能規劃、Route設計、前端套件安裝;使用者的註冊登入系統 (使用 Rails devise gem)
  • [day17] 使用者可以新建Kanban,並email邀請其他成員加入 (使用Mailgun API)
  • [day18] 看板Kanban可以讓使用者建立很多Column,例如Sprint backlog, Doing, Testing, Done等欄位。每個Column可以有很多張票Ticket
  • [day19] 把Kanban, Column, Ticket改成Vue Component
  • [day20] 使用Vue draggable,讓ColumnTicket可以拖拉。
  • [day21-24] 以Vuex狀態管理新增/修改/刪除ColumnTicket。 - [day25-28] 如果A使用者對ColumnItem的新增/修改/刪除,會在B使用者的畫面同步顯示。 (使用 Rails Action Cable)
  • [day29] 專案上線(使用Heroku進行deploy)
  • [day30] 鐵人賽總結~~

在webpacker引入前端套件

fontawesome : 我們會在首頁的navbar以及功能按鈕用到小圖示 Tailwind Css: 調整Columnticket等前端顯示的樣式

使用yarn安裝

yarn add @fortawesome/fontawesome-free
yarn add tailwindcss

在rails裡的applictaion.js檔,require某個資料夾時,都會自動抓的index.js檔。

所以從node_modules找我們要引入的檔案,放在fontend/styles/index.js 用來引入專案需要用到的的css或js檔案。

import "@fortawesome/fontawesome-free/css/all.css";

import "tailwindcss/base";
import "tailwindcss/components";
import "tailwindcss/utilities";

後端套件: devise 註冊登入系統

Devise為Rails最常使用的會員系統套件,為了讓我們專案能夠快速上線,就透過Devise完成網站基本的註冊登入功能。

安裝gem之後,記得bundle install,然後重啟server

gem 'devise', '~> 4.7', '>= 4.7.1'

接下來的步驟比較無趣~就不細說了XD

/vue_rails  master !7 ?1 ▓▒░ rails g devise:install

# 產生user model
/vue_rails  master !8 ?4 ▓▒░ rails g devise User 

# 為了能夠客製化註冊登入頁面,把devise的產生view
/vue_rails  master !9 ?8 ▓▒░ rails g devise:views      

規劃首頁routes

專案開發第一天,先來個首頁路徑,以及設計首頁

Rails.application.routes.draw do
  devise_for :users  
  root 'pages#home'

end

如果在rails console輸入:rails routes | grep devise

就會發現,routes上的一行程式碼devise_for :users會幫我們長了好多路徑

製作首頁的navbar

我們想為首頁製作navbar,並且把devise路徑放進註冊登入登出按鈕 _navbar.html.erb

    <nav class="bg-teal-700 text-blue-100">
      <div class="font-thin flex justify-between item-center">
        <a href="/">
          <i class="fas fa-columns">
          </i>
          Lean Kanban 精實看板
        </a>
        <div>
          <% if user_signed_in? %>
            <span class="mr-2"><%= current_user.display_name %></span>
            <%= link_to '登出', destroy_user_session_path, method: 'delete', class: 'user-button' %>
          <% else %>
            <%= link_to '登入 ', new_user_session_path, class: 'user-button' %>
            <%= link_to '註冊 ', new_user_registration_path,  class: 'user-button' %>
          <% end %>
        </div>
      </div>
    </nav>

_navbar寫成partial檔,是為了讓 application.html.erb render進去,讓view的結構更清晰

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js x Rails 鐵人賽專案</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>
  <body>
    <%= render "shared/navbar" %>
    <%= render "shared/flash" if notice %>  
    <%= yield %>
  </body>

</html>

再放上自己挑選的圖和用tailwind css設計icon~我們的專案首頁就完成囉!