五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


「咦？為什麼系統的訂單金額一直都是顯示成 0 元？」「從什麼時候開始有這問題的？」

主管看到訂單系統的顯示結果不正常，想問到底是怎麼一回事。但這個專案的開發團隊有二十多人，大家每天都有許多的 Commit，也許某位同事無意間改了計算稅務的功能，結果不小心跟著改到訂單顯示金額了。

如果很明確的知道問題是出在哪一個檔案的話，我在「[為你自己學 Git](https://gitbook.tw)」一書的「[【狀況題】等等，這行程式誰寫的？](https://gitbook.tw/chapters/using-git/git-blame.html)」章節曾經介紹過 `git blame` 指令可以找出指定檔案的第幾行是誰在什麼時候寫的，一下子就可以把犯人抓出來。

但是，有時候一個問題的造成，背後可能是多個程式執行之後的結果，或像是開發 iOS App 需要進行編譯才能看到顯示結果為什麼不正確，所以可能不是單純光用 `git blame` 就能輕鬆找出問題來。更何況，這個問題可能早在幾週前就發生了，只是當時沒人發現，直到現在才曝光。在這麼多的 Commit 裡，要怎麼知道從哪個 Commit 開始是有這個問題的？特別是如果大家在 Commit 訊息都沒有特別註明自己改了什麼內容的話，面對這幾百甚至是幾千個 Commit，難道只能 Checkout 到每一個 Commit，然後檢查訂單的顯示結果是不是正確嗎？

## 使用「二分法」

不知道大家有沒有玩過「猜數字」遊戲：

「請你從 1 到 100 之間猜一個數字，如果沒猜中，我會跟你說你猜的數字比答案大還是比答案小，然後繼續猜，直到猜到為止」

「50！」

「比 50 大」

「75！」

「比 75 小」

「65！」

「恭喜你，答對了」

通常一開始我們會使用「二分法」從中間的 50 開始猜，為什麼？因為這樣一次就能刪掉一半的數字，沒猜中的話，就再對剩下的另一半再切一半繼續猜，這樣應該沒幾次就能猜到答案了。

在 Git 裡有個叫做 `bisect` 的指令，也是用類似的「猜數字」的方式，可以很快把有問題的點找出來。

<i class="icon-download" aria-hidden="true"></i>檔案下載：<https://ubin.io/git-bisect>

在這個範例裡，目前總共有 23 次 Commit：

    $ git log --oneline
    6e593bc (HEAD -> master) update CSS
    e67e3cf add footer
    da11948 update CSS
    84ee212 add links
    8b59e89 add Tiger page
    711bc24 update title of Fish page
    1ee10be update page
    6a8fb89 update title
    6e3fab8 update title
    b031a2c update page
    73860fa update page
    f53c5ea add Fish page
    afa4537 add cover image
    2d15868 remove js code
    8f744f8 add Dog page
    b51f5e8 add Cat page
    da3d4b9 update CSS
    7a51f8e add Sign in form
    7e64d30 update script
    1086842 link style and script file in index
    f6b72af add stylesheet and script file
    3de629a add HTML content
    f9f14ff init commit

不知道什麼時候開始，在 `index.html` 頁面上的 Sign In 按鈕沒辦法按了（被 disabled 了）。看看上面這些 Commit 訊息，寫得實在很糟糕...根本看不出來 update 了什麼內容。

所以，除了一個一個去看到底每個 Commit 改了什麼之外，我們可以試著使用 Git 裡的 `bisect` 指令來抓問題：

    $ git bisect start 起始點 結束點

因為我確定在 `f6b72af` 的時候功能還是正常的，所以可以這樣做：

    $ git bisect start HEAD f6b72af

意思是針對目前的所在地（也就是 `HEAD`）到 `f6b72af` 這段範圍開始來做二分法。按下 Enter 鍵執行之後：

    $ git bisect start HEAD f6b72af
    Bisecting: 9 revisions left to test after this (roughly 3 steps)
    [73860fa1ba395a7db7dd34c966644f667b0b87e3] update page

這時 Git 會直接跳到差不多一半的地方，也就是 `73860fa` 這個 Commit。這時候發現功能還是正常的，Sign In 按鈕是可以按的，所以就可以跟 Git 說目前的結果是好的：

    $ git bisect good
    Bisecting: 4 revisions left to test after this (roughly 2 steps)
    [711bc2458ac4c9c87b41110a4f23224ff1536a13] update title of Fish page

這時 Git 會自動跳到差不多中間的位置，也就是 `711bc24` 這個 Commit。重新整理頁面，發現這時候功能是壞掉的...所以繼續跟 Git 說現在是壞掉的：

    $ git bisect bad
    Bisecting: 2 revisions left to test after this (roughly 1 step)
    [6e3fab83aeb14d9640337357027c167194f0c628] update title

現在看起來是正常的，所以：

    $ git bisect good
    Bisecting: 0 revisions left to test after this (roughly 1 step)
    [1ee10be0c8b8565a8d2e66e1707d90c3ef3fa07a] update page

如果結果是正常的，就是 `git bisect good`，如果結果是不正確的，就是 `git bisect bad`，在不斷的 good 跟 bad 的交錯幾次之後，最後找到答案了：

    $ git bisect bad
    6a8fb890400553b95e27996ec948fefb836cb2d6 is the first bad commit
    commit 6a8fb890400553b95e27996ec948fefb836cb2d6
    Author: Eddie Kao <eddie@digik.com.tw>
    Date:   Wed Aug 7 16:18:23 2019 +0800

        update title

    :100644 100644 bd266562ec6d1ec64e5c29f32c7190582db95958 39f7c9edc892bd2b2e916e233ad1bc3989f7a3d4 M	index.html

抓到了！看看在第一行出現的訊息，Git 告訴你「6a8fb89...cb2d6 is the first bad commit」，就是從這個地方開始壞掉的，原來是某位同事在修改頁面的時候暫時把那個按鈕關掉，結果忘記改回來...

如果 `bisect` 做一半不想做了，或是做完了，可以使用 `reset` 參數：

    $ git bisect reset
    Previous HEAD position was 6a8fb89 update title
    Switched to branch 'master'

然後就回到原本的 `master` 分支了。

雖然在這個範例只有少少 23 個 Commit，可能感受不出來效果，感覺自己一個一個 Commit 查也是可以查得到，但如果是 230 個或是 2,300 個就不一樣了。生命應該浪費在寶貴的事物上，而不是浪費在這種地方呀 :)

> 本文轉載自「為你自己學 Git」電子書之追加章節

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Git 觀念和原理嗎？
>
> 我們有開設 🔮 [坐上 Git 時光機 - 版本控制](https://5xruby.tw/courses/git) 課程唷 ❤️️
>


post-咦？這個問題是從什麼時候就有的？

咦？這個問題是從什麼時候就有的？

大家好，今天要來跟大家說一個如果是非本科系的工程師不確定上課有沒有學過，如果是本科系的應該是上課有學過，菜鳥工程師可能會不小心踩到的坑，在開始說明之前先給大家看一段程式碼。

這是一段很簡單的 Ruby 程式碼，表示調整廣播電台頻道的類別，支援預設電台的功能，也就是說使用者在按下某個按鈕，就可以跳到喜歡的頻道(話說現在年輕人還知道電台嗎？＠＠)。

```ruby
class Tuner
  def initialize(presets)
    @presets = presets

    clean
  end

  private

  def clean
    @presets.delete_if { |preset| preset[-1].to_i.even? }
  end
end

p presets = %w(90.1 106.2 88.5) # -> ["90.1", "106.2", "88.5"]
p turner = Tuner.new(presets) # -> <Tuner:0x00007fe7b08ff170 @presets=["90.1", "88.5"]>
p presets # -> ["90.1", "88.5"]
```

大家發現了嗎？ presets 已經被我們改變了，在討論為什麼之前我們先來看看有什麼方式可以傳遞引數！

## 傳遞引數的方式

1. Pass-by-reference：丟到方法裡的引數實際上只是變數的參考(reference)，修改引數就會修改到原始的變數。

2. Pass-by-value：丟到方法裡的引數是變數的值(value)，修改引數不會修改到原始的變數。

## Ruby 的引數是如何傳遞？

參考[官網的FAQ](https://www.ruby-lang.org/en/documentation/faq/4/)：

在 Ruby 中所有的變數和常數都會指向一個參考物件，除了直接使用會噴 NameError 例外錯誤的未初始化區域變數(沒有參考)，當我們指派一個變數或初始化一個常數，表示我們設定了變數或常數指向的參考物件。

意思是指派這件事情，實際上並不會產生一個複製的新物件，例如前面範例程式碼中 `presets = %w(90.1 106.2 88.5)` 表示說 `presets` 是會指向 `%w(90.1 106.2 88.5)` 參考物件的變數。

但 `Fixnum`, `true`, `nil`, 和 `false` 是例外，他們是 `immediate values`，變數會保持本身的物件而不是另外指向一個參考物件，這些例外被指派的引數會產生這個類型的複製物件。

當方法被調用時，引數被指派為參數：

```ruby
def addOne(n)
  n += 1
end

  a = 1
p addOne(a) # -> 2
p a         # -> 1
```

當傳遞的是物件的參考時，一個方法是有可能改變傳進來的可變物件(mutable object)：

```ruby
def downer(string)
  string.downcase!
end

p a = "HELLO" # -> "HELLO"
p downer(a)   # -> "hello"
p a           # -> "hello"
```

### 小結：
- Ruby 傳遞引數的方法並沒有相當於其他語言的 pass-by-reference。
- Ruby 是 pass-by-value，但是 values 是 references，Pass by reference value 可能是相對準確的說法。

---

回頭看看上面的 code，把 `object_id` 印出來觀察，presets 改變的原因是因為傳進方法的是可變物件的參考(相同 `object_id`)，當我們直接改變物件就直接改到了原來的物件。

```ruby
class Tuner
  def initialize(presets)
    @presets = presets

    clean
  end

  private

  def clean
    @presets.delete_if { |preset| preset[-1].to_i.even? }
    p @presets.object_id # -> 70140344834080
  end
end

p presets = %w(90.1 106.2 88.5) # -> ["90.1", "106.2", "88.5"]
p presets.object_id # -> 70140344834080
p turner = Tuner.new(presets) # -> <Tuner:0x00007fe7b08ff170 @presets=["90.1", "88.5"]>
p presets # -> ["90.1", "88.5"]
```

## 解決方法

上面的範例，看起來可以改成這樣：

```ruby
class Tuner
  def initialize(presets)
    @presets = clean(presets)
  end

  private

  def clean(presets)
    presets.reject { |preset| preset[-1].to_i.even? }
  end
end

p presets = %w(90.1 106.2 88.5) # -> ["90.1", "106.2", "88.5"]
p turner = Tuner.new(presets) # -> <Tuner:0x00007f9adfaa2b80 @presets=["90.1", "88.5"]>
p presets # -> ["90.1", "106.2", "88.5"]
```

因為 reject 會以傳回一個新的陣列代替更改接收端(presets)，故原本的物件並不會被我們修改到，但這並不一定是個好方法，如果我們不需要在初始化的階段就更改 presets，或是其他實體的方法才需要更改 presets，還是有可能會遇到麻煩。

**所以其實我們真正想要的是，可以用複製物件來代替指向原本物件的參考。**

## Ruby 複製物件的方法

Ruby 有兩種複製物件的方法：`dup` 和 `clone`，雖然兩者都會根據接收端建立新物件，但 `clone` 會保存原始物件的 2 項額外功能，`dup` 則不會。

### `clone` 不同於 `dup` 的 2 項額外功能：

1.`clone` 會顧及接收端的凍結狀態(frozen status)，如果原始物件已經凍結，那副本也會是凍結的。

```ruby
    object = Object.new
    object.freeze
    p object.frozen? # -> true
    dup_object = object.dup
    p dup_object.frozen? # -> false
    clone_object = object.clone
    p clone_object.frozen? # -> true
```

2.如果接收端有單例方法，`clone` 會複製單例類別(singleton class)。

```ruby
    object = Object.new
    def object.wow; :wow end
    p object.singleton_methods # -> [:wow]
    p object.wow # -> :wow
    clone_object = object.clone
    dup_object = object.dup
    p clone_object.wow # -> :wow
    p dup_object.wow # -> undefined method `wow' for #<Object:0x00007f7effa8af40> (NoMethodError)
```

所以當我們想修改物件的時候，大部分會選則用 `dup` 而不是 `clone`，因為凍結的物件無法修改或解凍，所以 `clone` 可能會回傳無法修改的物件。

## 修改程式碼

所以我們現在將程式碼改成這樣：

```ruby
class Tuner
  def initialize(presets)
    @presets = presets.dup

    clean
  end

  private

  def clean
    @presets.delete_if { |preset| preset[-1].to_i.even? }
  end
end

p presets = %w(90.1 106.2 88.5) # -> ["90.1", "106.2", "88.5"]
p turner = Tuner.new(presets) # -> <Tuner:0x00007fe7b08ff170 @presets=["90.1", "88.5"]>
p presets # -> ["90.1", "106.2", "88.5"]
```

恭喜！這樣就解決了我們一開始更改到原始物件的問題了！

## 注意

雖然我們已經解決問題了，但要留意 `dup` 和 `clone` 只會產生淺層複製(shallow copy)的物件，意思是對於 `Array` 這類的集合物件，雖然複製了容器，但並未複製容器內的元素，我們可以在不影響原始物件的情況下加入或移除元素，但是如果我們試圖要修改 `Array` 裡的元素，就會修改到原始元素，例如：

```ruby
array = ["Polar"]
p dup_array = array.dup << "Bear" # -> ["Polar","Bear"]
p dup_array.each { |element| element.sub!("lar", "oh") } # -> ["Pooh", "Bear"]
p array # -> ["Pooh"]
```

可以看到我們還是修改到原始物件的元素了，編寫自己的類別的時候我們可以複寫 `initialize_copy` 這個方法來控制複製過逞的深度，如果需要使用既有類別深層副本的物件，就必須自行處理。

另外有一個方法是可以使用 [Marshal](https://ruby-doc.org/docs/ruby-doc-bundle/ProgrammingRuby/book/ref_m_marshal.html) 類別來序列化，然後再對集合及其元素進行序列化還原：

```ruby
array = ["Polar"]
p dup_array = Marshal.load(Marshal.dump(array)) << "Bear" # -> ["Polar","Bear"]
p dup_array.each { |element| element.sub!("lar", "oh") } # -> ["Pooh", "Bear"]
p array # -> ["Polar"]
```

使用 `Marshal` 會有相當的限制，除了時間，他要對物件序列化並還原序列化，還必須考慮記憶體的需求數量。複製的物件將會佔用它自己的記憶體空間，如此一來使得 `Marshal::dump` 建立序列化位元組資料流，因此假如載入大型物件會使得程式大幅增加記憶體需求。

另一個問題是 `Marshal` 並非可以對所有的物件作序列化，例如 IO 類別的實體、單例物件(singleton objects)等，會引發 TypeError 的例外。

## 總結

- 大部分的情況我們使用 `dup` 就可以解決想要複製物件的問題了，但如果我們可以了解這些限制能讓我們將來在需要做深層副本的時候遠離麻煩。
- Ruby 表現得像為不可變物件傳遞值(pass-by-value)，為可變物件傳遞參考(pass-by-reference)。
- `dup` 和 `clone` 只會建立淺層副本。
- 大多數物件來說，`Marshal` 能在需要時用來建立深層副本。

### 參考： 
[Effective Ruby](https://www.effectiveruby.com)

---

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

post-新手不小心會踩到的坑：我真的複製出物件了嗎？

新手不小心會踩到的坑：我真的複製出物件了嗎？


## 什麼是 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，可以參考去年寫的文章：[https://5xruby.tw/posts/webrtc/](https://5xruby.tw/posts/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) 課程唷 ❤️️
>


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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

咦？這個問題是從什麼時候就有的？

新手不小心會踩到的坑：我真的複製出物件了嗎？

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

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

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

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

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

調效 Puma 以打造零 Downtime 的服務

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款