五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


## 什麼是 DSL? DSL 的存在意義是什麼？

DSL 為 Domain Specific Language 的縮寫，中文譯為「特定領域語言」。而 DSL 的開發通常是為了迎合某些特殊的需求，例如針對系統、平台、程式工具、軟體問題、商業邏輯等等領域，當人們發現現有的程式語言並沒有辦法好好地嵌合使用需求，DSL 就有其存在的價值。目前為人所知的 DSL 包括 CSS 以及 SQL，而這種易於人類閱讀的 DSL 也能夠讓程式設計師乃至於一般使用者都能享受 DSL 帶來的好處，甚至不懂程式設計的使用者都能夠針對自己的需求調整參數。

而 Ruby 本身由於程式設計面本身帶有易於閱讀的特質，因此非常多的 Gem 都是開發為 DSL 的形式，例如 [AASM](https://github.com/aasm/aasm)、[whenever](https://github.com/javan/whenever)、以及最為廣為人知，最多人使用的測試框架 [RSpec](https://github.com/rspec/rspec) 等等。

這篇文章透過設計一個簡單的 RSpec 框架，來告訴大家一個 DSL 是如何開發而成的。

## 測試範例

我們會用下面的程式來舉例。

```ruby
class CatFactory
  def produce
    "meow"
  end
end

describe CatFactory
  describe "#produce" do 
    it "produce a cat and meowing" do
      expect(CatFactory.new.produce).to eq("meow")
    end

    it "does not produce a dog" do
      expect(CatFactory.new.produce).not_to eq("woof")
    end
  end
end
```

這是一個相當簡單的範例，我們有個貓咪工廠，每當我們產出一隻貓就會喵一聲。下面的 Test Case 則有兩個，在 DSL 的形式之下，我們可以很明顯地讀懂這個測試想表達的意思：我們希望測試這個 #produce 函式可以產生出一隻貓，並且「喵」一聲，而不是產生出一隻狗。

## 實作 RSpec

接著我們會慢慢地實作出小型的測試框架，先從 describe 開始吧！

```ruby
class Describe
  def initialize(context, &block)
    @context = context
    instance_eval(&block)
  end

  # 為了讓我們可以使用 describe 來做成巢狀結構
  def describe(context, &block)
    Describe.new(context, &block)
  end
end
```

由於我們希望 DSL 的形式是 `describe CatFactory` 而不是`Describe.new(CatFactory)`，我們可以在 Describe 這個 class 外面新增一個 helper method:

```ruby
# helper method

def describe(context, &block)
  Describe.new(context, &block)
end
```

如此以來我們就可以利用 `describe` 來創造一個清楚明瞭的巢狀結構了。

接著我們希望把每個測試的 Case 都化為一個物件稱為 Example，因此我們要在創建一個新的 class。

```ruby
class Example
  def initialize(context, &block)
    @context = context
    instance_eval(&block)
  end

  def expect(result)
  end

  def to(expectation)
  end

  def not_to(expectation)
  end

  def eq(expectation)
  end
end
```

讓我們來一個一個實作這些函式吧。

\#expect 這個函式單純只是保存測試的結果，因此是最為容易的一個。

```ruby
  def expect(result)
    @result = result

    # 為了讓 #expect 之後可以繼續串 Example 裡頭的其他函數，所以我們這裡希望回傳 self。

    self
  end
```

\#eq 這個函式很單純只是做出像 `==` 一樣的運算，不過我們必須將它傳進 \#to，並且和真正的結果對比。這裡我們會用 Proc 來處理。

```ruby
  def to(expectation)
    @test_result = expectation.call(@result)
  end

  def eq(expectation)
    Proc.new { |result| result.eql?(expectation) }
  end
```

別忘了，我們還有一個 \#not\_to，不過 \#not\_to 其實就是 \#to 的相反，因此就很容易了。

```ruby
  def not_to(expectation)
    @test_result = !(expectation.call(@result))
  end
```

## 顯示測試的結果

我們已經實作了大致的邏輯，現在我們希望可以在終端機中顯示我們的測試結果。這裡我們希望顯示出 describe 的巢狀結構，並且也列出所有 \#it 表示的測試內容描述。為了表現出測試的結果是否成功與失敗，我們要運用 `colorize` 這個 Gem。

為了達到上述的功能，我們希望給 `Example` 一個 `test_result` 的 Reader，讓 `Describe` 可以得知測試的結果。

```ruby
  class Example
    attr_reader :context, :test_result

    # other code below
    # ...
  end
```

接著我們讓 `Describe` 可以用陣列儲存我們的 context 和 example：

```ruby
  class Describe
    attr_reader :context, :examples, :describes
     def initialize(context, &block)
      @context = context
      @describes = []
      @examples = []
      instance_eval &block
    end

    def describe(context, &block)
      describes << Describe.new(context, &block)
    end

    def it(context, &block)
      @examples << Example.new(context, &block)
    end
  end
```

最後，我們在 `Describe` 裡面實作一個 `test` 函式 來啟動整個測試：

```ruby
    def test
      puts context
      describes.each do |describe_node|
        puts "  " + describe_node.context
        describe_node.examples.each do |example_node|
          color = example_node.test_result ? :green : :red
          puts "    " + example_node.context.colorize(color)
        end
      end
    end
```

在這個函式裡面我們可以看見，我們先印出最上位的 context，之後我們再印出每個巢狀結構下面的 `describe` 裡面的 context，最後則是印出 Example 的結果。而 color 的部分則是我們的 test_result 是 true 的情況下印出綠色，而 false 的情況下則印出紅色。

接著讓我賦予 test case 一個變數，然後啟動測試。

```ruby
rspec = describe CatFactory
  describe "#produce" do 
    it "produce a cat and meowing" do
      expect(CatFactory.new.produce).to eq("meow")
    end

    it "does not produce a dog" do
      expect(CatFactory.new.produce).not_to eq("woof")
    end
  end
end

rspec.test
```

當你執行這個 Ruby 檔案時，你應該會看到一個巢狀結構的顯示，代表你順利創造出了這個小型的 DSL 測試框架了！

```ruby
CatFactory
  #produce
    produce cat and meowing
    does not produce dog
```

## 總結

由於 Ruby 的種種特性（適合 Metaprogramming，簡潔的寫法，易讀的語句），讓 DSL 的實現變得更加容易，也使得很多的 Gem 成為非常洗鍊的 DSL 工具。未來在製作自己的工具的時候，不仿利用這些特性，也可以讓你的工具更加易於應用及推廣。

---

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


post-以 Rspec 為例，創造一個自己的 DSL 工具吧！

以 Rspec 為例，創造一個自己的 DSL 工具吧！


在 [COSCUP 2019 講完用 WebRTC 建立半分散式網路](https://coscup.org/2019/programs/58fcc6a0-1e5c-4a17-af0a-3e3dfba381c4)，想說來把[投影片](https://md.pastleo.me/p/webrtc-network-coscup2019-talk#/)整理成一篇文章來紀錄一下這段時間拿 WebRTC 嘗試形成網路的一些實驗結果

## WebRTC 是什麼？

簡單來說 WebRTC 可以讓瀏覽器直接跟瀏覽器連線，但是連線的建立很麻煩，開發者要自己想辦法讓兩個瀏覽器交換 handshake 資訊 (offer, answer, ice)

## Multiplayer game using WebRTC

跟朋友開始一個遊戲(?)專案 -- Bazaar，就如同下面這個影片這樣，可以有多個玩家在畫面上走來走去跳來跳去，移動等資訊就是透過 WebRTC 傳輸的

![](https://static.pastleo.me/assets/bazaar-coscup-demo.gif)

* 程式碼： [https://github.com/pastleo/bazaar](https://github.com/pastleo/bazaar)
* 想試玩？在這： [https://bazaar-pre.pastleo.me/](https://bazaar-pre.pastleo.me/)

### Bazaar client 之間的連線方法

其實很無腦，首先用 websocket 跟伺服器 (wss) 連線，接著與所有玩家連線

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

1. firefox 與 wss 連線
2. firefox 與 wss 連線完成
3. chromium 與 wss 連線
4. chromium 與 wss 連線完成
5. chromium 透過 wss 與 firefox 建立 WebRTC 連線
6. chromium 與 firefox 的 WebRTC 連線建立完成
7. safari 與 wss 連線
8. safari 與 wss 連線完成
9. safari 透過 wss 與 firefox 以及 chromium 建立 WebRTC 連線
10. safari 與 firefox 以及 chromium 的 WebRTC 連線建立完成

這邊很快就會發現一件事，就是每個玩家的連線數是總玩家數 - 1，也就是說假設有 20 個人在場上，瀏覽器要建立 19 個連線...雖然沒有明定 WebRTC 的連線數限制...但是我自己後來做測試時大概 30 ~ 40 個連線時 chromium 會跟我說太多連線不允許建立更多連線

## 一個發想：如果 server 可以是一個 NPC...

不知道當時在想什麼，這個念頭讓我開始把 server 當成 client 看待，為了讓 browser 對待 server 就跟其他 browser 一樣，嘗試製作 WebRTC 跟 WebSocket 共用的界面

### WebRTC 與 WebSocket 共用的 interface

![](https://static.pastleo.me/assets/190815150840.svg)

對於 wsConn 以及 rtcConn 來說，提供的功能就是送訊息以及接收訊息，很容易做成共用的界面

雖然兩者建立連線的方式有很大的不同，但是 WebRTC 連線建立其實就是需要一個節點幫忙傳送 handshaking 資料，於是試著蓋一層 peerConns，上面提供 API `connect(peer, viaPeer)`

![](https://static.pastleo.me/assets/190815153930.svg)

* `peer` 如果是 WebSocket URL，則不需要 `viaPeer`，直接連線就好，而且就算給 `viaPeer` 也不會怎麼樣
* `peer` 如果是一個瀏覽器 (每個瀏覽器初始化時會自動產生一個 id)，必須給上 `viaPeer` 指定一個節點幫忙傳送 handshaking 資料建立連線

> 不過 bazaar 遊戲到目前為止 `viaPeer` 永遠會是 wss

## 透過 browser 進行 WebRTC 連線建立會是什麼樣子？

WebRTC 連線一定會需要一個節點幫忙做連線，因此

* 第一個連線一定是 WebSocket

後來可以透過瀏覽器幫忙連線，因此

* 加入網路之後可以關閉 WebSocket 連線

舉個例子來跑一次看看：

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

1. 假設一開始 chromium 已經跟 firefox 建立 WebRTC 連線，chromium 已經跟 wss 建立 WebSocket 連線，而且 firefox 沒有跟 wss 連線
2. safari 與 wss 連線
3. safari 與 wss 連線完成
4. safari 透過 wss 與 chromium 建立 WebRTC 連線
5. safari 與 chromium 的 WebRTC 連線建立完成
6. safari 透過 chromium 與 firefox 建立 WebRTC 連線
7. safari 與 firefox 的 WebRTC 連線建立完成

雖然第一個連線一定是 WebSocket，不過還是可以某種程度的降低對 WebSocket server 的依賴性，於是就開始嘗試把整個連線的東西抽出來做...

## 半分散式網路

這個抽出來的東西暫時叫他 unnamed-network(?)，總結前面的實驗以及遇到的問題，抽出來之後做了這些事：

* 在這之前 WebSocket server 都是 Elixir 做的，這邊改用 nodejs 實做
  * WebSocket server 是個 client, 網路中同時可以有複數個
* 群組功能
  * 一個 client 可以同時加入多個 group
  * 群組廣播

### unnamed-network 架構

![](https://static.pastleo.me/assets/190815183330.svg)

* wsConn 與 rtcConn 部份幾乎與上面一樣負責收發訊息
* connProvider 部份負責處理 browser 與 wss 接受連線時行為上的不同
* connManager 與上面差不多，提供 `connect(peer, viaPeer)` 給上層使用
* client 部份負責網路的維持並提供群組功能

### connManager 連線建立策略

因為 wss 也只是一個 client 了，wss 也很有可能會想要主動與他人連線，列舉一下整理成四種情況：

| 左下連右上 | wss    | browser        |
|----------|--------|----------------|
| wss      | ws 直連 | 邀請連 ws `(!)` |
| browser  | ws 直連 | WebRTC `(!)`   |

這邊比較有趣的就是『當 wss 想要連到 browser』的狀況，這邊想到的方法是透過 viaPeer 邀請 browser 來連 wss；需要 viaPeer 的部份標上 `(!)`，所以結論來說不是只有 WebRTC 會需要 viaPeer

### 網路的維持以及群組功能

這就是還很不完善的部份了，這邊就稍微講一下目前運作的行為

* 初始化時
  * 每個 client 有一個 known list 紀錄已知的 wss
  * 所有 client 都會加入 `"/"` 群組
* 加入群組時
  * 對 `"/"` 請求 `route-group`
    * max hops: 10
  * 加入群組時發現找不到人就是建立新群組

沒關係這邊有簡易的案例：

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

1. 假設一開始有一個 `group1` 有三個人，其中 chrome 與 wss 連線
2. safari 因為 known list 知道 wss 的存在，加入 `"/"` 群組時會去找 wss 連線
3. safari 與 wss 連線建立
4. safari 對著 `"/"` 群組的節點詢問 `route-group` `group1` 怎麼走，因此對著 wss 發問
5. wss 對著 `"/"` 群組的節點詢問 `route-group` `group1` 怎麼走，因為詢問來自 safari，因此對著 chrome 發問
6. chrome 自己在 `group1`，回覆自己的 id
7. wss 收到回覆，回覆 safari 得到的 id 加上自己的 id
8. safari 透過 wss 與 chrome 連線進入 `group1`，因此透過 wss 與 chrome 進行 WebRTC 連線並請求加入 `group1`
9. safari 與 chrome 的 WebRTC 連線建立完成並且加入 `group1`

不過這個網路顯然大家會來來去去的，safari 只跟 group1 保持一個連線感覺很危險，所以加上 neighbor 數量維護的機制，每個節點自己會盡可能維持一個群組內的連線數（也就是鄰居 neighbor 數）在 3 - 6 個之間：

* 低水位: 3 -- 低於這個數量會嘗試尋找更多 neighbor
* 高水位: 6 -- 高於這個數量會去減少 neighbor 數量
* 滿水位: 10 -- 不接受更多連線
  * wss 的滿水位設定在 100 避免加入不了網路

所以舉例來說：

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

1. 假設延續剛剛建立的狀態，且 wss 已經與另外 5 個節點連線
2. wss 有 7 個連線了，需要隨機挑選一個節點斷線，這邊假設選擇 safari 斷線，同時 safari 發覺自己的 neighbor 過少，詢問 `group1` 是否還有其他人
3. chrome 回覆其他 neighbor 的 id (firefox1, firefox2)
4. safari 透過 chrome 與 firefox1, firefox2 建立 WebRTC 連線
5. safari 與 firefox1, firefox2 的 WebRTC 連線建立完成

花了這麼多力氣建立了網路...總得來送些訊息吧？群組廣播的時候發起廣播的節點需要附上隨機的 `msgId` 然後送給 neighbors，收到廣播訊息的節點先看一下 `msgId` 是否有看過，如果看過就不要理他，反之則觸發事件告訴更上面的 application 層並且繼續傳遞自己的其他 neighbors，一樣舉個例子：

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

1. 假設 group1 已經有 6 個節點，連接的拓撲上有環
2. safari 發出廣播，假設 `msgId` 為 `123`，傳送給 chrome, firefox 與另一個 safari
3. chrome 與 firefox 之間如果又收到同樣的 `msgId` `123`，則會避免繼續再把訊息散布下去

不過如果有 neighbor 離開, 斷線又或是一堆人離開的時候，還沒有想到一個好方法避免孤島產生，目前的方式就是重新找 wss 加入群組，其實是很沒效率而且很容易出問題的方法...所以這個網路或許建立連線的時候還行，但如果要在人來來去去的情況下持續運作是肯定有問題的

### 要讓這個 network 能用的話需要...

* 能跨多個 node 進行連線以增加多 hop 連線效率
  * 上面提到透過 viaPeer，意思是只能透過一個節點來幫忙連線，如果要跨多個點連線則是要依序跟路上所有人建立連線
* wss 能夠提供 stun/turn 服務，有自己嘗試架設了 stun server 用在下面的 demo 看起來還行
  * [https://aur.archlinux.org/packages/coturn-git/](https://aur.archlinux.org/packages/coturn-git/)
  * [https://github.com/coturn/coturn](https://github.com/coturn/coturn)
  * [https://aur.archlinux.org/packages/stund](https://aur.archlinux.org/packages/stund)
* 分散式，並且同時可以避免孤島產生的機制
  * 感覺上 [Distributed hash table](https://zh.wikipedia.org/wiki/%E5%88%86%E6%95%A3%E5%BC%8F%E9%9B%9C%E6%B9%8A%E8%A1%A8) 可能是解法之一
* 解決安全性問題
* 釋出為一個連線框架

### 拿來做個 Youtube sync 聊天室

畢竟都花這麼多力氣了，就來做點東西刷點存在感，這是一個群組聊天室，加上 Youtube 同步播放(或是同步顯示 imgur 圖片)的功能，跑起來大概像是這樣：

<iframe width="560" height="315" src="https://www.youtube.com/embed/kogpQkkBlGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### DEMO 站連結：
[https://static.pastleo.me/unnamed-network-chat-ysync/](https://static.pastleo.me/unnamed-network-chat-ysync/)

> 可以的話請用 chrome / chromium 最新電腦版，同時網路順暢的情況下試玩，這個東西就如同上面講的還有問題，所以有 bug 也算是在預期內

個人是期望這個 network 可以做到這些事情：

* 使得瀏覽器不用安裝任何 plugins / add-ons 就可以使用分散式應用程式
* 降低架設 wss 的技術門檻，人人都可以成為網路進入點
* 讓不同應用程式可以共用這個 network 來建構多人遊戲、共筆系統等

### unnamed-network 專案：
[https://github.com/pastleo/unnamed-network](https://github.com/pastleo/unnamed-network)

如果看完有興趣歡迎來按個星星讓我知道這個東西可以繼續做，或是透過我的個人網站 [https://pastleo.me/](https://pastleo.me/) 上的聯絡方式找到我，感謝各位的閱讀！

本技術文章同時也發布在個人站上：[https://md.pastleo.me/webrtc-unnamed-network-chatroom](https://md.pastleo.me/webrtc-unnamed-network-chatroom)


Post - 用 WebRTC 半分散網路弄一個聊天室 - cover

用 WebRTC 半分散網路弄一個聊天室

[React Hooks](https://reactjs.org/docs/hooks-intro.html) 在 React 16.8 推出之後 <del>(雖然已經有 lag 瞬間就已經來到 React 16.9.0 惹)</del>，讓工程師們又多出幾行 code 的時間可以滿足客戶的<del>磨練</del>需求啦！
這次就利用 React Hoock 來串接一個聊天室應用，看看 React Hooks 如何幫助簡化並加速整個開發過程。除了 React 自身提供的 `useState` 和 `useEffect` hook 之外，還會用到幾個開源的 React hooks 來幫忙提昇開發效率。

- 預計實做功能
	- 群組聊天室
	- 傳送與接收訊息
	- 訊息履歷
	- 使用者上線離線通知

## 準備工作

- [Open-chat server](https://github.com/akash-joshi/socket-server) 是一個使用 socket.io 和 Node.JS 技術的開源應用，這篇文章先把他想像成一個 server 端的黑盒子，主要負責處理這次 server 端的程式部份。
- 所有的 CSS 樣式會全放在一個 [ CSS ](https://github.com/fokayx/react-hooks-socket-client/blob/master/src/App.css) 檔案裡面。
- [React](https://reactjs.org/)
	- Node >= 8.10
	- npm >=5.6

```bash
npx create-react-app socket-client
#npx is not a typo — it’s a package comes with npm 5.2+
cd socket-client
npm start
```

然後在瀏覽器打開 `http://localhost:3000` 可以看到預設的歡迎首頁。接著先來認識一下幾個 APP 裡面會用到的 `hooks`。

## [useState](https://reactjs.org/docs/hooks-state.html)

`useState` 是 React 內建的 hook，用在讓 React functional component 也能擁有原本 class component 才能有的 `state`，原本想要存在 state 裡面的 data 可以輕鬆存在 `useState` 裡面，不用寫 class component 裡的 `this.state` 叭啦叭啦，而且當 state 更新的時候 `useState` 會自動重新渲染 component，兩者都能少寫好幾行的程式碼。

```javascript
import React, { useState } from 'react';
```

這次 APP 要用 `useState` 在 component 中存放使用者輸入的名稱、聊天室名稱，還有使用者名稱的 input 狀態，`nameInput` 這個主要是要確認使用者是否有填名稱，因為在這個 APP 裡面將使用者名稱 (name) 和使用者 id 綁在一起，所以一定要有填才能繼續下去，所以會宣告一個 `handleSubmit` 方法來確認使用者有沒有 name 填好填滿，如果有填 name 等於有了 id，再對 sever 發射訊號，進行建立一個使用者開啟或進入聊天室的動作，聊天室 (room) 的部份如果沒有特別填會進入一個預設的聊天室 (default)。檢查到 name 沒填的話，則會提示警告訊息：Name can't be empty <del>連名字都沒有是要怎麼聊天</del>。

```javascript
// App.js

import React, { useState } from 'react';
import './index.css';

export default () => {
  const [id, setId] = useState("");
  const [name, setNameInput] = useState("");
  const [room, setRoom] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!nameInput) {
      return alert("Name can't be empty");
    }
    setId(name);
    socket.emit("join", name, room);
  };

  return id !== '' ? (
    <div>Hello</div>
  ) : (
    <div style={{ textAlign: "center", margin: "30vh auto", width: "70%" }}>
      <form onSubmit={event => handleSubmit(event)}>
        <input
          id="name"
          onChange={e => setNameInput(e.target.value.trim())}
          required
          placeholder="What is your name .."
        />
        <br />
        <input
          id="room"
          onChange={e => setRoom(e.target.value.trim())}
          placeholder="What is your room .."
        />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};
```

上面的程式碼就是用 `useState` 來存放使用者名稱和聊天室名稱，然後有使用者名稱可以透過 socket 發射事件，server 接收後就會建立帳號 (id) 和聊天室，如果沒有 id 的話視同登出，會重新生成登入的表單畫面。

## [useSocket](https://github.com/iamgyz/use-socket.io-client)

Socket.IO 是在 server 和 client 端提供即時、雙向而且是事件導向的 library， APP 會用 Socket.IO 提供的 `useStocket` 來處理和 Open-chat server 的 websocket 連線和處理收發即時訊息。因為 `useSocket` 不是 React 提供的 hook，所以要安裝 `use-socket.io-client`，才能呼叫 `useSocket`，再用 `socket` 進行一個對 server 連線的動作：

```javascript
$ npm add use-socket.io-client

// APP.js
import useSocket from  'use-socket.io-client';
const  [socket]  =  useSocket('<https://open-chat-naostsaecf.now.sh>');
// useSocket(URL) -> URL：socket server 位址

socket.connect();
console.log(socket); //打開瀏覽器的 consle 確認一下 socket 的狀態是否有正確的連線。
```

在 Socket.io client library 提供的 `socket`  可以被用在任何的 component 裡面，然後透過 `socket` 串聯 server 端的事件，也因此只要是對這個 server 有連線的 client 端都可以對 server 發射事件，那在 APP 裡面的 clent 端如果有對該事件做監聽的話就可以做相對應的處理，例如聊天室更新訊息裡面包含自己和其他人的，來自遠方的他人訊息變動，用 Socket hooks 接收就可以在 APP 這邊各自做好對應的處理。

在這次的應用中會使用幾個 socket 提供的 API，想瞭解更多可以詳閱[官方說明書](https://socket.io/docs) XD

##  [useImmer](https://github.com/immerjs/use-immer)

`useImmer` 是 [Immer](https://github.com/mweststrate/immer) 提供的 hook，所以也要先安裝 `use-immer`，`useImmer` 結合 `useState` 和  Immer 來產生 immutable state，`useImmer` 會根據原始的 state 複製一份 draft state，這樣在進行 state data 操作的時候，可以完整保留原先的 state，相對安全地進行不同的程式邏輯處理，最後再對 state 進行更新。然後 `useImmer` 基本用法和 `useState` 有 87% 像，這裡要用來處理訊息紀錄和在線使用者的部份。看一下 `useImmer` 的基本用法：

```javascript
$ npm add use-immer

const [data, setData] = useImmer(default_value)

setData(draftState => {
  draftState.operation();
});
// ...or
setData(draftState => newState);
// draftState 是現有 state 的複製，進行處理之後可以更新 state
```

關於這個 `setData` 其中會傳入一個 draftState 參數，就是複製於原始的 state ，這麼做可以在 function 內安全地進行操作後再更新 state。APP 會用在訊息和在線人線的更新：

```javascript
const [messages, setMessages] = useImmer([]);
const [online, setOnline] = useImmer([]);
```

## [useEffect](https://reactjs.org/docs/hooks-effect.html)
`useEffect` 是 React 提供的一個 hook，如果對 React 的 class lifecycle methods 有點了解的話，可以當做和 `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` 這三個的功用有點類似。

`useEffect` 在 component 初始渲染的時候會作用個，然後在 React update DOM  的時候再進行動作，在 `useEffect` 裡面可以處理 component 的更新。這邊將 socket 相關的程式邏輯放到 `userEffect`，例如監聽 server 端發出的 socket 事件，然後根據事件，更新在 `useEffect` 裡面處理一些先前定義的 message hook `setMessages` 更新 message，利用 `useEffect` 可以避免 component 重新渲染的時候產生不必要的重複動作，有助於整個 APP 的效能提昇。

```javascript
import React,  { useState, useEffect }  from  'react';
const [socket] = useSocket('<https://open-chat-naostsaecf.now.sh>');
socket.connect();

const [messages, setMessages] = useImmer([]);
useEffect(()=>{
  socket.on('update', message => setMessages(draft => {
    draft.push(['', message]);
  }));

  socket.on('message que',(nick, message) => {
    setMessages(draft => {
      draft.push([nick, message])
    })
  });
}, 0);
```

講到這裡，先來加入一個顯示訊息和一個顯示在線人數的 component：

```javascript
const Messages = props => props.data.map(m => m[0] !== '' ? (<li key={m[0]}><strong>{m[0]}</strong> : <div className="innermsg">{m[1]}</div></li>)
: (<li key={m[1]} className="update">{m[1]}</li>));

const Online = props => props.data.map(m => <li id={m[0]}>{m[1]}</li>);
```

現在再回頭看一下先前定義的 `handleSubmit`，裡面有一個 socket emit 事件 `join`，這個是用來讓 server 端接收到 socket 的發射事件，然後不論是在 server 端還是 client 端透過 `socket.on` 的設定接收，並做出對這個事件的相對處理，在這次的 APP 裡面會用在確認有使用者名稱 (id)，再比對聊天室名稱，如果聊天室名稱相同就會連到同一個聊天室，再進行一個列出該聊天室歷史訊息的動作，如果 server 端沒有比對到聊天室名稱但有填聊天室名稱的話就新開一個聊天室，萬一聊天室名稱未填寫，就讓使用者進入預設的聊天室。<del>bug：少做了一個同樣使用者名稱的阻擋和警告w</del>

```javascript
const handleSubmit {
// ...
  socket.emit('join', name, room);
};

return id ? (
  <section style={{ display: "flex", flexDirection: "row" }}>
      <ul id="messages">
        <Messages data={messages} />
      </ul>
      <ul id="online">
        {" "}
        &#x1f310; : <Online data={online} />{" "}
      </ul>
      <div id="sendform">
        <form onSubmit={e => handleSend(e)} style={{ display: "flex" }}>
          <input id="m" onChange={e => setInput(e.target.value.trim())} />
          <button style={{ width: "75px" }} type="submit">
            Send
          </button>
        </form>
      </div>
    </section>
) : (
// ...
```

## APP 戰神合體

看過上面的幾個 hook 的介紹之後，整個 APP 還要加上幾個小東西：

- 用 `useImmer` 再做一個在線使用者相關的 listener
- 訊息傳送的 submit handler

噹啷下面就是這次 React Hooks 聊天室的完整體現：

```javascript
// App.js

import React, { useState, useEffect } from 'react';
import useSocket from 'use-socket.io-client';
import { useImmer } from 'use-immer';

import './index.css';

let uniqueID = 1;
const Messages = props => props.data.map(m => m[0] !== '' ? (<li key={uniqueID++}><strong>{m[0]}</strong> : <div className="innermsg">{m[1]}</div></li>) : (<li className="update" key={uniqueID++}>{m[1]}</li>) );

const Online = props => props.data.map(m => <li id={m[0]} key={uniqueID++}>{m[1]}</li>);

export default () => {
  const [id, setId] = useState('');
  const [name, setNameInput] = useState('');
  const [room, setRoom] = useState('');
  const [input, setInput] = useState('');

  const [socket] = useSocket('https://open-chat-naostsaecf.now.sh');
  socket.connect();

  const [messages, setMessages] = useImmer([]);
  const [online, setOnline] = useImmer([]);

  useEffect(() => {
    socket.on('message que', (nick, message) => {
      setMessages(draft => {
        draft.push([nick, message])
      })
    });

    socket.on('update', message => setMessages(draft => {
      draft.push(['', message]);
    }));

    socket.on('people-list', people => {
      let newState = [];
      for (let person in people) {
        newState.push([people[person].id, people[person].nick]);
      }
      setOnline(draft=>{draft.push(...newState)});
    });

    socket.on('add-person', (nick, id) => {
      setOnline(draft => {
        draft.push([id, nick])
      })
    });

    socket.on('remove-person', id => {
      setOnline(draft => draft.filter(m => m[0] !== id))
    });

    socket.on('chat message', (nick, message) => {
      setMessages(draft => {draft.push([nick, message])})
    });
  }, 0);

  const handleSubmit = e => {
    e.preventDefault();
    if (!name) {
      return alert("Name can't be empty");
    }
    setId(name);
    socket.emit("join", name, room);
  };

  const handleSend = e => {
    e.preventDefault();
    if(input !== ''){
      socket.emit('chat message', input, room);
      setInput('');
    }
  };

  return id ? (
    <section>
      <div id="chat">
        <ul id="messages"><Messages data={messages} /></ul>
        <div id="sendform">
          <form onSubmit={e => handleSend(e)}>
              <input id="msg" value={input} onChange={e => setInput(e.target.value.trim())} /><button type="submit">Send</button>
          </form>
        </div>
      </div>
      <ul id="online"> &#x1f310; : <Online data={online} /> </ul>
    </section>
  ) : (
    <div id="login">
      <form onSubmit={event => handleSubmit(event)}>
        <input id="name" onChange={e => setNameInput(e.target.value.trim())} required placeholder="What is your name .." /><br />
        <input id="room" onChange={e => setRoom(e.target.value.trim())} placeholder="What is your room .." /><br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};
```

以上就是對 React Hooks 的小小初體驗，跟以前那堆 `this.state` 說掰掰！~~不用花時間寫廢扣，又可以多點廢話惹~~，如果想要再多了解 React Hooks 可以看這篇進階的文章：[Build a powerful chat application using React Hooks](https://blog.flexiple.com/build-a-powerful-chat-application-using-react-hooks/)，打造更完整的聊天室 APP。在 GitHub 有完整的 [APP 專案程式碼](https://github.com/fokayx/react-hooks-socket-client)。

Ref：

-  [Build a Chat App Using React Hooks in 100 Lines of Code](https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/)

---

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


post-React hooks：不用一百行快速勾出 Chat APP

React hooks：不用一百行快速勾出 Chat APP


還記得一開始自學程式語言時，大家一定或多或少都聽過一個名詞 `物件導向`。然後身為程式新手和非程式相關科系畢業的你也許會開始 Google 它到底是什麼意思，然後你會在 [維基百科](https://zh.wikipedia.org/wiki/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1) 上查到諸如此類的解釋：

> 物件導向程式設計（英語：Object-oriented programming，縮寫：OOP）是種具有物件概念的程式編程典範，同時也是一種程式開發的抽象方針。它可能包含資料、屬性、程式碼與方法。物件則指的是類別的實體。它將物件作為程式的基本單元，將程式和資料封裝其中，以提高軟體的重用性、靈活性和擴充性，物件裡的程式可以存取及經常修改物件相關連的資料。在物件導向程式編程裡，電腦程式會被設計成彼此相關的物件。

當下看完名詞解釋，如果你和筆者一樣只是個普通人的話應該根據名詞解釋還是無法了解一個抽象的概念，然後可能因為你強盛的好奇心，會繼續在網路上搜尋更多的文章來理解這樣抽象的概念，但有可能你會發現閱讀更多文章後仍然似懂非懂，不要擔心這是屬於正常的現象。

## 找到方向

上述所描寫的正是筆者個人學習上的經歷，看了些許文章後，仍然覺得少了點什麼才能對整體抽象的理論有更進一步的理解。直到閱讀了 `Practical Object-Oriented Design: An Agile Primer Using Ruby` 才發現作者 [Sandi Metz](https://www.sandimetz.com/) 很懂得如何引導新手走入物件導向的大門。例如談論到物件導向時一定會提到的幾個重要原則：`SOLID`（`單一功能`、`開閉原則`、`李氏替換`、`介面隔離`、`依賴反轉`）當你看過這些原則後對於實際開發上該怎麼應用上，根據筆者個人的學習經驗似乎只會產生更多的疑問。但作者似乎知道與其講那些理論，不如透過探討實際的程式碼由淺入深的方式一步一步告訴你如果同樣的程式碼，採用物件導向的方式撰寫程式碼會有什麼優缺點？如果不使用物件導向的方式去寫可能會造成後續維護程式碼上困難？筆者看完那本書後終於對物件導向有了更深一層的概念，它也提供了思考程式碼「為什麼要這樣寫會更好？」的方向，而不僅僅是停在「把程式碼寫出來會動就好⋯⋯」的層面上。

接下來將分享書中部分的概念，去探討如何運用技巧去撰寫出容易維護的程式碼。

## 管理相依性 Manage Dependencies

在物件導向的程式世界中，物件會有所謂 `相依性` 的問題，什麼是相依性呢？我們舉現實生活中的車子來理解這個抽象概念。車子是一種交通工具對吧？在 `Ruby` 中車子將可能會是車子這個類別中的一個實體物件，它的行為是進行移動。那車子為什麼可以移動的呢？車子是需要靠輪子來移動的，我們也可以說車子依賴輪子來進行移動，沒有輪子的車子可能哪也去不了，所以車子對輪子產生了很高的相依性。

在物件導向的世界中，我們對程式類別和物件相互依賴的程度高低稱為 [耦合性](https://zh.wikipedia.org/wiki/%E8%80%A6%E5%90%88%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8))。耦合性愈高的程式理論上來講會愈難維護，這點可以想像我們先前舉例的車子。假設有一款特殊類別的車子，輪子的構造和一般輪子的構造不一樣，是所謂一體成型的構造。也就是說它的輪子不容易替換，那這輛特殊的車子對於這種特別設計的輪子就會有較高的依賴性。就算真的壞了也沒辦法像其他一般車子一樣快速找到同規格的零件進行替換，當我們這樣設計一台車子的時候就像在設計程式中的類別與方法。我們有沒有遵循物件導向的思維去設計程式，在未來專案的開發與維護時就會產生成本上顯著的差異。

接下來我們將透過程式碼的範例介紹 `Ruby` 程式語言特性所衍生出來降低程式碼之間的耦合度與管理相依性的技巧。

## 移除參數順序的相依性 Remove Argument-Order Dependencies

在 `Ruby` 中，當我們要定義一個方法時通常會像接下來的例子一樣定義它：

```ruby
class Car
  def initialize(color, type, wheels)
    @color = color
    @type = type
    @wheels = wheels
  end

  def info
    puts "這輛車子是#{@color}色的，類型為#{@type}，輪子有#{@wheels}個。"
  end
end

sport_car = Car.new('黃', '跑車', 4)
sport_car.info # => 這輛車子是黃色的，類型為跑車，輪子有4個。
```

在這段範例中，我們定義了 `Car` 這個類別(Class)，然後我們在類別中透過定義初始化方法(Initialize)規定了方法需要傳入三個參數(Parameter)，並且在 `Car.new` 實例化類別時需要`依序`將參數傳入。最後再定義了一個方法 `info` 去顯示這輛車子的資訊(`color`, `type`, `wheels`)。

當我們定義好 `Car` 這個類別並且有一天我們的同事需要使用這個車子類別去做一些事情的時候，你可能會需要寫一份文件就像 [Ruby Doc](https://ruby-doc.org/core-2.6.3/) 一樣解釋這個車子類別在實例化時需要依照順序傳入哪些參數。在這個簡單的例子中你可能會覺得，才三個參數會是有多難記？但是你有一天可能會面臨需要建立一個方法擁有七個參數以上要傳呢？你能確保每一個參數的順序你都記得嗎？萬一傳錯順序了程式可能會產生不可預期的錯誤。這時候我們就可以運用 `Ruby` 的一個特性來解決問題，它就是[雜湊](https://ruby-doc.org/core-2.6.3/Hash.html)(Hash)！

在 `Ruby` 的世界中，雜湊是沒有順序性的，它關注的只有一對成雙 `Key` 和 `Value` 的組合，只要對 `Hash` 提供正確的 `Key` 就能取出那把 `Key` 所對應的值。所以在知名的網頁框架 [Ruby On Rails](https://rails.ruby.tw/getting_started.html) 的方法中可以大量發現使用 `Hash` 的存在。現在就讓我們利用 `Hash` 來把剛剛的範例改寫如下：

```ruby
class Car
  def initialize(info)
    @color = info[:color]
    @type = info[:type]
    @wheels = info[:wheels] || 4
  end

  def info
    puts "這輛車子是#{@color}色的，類型為#{@type}，輪子有#{@wheels}個。"
  end
end

sport_car = Car.new(type: '跑車', color: '橘', wheels: 4)
sport_car.info      # => 這輛車子是橘色的，類型為跑車，輪子有4個。

compact_car = Car.new(color: '黑', type: '房車')
compact_car.info    # => 這輛車子是黑色的，類型為房車，輪子有4個。
```

還記得我們在前一個例子中，實例化方法需要依照順序傳入的三個參數嗎？利用 `Hash` 改寫後，現在我們的 `initialize` 的參數部分只規定了一個 `info`，實際上這個 `info` 代表是一個 `Hash`。我們現在從 `info` 取出三個 `Key` 分別是 `:color`, `:type`, `:wheels` 所對應得值，並將它們存入實體變數 `@color`, `@type`, `@wheels` 當中給 `info` 方法顯示資訊用。

這樣一來當我們將參數改為傳入一個 `Hash` 後，我們已經移除提供參數時會產生參數傳入對順序相依的問題，這樣就可以降低因為順序錯誤導致程式出錯的機率。再者因為當我們對 `Hash` 提供 `Key` 要取出對應的值為 `nil` 時，我們可以再利用一個小技巧讓值為 `nil` 時自動帶入預設的數值。也就是這個範例中的這段程式碼：

```ruby
@wheels = info[:wheels] || 4
```

當我們對 `info` 取出輪子數量為 `nil` 時（也就是使用者沒有傳入 `wheels: 輪子數量`)，這時因為 `info[:wheels] || 4` 前者為 `nil` 時會回傳後者的特性，我們實作了當使用者沒有提供該參數時自動帶入 `4` 的預設值。所以範例中的 `compact_car` 在實例化過程中如下：

```ruby
compact_car = Car.new(color: '黑', type: '房車')
compact_car.info    # => 這輛車子是黑色的，類型為房車，輪子有4個。
```

我並沒有傳入 `wheels` 的值，但在執行 `compact_car.info` 時仍然能自動帶入輪子數量的預設值並印出 `這輛車子是黑色的，類型為房車，輪子有4個。`

## 孤立相依性 Isolate Dependencies

當我們在開發專案時，你終究會遇到需在自身類別中使用其它類別所實例化的物件來做一些事情。但每當你在自身類別中引用其它類別時，實際上也是在對其它類別產生了相依性，並且提高了這個類別對其他程式碼的耦合度，這樣的情況並不是我們所樂見的。當我們必須對其它類別產生相依性且無可避免的時候呢？我們該怎麼處理類似的情況呢？這時候我們可以選擇孤立其它類別在自身類別中。接下來我們將使用實例來探討該如何處理類似的情況。

繼續我們先前的車子範例，如果我們要繼續打造這台車子，但是輪子需要乘載更多的資訊量呢？是時候考慮將輪子獨立出來自成一類來處理相關的資訊了。我們先將程式範例改寫為如下：

```ruby
class Car
  attr_reader :name, :color, :wheels, :type

  def initialize(info = {})
    @name = info[:name] || '未命名'
    @color  = info[:color]  || '藍'
    @type   = info[:type]   || '房車'
    @wheels = info[:wheels] || Wheels.new
  end

  def info
    puts "#{name}，這輛車子是#{@color}色的，類型為#{@type}，輪子有#{@wheels.quantity}個。"
  end
end

class Wheels
  attr_reader :color, :quantity, :type

  def initialize(info = {})
    @color = info[:color] || '黑'
    @quantity = info[:quantity] || 4
    @type = info[:type] || '道路'
  end

  def info
    puts "這台車的輪胎規格為#{@type}胎，顏色為#{@color}色，共有#{@quantity}個輪胎。"
  end
end

compact_car = Car.new(name: '發財車', type: '貨車')
compact_car.info          # => 發財車，這輛車子是藍色的，類型為貨車，輪子有4個。
compact_car.wheels.info   # => 這台車的輪胎規格為道路胎，顏色為黑色，共有4個輪胎。

super_car = Car.new(name: '佛拉利', color: '紅', type: '跑車',
wheels: Wheels.new(color: '銀', type: '賽道'))
super_car.info            # => 佛拉利，這輛車子是紅色的，類型為跑車，輪子有4個。
super_car.wheels.info     # => 這台車的輪胎規格為賽道胎，顏色為銀色，共有4個輪胎。
```

當我們決定把 `Wheels` 獨立拆出來成為一個類別時，我們的 `Car` 類別很自然的會期待在初始化物件時接收一個 `Wheels` 類別的實體並存入一個實體變數當中，以待需要時取得 `Wheels` 的實體並使用它。我們所講述的正是這行程式碼：

```ruby
@wheels = info[:wheels] || Wheels.new
```
還記得先前所講的嗎？當我們在自身類別中引用外部類別時，我們就對它產生了依賴性與提高了耦合度。我們現在對 `Wheels` 這個類別產生了依賴。現在來說你可能會想一切都在我的掌控之中因為 `Wheels` 這個類別是我所寫的，我很清楚它會如何運作。但是稍等一下⋯⋯假設今天的專案是多人協作的呢？`Wheels`這個類別是同事所寫的呢？你能確保在接下來的專案開時間下，`Wheels` 對這個類別呼叫 `Wheels.new` 所需要傳入的參數以及他所提供的 [API](https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3) `info` 不會有所變動嗎？它仍然是可靠的嗎？（謎之聲：那個誰誰誰？你幹嘛沒事去改動傳入的參數啦！？這樣害我程式整組壞光光惹 Q_Q，說好的可靠性呢？）

是的，我們的車子確實需要輪子來進行移動，這點無法分割的一部分我承認，但是總會有更好的方式來管理這種情況。那就是`孤立相依性`！既然我們沒辦法把它切割乾淨，那反其道而行，要依賴就要把關係處理好（更好維護的方式）所以因為前人的智慧，我們可以將這段程式碼修改為下列範例：

```ruby
class Car
  attr_reader :name, :color, :wheels, :type

  def initialize(info = {})
    @name = info[:name] || '未命名'
    @color  = info[:color]  || '藍'
    @type   = info[:type]   || '房車'
    external_wheels(wheels)
  end

  def external_wheels(external_wheels)
    @wheels = external_wheels || Wheels.new
  end

  def info
    puts "#{name}，這輛車子是#{@color}色的，類型為#{@type}，輪子有#{@wheels.quantity}個。"
  end
end

class Wheels
  attr_reader :color, :quantity, :type

  def initialize(info = {})
    @color = info[:color] || '黑'
    @quantity = info[:quantity] || 4
    @type = info[:type] || '道路'
  end

  def info
    puts "這台車的輪胎規格為#{@type}胎，顏色為#{@color}色，共有#{@quantity}個輪胎。"
  end
end

compact_car = Car.new(name: '發財車', type: '貨車')
compact_car.info            # => 發財車，這輛車子是藍色的，類型為貨車，輪子有4個。
compact_car.wheels.info     # => 這台車的輪胎規格為道路胎，顏色為黑色，共有4個輪胎。

super_car = Car.new(name: '佛拉利', color: '紅', type: '跑車',
                    wheels: Wheels.new(color: '銀', type: '賽道'))
super_car.info              # => 佛拉利，這輛車子是紅色的，類型為跑車，輪子有4個。
super_car.wheels.info       # => 這台車的輪胎規格為賽道胎，顏色為銀色，共有4個輪胎。
```

有發現差異了嗎？我們把在 `Car` 類別中的 `initialize` 方法中，我們把先前的：

```ruby
@wheels = info[:wheels] || Wheels.new
```

改寫為：

```ruby
external_wheels(wheels)
```

然後在 `Car` 類別中新增一個方法：

```ruby
def external_wheels(external_wheels)
  @wheels = external_wheels || Wheels.new
end
```

為什麼要這樣寫呢？因為如剛剛我說，我們目的是要把引用外部類別 `Wheels` 抽離出來成一個獨立的方法。這樣對我們來說有什麼好處嗎？根據古人的智慧把外部類別隔離成一個方法有以下好處：

1. 當我們引用外部類別，獨立出來可以很明確的知道它是來自外部，是較為不可靠的。
2. 當這個外部類別發生變動導致程式錯誤時，你可以很快找到是在某個隔離出來的方法之中，而不是從一堆程式碼中大海撈針。

## 小結 || 小傑（奇犽？)

在有限的篇幅當中，我們嘗試去探討一個大方向的主題，物件導向在 `Ruby` 的世界中可能會是以怎樣的形式實作。這是一個可以用數千字到上萬字可能都還講不完的主題。但是筆者為什麼要選這樣的主題來分享呢？因為身為非本科生亂入變成每天和 `Ruby` & `Rails` 打交道謀生的工作者，有一天因為工作上的需求去閱讀人生第一本原文書並把它看完了。從閱讀的過程中發現物件導向的觀念在同事幾年前所寫的龐大專案中無所不在。為什麼有經驗的 Coder 會用這種方式去寫程式呢？為什麼在 Code Review 的過程中會引導我嘗試去用物件導向的方式產出程式碼呢？這一切的一切都是從閱讀先前所推薦的物件導向書中慢慢理解。如果你和筆者一樣剛進入程式的世界還沒有很久，也許是時候擠出一點點的時間去閱讀一本關於物件導向的書籍。你也許會發現程式設計的美好世界（充滿 Bug 的世界？）最後請容許我引用一句講者在 [RubyConf Taiwan 2019](https://2019.rubyconf.tw/) 閉幕演講的話做為結尾。

> Energy Saving => Environent Friendly

多利用物件導向，少複製貼上程式碼是可以節約能源拯救地球的！

> Let's have this in mind and Build a Better World.

讓我們謹記心，打造更棒的世界！

[演講投影片](https://speakerdeck.com/c9s/virtual-machines)

本文同步發表於 [硬底居米 Indie Jimmy](https://blog.raiden.me/)

---

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


post-想找到脫離新手村的方向？ 讓 Ruby 中的物件導向基礎為你引路！

想找到脫離新手村的方向？ 讓 Ruby 中的物件導向基礎為你引路！

想要一鍵部署！？首先要一鍵產生 Docker Image！要產生 Docker Image 需要有個 Dockerfile，通常在寫 Dockerfile 時從選擇 base 的 Image 到 Container 啟動後要執行的指令都需要一行一行設定。不僅如此，如果想要優化 Docker Image 的大小，還需要使用許多的技巧...突然覺得，要做這些事也太多！有沒有現成的 gem 可以幫我們做到這些事呢？

有的！就是五倍的同事[蒼時弦也](https://blog.frost.tw/)開發的 [bankai-docker](https://github.com/5xRuby/bankai-docker) 這工具啦！其實這接下來就是要來介紹一下 bankai-docker 這個專案，從怎麼使用它到它的部分功能怎麼做出來的，都將一一為您介紹。

> 文章內容可能會需要一些 Docker 跟 Ruby DSL 相關的知識，對這些內容有興趣可以參考這兩篇文章

> [用 Docker 部署 Rails，原來是這樣！？](https://5xruby.tw/posts/deploying-your-docker-rails-app/) 和 [Ruby 探索：Blocks 深入淺出](https://5xruby.tw/posts/discover-ruby-block/)

--- 
### 目錄

*  bankai-docker 介紹
*  使用說明書
*  如何偵測專案下有哪些 gem ？
*  把需要的 Package 印在 Dockerfile 上吧！
*  啟動 Docker Container
*  心得

---

### bankai-docker 介紹

bankai-docker 可以讓我們用一行指令 `rake docker:build` 自動產生 Rails 專案的 Docker Image，同時它也有 DSL 可以客製化產生的 Docker Image，預設情況下 bankai-docker 產生的 Docker Image 會包含 Ruby, Node.js, Yarn 還有 Rails 專案下需要的 gem，因為有優化 Image 的大小的關係，預設情況下 Docker Image 大小會落在 180 MB 上下。

就讓我們來研究一下 bankai-docker 是如何產生 Docker Image 的吧！這篇文章的講解，我使用的環境是：

```
Rails：5.2.3
Ruby：2.6.0
資料庫：postgresql
然後額外安裝以下 gem
gem 'pg'
gem 'bankai'
gem 'bankai-docker'
```

> 目前 `bankai-docker` 還需要額外裝 `bankai` 才能正常使用

### 使用說明書

bankai-docker 透過 Ruby 的 DSL 讓我們可以客製化產生的 Docker Image，輸入`rails generate bankai:docker:install` 產生 `config/docker.rb` ，我們可以透過編輯 `config/docker.rb` 來產生不同的 Docker Image，以下是預設情況下 `config/docker.rb` 的內容

```ruby
# frozen_string_literal: true

# rubocop:disable Metrics/BlockLength
Bankai::Docker.setup do
  runtime_package 'tzdata', 'libstdc++', 'git'

  stage :gem do
    package 'build-base', 'ca-certificates', 'zlib-dev', 'libressl-dev',
            runtime: false

    run 'mkdir -p /src/app'

    add 'Gemfile', '/src/app'
    add 'Gemfile.lock', '/src/app'

    workdir '/src/app'
    run 'bundle install --deployment --without development test ' \
        '--no-cache --clean && rm -rf vendor/bundle/ruby/**/cache'

    produce '/src/app/vendor/bundle'
    produce '/usr/local/bundle/config'
  end

  stage :node, from: 'node:10.15.2-alpine' do
    run 'mv /opt/yarn-v${YARN_VERSION} /opt/yarn'

    produce '/usr/local/bin/node'
    produce '/opt/yarn'
  end

  main do
    run 'mkdir -p /src/app'

    env 'PATH=/opt/yarn/bin:/src/app/bin:$PATH'
    env 'RAILS_ENV=production'

    add '.', '/src/app'
    workdir '/src/app'

    expose 80

    entrypoint 'docker-entrypoint'
    cmd 'serve'
  end
end
# rubocop:enable Metrics/BlockLength

```

可以透過 `rake docker:preview` 看看 `config/docker.rb` 產生的 Dockerfile 長什麼樣子

```bash
FROM ruby:2.6.0-alpine AS gem
RUN apk add --no-cache postgresql-dev build-base ca-certificates zlib-dev libressl-dev

RUN  mkdir -p /src/app
ADD  Gemfile /src/app
ADD  Gemfile.lock /src/app
WORKDIR  /src/app
RUN  bundle install --deployment --without development test --no-cache --clean && rm -rf vendor/bundle/ruby/**/cache

FROM node:10.15.2-alpine AS node

RUN  mv /opt/yarn-v${YARN_VERSION} /opt/yarn

FROM ruby:2.6.0-alpine
RUN apk add --no-cache tzdata libstdc++ git postgresql-libs
COPY --from=gem /src/app/vendor/bundle /src/app/vendor/bundle
COPY --from=gem /usr/local/bundle/config /usr/local/bundle/config
COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /opt/yarn /opt/yarn
RUN  mkdir -p /src/app
ENV  PATH=/opt/yarn/bin:/src/app/bin:$PATH
ENV  RAILS_ENV=production
ADD  . /src/app
WORKDIR  /src/app
EXPOSE  80
ENTRYPOINT  ["docker-entrypoint"]
CMD  ["serve"]
```

大概看一下這個 Dockerfile 可以知道，為了優化 Image 的大小，我們用了 3 個 stage 來產生我們要的 Image，一個是安裝 Rails 所需要的 gem，另一個是裝 Node.js 的，在處理完這兩個步驟後，只需要把必要的檔案放到主要的 stage 讓它產生 Image 即可。

稍微比對一下可以發現，幾乎 `config/docker.rb` 的每一行都可以對應到它產生的 Dockerfile，唯有以下兩行多裝了 postgresql？

```ruby
RUN apk add --no-cache tzdata libstdc++ git postgresql-libs

RUN apk add --no-cache postgresql-dev build-base ca-certificates zlib-dev libressl-dev
```

`config/docker.rb` 中完全沒有做 `postgresql` 的相關設定，但產生的 Dockerfile 卻自動裝好了 `postgresql`？這就是 bankai-docker 貼心的地方啦，它會去偵測 Gemfile 中有使用的 gem 然後安裝對應的 Package，譬如我的 Gemfile 有使用 `gem 'pg'` ，Dockerfile 上就會加上 postgresql 的 Package，這是哪裡設定的呢？bankai-docker 的 rake 執行的時候，第一步就是執行以下程式

```ruby 

Bankai::Docker.setup do
  detect_package :database, :gem do |package|
    if gem?('pg')
      package.add_dependency 'postgresql-dev', runtime: false
      package.add_runtime_dependency 'postgresql-libs'
    end

    if gem?('mysql2')
      package.add_dependency 'mariadb-dev', runtime: false
      package.add_runtime_dependency 'mariadb-client-libs'
    end
  end

  detect_package :sassc, :gem do |package|
    package.add_runtime_dependency 'libstdc++' if gem?('sassc')
  end

  detect_package :mini_magick, :gem do |package|
    package.add_runtime_dependency 'imagemagick' if gem?('mini_magick')
  end
end
```
> 上面的 code 是原始碼的 `templates/auto_packages.rb` 檔案，這是目前 master 的程式，如果直接 `gem install 'bankai-docker'` 載下來的套件可能跟這個不太一樣

> 再研究 gem 的過程很容易把原始碼玩壞，而且 gem 裡面也沒有 git 可以復原，這時候可以用 `gem pristine bankai-docker` 來讓 gem 復原唷！

其實這邊的 DSL 就是一個一個去檢查 Gemfile 有裝哪些 gem ，用 `gem?` 方法檢查，如果有裝就用 `package.add_dependency` 或是 `package.add_runtime_dependency` 把對應的 Package 裝在 Dockerfile 裡面，看到這邊可能會好奇，誒！？就只有這麼幾行嗎？如果我還有其他需要裝 Package 的 gem 也在 Rails 專案中，這時 bankai-docker 產生的 Dockerfile 會有那個 Package 嗎？答案是不會ＸＤ，需要在 `config/docker.rb` 另外設定才能裝其它 Package。

### 如何偵測專案下有哪些 gem ？

剛剛前面說的用 `gem?` 方法檢查 Gemfile 有安裝哪些 gem ，這個是怎麼做到的呢？其實在 bankai-docker 的 `lib/bankai/docker/dsl/gemfile.rb` 檔案就是在做這件事

```ruby
# frozen_string_literal: true

module Bankai
  module Docker
    module DSL
      # Gemfile detect
      module Gemfile
        def gem?(name)
          gemfile.match?(/^\s*gem .#{name}./)
        end

        private

        def gemfile
          @gemfile ||= ::File.read(Rails.root.join('Gemfile'))
        end
      end
    end
  end
end
```

使用 `@gemfile ||= ::File.read(Rails.root.join('Gemfile'))` 讀取專案中的 Gemfile 檔案，把它以 string 的狀態儲存在 @gemfile 變數中。接下來要找出 Gemfile 是否有安裝這個 gem，在這邊我們使用 `match?` 方法，裡面接的參數 `(/^\s*gem .#{name}./)` 是正規表達式，可以判斷 @gemfile 中是否有符合規則的字串，有的話就是符合 `match?` 的規則，正規表達式中的 `^\s*gem` 代表 

> 從一行程式的開始可以有一個或多個空白，然後接上 `gem` 這個字 

為什麼要這樣設定呢？因為如果有些 gem 被註解掉像是`# gem 'some_gem'`，這時候要判斷它不符合我們要找的規則，因為他不是 Gemfile 最後會裝的 gem。以上就是如何用 `gem?` 方法檢查 Gemfile 是否有安裝指定的 gem。

### 把需要的 Package 印在 Dockerfile 上吧！

可以透過 `gem?` 方法偵測專案使用哪些 gem 以後，要如何透過 `add_dependency` 方法將需要的 Package 印在 Dockerfile 上面呢？使用 `add_dependency` 的時候會呼叫 `current_stage` 或是 `stage(:main)` ，他們都是回傳實體變數 `@stages` 的方法，接著我們會在實體變數 `@stages` 上再使用 `concat` 把要註冊的 Package 存進去。

```ruby
def add_dependency(*packages, runtime: true)
  current_stage.concat(packages)
  stage(:main).concat(packages) if runtime
end
```

完成以上工作後，就要用 template 來幫忙印出 Dockerfile， bankai-docker 中的 `templates/stage.erb` 是其中一個 template，在裡面用到 `<%= package_command %>
` 來處理 Dockerfile 裡面的 `RUN apk add --no-cache ...` 這行設定，就讓我們來看看 `package_command` 這方法怎麼做出來的吧！

```ruby
def package_command
  return unless Package.any?(@name)

  "RUN #{Package.command_for @name}"
end
```

在 `Package.any?(@name)` 確認完 Package 的 `@stages` 不是空的後就用  `Package.command_for @name` 印出剛剛放在 `@stages` 裡面的 Package 套件名稱，以目前的例子 
```bash
"RUN #{Package.command_for @name}"
```

將會變成

```bash
"RUN apk add --no-cache postgresql-dev build-base ca-certificates zlib-dev libressl-dev"
```

> 更多更詳細 bankai-docker 中的 Package 的用法要看 `lib/bankai/docker/package.rb` 檔案

以上就是簡略地說明 `add_dependency` 方法如何印 Package 的設定到 Dockerfile 上的，如果要完整知道過程還是需要把 bankai-docker 的 gem 拉到自己電腦跑跑看會比較清楚XD

### 啟動 Docker Container

講完 bankai-docker 大概是用什麼樣的方式做出來之後，另一個很重要的事情是，要怎麼讓這個 Docker Image 可以產生 Docker Container 跑起來？至少要跑起來才知道這 Image 是不是能用的，這邊我是用自己寫的 `docker-compose.yml` 來做的，以下是可以在本地端跑起來的設定

```yml
version: '3'

services:
  db:
    image: postgres:9.6
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    networks:
      - johnson
  app:
    image: $(whoami)/[RAILS_APP_NAME]
    ports:
      - "3000:80"
    environment:
      - DATABASE_URL=postgres://postgres:postgres@db/postgres
      - SECRET_KEY_BASE=xxxxxx
      - RAILS_SERVE_STATIC_FILES=true
    networks:
      - johnson
    depends_on:
      - db
    command: "rake db:migrate && rake assets:precompile && bundle exec puma -p 80"

networks:
  johnson:

```

如果你也想玩玩看用 Docker 跑 Rails 專案，可以設定一個 postgres 的 Container 來搭配。為了讓我 Rails 的 Container 跑起來之後，可以執行 `rake db:migrate` ，我在這邊用 `docker-compose.yml` 的 commond 設定 Container 跑起來後要執行的指令為 `rake db:migrate && rake assets:precompile && bundle exec puma -p 80`，這樣就能把 bankai-docker 產生的 Image 用 Container 在本地跑起來囉！

### 心得

研究 bankai-docker 過程，讓我更熟悉怎麼透過 multi-stage builds 的方式產生 Docker Image，要怎麼拆 stage？有哪些東西是要帶到主要的 stage 使用等等。同時，bankai-docker 中大量使用 DSL 的技巧，透過 block 的傳遞來讓使用者有更大的彈性來訂製 Dockerfile。目前 bankai-docker 還有許多功能仍在開發中，自動偵測哪些 gem 需要額外裝 Package 也是其中之一，上面的會偵測 `mini_magick` 的部分也是我寫這篇文章期間加上去的，看到自己加的功能讓有切圖功能的 Rails 專案用 Docker Container 跑起來後真的蠻有成就感的！希望未來有更多人可以對 bankai-docker 有興趣，一起來研究或是使用看看～

---

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


post-自動產生 Docker，一鍵佈署不是夢 ！？

 自動產生 Docker，一鍵佈署不是夢 ！？

post-調效 Puma 以打造零 Downtime 的服務

調效 Puma 以打造零 Downtime 的服務


在開發聊天機器人的過程中，可以透過 [ngrok](https://ngrok.com/) 這個服務來快速測試我們在開發中的本地程式碼，本篇文章將介紹如何用 nginx + ssh reverse tunnel 來自己架設一個窮人版的偽 ngrok，並且研究一下其中的原理。

# ngrok 服務簡介

![post-ngrok 不求人：自己搭一個窮人版的 ngrok 服務](//images.ctfassets.net/8er52l3j5u76/2VZy1MjrNO9xH2V56GelaR/e3944689f1c9749b1f345070f412915a/ngrok-demo-static.png)

（圖片來源: ngrok 官網）

簡單的來說，ngrok 就是可以讓內網伺服器與外界溝通的一個服務。
一般來說我們本地開發時，會使用開瀏覽器連到 `http://localhost` 或 `http://127.0.0.1` 的本地端伺服器預覽成果，因為大部分所在的網路環境都是由 NAT 分配虛擬 ip 給你，因此頂多是跟你同樣網段的同事可以連線到你電腦上的 web server <del>看看有沒有搞砸什麼</del>。

但是有些開發的場景就一定需要由外網可以連線到你的本地 server，常見的例如：

1. Chatbot：聊天機器人通常會設定一個 `webhook url`，讓服務端（如 Line、Facebook）可以將訊息發佈到你的伺服器上面。
2. 金流系統：在串接金流的時候，通常都會需要有個 `ReturnUrl` 回傳網址，在金流付款成功後將結果送到你的伺服器上面。
3. 其他各式各樣的 api callback
4. <del>一定要 Demo 給客戶看但是還沒部署的時候</del>

一般來說我們比較難取得固定的 public ip，當然在家你可以使用光世代申請一組固定的 ip 使用，在公司的話你可以求網管把公司對外唯一組 public ip 的 `80` port 或 `443` port 設定 port forwording 給你（不過我勸你不要嘗試這麼做，應該會被罵），或者是每次要測試的時候一定要部署到 server 上，但這樣在開發上又沒效率。

於是 [ngrok](https://ngrok.com/) 這個服務就是幫我們解決這個問題。使用 ngrok 的方式大概就是：

1. 註冊一個 ngrok 帳號
2. 在你的電腦上安裝 [ngrok client](https://ngrok.com/download)，並且啟用token
3. 在 console 中輸入 `ngrok http 3000` 來連線到 ngrok proxy server，你就會得到一串網址。
4. 接著你就可以用上述的網址連線到你的 local server `localhost:3000` 

這串 ngrok 提供的 url 就可以讓我們貼在任何需要輸入 webhook 網址的地方，非常方便！詳細的使用方式可以參考官網的說明。

# 自己來架一個窮人版 ngrok 服務
免費版的 ngrok 有一個小小小小不方便的地方，就是每次重新連線的時候他都會配給你**不一樣的 url**，這樣還必須去 webhook 的服務端更改你重新取得的 ngrok url。早期 ngrok 有開放原始碼讓大家可以自行架設服務，但在 1.7 版就不再開源了。

所以說了這麼多終於要進入我們的主題：「自己來架個窮人版 ngrok 服務」

這裡要準備的材料有：

- 租一個 domain name
- 租一個 vps 或任何的雲端主機服務，安裝一個喜歡的 linux 系統
- 並且安裝好 [ngnix](https://www.nginx.com/)

等等，不是說窮人版嗎？
其實忘了說，本篇的對象是鎖定「已經有自己的 domain name 和 vps 空間的窮人」（<del>身為一個工程師隨身攜帶一個 vps 不為過吧</del>）...不過既然你都看到這邊了，那就繼續看下去吧！

> 以下將以 Ubuntu 16.4 作業系統示範

> 並且已經將 ngrok.yourdomain 設定好 dns 服務指向你的雲端主機

## nginx 的設定

在 `etc/nginx/sites-available` 的目錄下新增一個 `ngrok` 的伺服器設定檔

```bash
server {
  server_name ngrok.yourdomain.com;
  # 這邊設定你要設定的 url
  location / {
      proxy_pass http://localhost:3333/;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https; # 如果有設定 https 要加上這行
  }
```

接著切換到 `etc/nginx/sites-enable` 加上剛剛 server 設定檔的 soft link。最後記得重啟 nginx

```bash
$ cd /etc/nginx/sites-enable
$ sudo ln -s ../sites-available/ngrok .
$ service nginx restart
```

## 本地端建立 ssh tunnel
接著到自己的電腦上，隨便找一個自己<del>可以動的</del> rails 專案開啟 server

```bash
$ my_app/>  rails s
```

rails server 預設是開啟 port `3000`，我們要跟那遠端的 nginx server 建立 reverse tunnel，將本地的 `3000` port 連接到 server 上的 `3333` port

```shell
$ ssh -R 3333:localhost:3000 your_account@your_server_ip
```

> 後面 your_account@your.server.com 就是用來登入你主機的位址和帳號啦！

完成了，你可以試著打開 `http://ngrok.yourdomain.com` 看看是否可以連線到你的 rails app！

## 如果要 https 怎辦

因為很多服務的 webhook 都強調必須使用 `https`，這時候可以使用 [certbot](https://certbot.eff.org/) 來讓你的 nginx 使用 Let's Encrypt 的免費憑證，因為安裝實在太簡單了，大家可以直接參考官網的說明。

# nginx revers proxy

接著我們來了解一下上面 nginx 設定檔中寫了些什麼

```bash
proxy_pass http://localhost:3333/;
```

nginx 可以作為靜態 web server 外，本身也是一個強大的 [reverse proxy](https://zh.wikipedia.org/wiki/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86)，這行指令就是在指定接收到 web request 後要轉傳到哪個伺服器上面，我們在此設定轉送到 server 自己的 `3333 port`。

順道一提 `proxy_pass` 的指令除了可以讓我們轉送請求到其他 server 外，最常見的就是搭配 `upstream` 模組設定 load balancer，例如：

```
upstream webapp {  
  server yourserver_1.tw;
  server yourserver_2.tw;
}
server {  
  listen 80;
  server_name your_domain.com;
  location / {  
    proxy_pass http://webapp; # 指定給 upstream
  }
}
```

接著我們來了解一下 `proxy_set_header` 設定的一連串指令。主要目的是幫我們把要轉送的 http 封包加上一些 request header。

```bash
      proxy_set_header X-Real-IP $remote_addr;  
      # 把真實的 client ip 放到 X-Real-IP

      proxy_set_header Host $host;  
      # 將 Host 指定為 ngrok.yourdomain.com

      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
      # 將 X-Forwarded-For 加上這台 nginx，記錄所有轉送的伺服器

      proxy_set_header X-Forwarded-Proto https; 
      # 設定 nginx 與 你的 local server 間使用的 http 協議
```

你可以試著把以下兩行註解掉：

- `proxy_set_header X-Forwarded-Proto https;`
- `proxy_set_header Host $host;`

這個時候會發現透過我們自己做架設的偽 ngrok 有可能會有些問題。

我們以一個 rails 程式為例。雖然刪掉那兩行 nginx 設定後看起來可以正常連線，但是如果在瀏覽器上發送 post 行為（例如送出表單），你會發現會你的 rails 程式會噴錯：

```
HTTP Origin header (https://ngrok.yourdomain.com) didn't match request.base_url (http://localhost:3333)
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
```

造成個錯誤的原因是：

- `request.base_url` 會使用 request header出一個完整的網址 (例如 https://ngrok.yourdomain.com) ，`base_url` 會變成 nginx 預設要轉送的網址 `http://localhost:3333`。
- http header `Origin` 是你在開啟瀏覽器的時候上面那串網址，通常在 `POST` 行為或跨站請求的時候會被放進去
- [rails 會去檢查](https://github.com/rails/rails/blob/b9ca94caea2ca6a6cc09abaffaad67b447134079/actionpack/lib/action_controller/metal/request_forgery_protection.rb#L430)這兩個 request header 是否一樣來判斷是否為合法的 origin。

如果有興趣的話，試著在你的 rails controller 中加上以下的程式碼，印出 rails 收到的 request header 內容：

```ruby
class YourController < ApplicationController
  before_action :puts_request

  # ...
  def puts_request
    puts "Origin: #{request.headers['origin']}"
    puts "base_url: #{request.base_url}"
    # 這裡可以把 HTTP 開頭的 header 印出來
    puts request.headers.env.select{|k, _| k =~ /^HTTP_/}
  end
```

另外也可以研究一下 Rack 如何組成 [base_url](https://www.rubydoc.info/gems/rack/Rack%252FRequest%252FHelpers:base_url) 和怎麼判斷 [scheme](https://www.rubydoc.info/gems/rack/Rack%252FRequest%252FHelpers:scheme)

# ssh tunnel
nginx 將 `https://ngrok.yourdoman.com` 的 request 經過 reverse proxy 的設定，轉送到我們遠端 server 上的 `http://localhost:3333`，而事實上在 3333 port 並沒有任何一台 web server 在聆聽請求，因此我們在本機上建立了 ssh tunnel 來將請求導向我們本地端電腦的 `http://localhost:3000`

```bash
$ ssh -R [remote_port]:locahost:[local_port] your_accout@yourdomain.com
```

一般來說我們使用 `ssh your_accout@yourdomain.com` 來連線到遠端 server 上的 ssh 服務，而 `-R` 能讓 `yourdomain.com` 上面的 `[remote_port]` 反向的導入你本機上的 `[local_port]`。所以上面的範例來說，遠端 server 的 `3333` port 所接收到的封包，都會導向我們本機開啟的 web server 所聆聽的 `3000` port。

那如果我們有個大膽的想法，當在本地電腦瀏覽器連線到 `http://localhost:3000` 的時候可以看到遠端 server 80 port 的 web server，可以使用 `-L` 來做正向的 tunnel

```bash
$ ssh -L [local_port]:localhost:[remote_port]
```

此外，在研究 ssh tunnel 的時候發現它 <del>貼近我們生活</del> 的使用場景也不少

- 例如公司的網管鎖東鎖西，讓你沒辦法在上班看股票、滑臉書，可以在家裡弄一個 ssh proxy server 來當跳板跳出去。
- 例如想要在家裡連回公司內網的 server 作業。

簡單來說就是可以當做個跳板，相關的教學網路上蠻多的，這邊就不特別介紹了。

# 小記
會得知 ngrok 是因為在某次公司的午餐時間與同事卡米哥聊天，得知可以透過它來快速測試本地程式碼，過沒幾天午餐時間得知同事西瓜用了 nginx 自己架了一個 ngrok 心裡覺得非常的神奇，自己試做了一次發現並不會太難，但研究其中的原理也蠻有趣的，除了讓我更瞭解 web 的運作細節，也藉這個機會去看 rack 程式在處理 request 封包的一些方法。


post-ngrok 不求人：自己搭一個窮人版的 ngrok 服務

ngrok 不求人：自己搭一個窮人版的 ngrok 服務


 > 本文內容主要參考自 http://guides.rubyonrails.org/engines.html

本文會以下列三個段落來介紹 Rails Engine 的基礎知識及用法

* Rails Engine 是什麼?
* 打造一個 Rails Engine
* 在主程式中使用 Rails Engine

### Rails Engine 是什麼？

Rails Engine 主要的目的是透過簡單易用的程式介面 (interface) 來提供主程式 (Host) 額外功能，筆者認為可以把主程式 (Host) 想像成原型機器人，Rails Engine 則可視為具有不同能力的裝甲，只要將具有特殊能力的裝甲，適當地裝備 (hook) 在原型機器人身上，就可以組裝出具有各式能力的裝甲機器人，而程式介面 (interface) 就是相同的裝甲可裝載在不同機器人上的關鍵，當然組裝不好時也會造成效能不佳或容易故障的問題，亦或是選用設計不佳的裝甲 (Rails Engine) 也可能影響原機體 (Host) 的正常運作。

由此可看得出來裝甲之裝載並非是絕對必要的，如果你的團隊有足夠的能力、時間及資源，當然可以將所需要的功能直接「內建」在原型機器人裡，所以裝甲的選用與團隊的現況有直接的關係。

雖然每個裝甲都有既定的能力，但這並非完全不能改動的，技術人員仍然可以依照實際的需求，調整強化 (override) 裝甲原本的行為，使得改良過後的裝甲更為適用，這是因為原型機器人 (Host) 的優先權高於機甲 (Rails Engine) 的關係。

這邊的原型機器人(Host/ a rails application) 是指透過 Rails 框架所建造出來的，而原型機器人基本上就是一個強化版本 (a supercharged engine)，因此 Rails applications 與 Rails Engines 且有很高的共通性，Rails engines 亦可看成是小型的應用程式 (miniature applications)。

## 打造一個 Rails Engine

要打造一個 Rails Engine 很簡單，只要透過 `rails plugin new` 指令就可以產生一個 engine 的雛形。 這邊要特別說明的是 Engines 與 Plugins 是很相似的，相同的是他們都有一個 `lib` 資料夾，也都是透過 `rails plugin new` 指所產生的，不同是當我們提及 engine 時，通常指的是一個完整的 plugin (full plugin)，需要在產生時傳入 `--full` 或 `--mountable` 參數。

指令如下:

* `rails plugin new YOUR_ENGINE_NAME --full` 或
* `rails plugin new YOUR_ENGINE_NAME --mountable`

下列比較表將以 **blorgh** 做為 engine name，主要以 `--full` 與 `--mountable` 參數所產生的 engines 為比較基準

|   |NO OPTION|`--full` | `--mountable` |
|---|--------|---------|---------------|
|app/ 資料夾|╳|〇|〇|
|bin/ 資料夾|〇|〇|〇|
|config/ 資料夾|╳|〇|〇|
|lib/ 資料夾|〇|〇|〇|
|test/ 資料夾|〇|〇|〇|
|config/<br>routes.rb|╳|Rails.application.routes.draw do<br>end|**Blorgh::Engine**.routes.draw do<br>end|
|lib/<br>blorgh/<br>engine.rb|╳|module Blorgh<br>&nbsp;&nbsp;class Engine < ::Rails::Engine<br>&nbsp;&nbsp;end<br>end|module Blorgh<br>&nbsp;&nbsp;class Engine < ::Rails::Engine<br>&nbsp;&nbsp;&nbsp;&nbsp;**isolate_namespace Blorgh**<br>&nbsp;&nbsp;end<br>end|
|app/<br>helpers/<br>**blorgh**/<br>application_helper.rb|╳|╳|module Blorgh<br>&nbsp;&nbsp;module ApplicationHelper<br>&nbsp;&nbsp;end<br>end|
|app/<br>views/<br>layouts/<br>**blorgh**/<br>application.html.erb|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application.js|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application.css|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application_controller.rb|╳|╳|module Blorgh<br>&nbsp;&nbsp;class ApplicationController < ActionController::Base<br>&nbsp;&nbsp;&nbsp;&nbsp;protect_from_forgery with: :exception<br>&nbsp;&nbsp;end<br>end|
|test/<br>dummy/<br>config/<br>routes.rb|Rails.application.routes.draw do<br>end|Rails.application.routes.draw do<br>end|Rails.application.routes.draw do<br>&nbsp;&nbsp;**mount Blorgh::Engine => "/blorgh"**<br>end|

### 實作即將開始
### 這個 Rails Engine (blorgh) 將提供主程式 (host) 一個基本的部落格功能:

* 文章列表
* 新增文章
* 編輯文章
* 刪除文章
* 留言評論

> 此範例取自 [Getting Started with Engines](http://guides.rubyonrails.org/engines.html)

> 請使用 Rails 5.1+ 版本

#### Step1. 產生一個 mountable 的 rails engine 雛形

```ruby
$ rails plugin new blorgh --mountable
```

Engine 產生成功後，請切換到 blorgh 根目錄，找到 blorgh/blorgh.gemspec 檔案，將含有 `TODO` 的資訊進行修改，不然在後續的步驟中會出現 `blorgh/blorgh.gemspec is not valid. Please fix this gemspec. (Gem::InvalidSpecificationException)
The validation error was '"FIXME" or "TODO" is not a description'` 的錯誤訊息。

```ruby
# blorgh/blorgh.gemspec
# 這邊只是用來說明用的範例，請依照實際情況填寫

Gem::Specification.new do |s|
  s.name        = "blorgh"
  s.version     = Blorgh::VERSION
  s.authors     = [""]
  s.email       = [""]
  # 修改前
  # s.homepage    = "TODO"
  s.homepage    = "http://example.com"

  # 修改前
  # s.summary     = "TODO: Summary of Blorgh."
  s.summary     = "Summary of Blorgh."

  # 修改前
  # s.description = "TODO: Description of Blorgh."
  s.description = "Description of Blorgh."
  s.license     = "MIT"

  s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]

  s.add_dependency "rails", "~> 5.2.0"

  s.add_development_dependency "sqlite3"
end
```

#### Step2. 快速產出文章的 Scaffolding (CRUD)

```ruby
# engine 根目錄
$ bin/rails generate scaffold article title:string text:text
```

在 Engine 根目錄，輸入下列指令，執行 migration 以產生 blorgh_articles 資料表

```ruby
# engine 根目錄
$ bin/rails db:migrate
#=> 執行完畢會產生 blorgh_articles 資料表
```

請切換目錄到 `test/dummy` 底下，鍵入 `rails s` 啟動 rails server，在瀏覽器中輸入 http://localhost:3000/blorgh/articles 可看到具有CRUD功能的文章管理畫面，此時你應該已經可以新增、編輯、刪除文章，並在新增文章後可以看到文章列表。這邊的 test/dummy 其實是一個簡化版的 rails application，可讓我們在開發 engine 的時候用來測試之用，模擬日後 Engine 被掛入主程式的行為。

#### Step3. 指定 engine 首頁路徑

```ruby
# 在 config/routes.rb
Blorgh::Engine.routes.draw do
  resources :articles
  root to: "articles#index"
end
```

重啟 rails server 後，瀏覽 http://localhost:3000/blorgh 將會顯示文章列表頁面

#### Step4. 產生評論 (comments) 資源

```ruby
# engine 根目錄
$ bin/rails generate model Comment article_id:integer text:text

# engine 根目錄
$ bin/rails db:migrate

# => 達行完畢後會產生 blorgh_comments 資料表
# 這邊異動的是 test/dummy app
```

為了在文章下面顯示評論內容，需要在 app/views/blorgh/articles/show.html.erb 中的 `<%= link_to 'Edit'` 之前加上下列程式碼

```erb
<h3>Comments</h3>
<%= render @article.comments %>
```

由於一篇文章 (article) 可以有多則評論 (comments)，因此需要在 article model 中定義 `has_many :comments` 關聯

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ApplicationRecord
    has_many :comments
  end
end
```

#### Step5. 加入可新增評論的表單

為了要可以新增評論，我們需要一個表單，在 app/views/blorgh 目錄中建立一個 comments 資料夾，並建立一個 _form.html.erb 的檔案，表單的程式碼如下

```erb
<h3>New comment</h3>
<%= form_with(model: [@article, @article.comments.build], local: true) do |form| %>
  <p>
    <%= form.label :text %><br>
    <%= form.text_area :text %>
  </p>
  <%= form.submit %>
<% end %>
```

將表單放在文章評論 `<%= render @article.comments %>` 的下方，要修改的檔案是 app/views/blorgh/articles/show.html.erb

```erb
<%= render "blorgh/comments/form" %>
```

我們已經在 model 中定義了關聯，還需要定義對應文章-評論的巢狀路由 (Nested Resources)，在 config/routes.rb 中修改路由如下

```ruby
# config/routes.rb
Blorgh::Engine.routes.draw do
  resources :articles do
    resources :comments
  end

  root to: "articles#index"
end
```

有了 model，也有了路由，我們還需要對應新增 comment 所需的控制器 (controller)，可透過下列指令建立一個空的控制器

```ruby
# engine 根目錄
$ bin/rails g controller comments
```

找到剛產生的控制器檔案 app/controllers/blorgh/comments_controller.rb，定義 create 方法，這個方法用以對應新增評論表單中的 POST 請求，程式碼如下

```ruby
# app/controllers/blorgh/comments_controller.rb
def create
  @article = Article.find(params[:article_id])
  @comment = @article.comments.create(comment_params)
  flash[:notice] = "Comment has been created!"
  redirect_to articles_path
end

private
  def comment_params
    params.require(:comment).permit(:text)
  end
```

最後一步我們需要在 app/views/blorgh/comments/ 新增一個 _comment.html.erb 用做評論呈現的畫面，這個畫面對應的是先前加入  app/views/blorgh/articles/show.html.erb 中的 `<%= render @article.comments %>` 部份，畫面所需的程式碼如下，代表的是「一則評論」的樣子

```erb
<%= comment_counter + 1 %>. <%= comment.text %>
```

目前 app/views/blorgh/articles/show.html.erb 中的程式碼應如下所示

```erb
<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Text:</strong>
  <%= @article.text %>
</p>

<h3>Comments</h3>
<%= render @article.comments %>
<%= render "blorgh/comments/form" %>

<%= link_to 'Edit', edit_article_path(@article) %> |
<%= link_to 'Back', articles_path %>
```

現在再次瀏覽任一篇文章時，應該可以在下面看見一個表單，輸入評論後按下 Create Comment，就可以看到評論已經被新增並顯示在該文章的下方了。

完成上述的步驟便可以完成一個可提供發文與評論留言的簡單部落格 Rails Engine

## 在主程式中使用 Rails Engine

首先我們先用 Rails 建立一各新的 Rails application (unicorn)

```ruby
$ rails new unicorn
```

#### Step1. 安裝 Engine

在主程式中使用 Rails Engine 的方式很簡單，你應該也不會太陌生，只要找到主程式的 Gemfile 檔案並加入下列描述即可

```ruby
# 由於我們開發的 Rails Engine 是在本機中，因此要使用 path 指定所在路徑
gem 'blorgh', path: '../the-abc-of-rails-engines/blorgh'
```

接著記得下在主程式的根目錄下 `bundle install` 安裝我們的 engine

#### Step2. 掛載 Engine
然後我們還需要在主程式的 config/routes.rb 中將 engine 掛進來，如此主程式才可以存取 engine 中的路由

```ruby
# config/routes.rb
# at: "/可依個人需求喜好命名"
mount Blorgh::Engine, at: "/blog"
```

#### Step3. 複製 Engine 的 migration 檔案
此指令可重覆執行，不會有重複複製的副作用(用以匯入 Engine 的 migration 檔案)

```ruby
# 在主程式的根目錄
$ bin/rails blorgh:install:migrations

# 會出現下列訊息，檔案時戳會略有不同
# => Copied migration 20180719154413_create_blorgh_articles.blorgh.rb from blorgh
# => Copied migration 20180719154414_create_blorgh_comments.blorgh.rb from blorgh
```

#### Step4. DB migrate

```ruby
# 在主程式的根目錄執行 migrate
$ bin/rails db:migrate

# => 產生 blorgh_articles 與 blorgh_comments 資料表
```

現在在主程式的根目錄中使用 `rails s` 指令啟動伺服器，並瀏覽 http://localhost:3000/blog 應該可以看見文章頁面，你此時應該已經可以新增、刪除、修改文章，還可以在文章下方新增評論了。

*如果沒有要針對 Engine 的既有行為做調整，基本上到這邊就可以告一個段落了。*

接下來要討論是如何讓 Engine 使用主程式所定義的類別，而為了滿足這個需求，我們還需要調整 Engine 最初的設計，這邊希望達成的主要目的是希望可以為文章增加作者的資訊，而這個「作者」類別是具有彈性，將由主程式來進行定義，也就是說在這個調整之後，要使用這個 Engine 的主程式，一律需要告訴 Engine「作者」代表的是主程式中的哪一個類別。

*文章與評論由 Engine 負責定義，作者則交給「主程式」來定義*

#### Step5. 在 Engine 中提供可由主程式定義「作者」類別的方法

修改 lib/blorgh.rb 的 Blorgh module 中加入下列程式碼

```ruby
# blorgh/lib/blorgh.rb
module Blorgh
  # 此類別存取子將開放給主程式定義「作者」類別之用
  mattr_accessor :author_class

  # 覆寫原本的 author_class getter 方法，使回傳值為常數物件
  def self.author_class
    @@author_class.constantize
  end
end
```

#### Step6. Article 的作者

在 article (app/models/blorgh/article.rb) 定義與作者的關聯及參照來源

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ActiveRecord::Base
    # ... 略
    # 由於 Blorgh.author_class 會回傳常數物件，應轉型為字串
    belongs_to :author, class_name: Blorgh.author_class.to_s
    # ... 略
  end
end

```

#### Step7. 新增 author_id 到 article 中的 migration 檔案

```ruby
# engine 根目錄
$ bin/rails g migration add_author_id_to_blorgh_articles author_id:integer

# engine 根目錄
$ bin/rails db:migrate

# => 新增欄位 author_id 到 blorgh_articles 資料表
# 這邊異動的是 test/dummy app
```

#### Step8. 修改 article model 如下

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ActiveRecord::Base

    # 新增 author_name 欄位供暫時存取之用
    attr_accessor :author_name

    has_many :comments
    belongs_to :author, class_name: Blorgh.author_class.to_s

    # 透過這個 callback 建立/修改文章所對應的作者 (Blorgh.author_class)
    before_validation :set_author

    private

    def set_author
      self.author = Blorgh.author_class.find_or_create_by(name: author_name)
    end
  end
end

```

#### Step9. 新增作者名稱欄位
在 Engine 中的文章表單中 (app/views/blorgh/articles/_form.html.erb) 的 :title 欄位前新增作者名稱欄位

```erb
  <div class="field">
    <%= form.label :author_name %><br>
    <%= form.text_field :author_name %>
  </div>
```

#### Step10. 允許 :author_name 參數的傳遞
在 Engine 的 app/controllers/blorgh/articles_controller.rb 中的私有方法 article_params 允許 :author_name 參數欄位的傳入

```ruby
# app/controllers/blorgh/articles_controller.rb
  def article_params
    params.require(:article).permit(:title, :text, :author_name)
  end
```

#### Step11. 顯示作者資訊
於 Engine 的 views/blorgh/articles/show.html.erb 中，在 "Title" 的上方加入作者的資訊

```erb
<p>
  <b>Author:</b>
  <%= @article.author&.name %>
</p>
```

#### Step12. 用 test/dummy 來測試

```ruby
# blorgh/test/dummy
# 新增 User 類別
$ rails g model user name:string

# blorgh/test/dummy
# 執行 db:migrate
$ bin/rails db:migrate

# => 新增 users 資料表

```

#### Step13. 定義「作者」

在 test/dummy/config/initializers 中新增一個 blorgh.rb 的檔案，並加入下列程式碼指定「作者」的類別

```ruby
# 這邊一定要使用「字串型態」的類別名穩，不可直接類別物件來定義，不然 Rails 會試圖去載入該類別並參考與其對應的資料表，如果此資料表還不存在時，將會造成不必要的問題
Blorgh.author_class = "User"
```

一樣透過 `rails s` 啟動 rails server，打開瀏覽器瀏覽 [http://localhost:3000/blorgh](http://localhost:3000/blorgh)
現在新增文章時應該可同時加上作者資訊，成功新增後亦可顯示作者資訊，但若要正常地編輯作者資訊，則還需要調整一下 Engine 裡 articles_controller 中 edit 方法，完整程式碼請參閱[這邊](https://github.com/spartchou/the-abc-of-rails-engines-engine/tree/master/practice/blorgh)。

如果可以讓 test/dummy 運作正常，那麼在[主程式中只要實作 Step12 及 Step13](https://github.com/spartchou/the-abc-of-rails-engines-main-app)，就可以達到一樣的效果了。

---

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


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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

以 Rspec 為例，創造一個自己的 DSL 工具吧！

用 WebRTC 半分散網路弄一個聊天室

React hooks：不用一百行快速勾出 Chat APP

想找到脫離新手村的方向？讓 Ruby 中的物件導向基礎為你引路！

自動產生 Docker，一鍵佈署不是夢！？

調效 Puma 以打造零 Downtime 的服務

ngrok 不求人：自己搭一個窮人版的 ngrok 服務

The ABC of Rails Engines

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款