五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar

<small>Photo by [Danielle MacInnes](https://unsplash.com/@dsmacinnes) on Unsplash</small>

## 什麼是 Ruby on Rails ?

Ruby on Rails 是一種結合 Ruby 這款程式語言與 Rails 函式庫的一種網頁程式框架！

Ruby 以自然、簡潔、快速著稱，全面支援物件導向程式設計。

而 Rails 則是 Ruby 廣泛應用方式之一，在 Rails 上設計出一套獨特的 MVC 開發架構，不但減少了開發中的問題，更簡化了許多繁複的動作。

所以在學習 Ruby on Rails 的之前，我們必須要先掌握 Ruby 這款程式語言！

但......我應該要去哪裡學習？

### 友善的網路世界

網路上對於 Ruby on Rails 的教學資源不計其數，但對於完全程式新手來說，尋找一個有系統且免費的學習平台實在是相當不容易...... 

> ~~而且通常免費的東西都沒有好貨~~

喂！不要亂講～這世界有很多樂於分享的人，願意無償的教學，只為了讓程式的世界更美好！

在我成為工程師之前，我也不覺得這世界上有這麼多熱心的人，但當你真正的踏入這個領域後，你會發現人性還是本善的呢。

今天我也要擔任那個傳遞善心的人，我會把我篩選過後的免費學習資源推薦給看文章的你 / 妳！

## [The Odin Project ( 全英文 ) ](https://www.theodinproject.com/courses/ruby-on-rails)

主打全課程免費的 Odin Project 是一個開源專案，從一開始就以教學做為核心精神，整個網站的目標是希望可以幫助對於網站開發有興趣的人能夠從零開始到獨當一面。

從 Ruby 教到 Ruby on Rails 甚至是 JavaScript 以及 Git。

最有幫助的地方在於，每一個章節都有幫助初學者編列作業以及目標，可以快速的讓你理解這個章節應該要學會什麼！

課程的後半段也會有小型專案實作，上傳至 GitHub 展示。

這樣的流程能夠幫助初學者理解從建立檔案到呈現在瀏覽器上的過程，未來更能對於不同的工具舉一反三，利用模式比對的方法找到解決方案！

### 特點：
1. 適合新手上路，內容平易近人。
2. 涵括前後端的基礎教學，甚至還有 Git！

---

> **冷知識分享：**
>
> 為什麼叫做 Odin Project？
> Odin 就是我們熟悉的希臘神話人物，宇宙之王。
> 
> 相傳他為了獲得魯納斯的智慧而把自己的右眼給犧牲了。
> 
> ~~所以這邊就是希望我們可以貢獻生產力直到右眼失明。~~ 

喂～當然不是這樣啊，網站開發可不是一個簡單的任務，這個故事是希望我們可以像奧丁一樣渴望知識，不斷地成長～

但眼睛還是要顧ㄟ，一天一顆葉黃素，讓你眼睛保得住。

## [Codecademy ( 全英文 )](https://www.codecademy.com/learn/learn-ruby)

Codecademy 是一個提供基礎程式教學的網站，在上面可以學到基礎的 HTML、CSS、Ruby、Rails 等等，都是不需要收費的！

但其實它也有提供更進階的課程，需要升級付費才可以使用的選項，但基於今天是介紹免費的資源，就不著墨太多付費課程的內容。

對於新手來說這個網站有很大的特點是它提供了線上的開發環境，讓你可以不需要安裝編輯器就可以開始學習，從基礎的 Ruby 語法開始上手，這樣的環境對於真正的新手來說，可以先拋開環境設定以及安裝程式語言的問題，直接地開始學習程式語言。

網站還會根據帳號的學習程度來製作百分比提示你的學習情況，能夠讓新手理解自己大概學了多少的程度，而且 Codecademy 也有一個強大的社群討論版，能夠在上面找到問題的答案，或是主動發文提問，也能夠大幅度的加速學習效率！

### 特點：
1. 線上編輯環境，免去環境設定問題。
2. 搭配提示直接動手寫程式，快速顯示成效。
3. 介面清晰的討論版，快速掌握問題。

## [為你自己學 Ruby on Rails ( 中文 )](https://railsbook.tw/)

> **衷心建議：**
>
> 新手要記得先打好程式語言的基礎觀念，否則直接學習框架是一件危險的事情。
>
> 尤其是 Rails 有許多的黑魔法，更應該要打好基礎！

剛剛推薦了一個全英文的免費學習資源，這邊幫大家補上一個中文的免費學習資源。

我知道你們要說這是在業配我老闆的書，但相信我，這本書真的有非常多基礎的觀念，而且我知道中文對於初學者來說有多麼的友善～

但為了讓想窺探框架的人能夠有所獲，這本書中強調了許多關於 Ruby 的基本知識，讓你能夠理解 Ruby on Rails 的黑魔法以及他能做些什麼！

最有趣的地方就是書中有許多圖片以及口語化的敘述，讓人能夠抽象化思考過程的本質，針對 Rails 的 MVC 架構 以及 Route 也有著有趣的說明，使初學者能夠快速地了解不同物件之間的交互作用！

書本尾段的購物車實作，更能讓人體會到程式語言這麼抽象的東西，到底是如何呈現在網頁上？

跟著做過一次之後，才能體會到那些抽象的東西，到底是從哪裡傳向哪裡，在這過程中又得到什麼？轉變了什麼？原來電商是這樣子啊......

啊......不說了不說了，我也要來去做一遍，不然要落後給別人了呢～

### 特點：
1. 中文書，看起來就是爽！
2. 使用會發生在身邊的案例來解釋重要觀念。
3. 手把手的環境安裝教學。

## [UPCASE by thoughtbot ( 全英文 )](https://thoughtbot.com/upcase/rails)

> **衷心建議：**
>
> 看著影片學習刻畫雖然會有短暫的成就感。
> 
> 但別忘記要內化成自己的東西，才有辦法舉一反三，做出自己的作品唷

[thoughtbot](https://thoughtbot.com/) 本身是一間設計以及開發諮詢的公司，針對客戶的 APP 提供諮詢和顧問的服務！

他們在指導客戶團隊時，發現缺少了許多中等級別的教材，所以他們決定建立 [UPCASE](https://thoughtbot.com/upcase/rails) 這個網站來填補那些空白！

除了 Rails、Git、JavaScript 之外，甚至還教你用 Vim 的課程都有提供，相信我，學會 Vim 這個輸入法，對於撰寫程式的速度有著極大的提升......

不小心離題了，總之這是個難度比前面兩個免費資源稍稍高一些的網站！

但當你有確實的學習並理解前面兩個免費資源後，這個網站對於提升你的理解又有更大的幫助。

雖然 [Intermediate Ruby on Rails](https://thoughtbot.com/upcase/intermediate-ruby-on-rails-five) 這部教學是 Rails 5 的版本，且其內容也確實稍稍難了一些，但版本對於學習 Rails 的基礎並沒有太大的不同，反而能夠看到一些有趣的寫法呢！

### 特點：
1. 下方有討論區，可以看看別人對於影片內容是如何提問的，對！提問很重要。
2. 每支影片的標題都很明顯，還有 Note 來告訴你這支影片你該學會什麼。
3. 不定期會發布深度討論 Rails 的影片。

## [Ruby on Rails Guide ( 全英文 )](https://guides.rubyonrails.org/)

等等......這看起來一臉官方手冊，是不是拿這種網站在交差了事？

你先聽我娓娓道來，這個網站的作用就像是字典一樣，當你在前面的學習資源遇到瓶頸的時候，歡迎進來這個網站逛逛，嘗試找到你不懂的名詞，裡面都會有非常詳細的說明和範例！

我知道第一次進入這個網站的時候，會有一種 我在哪 我是誰 的感覺！

以下會帶你做一次追尋答案的過程是什麼情形？

假設情境：

看著學習課程中，出現了一段沒有看過的程式碼......

```ruby
class UserController < ApplicationController
  before_action :find_user # << 這是什麼？

  def index
  ....
end
```

真是的，我完全不理解這個 `before_action` 到底是什麼東西？

登登登愣！`Ruby on Rails Guide`

這時候就派上用場了，我們先根據這個名詞出現的場合來做分析！

可以得知他在 Controller 的下面，那我們把畫面跳轉到 Ruby on Rails Guide 

![Ruby on Rails Guide](https://i.imgur.com/5S4qN6i.png)

點擊黃色框框處會彈出一塊面板，這時候我們仔細的找到 Controller 相關的標題

![Controller-Ruby on Rails Guide ](https://i.imgur.com/y4jdmFv.png)

點擊 `Action Controller Overview` 就會進入到介紹 Controller 的頁面！

勇敢地使用你網頁的搜尋功能 ( mac: `command + f`，window: `CTRL + f` )

打上 `before_action` 這時候就會協助你跳到這個名詞出現的地方，我們就可以看到關於 `before_action` 的敘述

![搜尋 Ruby on Rails Guide](https://i.imgur.com/0xGnUZ5.png)

以上，Ruby on Rails Guide 就是幫助你查找的工具，希望有幫助到你！

### 特點：
1. 絕對正統，不容質疑，基本上不會有錯誤資訊。
2. 完整度也是不容質疑，即便是工程師也還是會翻來自我檢視一下。

## 自我學習的優缺點

### 優點：

自我學習很棒的優點在於可以自行安排學習時間以及進度。

若你是一個學習速度快、自制力也很高的人 ( 英文也要很好 )，那我很推薦你可以在家裡面自我學習，畢竟參加線下課程的進度是規劃好的，若你的學習速度太快，老師也不會為了你而加快進度。

在家自己學習就可以根據自己的理解來調整該學些什麼，也可以在想要休息的時候休息，比較不會有被綁死在一個地方的感覺！

### 缺點：

我認為自我學習最大的缺點在於缺乏社群團體的推力！

畢竟學習程式語言本身並不是一件簡單的事情，當自己一個人學習又找不到問題的答案時，很容易陷入自我放棄的漩渦，以及你沒有辦法驗收自己的學習程度。

怎麼說呢？假設你今天已經自學了兩個月了，但你很有可能不知道自己現在的學習情況到底是好是壞，畢竟沒有人可以告訴你現在的方向是正確的，還是其實已經歪掉了？

還有關於團體討論的問題，因為人類的腦袋很容易陷入錨定效應，若在撰寫程式的時候，沒有加入其他人的意見來激盪你的腦力，很容易寫出自己覺得很棒，但其實成效不好的程式碼！

## 自我學習的小訣竅

誰都會有需要自我學習的時候，一些嶄新的技術，或是你自己有興趣的技術都是，都會需要自己上網查看文件，看看別人的 Demo。

我自己的方式都是先看成品，了解整個運作的方式，再來想像背後的邏輯，而且不會要求自己一定要想到正確的答案，畢竟這並不是一件好事，當你被正確答案的桎梏住的時候，就更容易陷入尋找所謂正確答案的漩渦。

在一開始你可以先用自己的理解來說服自己，然後持續的吸收相關知識，看更多的討論，有些時候你就會遇到 `aha moment`，這種豁然開朗的感覺，是自我學習的時候最棒的時候了！

> aha moment 也稱作尤里卡效應：指的是人類突然理解一個以前無法理解的問題或概念時的時刻。一個以前無法解決的難題突然變得清晰和明顯。這種從不理解到自發理解的轉變往往伴隨著喜悅或滿意的感嘆。

還有在剛開始學習程式語言的時候，也能透過聯想的方式，和現實生活中的例子做連結，找到可以讓自己快速理解的方式！

## 結語

說了那麼多關於自我學習的方向和優缺點，免費學習資源其實才是這篇文章的主軸啦！

我們從上述的免費學習資源來看，到處都充滿著英文的文件和影片，這也意味著英文對於軟體工程師是不可或缺的工具！

希望不要因為是全英文就放棄掉自我學習的機會，如果對於你的英文沒有信心的話，那現在更是你練習的好機會，因為是自學的關係，你可以大方地打開你的 Google 翻譯，趁著這波自我學習順便把程式常常出現的英文記起來吧！

也要謹記學習框架的優缺點，不要本末倒置，學習好 Ruby 這個程式語言會讓你事半功倍喔！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>
>


Post - 自學 Ruby on Rails 推薦的免費資源 TOP 5

自學 Ruby on Rails 推薦的免費資源 TOP 5

## 為什麼需要知道 HTML ？

![](https://i.imgur.com/RopQh7S.jpg)

如果你的工作會和網站工程師溝通，或是你的工作是網路行銷、網頁設計師、數位產品 PM ，時常會需要和工程師溝通網頁需要新增哪些功能、會出現哪些文字、樣式會是什麼樣子，或者網路行銷要調整網站的 SEO 等，都需要了解網頁的 HTML 架構，至少要理解眼前所見的頁面、圖像、元件，背後都是由 HTML 組成。

## 什麼是 HTML ?

HTML 是一種用來建構網頁的 **標記語言** 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。**HTML 是告訴瀏覽器網頁上有哪些標題、圖片、文字等**。

![什麼是 HTML?](https://i.imgur.com/TAaSk4L.jpg)

而這些元素包含了標籤、內容，不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。
呈現方式會像以下：

![什麼是 HTML? 標記語言說明](https://i.imgur.com/fxISuUE.jpg)

少部分標籤沒有結尾標籤，例如圖片：

![什麼是 HTML? 圖片標記](https://i.imgur.com/jRzK3uI.jpg)

附帶一提，在上方圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的『**屬性**』；每個標籤都有提供不同的屬性，讓這個元素標籤的資訊能夠更完整。

## 什麼是 Emmet ？

![Emmet](https://i.imgur.com/EhQk0mI.jpg)

如果你開始寫 HTML ，會發現他的文件可能有很多細節需要注意，讓我們看一份最基本的 HTML 文件：

![什麼是 Emmet ？](https://i.imgur.com/UKcjjZ9.png)

可以從上面看到，一段文字開頭和結束，都會出現標籤。當網頁的元素越來越多時，工程師可能會漏寫一個標籤而導致頁面跑版(和預期的顯示結果不同)或是要重複寫同樣的標籤等。

因此，就有 [Emmet](https://emmet.io/) 這個套件，讓工程師可以寫短短幾個代表字和快捷鍵，就能自動產生完整的標籤。減少漏寫標籤，或是一次產生多筆的標籤等。加速開發的效率。

除此之外是他在主流的開發者用的編輯器(用來寫 HTML 和程式的工具)像是 [VS Code](https://code.visualstudio.com/)、[Sublime Text](https://www.sublimetext.com/) 還有線上即時渲染的網站 [codepen](https://codepen.io/) 、[JS Bin](https://jsbin.com/?html,output)、[JS Fiddle](https://jsfiddle.net/) 都可以使用喔！

現在就開啟你熟悉的編輯器，和我一起試試看以下這些常用的 Emmet 語法吧！ ✈️

---

### 1. `>`：建立裡面的(子層) Tag

Emmet 範例： 輸入 `ul>li>p` + `Tab 鍵`

HTML 結果：

```html
<nav>
  <ul>
     <li></li>
  </ul>
</nav>
```

讓我們來看一下實際示範：
![](https://i.imgur.com/gPetJ6q.gif)

### 2. `+`：建立接連著(兄弟層)的 Tag

Emmet 範例：輸入 `div+h1+h2` + `Tab 鍵`

HTML 結果：

```html
<div></div>
<h1></h1>
<h2></h2>
```

### 3. `*` ：建立重複的 Tag

Emmet 範例：輸入 `ul>li*5` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

### 4. `{ }` ：Tag 內的文字

Emmet 範例： 輸入 `ul>li*5{這是清單}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
  <li>這是清單</li>
</ul>
```

### 5. `$` ：建立編號

Emmet 範例：輸入 `ul>li*5{清單編號：$}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：1</li>
  <li>清單編號：2</li>
  <li>清單編號：3</li>
  <li>清單編號：4</li>
  <li>清單編號：5</li>
</ul>
```

### 6. `@-` ：編號降冪 (需再放在 `$` 之後)

Emmet 範例：輸入 `ul>li*5{清單編號：$@-}` + `Tab 鍵`

HTML 結果：

```html
<ul>
  <li>清單編號：5</li>
  <li>清單編號：4</li>
  <li>清單編號：3</li>
  <li>清單編號：2</li>
  <li>清單編號：1</li>
</ul>
```

### 7. `[ ]` ：輸入屬性

Emmet 範例： 輸入 `a[href="www" target="_blank"]` + `Tab 鍵`

HTML 結果：

```html
<a href="www" target="_blank"></a>
```

### 8. `.` / `#` ：建立 `class` 或 `id` 命名

Emmet 範例： 輸入 `.box` 或 `#name` + `Tab 鍵`

HTML 結果：

```html
// .box 👇
<div class="box"></div>

// #name 👇
<div id="name"></div>
```

想要知道更多 Emmet 細節嗎？歡迎查閱 Emmet 文件 👇
[https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

<br>

---

### 推薦課程

> 👩‍🏫 課務小幫手：
>
> ✨ 想了解更多 HTML / CSS 知識和技巧嗎？
> 也歡迎報名課程 👉 [網頁前端設計女性專班](https://5xruby.tw/courses/code-for-girl)

快速生成 HTML & CSS ！Emmet 語法大公開！- Cover

快速生成 HTML！Emmet 語法大公開！


## 前言

在學習 Ruby on Rails 的過程中，筆者初次與 `Scope` 的相遇，不是一個很友善的結果，只知道 `Scope` 在 Rails `models` 中，可以用來查詢資料庫資料，但是某些符號和其背後的運作，要真正去了解後，才會用的順手，因此，我們藉由這篇文章帶大家一起來了解吧！

## Scope 前導，先來認識 Block & Proc & lambda

### 何謂 Block (程式碼區塊)？

Block (程式碼區塊) 呈現方式為大括號 `{ ... }` 以及 `do ... end`。

Ruby 是一款物件化很徹底的程式語言，在 Ruby 的世界裡面幾乎都是物件，而 `Block` 就是其中少數的例外之一，它不能獨立存在，需要依附在方法或物件後面，連指定到變數都會造成語法錯誤。

```ruby=
{ puts "Hello, World" }            # 會產生語法錯誤
say_hello = { puts "Hello, World" }   # 會產生語法錯誤
```
我們經常使用 `Block` 的方式是依附在方法後面，而我們也可以將 `Block` 給物件化，那就是使用 `Proc` 和 `lambda`。

### 如何使用 Proc & lambda ？

直接先來 Proc 的使用方式：

```ruby=
def proc_example
  example = Proc.new { p "I am Proc" }
  example.call
end
proc_example

# 當執行 proc_example 時，會印出 "I am Proc"
```
這邊我們使用 `Proc` 類別把 `Block` 物件化，接下來使用 `call` 方法來執行。

而 lambda 則是：

```ruby=
def lambda_example
  example = lambda { p "I am lambda" }
  example.call
end
lambda_example

# 當執行 lambda_example 時，會印出 "I am lambda"
```

有發現嗎？ 感覺起來是不是和 `Proc` 很像！沒錯，因為 `lambda` 是 `Proc` 的實體，所以它不用 `new`，我們是如何知道的呢？ 以下這段 `code` 即可證明 。

```ruby=
def check_method(item)
  puts "A item is a #{item.class}"
  puts "A item instance: #{item.inspect}"
  item.call
end
proc_item   = Proc.new { p 'This is a proc' }
lambda_item = lambda { p 'This is a lamnda' }

check_method proc_item 
check_method lambda_item

# A block is a Proc
# A block instance: #<Proc:0x00007f90d6825208@example.rb:12>
# "This is a proc"
# A block is a Proc
# A block instance: #<Proc:0x00007f90d6824e20@example.rb:13 (lambda)>
# "This is a lamnda"
```

### 帶入參數方法

Proc 帶入參數方法

```ruby=
say_hello = Proc.new { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

lambda 帶入參數方法

```ruby=
say_hello = lambda { |name| puts "你好，#{name}"}
say_hello.call("CY")
```

### lambda 和 Proc 的差異
這兩個幾乎一模一樣，主要只有兩個差異 `控制權順序` 和 `檢查參數` 。

1.控制權順序不同：

```ruby=
def proc_example
  example = Proc.new { return "I am Proc" }
  example.call

  "Proc not return"
end

def lambda_example
  example = lambda { return "I am lambda" }
  example.call

  "Lambda not return"
end

p proc_example # "I am Proc"
p lambda_example # "Lambda not return"
```

由上範例我們可以得知 `lambda` 會將控制權丟回呼叫 `method` 本身，繼續往下執行該程式碼，而 `Proc` 的 `return` 則不會，是立即跳出。

2.檢查參數：

```ruby=
lambda { |name| puts "Hi, #{name}"}.call
=> ArgumentError (wrong number of arguments (given 0, expected 1))

Proc.new { |name| puts "Hi, #{name}"}.call
=> Hi,
nil
```

從這個範例可以發現 `lambda` 會對參數進行檢查，如果是 `nil` 則會直接拋出 `error`，而 `Proc` 則是以 `nil` 當參數帶入。

因此接下來要介紹的 `Scope` 運用在 `Rails` 的 `ActiveRecord Model`，要撈取資料時，都會使用 `lambda` 來進行，原因就是 `lambda` 更謹慎。

## Scope 起手式

使用 `Scope` 時，首先需注意參數問題，每個 `Scope` 接受兩個參數：

1. 第一個是 name，這是你要去呼叫這個 `Scope` 的名字。
2. 第二個是 lambda (也可以用 `->` 表示)，這是我們要執行的程式碼，例如：搜尋條件。

寫起來會像，如以下的程式碼

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
end
```
當我們去執行這個 `with_author` Scope 時，就會拿到 `ActiveRecord::Relation` 的物件。

這時候我們也可以來使用組合技

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```

ex.
```ruby=
Book.with_author.with_page_count.last(3)
```
這裡指的是我要尋找作者是 CY 且頁數是大於 100 頁的書，再從這些尋找的書裡面，取最後 3 本。

## Scope 加入參數用法

接下來我們要讓 Scope 更靈活一點，這時我們可以加入參數。
沿用剛剛的例子：

```ruby=
class Book < ApplicationRecord
  scope :with_author, -> { where(author: "CY") }
  scope :with_page_count, -> { where("page_count > 100") }
end
```
當我呼叫 `with_author` 時，我會去找屬於 CY 的書，但如果我要找的作者，不就還要寫另外的 `Scope` 或者修改 `with_author` 這個 `Scope` ，因此為了解決這個問題，我們可以加入參數的用法，如下：

```ruby=
class Book < ApplicationRecord
  scope :with_author, ->(Name) { where(author: name) }
  scope :with_page_count, ->(count) { where("page_count > ?", count) }
end
```

如果像搜尋頁數，只要在條件字串裡面加上問號，後面帶入 `count` 這參數即可。

## Scope 和 Class method 比較

其實 `Scope` 和 `Class method` 一樣，都只是個方法(method)，
並沒有比較特別或神奇的地方，而 `Scope` 可以做到的，`Class method` 也可以，如下：

```ruby=
class Book
  def self.with_author
    where(author: "CY")    
  end
end
```
既然如此，我們使用 `Scope` 又有什麼好處呢？
1. 使用 `Scope` 可以讓我們程式碼更乾淨更好閱讀一點。
2. `Scope` 只做一件事情，所以當我們在呼叫時，不用擔心會插入其他的事情。
3. 經 `Scope` 出來一定是 `ActiveRecord::Relation`，但 Class method 不一定是。

## Default Scopes

這個就有神奇的小地方，當我們在 `book` 的 `Model` 設 
```ruby=
default_scope { where(published: true) }
```
這時候我們要撈取 book 資料時，都只會撈到 `published` 欄位為 `true` 的 book。

但這時候，如果我們想要撈取 `published` 欄位為 `false` 的 book 呢？

這時候就需要使用 `unscoped` 的方法支援，如下：

```ruby=
unscoped_book = Book.unscoped.find(book_id)
```
#### 使用時機：大部份用於固定條件查詢。

大家 Search 關於 `Default Scopes` 資訊的時候，可能會有些建議說不要用，是因為我們設了 `Default Scopes`，過了一陣子，要再撈取相關資料時，卻忘了這事，導致我們 `debug` 不易，加上可能要花不少時間來去調整，但我還是秉持著只要知道自己在做什麼，而確信不會為未來的自己造成麻煩，用 `Default Scopes` 是沒有問題的。

## 結語

最後複習一下 `Scope` 這個超酷的功能。`Scope` 將常用的查詢條件先宣告起來，以備隨時都可以取用，進一步也讓程式變得乾淨易讀，更厲害的是可以串接使用，對於新手可能一開始不容易懂，但一旦理解真的事半功倍。

以上是對 `Scope` 初步介紹，此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 `Scope` 不再陌生。

謝謝你的閱讀！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>
>


資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！- Cover

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

<br/>

> 👩‍🍳 **關於 CSS 料理室** : 
> 
> CSS 料理室的主廚可能會打翻麵粉、可能會調配出黑暗料理，但是實驗精神是不會少的！ 
> 
> 總之，讓我們一起透過一道又一道料理，認識 CSS 吧！

## 🍽 食譜完成照：

![](https://i.imgur.com/D5BCQ4q.gif)

## 🥬 食材準備：
1. CSS 變數： `--*`
2. HTML `input` 標籤： `input[type="checkbox"]`
3. CSS 選取器：` X + Y`, `X ~ Y`

## 📒 食譜簡介：
這次製作的料理，主要是使用原生的 CSS [變數](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 實做出深色模式和淺色模式的切換。除此之外，我們還會利用 HTML `<input>`  標籤當中的 `checkbox` 實做 『切換』這個動作，以下將介紹這些食材的特性。

### 🍖 食材介紹(ㄧ)： CSS 自訂變數 `(--*)`

CSS 變數 `(--*)` 讓我們自訂命名，讓規範或常用的數值取一個名字，好讓其他成員在使用時可以更好理解。
例如：

```css
/* 原本的樣式 */
.card {
    background: #FFFFFF;
    color: rgba(255, 98, 98, 1);
}

/* 使用自訂屬性 */
:root {
    --bg-white: #FFFFFF;
    --text-pink: #FF6262;
}

.card {
    background: var(--bg-white);
    color: var(--text-pink);
}
```

從上面使用自訂變數的範例中，可以很快速的知道 `.card` 使用了 `白色` 的背景， `粉紅色的文字` 樣式。如果我們想要改粉紅色的色票，只要到 `--text-pink` 中去調整就行了！

#### 全域 CSS 變數與獨立區域的 CSS 變數
在使用 CSS 變數時，也可以將這個變數選擇放在全域或是某個區域範圍內，在 `:root {....}` 當中的變數是**全域共用**的：

```css
/* :root 全域共用的樣式 */
:root {
  --pink: #FF6262;
}

/* 只有在 .container 裡面的 --pink */
.container {
    --pink: #FF006B;
}

.container {
    color: var(--pink); /* pink => #FF006B */
}

body {
    color: var(--pink); /* pink => #FF6262 */
}
```

### 🍖 食材介紹(二)： `<input type="checkbox">`

`<input type="checkbox">` 是一個單純的勾選標籤，有三種狀態：

![](https://i.imgur.com/BNu0S2t.png)

並且在 CSS 也可以直接設定這些狀態樣式，例如：

```css

input[type="checkbox"] {
    /* 這邊設定的 Unchecked 的樣式 */
}

input[type="checkbox"]:checked {
    /* 這邊設定的 checked 的樣式 */
}

input[type="checkbox"]:indeterminate {
    /* 這邊設定的 indeterminate 的樣式 */
}
```

其中 `indeterminate` 這個介於已選取和未選取之間的狀態，是需要透過 JavaScript 去定義在什麼情況下會出現 `indeterminate` 狀態。這次不會使用這個狀態。

我們可以利用 checkbox 的兩個狀態 : `unchecked` & `checked` 去做到類似 JavaScript『點擊』後觸發的樣式。

### 🍖 食材介紹(三)： CSS 選取器 `X + Y` , `X ~ Y`
最後一個重要食材 - CSS 選取器，從上面兩個食材當中我們已經準備好：

1. 將樣式顏色命名：管理 CSS 自訂變數
2. 如何觸發樣式：使用 `<input type=checkbox>`

接著，我們需要指定樣式『**套用的範圍**』。
從 [完成照](https://hackmd.io/GsHRjRY1QxCj3oRpy4yLQw?both#%E9%A3%9F%E8%AD%9C%E5%AE%8C%E6%88%90%E7%85%A7%EF%BC%9A) 當中仔細地看到，我是將滑鼠進入 Dark / Light 的按鈕時才會觸發，實際上 HTML 的結構層，我是將卡片和按鈕排在**同一層**，讓觸發範圍限制在按鈕樣式 `<input>` 裡。如果我將卡片樣式放進去 `<input>` 裡，那麼整張卡片將會一起被當成觸發範圍。

如果我的 input 和卡片樣式是同層的話，我可以透過 `X ~ Y` 來選取：

#### CSS 選取器： `X ~ Y`
選取同層(兄弟層)的元素，意思是選取在 **`X` 之後的 `Y`**。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/vYmMMQQ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/vYmMMQQ">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### CSS 選取器：`X + Y`
選取***緊鄰***的**同層**元素，參考以下範例，他只會選取到緊鄰`<h1>` 的 `<p>`。

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors : +" src="https://codepen.io/debby87059/embed/abWMKBP?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/abWMKBP">
  css selectors : +</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>
<br/>

## 👩‍🍳 料理步驟： 實現 CSS 變數 Dark Mode 吧！

### 🖋 步驟一：使用 CSS 自訂變數，建立色票
首先，先將深色和淺色模式會使用到的顏色都先運用自訂變數，建立色票，準備好：

```css
:root {
  --bg-color: #F1E8E8;
  --white: #FFFFFF;
  --black: #282F3C;
  --pink: rgba(255, 98, 98, 1);
  --pink-light: rgba(255, 98, 98, 0.3);
  --pink-lighter: rgba(255, 98, 98, 0.1);
  --gray: #959595;
}
```

### 🖋 步驟二：設定 Checkbox 樣式

```html
<div class="container">
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle">
    <span class="dark">Dark</span>
    <span class="light">Light</span>
  </label>
</div>
```

##### 1. `<label>` 標籤的 `for` 屬性:
在示範上將 `<label>` 存取文字，並且放在與 `<input>` 同層的位置，我們可以指定這兩者產生關聯，讓 `<input>` 觸發的條件對應到 `<label>` 內。如何設置呢？
將 `<input>` 的 `id` 與 `<label>` 的 `for` 設置成相同值：

![](https://i.imgur.com/wUqrlC7.jpg)

更詳細的介紹：[\<label> - HTML ｜ MDN ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label)

##### 2. 選取 `<input>` 緊鄰的 `<label>`
首先我們將瀏覽預設的 `<input>` 樣式隱藏，並透過 `<label>` 建立這個按鈕的樣式。
我使用 `X + Y` 從 `<input>` 狀態控制 `<label>` 樣式，實際上操作會像這樣：

```css
/* 隱藏預設 input 樣式 */
input[type="checkbox"] {
  display: none;
}

/* input[type="checkbox"] 緊鄰的 label */
/* 在 checkbox 未點擊的樣式 */
input[type="checkbox"] + label {
    ......
}

/* 在 checkbox 點擊後的樣式 */
input[type="checkbox"]:checked + label {
    .....
}

```

Tip: 可以看到 `label` 裡面有 `<span>Dark</span>` 和 `<span>Light</span>` 這會用 `checked` 判斷在 Light 模式時，`<span>Light</span>` 的文字隱藏，Dark 模式則是相反。

##### 3. `::before` 圓形樣式：
另外使用 `::before` 做出假圓形，模擬出按鈕樣式：

<iframe height="300" style="width: 100%;" scrolling="no" title="Toggle Dark mode - CSS Variables / Toggle button" src="https://codepen.io/debby87059/embed/dyWrjPp?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/dyWrjPp">
  Toggle Dark mode - CSS Variables / Toggle button</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

從上面的 Toggle 按鈕當中可以看到，我已經選取到 `:checked` 的狀態時，按鈕會是如何呈現的，如此就能夠延伸出在 `:checked` 狀態下的 `.card` 的樣式。

### 🖋 步驟三：刻出卡片

從上一步，我們建立了切換深淺色的按鈕後，接著我們就可以利用：

##### 使用 CSS 選取器 `X ~ Y`  製作卡片樣式。
首先 `input` 、 `label` 和製作卡片的樣式 `<div class="card"></div>` 放在同層，像以下：

```html
<div class="container">

  
  <input type="checkbox" id="toggle" name="toggletheme">
  <label for="toggle"></label>

  
  <div class="card">
    ......
  </div>
</div>
```

可以從上面看到，要使用 `<input>` 的 `:checked` 選取器來製作點擊後的卡片樣式，中間隔了 `<label>` 要怎麼樣能夠跨過 `<label>` 呢？

這時候就可以使用 CSS 選取器：`X ~ Y` ！ 直接選取在 `<input>` 之後的 `<div class="card">`

因此我們就能夠這樣做設定：

```css
/* 預設卡片樣式 (未點擊的狀態) */
.card {
    ...
}

/* 點擊後的卡片樣式 (Dark Mode) */
input[type="checkbox"]:checked ~ .card {
    ...
}
```

<iframe height="570" style="width: 100%;" scrolling="no" title="css - variables" src="https://codepen.io/debby87059/embed/XWROErJ?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/XWROErJ">
  css - variables</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 🎁 Bonus - CSS 選取器：`X > Y`
從完成的 `Card` 樣式，可以看到我使用大量的 `X > Y` 方式選取，這個選取器的特性是什麼呢？

`X > Y` 是選取***緊鄰***的**子層**元素，這邊則是選取相連同層的元素，讓我們看以下範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="css selectors :  &gt;" src="https://codepen.io/debby87059/embed/PomLaKb?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/debby87059/pen/PomLaKb">
  css selectors :  &gt;</a> by debby (<a href="https://codepen.io/debby87059">@debby87059</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<br/>
<br/>

## 結語

以上就是這次的 CSS 料理室 - CSS 變數辛香料，看完你是否也想嘗試玩玩看 Dark Mode 切換了嗎？
我雖然對於 CSS 變數命名還是有點覺得有點長(囉唆？XD ) 但，看到 CSS 解決了變數的方法，真覺得是一大福音啊！
除此之外 CSS 的 `:checked` 也是一個很有趣的的選取器，實務上也經常使用這樣的選取器製作像是收合樣式、開啟關閉的樣式，更多的方法也可以參閱：[You Don't Need JavaScript | Accordion](https://github.com/you-dont-need/You-Dont-Need-JavaScript#Accordion)

如果你有試做這次的料理 🥘 ，歡迎[分享](https://www.facebook.com/5xruby)給我們知道！或是製作上有任何問題歡迎[來信](mailto:debby@5xcampus.com)交流👋 ～ ！

----

想了解更多 HTML / CSS 知識和技巧嗎？

也歡迎報名課程 👉 [網頁前端設計 女性專班](https://5xruby.tw/courses/code-for-girl)

css-variable

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

## 前言
在學習前端的的過程中，多少一定都有聽過 Webpack 這個名詞，而什麼是 Webpack 呢？當我聽到這個問題的時候，第一時間會先愣住，不知從何回答起，經過幾秒鐘的思考後，最後回答會是「它是一個模組打包工具」，不知道大家有沒有和我一樣呢？這個回答沒有錯，不過可能會有更多疑問，那模組又是什麼？為什麼需要打包？

這篇文章，將從模組化切入，來帶大家了解 Webpack 究竟幫我們做了多少事？
## 模組化
### 為什麼需要模組化設計?
試著回想我們最開始學習 JavaScript 的時候，我們會把程式碼寫在 HTML 檔案中，如下

```html
// index.html

<script>
    var a = 1

    function double(x){
        return 2 * x
    }

    double(a)
</script>
```

但隨著功能越來越多我們會把 `script` 裡面的內容獨立出來到一個 JS 檔中：

```html
// index.html

<script src="./main.js"></script>
```

```javascript
// main.js

var a = 1

function double(x){
    return 2 * x
}

double(a)

var b = 2

function square(x){
    return x * x
}

square(b)

var c = 4

function add(x, y){
    return x + y
}

add(c, b)
```

再來想像一下，當開發人員越來越多，功能也一直再新增，如果都繼續編寫同一個 JS 檔，當行數不再是 24 而是 1000，將變得非常難以閱讀及維護。為了避免這樣的情況發生，我們可以拆成多個 JS 檔，如下

```html
// index.html

<script src="./utils.js"></script>
<script src="./main.js"></script>
```
```javascript=
// utils.js

function double(x){
    return 2 * x
}

function square(x){
    return x * x
}

function add(x, y){
    return x + y
}
```

```javascript
//main.js

var a = 1
var b = 2
var c = 4

double(a)
square(b)
add(c, b)
```

目前我們雖然把程式碼分開了，但實際上它還是在同一個作用域下，其中的變數是會互相影響。例如，我新增了一個 utils2.js 檔，並宣告一個 `add` 函式，且實作內容和 utils.js 中的 `add` 函式不一樣，如下

```html
// index.html
<script src="./utils.js"></script>
<script src="./utils2.js"></script>
<script src="./main.js"></script>
```

```javascript
// utils.js

function add(x, y){
    return x + y
}
```

```javascript
// utils2.js

function add(x, y){
    return x + y + 4
}
```

```javascript
//main.js

var b = 2
var c = 4

console.log(add(c, b)) // 10
```
如果我們期望在 main.js 使用 `add` 函式會得到兩數之和，會因為 utils2.js 在 utils.js 後面載入，而覆蓋掉 utils.js 的函式宣告，最後導致結果出現不如預期。所以我們需要將 utils.js 與 utils2.js 這兩個檔案的內容各自獨立出來，互不干擾，而想要達到這樣的效果，我們可以使用 IIFE 來完成。

#### IIFE（立即呼叫函式 Immediately Invoked Functions）

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        add: function(x, y){
                return x + y
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
// utils2.js

var moduleUtils2 = (function(){
    var author = 'Mr.B'

    return {
        add: function(x, y){
                return x + y + 4
            },
        getAuthor: function(){
            return author
        }
    }
})()
```

```javascript
//main.js

var b = 2
var c = 4

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils.add(c, b)) // 6

console.log(moduleUtils2.getAuthor()) // 'Mr.B'
console.log(moduleUtils2.add(c, b)) // 10
```

透過立即呼叫函式的方式，建立作用域幫我們達到三點效果：
1. 解決變數或是函式命名上的衝突
2. 能夠建立私有變數與方法
3. 自由選擇要將哪些變數、方法暴露出去

因此，我們打算在 main.js 檔案中，取得變數 `author` 的值，只能透過 `moduleUtils.getAuthor()` 的方法。最值得注意的地方是，這樣子規劃，只能讀取而無法直接修改。這種模式就是最一開始模組化的概念，稱為模組模式。

這個模式看起來好像很完美了，但其實還是有一個小問題。假設 utils2.js 這個模組需要依賴 utils.js 的方法或是變數，我們就一定要注意 script 引入的先後順序，如下

```javascript
// utils.js

var moduleUtils = (function(){
    var author = 'Mr.A'

    return {
        getAuthor: function(){
            return author
        }
    }
})()

```

```javascript
// utils2.js

var moduleUtils2 = (function(module){
    var author = 'Mr.B'
    var authorFromUtils = module.getAuthor()

    return {
        getTwoAuthors: function(){
            return author + '_&_' + authorFromUtils
        }
    }
})(moduleUtils)
```

```javascript
//main.js

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```
```htmlembedded=


<script src="./utils.js"></script>
<script src="./utils2.js"></script>  
<script src="./main.js"></script>
```
隨著相依性的檔案越來越多，專案的維護難度也會隨之提高。

综合以上，隨著前端專案規模越來越大，就越需要模組化的開發，來提升專案的維護性。隨著趨勢的發展，就有些模組化的規範相繼而出，而其中最為有名的就是 CommonJS。

## Node.js 與 CommonJS
Node.js 能夠讓 JavaScript 在 server 環境中執行，並採用了 CommonJS 模組規範。所以在 server 端來說，每個檔案都是獨立的作用域，且都有 `require` 函式和 `module` 物件。

1.`module` 物件
每個檔案都會有 `module` 物件，這個物件底下有一個 `exports` 的屬性，如果在這個檔案中有想要輸出的變數或是方法，可以透過賦值給 `exports` 來達成，如下

```javascript
// 只有單一值
var name = 'will'

module.exports = name
```

```javascript
// 多個值 第一種寫法
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}
```

```javascript
// 多個值 第二種寫法
var name = 'will'

function getName(){
    return name
}

module.exports = {
    name,
    getName
}
```

2.`require` 函式

當需要載入某檔案，取得 `module.exports` 的值時，會使用 `require` 函式尋找該檔案，如下

```javascript
// a.js
var name = 'will'

module.exports.name = name
module.exports.getName = function(){
    return name
}

// b.js
var aModule = require('./a.js')
aModule.getName() // will
```

了解 CommonJS 規範之後，我們就可以很輕鬆的將之前的範例改寫，如下

```javascript
// utils.js

var author = 'Mr.A'

function getAuthor(){
    return author
}

module.exports.getAuthor = getAuthor
```

```javascript
// utils2.js

var moduleUtils = require('./utils')

var author = 'Mr.B'
var authorFromUtils = moduleUtils.getAuthor()

function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}

module.exports.getTwoAuthors = getTwoAuthors
```

```javascript
//main.js
var moduleUtils = require('./utils')
var moduleUtils2 = require('./utils2')

console.log(moduleUtils.getAuthor()) // 'Mr.A'
console.log(moduleUtils2.getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

這樣寫相較 IIFE 簡單多了，但別忘了改成這樣子，實際上是沒辦法在瀏覽器上執行的，只能在 Node.js 環境下執行。既然瀏覽器不支援，要怎麼樣才能在瀏覽器執行？我們可以借助其他工具，也就是 Webpack，它會將我們的模組翻譯成瀏覽器支援的寫法，並且打包成一個壓縮過的 JS 檔。

不過在介紹 Webpack 之前，相信有些人會有疑惑，在寫專案都沒有使用 `require` 或 `module.exports` ，都是用 ES6 的 `import` 和 `export` ，而且瀏覽器也有支援，那為什麼還需要 Webpack？ 在回答這個問題之前，先來認識一下 ES6 Module。

## ES6 Module
在 ES6 以前，沒有正式的模組化規範，所以有各種模組化的寫法，像是上面介紹的 CommonJS，或是 AMD (Asynchromous Module Definition 非同步模組定義)等等。而 ES6 出來之後，終於有了正式的規範，就是上面提到的 `import` 與 `export`，我們可以再把上面的例子用 ES6 Module 改寫，如下

```javascript
// utils.js

let author = 'Mr.A'

export function getAuthor(){
    return author
}
```

```javascript
// utils2.js

import { getAuthor } from './utils.js'

let author = 'Mr.B'
let authorFromUtils = getAuthor()

export function getTwoAuthors(){
    return author + '_&_' + authorFromUtils
}
```

```javascript
//main.js
import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'

console.log(getAuthor()) // 'Mr.A'
console.log(getTwoAuthors()) // 'Mr.B_&_Mr.A'
```

```html

<script src="./main.js" type="module"></script>
```

依照目前的使用情境，看起來都沒有什麼太大的問題，但假設我們想要使用別人的套件呢？或許我們可以使用 CDN 引入，但如果說這個套件也沒有 CDN，我們就只能透過 NPM 或 Yarn 這類型的套件管理工具來下載。

套件下載完畢後，會放到 node_modules 這個資料夾裡，這樣子我們引入的路徑就可能要改寫成 `'./node_modules/xxx/index.js'` 這樣子。假設哪天套件的入口點換了，整個專案有使用到這個套件的都需要改寫，這樣其實很不方便。除此之外，有些套件輸出是寫 `module.exports`，我們也沒辦法使用 `import` 來引入，因此這個時候，我們就需要藉由 Webpack 的幫助。

## Webpack 

### 初步認識 Webpack

在前面我們就有提到，Webpack 是一模組打包工具，不管我們是寫 CommonJS 又或是 ES6 Module 最終它會將我們的模組以及使用 NPM 安裝他人的模組一併打包成一個 JS 檔。接著讓我們來實際試試看如何使用 Webpack 打包。

如果上面的有跟著練習的話，目前的專案目錄會是這樣子

![](https://i.imgur.com/kyTltD4.png)

1.開啟終端機輸入下面兩行指令

```
npm init -y 
npm install webpack webpack-cli --save-dev
```
順利的話，就會看到我們的目錄新增了兩個檔案分別是 package.json 和 package-lock.json，以及 node_modules 的資料夾

![](https://i.imgur.com/6Q6pYCo.png)

2.打開 package.json 並在 scripts 底下新增指令

```javascript
// package.json
{
  "scripts": {
    "build": "webpack" 
  },
}
```

3.新增 webpack.config.js 檔案

```javascript
// webpack.config.js
module.exports = {
  mode: 'development', 
  entry: './main.js', // webpack 打包的起始檔案
  output: {
    path: __dirname, // 在這個 config 檔同層的目錄
    filename: 'bundle.js'// 打包輸出的檔名
  }
}
```

`mode` 這個屬性不寫的話預設會是 `production`，代表在生產環境下使用，所以會自動幫你壓縮以及優化。`development` 這個模式代表開發的時候，打包的速度較快。

最後在終端機下
```
npm run build
```
執行之後順利的話就會出現建置的成功訊息

![](https://i.imgur.com/0PHd1sN.png)

接著修改我們 index.html，將 main.js 換成 bundle.js

```html

<script src="./bundle.js"></script>
```

打開瀏覽器 console 之後，就會順利看到我們在 main.js 檔 `console.log` 的結果

![](https://i.imgur.com/D3euZqP.png)

這樣我們就成功地使用 Webpack 來幫我們把模組打包，不過目前為止我們還沒嘗試安裝套件來使用，接下來我們來試著安裝 React 

```
npm install react react-dom
```

安裝成功後，就來試試看能不能使用 React，並在畫面上印出 Hello, Webpack and React，所以將檔案做一下修改

```html


<body>
  <div id="root"></div>

  <script src="./bundle.js"></script>
</body>
```

```javascript
//App.js

import React from "react"

function App() {
  return React.createElement('h1', {}, "Hello Webpack and React")
}

export default App
```

```javascript
//main.js

import { getAuthor, author } from './utils.js'
import { getTwoAuthors } from './utils2.js'
import App from './App.js'
import ReactDom from 'react-dom'
import React from 'react'

const appEl = React.createElement(App)
ReactDom.render(appEl, document.getElementById('root'))

console.log(getAuthor())
console.log(getTwoAuthors())
```

最後我們再重新 build 一次

```
npm run build
```

成功看一下建置的訊息會發現，Webpack 的確有去 node_modules ，將我們使用的套件模組一併打包

![](https://i.imgur.com/g7wq0sX.png)

最後打開畫面，除了之前在 console 印出來的結果外，也可以看到 Hello, Webpack and React! 

![](https://i.imgur.com/iuKWUSM.png)

### 強大的 Webpack

Webpack 打包 JS 模組只是它功能的冰山一角，如果有看過 [Webpack 官網](https://webpack.js.org/) 可以看到首頁的這張圖：

![](https://i.imgur.com/44KtbCr.png)

Webpack 把任何資源都當作模組，像是 CSS 或是圖片，我們都可以用 `import` 的方式把檔案給引入進來，如果不使用 Webpack 是沒辦法做到的。而為了支援這樣子的功能，Webpack 透過定義不同的 `loader` 來識別檔案類型並轉譯成瀏覽器看得懂的語法。例如 `babe-loader` 能夠幫助我們將 ES6 以上的新語法轉譯成 ES5。除此之外，還可以透過 `plugins` 來擴充 Webpack 的功能，像是壓縮 CSS 檔，或是打包過後自動產生 HTML 等等。

 ## 結語
到這邊相信大家對 Webpack 應該有個基礎的認識了，也瞭解到為什麼需要使用 Webpack。回過頭來看在使用 creat-react-app 以及 Vue CLI，我們能夠輕鬆的 `import` CSS 或圖片，背後都是因為有 Webpack 在處理。 

最後，如果想要更加瞭解 Webpack，可以參考[ 五倍紅寶石學院 ](https://campus.5xruby.tw/courses)的[ Webpack5 入門 ](https://campus.5xruby.tw/p/webpack5)線上課程。

從模組化帶你認識 Webpack - post

從模組化帶你認識 Webpack

## 前言

在瀏覽網站的時候，可以根據我們的喜好更換版面，即使重新整理或關閉瀏覽器後，再度開啟該網站時，設定居然都還存在！或者是購物網站，將物品加入購物車，但沒有結帳就關掉瀏覽器，過了很久之後，再次去買東西，購物車裡的物品也都還在，究竟是為什麼呢？其實透過後端做存取就可以解決這個問題了，但瀏覽器也有個神秘的儲存空間可以提供我們做使用，就是 localStorage。

這篇文章，將帶大家來了解什麼是 localStorage ？ 如何使用 localStorage？

## localStorage 基本介紹

隨著瀏覽器不斷的進步，功能也越來越強大。在 HTML5 出來之前，我們只能將最多 4K 的資料儲存在 cookie 裡面。現在 HTML 5 中，新加入了 Local Storage 作為本地儲存來使用，一般瀏覽器容量為 5M(不同瀏覽器支援的容量會有所不同)。

### LocalStorage 優缺點

#### 優點:

1. 增加本地儲存空間。
2. 儲存資料方式，為 `key` 和 `value`。
P.S. `key` 和 `value` 資料儲存型態為 `String`。

#### 缺點:

1. `value` 儲存型態只接受 `String`。
2. 無痕或隱私模式下無法讀取。
3. 資料量太多，存取時，容易照成畫面卡頓。
4. 有些比較較舊的瀏覽器版本(IE 8 以下)沒有支援。

### localStorage 與 sessionStorage 的差異

在使用方法上大致相同，只有以下的差異：
1. localStorage 的資料是永久存在，唯有清除它才會消失。 
2. sessionStorage 的資料則是當網頁關閉時，就會清除。

### localStorage 的使用方法

1. `localStorage.setItem('key', 'value')`：透過 `setItem()` 方法中將物件屬性的 `key` 和 `value` 當成參數傳入，我們就可以在 `storage` 物件中加入屬性或修改原本的屬性內容。

2. `localStorage.getItem('key')`：透過 `getItem()` 方法將屬性的 `key` 當成參數傳入，我們就可以得到 `storage` 物件對應的 `value` 。

3. `localStorage.key()`：透過 `key()` 方法中輸入屬性的順序位置，我們可以取得 `storage` 物件中該位置的屬性 `key`，而位置順序和陣列表示方法一樣，由 0 開始。

4. `localStorage.removeItem()`：透過 `removeItem()` 方法，我們可以把指定的屬性從 `storage` 物件中移除。

5. `localStorage.clear()`：透過 `clear()` 方法，我們可以直接把 `storage` 中的所有屬性移除。

## localStorage 簡單練習

![練習畫面-1](https://i.imgur.com/nqBKKVC.png)

我們來運用 localStorage 來實作簡易一個會員登入系統。
(溫馨小提醒：這邊單純範例練習，實務上有關於使用者的基本資料或者密碼，請勿將這些資訊存放在 localStorage 上。)

### 步驟一：創建帳號

![步驟一：創建帳號](https://i.imgur.com/4q90U87.gif)

當我們按下 SIGN UP `button` 後，就會跳出 `alert` 提醒創建成功。

接下來就會在 localStorage (開發者工具 => Application => Storage => Local Storage) 裡面出現剛剛輸入的資料。

而這邊我們是將使用者的帳號密碼組合成 localStorage 的 `key`，把 Name 成為 `value`，使用 `setItem()` 方法進行儲存。

```JavaScript
signUpBtn.addEventListener('click', () => {
    const signUpName = document.querySelector('#signUpName')
    const signUpEmail = document.querySelector('#signUpEmail')
    const signUpPassword = document.querySelector('#signUpPassword')
    const storageKey = signUpEmail.value + signUpPassword.value //將使用者的帳號密碼組合成 Key
    const checkUser = Boolean(localStorage.getItem(storageKey))

    function successAction() {
      if(checkUser) {
        return alert('The email has already created it, please re-enter')
      }

      // 使用 setItem() 方法來儲存資料
      localStorage.setItem(storageKey, signUpName.value)
      signUpName.value = ''
      signUpEmail.value = ''
      signUpPassword.value = ''
      alert('Created successfully, please go to sign in page')
    }

    if(signUpEmail.value === '' || signUpPassword.value === ''){
      alert('The input box cannot be empty')
    } else {
      successAction()
    }
  })
```

### 步驟二：登入

![步驟二：登入](https://i.imgur.com/n2MJKWL.gif)

我們一開始可以看到 Local Storage 裡面有屬性 `dev@5xcampus.coma1s2d3f4`，而相對應的 `value` 為 CY ，當我們輸入完帳號密碼後組成了 `key` ，然後使用 Local Storage 的 `getItem()` 方法，將相對應的 `value` 取出，在組合字串最後渲染出來。 

這邊偷偷埋個下一步要解決的關鍵要素，就是當我們成功登入時，在 localStorage 多了一個 `MemoryAccount` 的屬性，有發現嗎 ？ 而究竟為什麼呢 ？ 將在下一步揭曉。

```javascript=
loginBtn.addEventListener('click', () => {
  const loginEmail = document.querySelector('#loginEmail')
  const loginPassword = document.querySelector('#loginPassword')
  const sayHiElement = document.querySelector('.sayHi')
  const storageKey = loginEmail.value + loginPassword.value // 將帳號密碼組成 Key。
  const userName = localStorage.getItem(storageKey) // 這邊將 Name(CY) 從 localStorage 裡面取出來
  const checkUser = Boolean(userName)

  function loginAction() {
    if(!checkUser) { 
      return alert('Please create an account first')
    } 

    const confirmMemory = confirm('Do you want to save this password?')
    loginEmail.value = ''
    loginPassword.value = ''
    alert('sign in suceesfully')
    // 這邊將從 localStorage 取出的文字和 Hi~ 組合成一個字串。
    sayHiElement.textContent = `Hi~ ${userName}` 
    if(confirmMemory){
      //暴雷一下，這裡再儲存一次是為了重新整理或關掉頁面，可以維持登入狀態。
      localStorage.setItem('MemoryAccount', `Hi~ ${userName}`) 
    }
  } 

  if(!loginEmail.value || !loginPassword.value){
    alert('The input box cannot be empty')
  } else {
    loginAction()
  }
})
```

### 步驟三：重新整理

![步驟三：重新整理](https://i.imgur.com/MXspeY1.gif)

我們預期重新整理後，『 Hi~ CY 』還是會在，為什麼呢 ？ 那是因為我們在上一個步驟登入時，第一個 `alert` 問我們的是 『 Do you want to save this password ? 』 選擇 『 是 』 後，程式根據我們的回答進行儲存資料。

接下來當我們重新整理時，我們會去 localStorage 裡面找 `MemoryAccount` 屬性，並拿出我們儲存的 `value` 渲染在畫面上。 

```javascript=
function firstRnder() {
  const sayHiElement = document.querySelector('.sayHi')
  const storageMemory = localStorage.getItem('MemoryAccount') //這邊取出上次使用者的資訊
  let status = localStorage.getItem('status')
  !status && localStorage.setItem('status', 'login')
  if(storageMemory){
    //判斷是否有使用者的資訊，再去執行第 8 行渲染
    sayHiElement.textContent = storageMemory
  }
  changePage()
}
```

### 步驟四：登出

![步驟四：登出](https://i.imgur.com/S7PkTU2.gif)

最後我們要來實現登出，這是所有步驟中最簡單的，只要使用 `clear()` 方法將 localStorage 裡面的資料清除即可。

```javascript=
logOutLink.addEventListener('click', () => {
  const sayHiElement = document.querySelector('.sayHi')
  localStorage.clear() //使用 clear 方法，清除所有資料。
  sayHiElement.textContent = 'Hello, Friend !'
})
```

Codepen 連結 ：<a href='https://codepen.io/ice12031110/full/PomoBOR'>https://codepen.io/ice12031110/full/PomoBOR</a><br><br>

## 結語

當我們製作網頁時，如果此頁資料是必須帶往下一頁或者是離線狀態使用，localStorage 這時候就可以派上用場。

雖然 localStorage 非常方便，但在使用時，須注意儲存的資料是否為重要資料，因為 localStorage 只要打開開發者工具就能看到，毫無安全性可言，任何人都可以對其進行修改。

而這邊使用登入的例子，是為了帶大家使用 localStorage 的方法，也藉此說明 localStorage 須注意的事項。

這次實作範例有放在 <a href='https://codepen.io/ice12031110/full/PomoBOR'>Codepen</a> 上面，對此篇文章有任何問題歡迎 [來信](mailto:cy@5xcampus.com) 與我討論。

最後，希望透過這篇文章，能讓大家對 localStorage 不再陌生。

謝謝你的閱讀！

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>

認識瀏覽器的神秘儲存空間 - localStorage - cover

認識瀏覽器的神秘儲存空間 - localStorage


線上購物已成為目前消費行為的主流趨勢，而商家為了擁有更多元的付款方式以及方便對帳及退款的後台管理，通常就會仰賴第三方金流服務。

目前台灣主流的金流商為綠界科技、紅陽科技及藍新科技，三者提供的付款功能除了基本的信用卡收退款外也都各自有不同的服務，因此商家可以根據自己的商業需求來決定金流商。

本篇文章將會以藍新金流多功能付款 (MPG) 中的信用卡及 ATM 付款來做示範，在開始前需要做一些小準備：

- 一個 Rails App
- 藍新金流的測試帳號，須包含 Hash Key、Hash IV 及商店代號
- [藍新金流 API 文件](https://www.newebpay.com/website/Page/content/download_api)（本篇以 MPG 服務為例）

如果都已經準備好了，那我們就進入正題吧 ─=≡Σ(((っﾟ∀ﾟ)っ

## 建立 Service

先在專案資料夾內建立 `app/service/newebpay/mpg.rb`，我們會將金流的邏輯主要都寫在 `mpg.rb` 這個檔案內，如果不知道什麼是 Service Object 可以參考 [Rails 程式碼整理術（進階)](https://railsbook.tw/chapters/26-organize-your-code-advanced.html)。

```ruby
module Newebpay
  class Mpg
    def initialize
    end

    def test
     "Test success!"
    end
  end
end
```

進 `rails console` 測試一下，看起來是沒問題的！

```ruby
> Newebpay::Mpg.new.test
=> "Test success!"
```

## 開始串接 API

要開始串接 API 最重要的一件事，就是看看手冊內的需求是什麼。

🧙 傳送門：[Newebpay MPG 串接手冊](https://www.newebpay.com/website/Page/download_file?name=%E8%97%8D%E6%96%B0%E9%87%91%E6%B5%81Newebpay_MPG%E4%B8%B2%E6%8E%A5%E6%89%8B%E5%86%8A_MPG_1.1.0.pdf)

### 資料交換

在與第三方 API 溝通時，要先確認我們的 request 需要哪些資料以及如何傳送，而藍新也提供了相當清楚的資訊：

1. 以「Form Post」方式傳送交易資料至藍新金流進行交易
2. Post 參數內需包含 `MerchantID`、`TradeInfo`、`TradeSha`、`Version`
3. `TradeInfo` 則由複數參數組成
4. `TradeInfo` 與 `TradeSha` 這兩個參數需要進行加密的動作

### 參數設定

![藍新金流 Post 參數](https://i.imgur.com/oFdXqgJ.png)
<small>圖片來源：藍新科技 / Post 參數</small>

透過上圖，其實除了 `TradeInfo` 外欄位資訊都相當單純，因此我們可以先主攻 `TradeInfo` 來看看該帶入哪些資訊！ 

在文件 **TradeInfo 內含參數欄位** 這個分類中，最重要的是要先找到「必填」的資訊有哪些，以及選擇要使用哪種支付服務，最後再來將這些資訊整理起來：

```ruby
# TradeInfo 欄位

{
  # 這些是藍新在傳送參數時的必填欄位
  MerchantID: "MS12345567",
  MerchantOrderNo: "yuchan6666",
  TimeStamp: Time.now.to_i.to_s,
  RespondType: "JSON",
  Amt: 123,
  Version: "1.6",
  ItemDesc: "第一次串接就成功！",
  Email: "test@gmail.com",
  LoginType: 0
  # --------------------------
  # 將要選擇的付款服務加上參數
  CREDIT: 1,
  VACC: 1,
  # 即時付款完成後，以 form post 方式要導回的頁面
  ReturnURL: "商品訂單頁面"
  # 訂單完成後，以背景 post 回報訂單狀況
  NotifyURL: "處理訂單的網址"
}
```
我自己是以 `NotifyURL` 去處理訂單的更新資訊，並且由 `ReturnURL` 處理訂單成功或失敗的轉址。其實除了上面使用到的參數外，像交易限制秒數及繳費有效期限等等也蠻常使用的，使用者可以看看自己有哪些需求再適時加上。

好的，既然 `TradeInfo` 已經知道要哪些資訊了，那麼就來排排看要送 post 的資料會是怎樣的結構。確定好內容後，就可以開始開始思考我們的 service 怎麼寫了！

```ruby
{
    MerchantID: "MS123456789",
    TradeInfo: { 
         MerchantID: "MS123456789",
         RespondType: "JSON",
         TimeStamp: "1400137200",
         Version: "1.6",
         # etc...
     },
    TradeSha: # TradeInfo 經 AES 加密後再 SHA256 加密,
    Version: "1.6"
}
```

### 開始動工 service

#### 1. 參數處理

抓回我們一開始寫的 `mpg.rb`，可以將重複使用的固定資訊在 `initialize` 時就準備好，並且將 form post 要使用的參數放入 service 中。

```ruby
module Newebpay
  class Mpg
    attr_accessor :info

    def initialize(params)
      @key = "hash key"
      @iv = "hash iv"
      @merchant_id = "merchant id"
      @info = {}  # 使用 attr_accessor 讓 info 方便存取
      set_info(params)
    end

    def form_info
      {
        MerchantID: @merchant_id
        TradeInfo: trade_info,
        TradeSha: trade_sha,
        Version: "1.6"
      }
    end

    private

    def trade_info
      # AES256 加密後的資訊
    end

    def trade_sha
      # SHA256 加密後的資訊
    end

    def set_info(order)  
      info[:MerchantID] = @merchant_id
      info[:MerchantOrderNo] = order.slug
      info[:Amt] = order.amount 
      info[:ItemDesc] = order.name 
      info[:Email] = order.email 
      info[:TimeStamp] = Time.now.to_i 
      info[:RespondType] = "JSON"
      info[:Version] = "1.6"
      info[:ReturnURL] = "https://...."
      info[:NotifyURL] = "https://...."
      info[:LoginType] = 0 
      info[:CREDIT] =  1,
      info[:VACC] = 1
    end

  end
end
```

#### 2. 將 `info` 進行加密處理

這應該是最難的一關了，文件內其實沒寫得很清楚需要哪些步驟，很多關鍵還只藏在範例的程式碼內，對於沒接觸過 PHP 或 .net 的人來說就稍微頭痛了一點。因此整理了一份適合 Rails 的範本來使用。

1.將內容轉為 query string

```ruby
def url_encoded_query_string
  URI.encode_www_form(info)
end
# => "MerchantID=MS12345567&TimeStamp=1624388594&RespondType=JSON..."
```

2.trade_info 加密

利用 query 化的 info、hash key 與 hash iv 來進行 AES256 資料加密

```ruby
def trade_info
  aes_encode(url_encoded_query_string)
end

def aes_encode(string)
  cipher = OpenSSL::Cipher::AES256.new(:CBC)
  cipher.encrypt
  cipher.key = @key
  cipher.iv = @iv
  cipher.padding = 0
  padding_data = add_padding(string)
  encrypted = cipher.update(padding_data) + cipher.final
  encrypted.unpack('H*').first
end

def add_padding(data, block_size = 32)
  pad = block_size - (data.length % block_size)
  data + (pad.chr * pad)
end
```

3.trade_sha 加密

將 trade_info 加密後的結果再透過 SHA256 加密一次

```ruby
def trade_sha
  sha256_encode(@key, @iv, trade_info)
end

def sha256_encode(key, iv, trade_info)
  encode_string = "HashKey=#{key}&#{trade_info}&HashIV=#{iv}"
  Digest::SHA256.hexdigest(encode_string).upcase
end
```

這樣差不多就大功告成了，實作的完整程式碼如下：

```ruby
module Newebpay
  class Mpg
    attr_accessor :info

    def initialize(params)
      @key = "hash key"
      @iv = "hash iv"
      @merchant_id = "merchant id"
      @info = {}  # 使用 attr_accessor 讓 info 方便存取
      set_info(params)
    end

    def form_info
      {
        MerchantID: @merchant_id
        TradeInfo: trade_info,
        TradeSha: trade_sha,
        Version: "1.6"
      }
    end

    private

    def trade_info
      aes_encode(url_encoded_query_string)
    end

    def trade_sha
      sha256_encode(@key, @iv, trade_info)
    end

    def set_info(order)  
      info[:MerchantID] = @merchant_id
      info[:MerchantOrderNo] = order.slug
      info[:Amt] = order.amount 
      info[:ItemDesc] = order.name 
      info[:Email] = order.email 
      info[:TimeStamp] = Time.now.to_i 
      info[:RespondType] = "JSON"
      info[:Version] = "1.6"
      info[:ReturnURL] = "https://...."
      info[:NotifyURL] = "https://...."
      info[:LoginType] = 0 
      info[:CREDIT] =  1,
      info[:VACC] = 1
    end

    def url_encoded_query_string
      URI.encode_www_form(info)
    end

    def aes_encode(string)
      cipher = OpenSSL::Cipher::AES256.new(:CBC)
      cipher.encrypt
      cipher.key = @key
      cipher.iv = @iv
      cipher.padding = 0
      padding_data = add_padding(string)
      encrypted = cipher.update(padding_data) + cipher.final
      encrypted.unpack('H*').first
    end

    def add_padding(data, block_size = 32)
      pad = block_size - (data.length % block_size)
      data + (pad.chr * pad)
    end

    def sha256_encode(key, iv, trade_info)
      encode_string = "HashKey=#{key}&#{trade_info}&HashIV=#{iv}"
      Digest::SHA256.hexdigest(encode_string).upcase
    end
  end
end
```

只要成功呼叫這個 service 就能夠產出符合 API 需求的 requset（如下圖）<br>
至於要怎麼送 form post 出去這種簡單問題，就交給大家自己解決了(ゝ∀･)b

```ruby
class PaymentsController < ApplicationController
  def create
    # 要記得附上該筆訂單的資訊，才有辦法建立付款喔！
    order = Order.find(1)
    @form_info = Newebpay::Mpg.new(order).form_info
  end
end
```

![](https://i.imgur.com/E80J7tY.png)

如果沒碰到什麼問題，應該就能夠順利看到付款畫面了，可喜可賀！

![](https://i.imgur.com/dyO2tge.png)

## 付款完成後

付款完成錢錢進帳，就大功告ㄔㄥˊ...等等，還沒結束！<br>
錢錢入帳的確是大事，但如果我們的系統都沒有紀錄，那麼訂單的管理可能會發生世紀大亂。

還記得我們當初有設定 `ReturnURL` 跟 `NotifyURL` 嗎？當付款完成後，藍新也會以 post 的形式回傳支付訊息給我們，但回傳回來的資訊也是經過加密的，所以還需要再處理回傳參數的**解密**。

解密的範例藍新也有提供 PHP 版本，而本篇同樣整理了 Rails 能夠使用的範例，至於回傳參數有哪些、商家會需要哪些資料，都可以在藍新手冊找到喔！

以下為實作範例：

```ruby
module Newebpay
  class MpgResponse
    # 使用 attr_reader 可以更方便取用這些資訊
    attr_reader :status, :message, :result, :order_no, :trans_no

    def initialize(params)
      @key = "your hash key"
      @iv = "your hash iv"

      response = decrypy(params)
      @status = response['Status']
      @message = response['Message']
      @result = response['Result']
      @order_no = @result["MerchantOrderNo"]
      @trans_no = @result["TradeNo"]
      # etc...
    end

    def success?
      status === 'SUCCESS'
    end

    private
      # AES 解密
      def decrypy(encrypted_data)
        encrypted_data = [encrypted_data].pack('H*')
        decipher = OpenSSL::Cipher::AES256.new(:CBC)
        decipher.decrypt
        decipher.padding = 0
        decipher.key = @key
        decipher.iv = @iv
        data = decipher.update(encrypted_data) + decipher.final
        raw_data = strippadding(data)
        JSON.parse(raw_data)
      end

      def strippadding(data)
        slast = data[-1].ord
        slastc = slast.chr
        string_match = /#{slastc}{#{slast}}/ =~ data
        if !string_match.nil?
          data[0, string_match]
        else
          false
        end
      end
  end
end
```
```ruby
class PaymentsController < ApplicationController
  def notify_response
    response = Newebpay::MpgResponse.new(params[:TradeInfo])
  end
end
```

同樣也是沒意外就能夠取得回傳資訊來更新訂單資訊了！

只要了解每個環節該做什麼事，用 Rails 串藍新金流沒那麼難，但因為篇幅問題沒辦法實際帶大家把所有的功能寫完，如果有興趣可以自己將內容補完並且跑起來試試看。但需要注意因為這是範例，實際使用時部分比較隱私的資訊最好使用 ENV 保護起來才是比較正確的喔。

我有將這次的實作內容放在 [GitHub](https://github.com/lumir1031/newebpay_demo) 上，或是對此篇文章有任何回饋都歡迎[來信](mailto:yuchan@5xcampus.com)與我討論！

最後最後，如果對 Ruby on Rails 有興趣的話，可以參考近期即將開課的 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails)

Post - 用 Rails 串接藍新金流一點都不難！

用 Rails 串接藍新金流一點都不難！

在前端切版時應該會很常遇到 UI Component 的困難，像是 Component 命名、撰寫方式、可擴充、可共用性等問題。

我雖然不是準 React 工程師，單純因為工作關係接觸了 Next.js 、 Tailwind CSS ，就此愛上這種以資料驅動樣式改變、建立組織、 Component 的方式。

剛開始我與公司內的工程師一起建立了初期的官網設計與開發，遇到了一些血淚坑之後也許可以分享，但再隨著官網上線後穩定的更新後，慢慢意識到命名和 Component 擴充性是多麽的重要。

## 什麼是 Design System ? 為什麼要使用 Design System ?

起初 Design System (設計系統) 是為統一品牌形象，從品牌的 Design Guideline 延伸，明確定義品牌相關的元素、資料呈現方式，主要會有主色、輔色、各種級距的標題文字大小、按鈕樣式等，也可延伸至網站插畫樣式、照片方式、聲音、文案等呈現方式（有興趣的人可以參考 [Material Design](https://material.io/design)  ) 有了這些規範後，就能讓其他團隊成員更清楚的知道遇到什麼樣的情境時該如何呈現文字、顏色或 Logo 等，以維持品牌的一致性。但隨著產品功能複雜或發展更多產品的情況下，就會需要更全面的規範。當然隨著前端框架以元件為主、資料驅動的開發方式，讓這些原本有 Design System 的品牌紛紛開放、開源自己的文件、設計語言讓更多開發者或設計師可以一探這些元件化是如何被維護的。

## 使用 Tailwind CSS 和使用 Design System 的差異？

Tailwind CSS 是一個單純的 CSS，讓開發者可以建立樣式，我也有使用 Tailwind CSS 建立 Component，好處是高度客製化，但有時再多人協作時會遇到命名不明確，或是重複的樣式寫了兩次，只因為情境或資料結構不同。

像是建立一個 Button ，在 Tailwind CSS 可能會是：

```javascript
// Used twin.macro & styled component：
const Button = styled.button(({ full, md, lg, outline, disable }) => [
  tw`bg-primary text-white text-center py-1 px-3 inline-block rounded 
		 transition duration-150 cursor-pointer 
		 hover:bg-red-700 focus:(outline-none)`,
  `&:focus {
    box-shadow: 0 0 0 3px #ff253a6e;
  }`,
  full && tw`w-full`,
  md && tw`py-2 px-4`,
  lg && tw`text-lg py-3 px-8`,
  outline && tw`bg-transparent border border-primary text-primary hover:(bg-primary text-white)`,
  disable && tw`bg-gray-100 cursor-not-allowed text-gray-400 border border-gray-200 hover:bg-gray-100 focus:(shadow-none)`,
])

// Primary(Default) Button
<Button>
	Primary Button
</Button>

// Outline Button
<Button outline>
	Primary Button
</Button>
```

如果是用 Chakra UI or Ant Design：

```javascript
// chakra-ui
<Button colorScheme="teal" variant="solid">
  Primary Button
</Button>

// Ant Design
<Button type="primary">Primary Button</Button>
```

由上面可以看到一個按鈕，開發者可以不用手刻 (然後考慮各種狀態、樣式) 細節全部都由這些 UI Library 或 Framework 幫你做好，甚至可以很快速的和設計師討論，什麼情況下用哪些按鈕。

## 什麼情境下適合使用這些 Design System ?

如果你剛好是以下情境，也許可以使用：

1. 團隊裡尚未有設計師。
2. 開發者個人的 Side Project。
3. 想快速開發出測試產品。
4. 後台系統、簡潔單純的 UI 設計。

另外，如果團隊的產品已經有 Guideline 或 Design System 也可以選擇文件完整、Components 自由度高的 Design System 然後調整成符合團隊產品的 Guideline 樣式。

重點是 Design System 提供了一個線上的文件，讓開發者和團隊成員可以看同一份文件、同樣的 Compoent 命名、色票、文字級距等。

## Design Systems for React

以下將介紹 React 的 Design System，部分的 System 也有開發支援 Vue.js or Angular，詳細比較將會整理在文末。

## [Ant Design](https://ant.design/)

<a href="https://ant.design/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/6Ias3sD2AvKN8FxaY6BtOt/feae36ad56e5867e05d61d6a08721ab3/Ant_Design.jpg" alt="Ant Design - 讓人心動的 6 個 React Design Systems">
</a>

Ant Design 是來自螞蟻金融開源的 UI 套件，中文文件詳盡、Component 豐富，最重要是還提供了像是 [Material Design](https://material.io/design)  一樣針對元件設計的易用性建議，包含了語意文案、狀態呈現、視覺動畫等說明，從這些文件身上能夠學習到蠻多 UI/UX 設計細節。

像是 [表單設計](https://ant.design/docs/spec/research-form-cn) 的易用性：

![Ant-表單設計易用性](//images.ctfassets.net/8er52l3j5u76/4eXK30vnt1xRvjDJN4gNSY/ccdce6fa7a0bbe5c05c1c706ac47d9e4/Ant-_____________________.png)

或是 [按鈕說明](https://ant.design/docs/spec/buttons-cn) ：

![Ant Design 按鈕易用性](//images.ctfassets.net/8er52l3j5u76/2RMxGgqZ4wyrzeBtRf11z3/195e850de0611a62dfe068a158d6e7ae/_______2021-06-08_______3.23.19.png)

詳細的說明可以在他們的[設計文件](https://ant.design/docs/spec/introduce-cn)內查閱。

## [Atomize](https://atomizecode.com/)

<a href="https://atomizecode.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/6rbwT6NYT8w1WnTh2zY7bd/7a4700e004adf32147cc3c9eef292e2e/Atomize_Design.jpg" alt="Atomize Design - 讓人心動的 6 個 React Design Systems">
</a>

Atomize 的設計我認為是比較可愛一點，且 Default 的顏色較少一點，也許是主打高度客製化，所以在 [Theme StepUp](https://atomizecode.com/docs/react/theme) 提供各式如顏色、字體的設定教學。

<a href="https://atomizecode.com/docs/react/theme/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/4OWwlUDU8UrJMNPKb07LAL/35567d009e2750e561aee1c5110a551f/Atomize_Default_Color.jpg" alt="Atomize Default Color - 讓人心動的 6 個 React Design Systems">
</a>

例如在 [Button](https://atomizecode.com/docs/react/atoms) 頁面中看到按鈕樣式提供了很多細節的 Props 設定：

![Atomize Button Props](//images.ctfassets.net/8er52l3j5u76/rCd9zyAhq8WhfeSEK65mh/c8a6aa862cd61194fd058e31cb0e8c04/Atomize_Button_Props.jpg)

Atomize 也提供 Sketch / Figma [設計稿](https://atomizedesign.com/ "Atomize Sketch / Figma 設計稿")，雖然是付費版（不過他只要付費一次！擁有免費更新 😂 )

Atomize 會比較適合 Landing Page 、部落格或是已經有設計稿的頁面做使用，因為高度客製化的關係，如果沒有初步的設計稿，也許會花費大量時間在調整細節上。

## [Carbon Design](https://www.carbondesignsystem.com/)

<a href="https://www.carbondesignsystem.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/7DKUJoVOdKtKFbdVEB0NXx/08ab9e0ae9f0af0208a8eb4dfcc08c13/Carbon.jpg" alt="Carbon - 讓人心動的 6 個 React Design Systems">
</a>

Carbon Design 是來自 IBM 開源的 Design System，遵循著 IBM 的設計語言。元件樣式設計俐落、細膩。(我還蠻喜歡他們的設計的 😂 ) 觀察到他們的設計和其他的設計最大的差異是沒有陰影的設計 ，他們透過不同的灰階拉出頁面和元件的層次，以下比較 Carbon Design / Ant Design / Material Design  三者的 Modal 呈現樣式：

![Modal 差異](//images.ctfassets.net/8er52l3j5u76/EswUgeTKJ6wi3jgmZsetD/49a8d32bd64cb0a214dce143f4de02e5/Modal_______.jpg)

可以看到 Carbon 呈現的按鈕是更扁平的設計。

Carbon 的文件也如同 Ant Design ，包含的 Components 豐富且文件詳細。 Components 的 Live Demo 還可嘗試在不同的背景下 Components 會是什麼樣子 ( 對設計師來說蠻方便的！需要考量到深色、淺色背景下 Components 顏色是否好辨識、是否刺眼等）

<a href="https://www.carbondesignsystem.com/components/button/usage/#live-demo" target="_blank" rel="noopener">
  <img src="//images.ctfassets.net/8er52l3j5u76/1yIAsDxPZimVoC0FcKqReU/06413128bbe86ad7f5e63cd88bcbf820/Carbon-Button_Live_demo.gif" alt="Carbon-Button Live demo">
</a>

如果是使用 Carbon Design System 我會認為盡量沿用 Carbon 的 Guideline ，也許調整主色，但 Components 可能直接取用會比較快，原因是他們的 Components 其實已經相當完整，而且也考量到不同狀態下 Components 應該如何使用。他的客製化程度較低，但支援度廣包含 [Vue.js](https://www.carbondesignsystem.com/developing/frameworks/vue) / [Angular](https://www.carbondesignsystem.com/developing/frameworks/angular) 到設計師的教學文件都有，適合用在 Dashboard 或是以功能為導向的頁面上。

## [Chakra Design](https://chakra-ui.com/)

<a href="https://chakra-ui.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/2GdyTPGVS6oQX0IM4m1a56/af7d1078d7070617b96178aeb25e5ee1/Chakra_Design.jpg" alt="Chakra Design - 讓人心動的 6 個 React Design Systems">
</a>

Chakra 也是一個提供高度客製化的 Design System ，他的樣式源自於 [Tailwind CSS](https://v1.tailwindcss.com/) (1.9.0) ，但他們兩者的顏色樣式現在其實已經有點落差了，所以如果你想要 Tailwind CSS 的顏色用在 Chakra 的 Component 上，會建議另外 Customize 自己的色表喔！

除此之外我有用過 Chakra ，雖然他的 Components 和 Ant Design & Carbon Design 比起來少很多，少一點，但如果你想要建立一個簡單的部落格、 Landing page ， Chakra 算是一個蠻好上手且輕量的 UI Library ，一些基礎的功能例如深淺模式 Toggle 或是他所提供的 Hooks (ex. [useBoolean](https://chakra-ui.com/docs/hooks/use-boolean) / [useClipboard](https://chakra-ui.com/docs/hooks/use-clipboard) )  都算是蠻好做使用的，非常推薦大家試用看看喔！

<a href="https://chakra-ui.com/docs/hooks/use-controllable#usage-1" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/4zpzeitOSGXA7Ak4xdKDnK/342224b1daf7d873e85b6ef0f6e926d8/Chakra_-_useControllableState.gif" alt="Chakra - useControllableState">
</a>

上圖是他們所提供的 [useControllableState](https://chakra-ui.com/docs/hooks/use-controllable#usage-1) 動畫截圖，可以看到設定相應的數值，就能做出加法或減法數值，最後再透過 `{value}` 傳出去。

## [Material UI](https://material-ui.com/)

<a href="https://material-ui.com/" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/3mLXe8uxwAgmFGR6x3zBJx/3ec693729b0a69aa027d5630084ebb33/Material_UI.jpg" alt="Material UI - 讓人心動的 6 個 React Design Systems">
</a>

如果心儀 Google 的 [Material Design](https://material.io/design) 的話，可以用 Material-UI ，他們有提供中文文件， Components 的 Props 支援豐富，如同 Carbon Design & Ant Design 部分 Components 提供 Live Demo 演示讓設計師可以透過演示找到理想的狀態和樣式：

<a href="https://material-ui.com/components/chips/#chip-playground" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/5rNBamk7WY0ucfITUyzdp3/ec4819be045724bb23654a945ce4ecec/Material-UI-Chip_Playground.gif" alt="Material-UI-Chip Playground">
</a>

Material-UI 我也會認為比較適合用類似 Dashboard 、後台等功能導向為主的頁面，原因是他的效果樣式是滿滿的 Material 風格 😂  ( Button 冒泡的效果.. ) 如果不想要有這麼像 Material 的話，也可以參考他們的 [Template](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=home-store) 。

另外如果你是 Vue 開發者的話，[Vue Material](https://vuematerial.io/) 也提供豐富的 Components 做使用喔！

## [Primer Design](https://primer.style/)

<a href="https://primer.style/" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/7ICL21Ju8M8ZEOMlWb38B5/057723df796a5afca6145a2a387a63fb/Primer_Design.jpg" alt="Primer Design - 讓人心動的 6 個 React Design Systems">
</a>

Primer Design 是 [GitHub](https://github.com/) 開源的 Design System 除了支援 React 外也支援 Ruby on Rails 的 ViewComponents ，如果你是 Ruby on Rails 的開發者可以做很好的引入，以 React 的文件來說支援的 Hooks 相較 Chakra 來得少，但  Components 也算多，只是 Components 可設定或細節樣式不多 (可能是因為這個 Design System 開源的時間還不夠久 😂) 像是我 2021 / 5 月份來看 [Buttons](https://primer.style/components/Buttons) 所提供的樣式只有一個尺寸：

<a href="https://primer.style/components/Buttons" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/2R7D8dwRZL7s9LcYna7LEJ/7c9c330188ae0d2967fde8092fdca158/Primer-buttons.png" alt="Primer-buttons">
</a>

就目前來說如果要使用這個 Design System 可能樣式自由度還不夠高，如果喜歡 GitHub 介面或樣式的朋友也許可以試試看，但如果我的話應該會在觀望一陣子等待他提供的樣式夠多時使用 😂

## 大彙整

看完了這些 Design System 各位有沒有想要嘗試的 System 呢？如果是用在個人的 Side project 製作像是部落格、文件等建議可以使用 Chakra / atomize ，如果是要架設一個後台系統介面可以試著導入看看 Ant Design 或是 Material UI ，又或者想嘗試想要嘗試特別的風格的話可以試試看 Carbon Design 。

<a href="http://images.ctfassets.net/8er52l3j5u76/V8Abu76soCDLMBXGDtEPK/747f572b45a48c37f71e4262f700070b/____Design_System_______.jpg" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/V8Abu76soCDLMBXGDtEPK/747f572b45a48c37f71e4262f700070b/____Design_System_______.jpg" alt="各 Design System 比較 - 讓人心動的 6 個 React Design Systems">
</a>

## 我該如何挑選適合的 Design System?

除了上述的 Design System 外， [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) repo 收錄大量的 Design System，這麼多資源下哪些才是適合你的專案呢？下方條列了一些問題，也許可以作為考量點：

1. **Design System 的 Components 夠多嗎？**

    Components 夠多的話，理想上就考慮到越多的情境和設計，這些都能減輕在開發時的樣式維護的負擔。例如需要什麼樣的 Button 樣式，就請團隊成員或設計師看 System 的 Button 文件，這樣溝通上也較為快速。

2. **還有在維護嗎？** 

    如果你點進去 GitHub 頁面最新一次 commite 是 2 年前，那我會勸你放棄 😂

3. **文件夠詳細嗎？** 

    文件詳細可能包含樣式只能在什麼樣情境下使用、尺寸限制、如何撰寫、有哪些 Ppops 或 API ，甚至是 Live Demo 。

4. **Props 的設定自由度夠高嗎？**

    如果連最基礎的 Button 都只有一種 size 或樣式那麼就有點薄弱了，或是如果你的頁面融入大量的漸層、特效等，也許就不該使用 Design System 或是選擇自由度較高的 Desin System 像是 Ant Design / Atomize Design 等。

5. **有提供 Design Kit 嗎？** 

    這一項是非必要的，但如果你是想要運用這個 System 在有設計師的團隊裡，有 Design Kit 的話對設計師來說是省蠻多功，讓團隊可以專注在功能和流程上。

## 結語

以上是單純以網頁設計師 & 30% 的 React 初階工程師的整理介紹。

看到這些 Design System 有時候都會想說為什麼當初要刻那麼辛苦啊啊啊 ((哭

不過也是經歷過刻 Components 後更了解 React 的 Components 系統、命名、資料、狀態管理等細節。

這麼多 Design System 最多也只是一個 『工具』，為的是減輕設計師和前端工程師的負擔，如果只是一個頁面、簡單 Input 輸入表單、按鈕連結等功能，也許大部分的 Design System 都能達成，但視覺上要如何排列、文字內容要如何呈現、哪些功能要先開發等，這些都還是需要 UI/UX 設計師、文案、 PM 等其他專業的人員一起完成，而開發方面工程師也會需要整理資料狀態、判斷、擴充性等維護的工作，讓產品或網站功能更完整。
也就是說 Design System 沒有取代了設計師或前端工程師的工作，但都有了共同的文件和語言可以溝通。

如果，你有在使用上面任何一種 Design System 或是有發現更好用的 System 都歡迎[來信](mailto:debby@5xcampus.com)和我交流！

或是到我們的[專頁](https://www.facebook.com/5xruby)上留言！

謝謝你的閱讀！ 🙂

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

自學 Ruby on Rails 推薦的免費資源 TOP 5

快速生成 HTML！Emmet 語法大公開！

資料查找，原來 Ruby on Rails 的 Scope 是這樣用的！

CSS 料理室 (一) | CSS 變數辛香料：不用 Sass、不用 JavaScript，也能實做 Dark Mode Theme 切換！

從模組化帶你認識 Webpack

認識瀏覽器的神秘儲存空間 - localStorage

用 Rails 串接藍新金流一點都不難！

讓人心動的 6 個 React Design Systems

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款