錦囊妙計-前端篇

Lose your first 50 games as quickly as possible. - 圍棋諺語

Build your first 50 Rails apps as quickly as possible. - 造樣造句

Bootstrap

Bootstrap是目前最流行的前端設計框架，讓開發者也可以很輕鬆的進行網頁排版，也很有多現成的Theme可以套用。要在Rails使用Bootstrap，請安裝bootstrap-sass

如果搭配分頁套件kaminari的話，執行rails generate kaminari:views bootstrap3就會產生對應的kaminari樣板。

進一步可以參考Integrating Rails and Bootstrap這一系列文章。

Font Awesome

即將推出的 Bootstrap 4 將會移除 Glyphicons，所以目前大家推薦使用 Font-Awesome

Rails 可以安裝 https://github.com/bokmann/font-awesome-rails 這個 gem

表單

除了用Rails內建的表單Helper，也有一些提供表單設計更方便的套件：

• simple_form
• formtastic

select2 厲害的下拉選單

https://github.com/argerim/select2-rails

1. 支援 Autocomplete 的 select 單選
2. 支援 Autocomplete 的 select 多選
3. 支援 Tagging UI (text_field)
4. 可用 Ajax 撈資料

Example code: https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/events/_form.html.erb

漂亮的 Date/Time 輸入和輸出

表單輸入

• 只有日期 https://github.com/Nerian/bootstrap-datepicker-rails
  • Example code: https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/events/_form.html.erb
• 日期+時間
  • https://github.com/TrevorS/bootstrap3-datetimepicker-rails
  • http://eonasdan.github.io/bootstrap-datetimepicker/

調整顯示格式

• Ruby 內建的方法: Datetime#strftime
• Rails 內建的方法: datetime.to_s(:short) http://railscasts.com/episodes/31-formatting-time?view=asciicast
• 增加或變更 Rails 的時間日期 to_s，修改 config/application.rb 在最下面插入：

Date::DATE_FORMATS[:short] = "%Y/%m/%d"
Time::DATE_FORMATS[:short] = "%Y/%m/%d %H:%M"

Admin 介面

管理員後台除了自己蓋，有一些 gem 可以很快速的蓋起來，例如這兩套：

• ActiveAdmin
• RailsAdmin

缺點：想要擴充或修改的時候，會碰到限制和麻煩。

如何畫圖表

常用圖表包括 Line chart、Pie chart、Column chart、Bar chart 等等，最常見使用 Google Charts 或 Highcharts 和 D3.js

搭配 Rails 的話，可以安裝 https://github.com/ankane/chartkick 這一套最簡單，但功能較少。或是筆者推薦使用 Chart.js。

自訂 URL 網址

可以讓使用者自訂，或是亂數產生當作 URL http://railscasts.com/episodes/63-model-name-in-url-revised

範例:

• AC4 https://github.com/ihower/rails-exercise-ac4/commit/a27c59dd2d8e311cf0d87d30f70630fb6bf153d7
• AC5
  • https://github.com/ihower/rails-exercise-ac5/commit/f98d20f0e37d13796b4005f971ae77bd3ab27ef5
  • https://github.com/ihower/rails-exercise-ac5/commit/b7302cf361ddc1f345cee3595ba50c283775fca1

Nested Form (1-to-many)

1 對 1 的表單

使用 Rails 內建的 fields_for 就可以完成，參考 https://ihower.tw/rails4/restful-practices.html

1 對多的表單

如果知道固定N筆，作法同上。但如果需要可以動態加減數量，則需要 JavaScript 協助動態增減欄位。

可以使用 https://github.com/ncri/nested_form_fields gem (注意 Strong Parameter，這個 gem 的 README 沒提到) 或 https://github.com/nathanvda/cocoon 另外參考 http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html 的 reject_if 用法

範例 Example Code: https://github.com/ihower/rails-exercise-ac3/tree/nested_form

Recapache

• Recaptcha 是做 captcha 最簡單快速的方式。