五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


## 前言

在學習 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>`

接著，我們需要指定樣式『**套用的範圍**』。
從完成照當中仔細地看到，我是將滑鼠進入 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) 課程唷 ❤️️
>


Post - 讓人心動的 6 個 React Design Systems

讓人心動的 6 個 React Design Systems

隨著網頁技術發展，現在的網站可以做到許多事，除了購物外、還能開發各式的工具，例如你可以透過瀏覽器收發信件 (Gmail) 、存取檔案 (Dropbox)、輕鬆的看電影（Netflix）、專案管理 (Trello)、線上會議 (Google Meet) 等；那麼要如何開始著手撰寫網站呢？

你需要先知道建構網站的三大要素：**HTML / CSS / JavaScript**

簡單來說 HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，最後 JavaScript 讓網頁動起來(像是畫面淡入、文字淡出等)、讓網頁與使用者互動(例如，點擊按鈕跳出視窗、輸入文字等)。

接下來將會逐步介紹這三者的關係，進入正題 🏃‍♀️

## 什麼是 HTML ?

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

不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。大部分標籤會有開頭、結尾，讓網頁知道所謂的“標題”內的文字有哪些。這時候會像這樣標示：

```html
<h1>我是標題</h1>
```

或是按鈕：

```html
<button>我是一顆按鈕</button>
```

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

```html
<img src="https://i.imgur.com/P8U0L2O.jpg" alt="替代文字">
```

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

HTML 提供很多標籤做使用，但標籤使用也是需要留意的，例如 Google 進行爬蟲，定期會將發佈的網頁收錄在索引內，讓使用者可以透過搜尋找到網頁。Google 會盡可能的收錄完整資訊的網站，但如果是標籤使用濫用，嚴重可能會引響搜尋排名。因此善用 HTML 標籤也是一門學問，這方面我們也有開設[相關的課程](https://5xruby.tw/courses/html)，有興趣的人可以查閱 :)

## 什麼是 CSS ?
在 MDN 的 [CSS 基礎](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics) 有明確的解釋：

> CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）

我們常形容 HTML 猶如一個人的骨架，而 CSS 就像是為這個人穿上衣服，你可以透過 CSS 自訂網頁字體樣式、顏色，網頁排版橫排、直排、動畫等，除此之外，CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁，使頁面不管是在任何尺寸下都整到適合的瀏覽樣式。

來看看 CSS 長什麼樣子吧：

![CSS 樣式](https://i.imgur.com/HvliE0u.jpg)

可以看到上面 『**選取**』了 HTML 頁面中的 `h1` 顏色變成藍色。

如果你想要將你的網頁上其他 HTML 標籤更改樣式，可以透過上面的方式撰寫。

CSS 可以做到哪些有趣的效果呢？
不妨查看 GitHub 上的： [You Don't Need JavaScript
](https://github.com/you-dont-need/You-Dont-Need-JavaScript)

當中示範了 [跳出視窗](https://github.com/you-dont-need/You-Dont-Need-JavaScript#modalpopup)：

![](https://i.imgur.com/SQZ3Mjn.png)
<small> [CodePen Home Modal Container without JS](https://codepen.io/chrisburnell/pen/scyKF) from [Chris Burnell](https://codepen.io/chrisburnell) </small>

[Tab 切換](https://codepen.io/fusco/pen/Wvzjrm)

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

<small> [Transitioning Between Variable Heights with CSS Tabs](https://codepen.io/fusco/full/Wvzjrm) from [Joseph Fusco](https://codepen.io/fusco) </small>

這些都只使用 CSS 和 HTML 撰寫，是不是令人振奮呢！

但，先別急著開始寫網站，有了這兩項神器外，絕對不能錯過網站重要角色： JavaScript

## 什麼是 JavaScript ?

JavaScript (簡稱 JS) 是一個簡單、以物件為基礎的腳本語言。這樣說可能有點抽象，讓我們繼續引用前述的 HTML 像是人的『骨架』、CSS 是『衣服樣式』，那麼 JavaScript 就像是人的『神經系統』。

我們能透過 JavaScript 讓網頁骨架移動、改變樣式、獲取資料(如果你有聽過網站 API 串接)、讓使用者和你的網站互動(像是讓他們輸入文字後顯示正確或錯誤的提示)等許多事。

JavaScript 的程式碼長什麼樣子呢？來看看以下例子：

```javascript=
// 這邊準備執行一件事，並且將這件事命名為 “sayHello”：
function sayHello() {
  alert('Hello World!');
}

// 執行上面的 sayHello 這件事 
sayHello();

```

在 JavaScript 的執行區域或檔案內輸入上面的程式碼，即會顯示跳出視窗：

示範：https://jsbin.com/bibabiqugo/edit?js,output

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

就這樣輸入了程式碼，我們讓網頁跳出了訊息，這就是 JavaScript 提供的方法之一。

你或許有聽過 React 、 Vue.js 、 Angular 或是 jQuery，這些都是從 JavaScript 發展而成的，而 React / Vue.js / Angular 皆是『[前端框架](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)』， [jQuery](https://jquery.com/) 則為 JavaScript 的 『函式庫(Library)』，這些框架和函示庫誕生除了解決 JavaScript 本身某些問題、優化開發和維護效率等，也使得 JavaScript 成了[蟬聯最熱門的程式語言榜首](https://octoverse.github.com/) 多年的原因。

---

以上就是 HTML / CSS / JavaScript 簡介，如果對於這三個主題有興趣，

推薦上 MDN 文件查閱：
[學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn) 

在 MDN 上有詳盡的指令、語法說明，算是一個網站開發的線上辭典，不妨多多利用！

如果你對於這樣的文件感到複雜的話，同樣可以透過 Google 搜尋，在開發者社群內也許會遇到和你有相同問題的人，有很許多優秀、樂於分享的開發者也會透過文章的方式記錄這些解決或理解的過程，寫法或描述可能有誤或是過時，在搜尋時也請記得多方比較喔！

試著 Google 輸入你的問題關鍵字吧！

如果你已經有在寫 HTML / CSS 的話，這邊可以看到我們先前所做的懶人包：

<a href="https://www.facebook.com/520517765024852/posts/901393513603940/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/zAX0pqH.jpg" alt="Markdown 語法懶人包">
</a>

<a href="https://www.facebook.com/520517765024852/posts/843516712724954/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/ZklArtO.jpg" alt="如何寫出最佳的 HTML & CSS 程式碼？">
</a>

<a href="https://www.facebook.com/520517765024852/posts/875234692886489/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/P8U0L2O.jpg" alt="CSS 修圖效果 8 大招">
</a>

或是追蹤我們 [專頁](https://www.facebook.com/5xruby)，我們將不定期更新技術懶人包、文章。

和我們一起學習網頁開發技能！ 💪💪


post - 網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

<small>Photo by Kun Fotografi from [Pexels](https://www.pexels.com/zh-tw/photo/1230302/ "Pexels")</small>

## 前言

近期跟學員們介紹如何使用 Fetch API 串接資料時，發現同學對於回傳的 Promise 物件似乎有很大的疑惑。藉此來介紹何謂 Promise，也收集了一些同學們的常見問題來展開初探 Promise 之旅。

## 何謂 Fetch API

#### 為何 Fetch API 回傳會是個 Promise 物件 ？

比起過去常使用的 XMLHttpRequest，Fetch 的設計角度和使用方法都很不同，而 Fetch 實際在取得遠端資訊時，語法相較 XMLHttpRequest 簡潔且過程容易許多，卻可以達到相同的效果。

#### 至於 Fetch API 為何是 Promise 物件 ？ 

首先科普一下 Fetch API 是提供 JavaScript Interface 來處理 HTTP pipeline，例如：  `request` 和 `response`。就如上述 Fetch 就是基於 ECMAScript6 Promise 語法結構開發出來了的技術，因為如此，我們可以無痛使用，且彈性較高。

## 何謂 Promise ?

Promise 為建構函式，此函式必須傳入一個參數(該參數為函式)，這參數函式又包含兩個參數(都為函式)，分別為 `resolve` 和 `reject` 。 而 `resolve` 和 `reject`，這兩個函式分別代表成功與失敗的回傳結果，且這兩個方法是 JaveScript 引擎幫我們準備好了，無需再額外定義，但我們要注意的地方為兩個函式只能回傳一個，當回傳結果後，一個 Promise 就代表結束了。 

而 Promise 大多使用在非同步處理，至於何謂同步和非同步，大家可以參閱另外一篇文章 [無痛理解 JS | 非同步怎麼運作？](https://5xruby.tw/posts/how-js-synchronous-works)，相信大家就可以有基本了解。

## 何謂 Promise 物件 ?

Promise 物件是以 Promise 建構函式為原型，並使用 `new Promise()` 建立起來的物件。

Promise 物件一旦建立起來就有 `then`、`catch`、`finaly` 等方法可以呼叫。

```javascript
const promiseObject = new Promise((ressolve, reject)=>{})

promiseObject.then() : 接收 Promise 回傳正確的結果。
promiseObject.catch() : 接收 Promise 回傳失敗的結果。
promiseObject.finaly() : 無論正確或失敗都會回傳。
```

## Promise 狀態

### Promise 的狀態有三種：

#### 1. pending

![](https://i.imgur.com/LFW1tlm.png=400x)

#### 2. fulfilled

![](https://i.imgur.com/XZBLzZD.png=400x)

#### 3. rejected

![](https://i.imgur.com/jP3DSuI.png=400x)

Promise 的狀態一開始會是 `pending` ， 一旦 `resovle()` 被使用，狀態就會轉變為 `fulfilled`，而 `reject()` 被使用，狀態就會被轉變為 `rejected`。

這裡需注意的地方為 Promise 只有結果會影響狀態，無法透過一般外力操作使其更改狀態，而狀態一旦從 `pending` 改變後，就無法改變了。

## Promise 用法

試著建立一個 Promise 吧！

舉個例子：

![](https://i.imgur.com/m1W2zuF.jpg)
<small>Photo by 甲上，2017.04.18</small>

泡麵，有專屬於它的烹調時間，這就來用程式來判別一個泡麵是否有完美成功，
首先我們準備了 `cookFoodPromise function` 來執行我們的完美料理，而這個 `function` 裡面也有一個承諾 (Promise) 會告知我們每煮出來的一碗泡麵是否是完美的，絕對不會破壞我們的用餐體驗，這時我們只要帶入兩個參數，菜名和烹調時間(分鐘計)，時間會隨機產生，如果在 3 和 5 分鐘之間，就會完美成功，其他則會失敗。

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('泡麵', cookTime)
.then((res) => { console.log(res) }) // 泡麵 完美
.catch((err) => { console.log(err) }) // 泡麵 失敗
```

當執行完 `cookFoodPromise function` 後，如果完美泡麵被煮出時，立刻上桌享用，此時可以使用 `then()` 這個托盤（方法），來接這碗泡麵 (Promise 回傳 `resolve` 的結果)。
不完美的話，則使用 `catch()` 這個廚餘桶（方法）來處理這碗泡麵 (Promise 回傳 `rejected` 的結果)。

## Promise 鏈接

不僅僅是上述例子如此，我們還可以使用 `then` 來串接上一個的結果繼續做事情，如下：

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('泡麵', cookTime)
.then((res) => { return res + '好吃'} )
.then((res) => {console.log(res)}) // "泡麵 完美好吃"
.catch((err) => { console.log(err) }) // "泡麵 失敗"
```

但是我們在某個階段發生錯誤時，該階段下一個是 `then` 的話就不會執行，會直接跳到 `catch`。

其實 `catch` 執行完畢後，還是可以繼續使用 `then` 串接，但在實務上我們很少會這麼做，如下：

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('麻油雞泡麵', cookTime)
.then((res) => { return cookFoodPromise('花雕雞泡麵', 6)} ) //煮第一碗成功，接著煮第二碗固定失敗
.then((res) => {console.log(res)}) // 不執行
.catch((err) => {return err+ '準備'})
.then((failure) => {console.log(failure + '倒進廚餘桶')}) //第一碗就失敗："麻油雞泡麵 失敗準備倒進廚餘桶" 第二碗才失敗："花雕雞泡麵 失敗準備倒進廚餘桶"
```

## Promise.all()

有時候我們可能會想同時享用多碗泡麵，這時候就需要使用複數個爐台，這個複數爐台就是 `Promise.all()`，其背後操作則是使用陣列將多個 `promise` 函式打包，當全部執行完成後回傳陣列結果，而陣列的結果順序與一開始傳入的一樣。 但是一旦有 Promise 物件失敗，將回傳失敗那個物件回傳的結果，如果是全部失敗，則回傳第一個 Promise 物件的失敗結果，來當成整個最後的錯誤訊息。

### 成功：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 5, 1500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res)) // ["花雕雞泡麵 完美", "麻油雞泡麵 完美"]
```

### 失敗：

一個失敗的例子：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 5, 2500), cookFoodPromise('麻油雞泡麵', 2, 1500)])
.then(res => console.log(res))
.catch(err => console.log(err)) // "麻油雞泡麵 失敗"
```

全部失敗的例子：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 2, 2500), cookFoodPromise('麻油雞泡麵', 2, 1500)])
.catch(err => console.log(err)) // "花雕雞泡麵 失敗"
```

## Promise.race()

`race` 和 `all` 不同的是只要有一個 Promise 物件回傳結果，不論成功或失敗，都會結束該次 Promise.race() 呼叫。

### 成功：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.race([cookFoodPromise('花雕雞泡麵', 5, 4500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res)) // "麻油雞泡麵 完美"
.catch(err => console.log(err))
```

### 失敗：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.race([cookFoodPromise('花雕雞泡麵', 2, 1500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res))
.catch(err => console.log(err)) // "花雕雞泡麵 失敗"
```

## 結語

今天跟大家簡單介紹 Promise 以及其用法，相信學習 Promise 後，對於非同步處理就再也不那麼陌生，整個流程控制也會掌握得比較好，後續有機會的話，可以和大家來介紹專屬於它的語法糖衣 - `Async` & `Await`，希望透過本篇大家對 Promise 可以有初步的了解 😀

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
> 
> 我們近期也有開設 JavaScript 課程喔！ 👉  [https://reurl.cc/KxGnVq](https://reurl.cc/KxGnVq)
> 
> 講者是『 0 陷阱！0 誤解！8 天重新認識 JavaScript！』作者 - 🧑‍💻 __Kuro 老師__ 
> 

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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

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

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

從模組化帶你認識 Webpack

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

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

讓人心動的 6 個 React Design Systems

網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

你今天 Promise 了嗎？

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款