五倍直播間

Blogs - Sidebar

台灣又即將進入選舉的時節，看著政治人物不做正事忙著在跑選舉行程，大家是否也跟我一樣有很強烈的亡國感呢？不過沒有關係，不要讓負面情緒影響我們的心態，今天就讓我們用 Redis 搭配 ActionCable 來做一個即時計票顯示吧！

![post-利用 Redis 打造選舉即時票數排行](//images.ctfassets.net/8er52l3j5u76/7nrSyrbQgeqJY0bkHPebCY/ec30582d70ee743c51400e71b22833a1/ezgif-4-3ee498d5e8cf.gif)

## Why Redis?

Redis 是一個 in-memory 的 key-value database，時常被使用在需要快取的場合，以減輕後端資料庫的壓力。在選舉計票的時候，統計數據更新的頻率會相當頻繁，因此 Redis 便成為一個非常好的資料庫選項。

## Prerequisite

當你在讀這篇文章時，我預期你已經懂得簡單的 Rails 開發，以及如何在本地端安裝、啟動 Redis，因此不會在文章內提供相關的教學。本內容不會用到如 MySQL 或是 PostgreSQL 等關聯式資料庫。

## 加入需要的 Gems

在你的 Gemfile 裡面加入下面三個 Gem，然後執行 bundle install

```ruby
# 這是一個 Ruby 版本的 Redis Client Library
gem 'redis'

# 我們會利用 jquery 來操縱 DOM
gem 'jquery-rails'

# 套用 bootstrap style，可忽略。若要使用這個 Gem 可參考 https://github.com/twbs/bootstrap-rubygem 的相關說明。
gem 'bootstrap', '~> 4.3.1'
```

## 初始化 Redis 

在 `config/initializers` 新增一個 `redis.rb` 檔案

```ruby
require 'redis'

# 理論上在 Test 和 Production 會有區別，但因為我們只在本機端操作，所以直接初始化一個 Redis Client 即可
REDIS = Redis.new
```

若你在 rails console 裡面輸入`REDIS.ping` 會回傳一個 "PONG" 的字串，就代表應用程式和 Redis 的連線成功了。

在 Redis 中有個東西叫做有序集(Sorted Set)，可以在一個 Key 中儲存多組元素，並且給予權重積分排序。我們會利用 Sorted Set 來完成這個功能。

## 將票數記錄到 Redis 

在這裏必須優先說明的是，因為並不曉得選舉期間有沒有單位會提供計票的 API（在台灣估計是沒有），因此我們用模擬了 API 的 Request，而 Request 的架構如下：

```
{
 sector: string,
 vote_count[]: array of string,
 name[]: array of string
}
```

我們可以產生一個新的 `VotesController`，來當作我們計票 API 的接口。

```ruby
class VotesController < ApplicationController
 skip_before_action :verify_authenticity_token

 # zincrby 需要三個 Arguments，第一個是 Key 的名稱，我們設為 "POLL:投票區名"，第二個則是元素的權重積分，也就是票數。而第三個則是元素本身，我們將其作為候選人的名字。

 # 若在這個 Key 中，候選人存在，zincrby 會將票數加在他目前的票上；反之會直接建立一個新的候選人元素。

 def create
 params[:name].each_with_index do |name, idx|
 REDIS.zincrby("POLL:#{params[:sector]}", params[:vote_count][idx].to_i, name)
 end
 end
end

```

這裡有個必須注意的地方。由於我們會另外使用一個 Ruby 的 Script 來送出計票的 Request，所以必須要跳過 `authenticity_token` 的驗證。這個作法在 Production 環境會有安全上的疑慮，必須先聲明。

別忘了，還要在 `routes.rb` 裡面追加設定，才可以使用這個接口。

```ruby
# config/route.rb

Rails.application.routes.draw do
 post 'votes', to: 'votes#create'
end
```

Request 的 Script 在[這裡](https://github.com/beersheep/vote_leaderboard/blob/master/vote.rb)，當你設定好上述的 route 之後，執行這隻 API，應該就可以順利地在將票數記錄在 Redis 裡面。（上面的 URL Port 是 3000，你的 Port 有可能不同）

## 顯示票數

在我們讓票數會自己跳動之前，先想辦法讓票數顯示吧！這裡創造一個新的 Controller，並給它對應的 Route，我建議就把它設成 root 吧。

```ruby
class VoteLeaderboardController < ApplicationController

 # 這裡預設有兩個選區，當然可以更多。
 SECTORS = ["t1", "t2"]

 def index
 # 一次顯示多個選區
 @sectors = SECTORS.each_with_object([]) do |sector_name, arr|
 arr << Sector.new(sector_name)
 end
 end
end
```

```ruby
# config/routes.rb

Rails.application.routes.draw do
 post 'votes', to: 'votes#create'
 root to: 'vote_leaderboard#index'
end
```

這裡的 `Sector` 是一個 class，我將它定義在 `app/models` 的下面，但它其實並非我們平常使用的 Model，只是一個非常單純的 class。

```ruby
# app/models/sector.rb

class Sector
 attr_reader :name

 def initialize(name)
 @name = name 
 end

 def get_votes
 # #zrange 需要四個 Arguments，第一個是 Key 的名稱（選區），第二個是取回元素開始的位置，第三個則是取回元素結束的位置，將它想成 Array 就比較好理解了。-1 則代表是要取回所有的元素。

 # 由於我們不僅僅想知道它的排列順序，還想實際知道每個候選人的得票數字，所以我們加入了 with_scores: true 的 option。

 # 最後，由於他排列的順序會是從最小到最大，但我們希望可以從最高票的人開始排列，因此在最後的結果 叫了 #reverse 這個函數。

 # 實際上會得到 [["Roy", 1050], ["Sabrina", 800]] 這樣子型態的資料。

 @votes = REDIS.zrange("POLL:#{@name}", 0, -1, with_scores: true).reverse
 end
end
```

這個 Sector 可以用來存取 Sector （選區）的名稱，然後利用 #get_votes 這個函式來得知選區內所有候選人的姓名和得票數。

然後，我們創造可以創造 View 來讓得票數顯示：

```html
# app/views/vote_leaderboard/index.html.erb
<h1 class="display-3" style="text-align: center"> Vote Leaderboard </h1>
<div class="container">
 <div class="row">
 <% @sectors.each do |sector| %>
 <div class="col-6" style="text-align:center">
 <h2> <%= sector.name %> Sector</h2>
 <%= render "sector_vote_count", sector: sector %>
 </div>
 <% end %>
 </div>
</div>
```

```html
<table class="table" id="<%= sector.name %>">
 <thead class="thead-dark">
 <tr>
 <th> # </th>
 <th> Candidate Name </th>
 <th> Vote Count </th>
 </tr>
 </thead>

 <% sector.get_votes.each.with_index(1) do |votes, idx| %>

 <tr>
 <td> <%= idx %> </td>
 <td> <%= votes[0] %> </td>
 <td> <%= votes[1].to_i %> </td>
 </tr>
 <% end %>
</table>
```

現在打開 Rails server，如果你方才有跑上面的計票 Script，現在應該可以在首頁看到票數的統計。

## 該讓票數動起來了

現在讓我們來處理 ActionCable 的部份。首先，我們可以用 Rails 的指令來產生 Channel，輸入 `rails g channel vote_leaderboard` 的話，你應該會得到一個 `app/channels/vote_leaderboard_channel.rb` 以及 `app/assets/javascripts/channels/vote_leaderboard.coffee`。

channel 是為了讓你建立頻道的訂閱，而這個 coffee script 則是操控收到票數統計之後的畫面行為。你如果現在打開這兩個檔案，應該會發現裡頭已經有一些內容了，但實際上我們需要的並沒有那麼地多：

```ruby
# app/channels/vote_leaderboard_channel.rb

class VoteLeaderboardChannel < ApplicationCable::Channel
 def subscribed
 stream_from "vote_leaderboard_channel"
 end
end
```

```javascripts
// app/assets/javascripts/channels/vote_leaderboard.coffee

App.vote_leaderboard = App.cable.subscriptions.create "VoteLeaderboardChannel",
 received: (data) ->
 sector_table = $("##{data["sector_name"]}")

 sector_table.html(data["template"])
```

簡單來說，就是 APP 會訂閱 vote_leaderboard 這個 Channel，當 Channel 收到資料的時候，會用 `vote_leaderboard.coffee` 操作 DOM 元件。在這裡可以看到，我們用 jQuery 去抓取了選區的票數統計表格，然後用新收到的票數表格去替換原本的表格。

我們可以創立一個 Job 去接計票的 Request，然後再計完票之後立刻執行 ActionCable 的動作。

```ruby
app/jobs/vote_counting_job.rb

class VoteCountingJob < ApplicationJob
 queue_as :default

 # perform 的時候會直接 publish vote_leaderboard_channel，然後將新表格的 HTML 及選區的名稱傳到前端去。

 def perform(sector)
 ActionCable.server.broadcast("vote_leaderboard_channel", template: render_html(sector), sector_name: sector)
 end

 private

 def render_html(sector)
 # 這裡利用 ApplicationController.render 這個函式來讀取 Partial，這樣我們就可以把得到的表格變成單純的 HTML 去給 JavaScript 來處理了

 ApplicationController.render(
 partial: 'vote_leaderboard/sector_vote_count',
 locals: { sector: Sector.new(sector) }
 )
 end
end
```

這時候我們必須決定什麼時候要來 Perform 這個 Job，我認為合理的時機是在將票數計入 Redis 之後，因此我們回到 `votes_controller`

```ruby
class VotesController < ApplicationController
 skip_before_action :verify_authenticity_token

 def create
 params[:name].each_with_index do |name, idx|
 REDIS.zincrby("POLL:#{params[:sector]}", params[:vote_count][idx].to_i, name)
 end

 VoteCountingJob.perform_later(params[:sector])
 end
end
```

此時打開你的頁面，執行虛擬計票的 Script，ta-da! 你應該可以看到票數迅速地在改變，不需要重新整理也可以得到最新的選票情報了！（當然，如果中選會願意提供真正的 API 那就太好了。）

---

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

post-利用 Redis 打造選舉即時票數排行

利用 Redis 打造選舉即時票數排行

# 使用 VuePress 來做個俄羅斯方塊攻略

大家好，我是卡米哥。今天要教大家怎麼用 VuePress 來做這個俄羅斯方塊攻略網站：[https://etrex.tw/Vuepress-Demo/](https://etrex.tw/Vuepress-Demo/)。

本篇文章架構如下：

- VuePress 簡介
- Markdown 簡介
- VuePress 安裝
- VuePress 試用
- Markdown-It 簡介
- Markdown-It-Plugin 簡介
- Markdown-It-Tetris
- 在 VuePress 安裝 Markdown-It-Tetris
- 設定 VuePress Style
- 實際撰寫攻略
- GitHub 簡介
- GitHub Pages 簡介
- 發布至 GitHub Pages

## VuePress 簡介

VuePress 是一個靜態網站產生器，使用 Markdown 來撰寫文章，適合用來做簡單的部落格。他的特色是產生出來的靜態網站具有 SPA（單頁式網站）架構。

## Markdown 簡介

因為寫 HTML 要打很多字很麻煩，所以世界上有了 Markdown，Markdown 好棒棒。

Markdown 是一種標記式語言，或者簡單的說就是一種文字檔的格式，其副檔名為 `.md`，可以很輕易的透過 Markdown Parser 將 `.md` 轉換為 `.html` 或者其他格式的內容。

## VuePress 安裝

在 Terminal 輸入以下指令即可安裝 VuePress。

```bash
npm install -g vuepress
```

如果你不曉得怎麼操作 Terminal，可以參考龍哥的[Git 教學：終端機及常用指令介紹](https://gitbook.tw/chapters/command-line/command-line.html)。

如果輸入指令後看到以下訊息，代表你還沒有安裝 node.js，請至 [nodejs.org](https://nodejs.org/en/) 安裝。

```bash
command not found: npm
```

如果成功的話會需要等一下，安裝 VuePress 需要一點時間。

## VuePress 試用

以下是建立一個新的 VuePress 專案的流程：

- 找一個空資料夾作為你的專案資料夾
- 新增資料夾 `docs`
- 新增文件 `docs/README.md`
- 新增檔案 `package.json`
- 建立 `package.json` 檔案

### 找一個空資料夾作為你的專案資料夾
首先建立一個空資料夾作為專案資料夾

### 新增資料夾 docs
在專案資料夾下新增一個名為 `docs` 的資料夾

### 新增文件 docs/README.md
在 `docs` 資料夾新增一個名為 `README.md` 的檔案，並且輸入以下文字：

```markdown
# 網站目錄

- [VuePress 簡介](https://vuepress.vuejs.org)
- [Markdown 簡介](https://markdown.tw/)
- [Puyo Puyo Tetris 簡介](https://store.steampowered.com/app/546050/Puyo_PuyoTetris/)
- [DT Cannon 攻略](/dt_cannon.md)

Markdown 好棒棒
```

這個語法就是 Markdown 語法，詳細語法請參考 [Markdown 簡介](https://markdown.tw/)，以上僅示範最重要的標題、超連結、清單的部分。

### 新增檔案 package.json
在專案資料夾下新增一個名為 `package.json` 的檔案，並且輸入以下文字：

```json
{
 "scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 }
}
```

### 執行 VuePress

在專案資料夾下的 Termainal 輸入以下指令來做測試：

```bash
npm run docs:dev
```

成功時會看到以下訊息，代表目前架好了一個網站，而且正在運行。

```bash
 DONE [17:06:51] Build d96bf4 finished in 6292 ms!

> VuePress dev server listening at http://localhost:8080/
```

這時候可以到瀏覽器的網址列輸入 [http://localhost:8080/](http://localhost:8080/) 來查看網站。如果想要關掉網站，在 Windows 可以至 Terminal 輸入 `Ctrl + C`，如果是 MacOS 請輸入 `Command + C`

## Markdown-It 簡介

若想要將 Markdown 格式轉換為 HTML，需要用到 Markdown Parser，在這個世界上有許多款 Markdown Parser，而 [Markdown-It](https://github.com/markdown-it/markdown-it) 是其中一款。而我們使用的 Vuepress，正是採用 [Markdown-It](https://github.com/markdown-it/markdown-it) 作為 Markdown Parser。

## Markdown-It-Plugin 簡介

Markdown 支援的語法很豐富，包含標題、清單、超連結、圖片、分隔線、程式碼區塊、引言區塊、表格等。但透過 Plugin，我們可以擴充 Markdown 的功能，讓它更加豐富，像是支援 Letax、emoji、各式圖表等的顯示，都能夠透過 Markdown Plugin 來達成。你也可以寫一個自己的 Markdown-It-Plugin 來定義自己的 Markdown 語法，以及轉換後的 HTML 內容。

## Markdown-It-Tetris

神奇的是竟然有人閒到做了一個 Markdown-It-Plugin 專門用來顯示俄羅斯方塊盤面：[Markdown-It-Tetris](https://github.com/etrex/markdown-it-tetris)

如果你在 Markdown 中輸入以下內容：

```Markdown
tetris{

 t
 ttti
 ssizz
oo sslijzz
oo lllijjj
}
```

透過 Markdown-It-Tetris，將會被轉換為以下 HTML：

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










 










 










 










 










 










</div>
```

這段 HTML 是需要搭配對應的 CSS 來呈現，如果單純就這段 HTML，在任何一個瀏覽器上看起來是都會是完全空白的畫面。

接下來說明如何在 VuePress 安裝 Markdown-It-Tetris，以及如何在 VuePress 上寫 CSS。

## 在 VuePress 安裝 Markdown-It-Tetris

安裝 Markdown-It-Tetris 到 VuePress 有兩個步驟：

- 安裝 Markdown-It-Tetris
- 在 VuePress 指定使用 Markdown-It-Tetris

### 安裝 Markdown-It-Tetris

在專案資料夾下的 Termainal 輸入以下指令：

```bash
npm install markdown-it-tetris --save
```

這段指令的意思是將 Markdown-It-Tetris 安裝到你的專案上。

### 在 VuePress 指定使用 Markdown-It-Tetris

在 `docs` 資料夾下建立一個名為 `.vuepress` 的資料夾，再到 `.vuepress` 資料夾下建立一個名為 `config.js` 的檔案，並且輸入以下內容：

```javascript
module.exports = {
 title: '使用 VuePress 來做個俄羅斯方塊攻略',
 markdown: {
 config: md => {
 md.use(require('markdown-it-tetris'))
 }
 }
}
```

`config.js` 是設定檔，用來設定 VuePress 的一些參數，而我們設定的內容是指定要在 Markdown 當中使用 Markdown-It-Tetris。

## 設定 VuePress Style

現在我們要幫 Markdown-It-Tetris 產生出來的 HTML 加上一點顏色。到 `.vuepress` 資料夾下建立一個名為 `style.styl` 的檔案，並且輸入以下內容：

```css
.tetris{
 background-color: black;
 border: 10px solid #333333;
 display: inline-block;
 font-size: 0px;
}
.tetris span{
 display: inline-block;
 width: 20px;
 height: 20px;
}
.tetris-t{
 background-color: rgb(142, 0, 207);
}
.tetris-z{
 background-color: #f00;
}
.tetris-i{
 background-color: rgb(0, 197, 197);
}
.tetris-s{
 background-color: rgb(17, 146, 0);
}
.tetris-o{
 background-color: rgb(255, 238, 0);
}
.tetris-j{
 background-color: rgb(0, 17, 255);
}
.tetris-l{
 background-color: rgb(255, 123, 0);
}
.tetris-g{
 background-color: rgb(80, 80, 80);
}
```

這樣就完成了。

## 實際撰寫攻略

在 `docs` 資料夾新增一個名為 `dt_cannon.md` 的檔案，並且輸入以下文字（文長）：

```Markdown
## Puyo Puyo Tetris 簡介

[Puyo Puyo Tetris](https://store.steampowered.com/app/546050/Puyo_PuyoTetris/) 是一款支援多人對戰的魔法氣泡以及俄羅斯方塊混戰的遊戲，遊戲目標就是把對手堆高高。在各大平台上都有上架。推薦購買的版本是 Steam 版。

## 攻擊計算
在這款遊戲中的俄羅斯方塊如果消除時滿足某些條件，就能攻擊對手，造成對方的場地出現一些垃圾方塊，以下將大致說明：

- Tetris：一次消除 4 層，可讓對手增高 4 層
- T-Spin Double：利用 T-Spin 達成一次消除 2 層，可讓對手增高 4 層
- T-Spin Triple：利用 T-Spin 達成一次消除 3 層，可讓對手增高 6 層
- Back To Back：只使用 Tetris 以及 T-Spin 來做消除，可讓對手額外增高 1 層
- Combo：連續消除，可讓對手額外增高 1 層以上
- Perfect Clear：完全消除自己盤面上的所有方塊，可讓對手額外增高 10 層

詳細說明請參考 [harddrop](http://harddrop.com/wiki/Puyo_Puyo_Tetris#Tetris_vs_Tetris_.28Versus.29)。

所謂的 T-Spin 是指利用 T 方塊在特定的位置上旋轉，使 T 方塊抵達一個正常情況下無法抵達的位置。遊戲的設計者鼓勵大家多使用這種特殊技巧來做消除。

## 方塊旋轉系統
在俄羅斯方塊遊戲中，如果一個方塊的周圍沒有足夠大的空間放置旋轉後的方塊，就會卡住而無法旋轉。而方塊旋轉系統定義了什麼情況下可以旋轉，什麼情況下無法旋轉。近代的俄羅斯方塊由於 [The Tetris Company](https://en.wikipedia.org/wiki/The_Tetris_Company) 明文規定了[俄羅斯方塊遊戲實作指南](http://harddrop.com/wiki/Tetris_Guideline)，俄羅斯方塊遊戲必須採用 [Super Rotation System（SRS）方塊旋轉系統](http://harddrop.com/wiki/SRS)。在了解 SRS 方塊旋轉系統後，你就能知道什麼情況下 T-Spin 是可以成功的。

## 方塊序列生成器
在俄羅斯方塊遊戲當中，方塊總共有 7 種（I, J, L, O, S, T, Z），而方塊的生成並不一定是完全隨機的，有一種方塊序列生成器叫做 7 bag，7 bag 是每次生成一組 7 種方塊並且打亂排序，在 7 bag 的系統中你可以預期方塊的出現數量是絕對平均的，大多數近代的俄羅斯方塊對戰遊戲都有實作 7 bag，由於方塊的序列是可預期的，所以就能在遊戲開始之前，就預先設想好盤面的佈置。

## DT Cannon 簡介
DT Cannon 是一個非常知名的起手式，一套完整的 DT Cannon 攻擊，可以使對手在一瞬間增高 12 層，其實整個遊戲也只有 20 層而已。

DT Cannon 就是如此兇狠致命的招。

一個經典的 DT Cannon 是由三個 bag 所組成，其中第一個 bag 的配置如下：

```Markdown
tetris {

 t
 ttti
 ssizz
oo sslijzz
oo lllijjj
}
```

第二個 bag 的配置如下：

```Markdown
tetris {

 lls z
 lsszz i
jj lgszooi
j ggggooi
j gggggi
gg ggggggg
gg ggggggg
}
```

由於我們需要使用兩個 T 方塊來進行連續消除，而第一個 bag 已經使用了一個 T，第二個 bag 的 T 我們儲存在 Hold，並且等待第三個 bag 中的 T 方塊的到來，就能發動攻擊了。

第一個 T 的進入方式如下：

```Markdown
tetris {

t
ttggg g
t ggggg g
gg ggggggg
g ggggggg
g gggggg
gg ggggggg
gg ggggggg
}

在此處逆時針旋轉方塊 2 次

tetris {

 tggg g
tttggggg g
gg ggggggg
g ggggggg
g gggggg
gg ggggggg
gg ggggggg
}

tetris {

 ggg g
 ggggg g
ggtggggggg
gttggggggg
g t gggggg
gg ggggggg
gg ggggggg
}

等待方塊往下

tetris {

 ggg g
 ggggg g
gg ggggggg
g tggggggg
gtt gggggg
ggtggggggg
gg ggggggg
}

再次逆時針旋轉方塊

tetris {

 ggg g
 ggggg g
gg ggggggg
g ggggggg
gtttgggggg
ggtggggggg
gg ggggggg
}

消除後

tetris {

 ggg g
 ggggg g
gg ggggggg
g ggggggg
gg ggggggg
}

此次消除造成 4 層傷害。

第二個 T 的進入方式如下：

tetris {

t
ttggg g
t ggggg g
gg ggggggg
g ggggggg
gg ggggggg
}

在此處逆時針旋轉方塊 2 次

tetris {

 tggg g
tttggggg g
gg ggggggg
g ggggggg
gg ggggggg
}

tetris {

 ggg g
 ggggg g
ggtggggggg
gttggggggg
ggtggggggg
}

消除後

tetris {

 ggg g
 ggggg g
}

此次消除造成 8 層傷害。

不是所有的起手順序都能採用以上的配置，但這是一個有很高機率可以成功的起手配置，請參考[更多的 DT Cannon Pattern](http://harddrop.com/wiki/Double_Triple_Cannon_Setups)
```

現在可以重新執行 VuePress 並且進入首頁，最下面那個連結點進去就可以看到攻略囉！

## GitHub 簡介

GitHub 是一個存放程式碼的網站，你可以將你的程式碼免費的存放到 GitHub 上，供大家觀賞。

將程式碼放到 GitHub 的方法是使用 Git，關於 Git 的使用，請參考龍哥的[為你自己學 Git](https://gitbook.tw/)。

## GitHub Pages 簡介

如果想要讓網站發布到網路上，而不是只能在自己的電腦上看的話，需要找到一台電腦並且維持連網的狀態，把我們的網站放到這台電腦上。

GitHub Pages 就提供了這樣的功能，如果一個專案放到 GitHub 上，並且滿足 GitHub Pages 的規格，那麼 GitHub Pages 就允許你用瀏覽器輸入網址進入網站本體，而不是只能看到程式碼。

## 發布至 GitHub Pages

現在我們要將我們的 VuePress 專案的內容發布成一個靜態網站的資料夾，再將這個靜態網站發布到 GitHub 上，並且在 GitHub 做一些設定值上的調整，變成一個實際發布在網路上的網站囉！

在產生靜態網站之前，我們必須先在 VuePress 設定好與 GitHub Pages 搭配的基礎路徑，其基礎路徑必須與 GitHub Repository 的名稱相同。

基礎路徑的設定是透過修改 `docs/.vuepress/config.js` 來完成。我預計使用 Vuepress-Demo 作為我的 GitHub Repository 名稱。

```javascript
module.exports = {
 title: '使用 VuePress 來做個俄羅斯方塊攻略',
 markdown: {
 config: md => {
 md.use(require('markdown-it-tetris'))
 }
 },
 base: "/Vuepress-Demo/"
}
```

加入了基礎路徑後，原本的首頁將會從 http://localhost:8080/ 進入，變成從 http://localhost:8080/Vuepress-Demo/ 進入。

### 產生靜態網站

在專案資料夾下的 Terminal 輸入以下指令：

```bash
npm run docs:build
```

成功後你會發現在 `docs/.vuepress` 資料夾下多了一個資料夾，叫做 `dist`。

而在 `dist` 資料夾裡面有一個 `index.html`，這就是我們生成出來的靜態網站的首頁。 我們要把在 `dist` 資料夾下的所有檔案都上傳到 GitHub 上。

### 上傳程式碼到 GitHub

如果你還沒有 GitHub 的帳號和專案，你需要先登入 GitHub，並且[建立一個新的 repository](https://github.com/new)，以下假設你新建的 Repository 名為 Vuepress-Demo。

在專案資料夾下的 Terminal 輸入以下指令，即可上傳程式碼：

```bash
# 切換至專案資料夾
cd docs/.vuepress/dist

# 將程式碼加入 Git 管理
git init
git add -A
git commit -m 'deploy'

# 上傳至 GitHub
git push -f https://github.com/etrex/Vuepress-Demo.git master
```

其中，你會需要修改一下網址的部分，以及你可能會遇到需要在 Terminal 登入 github。

### 設定 GitHub Pages

到 GitHub 專案的設定頁，以我的為例，網址如下：[https://github.com/etrex/Vuepress-Demo/settings](https://github.com/etrex/Vuepress-Demo/settings)。

這個頁面很長，直接往下找到 GitHub Pages 的部分，你會看到一段文字：

```
Source
GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository. Learn more.
```

有個選擇 Source 的下拉式選單在這段文字的下方處，預設是選在 `None`，改為選擇 `master branch` 就完成了，完成後再次查看 GitHub Pages 的部分，會發現一個超連結指向我們做好的網站！

如果你點擊超連結後看到的是 GitHub Pages 的 404 網頁，請稍等個十分鐘再嘗試。如果還是沒有看見網站，請檢查你的 Repository 資料夾結構是否與[我做出來的示範 Repository](https://github.com/etrex/Vuepress-Demo) 相同。

那麼今天的教學就到這邊。

---

> 👩‍🏫 __課務小幫手：__
> 
> ✨ 想掌握 Vue 觀念和原理嗎？
>
> 我們有開設 🧚 [Vue.js 與 Vuex 前端開發實戰](https://5xruby.tw/courses/vue-js) 課程唷 ❤️️
>

post-使用 VuePress 來做個俄羅斯方塊攻略

使用 VuePress 來做個俄羅斯方塊攻略


在與 Sketch 相遇後，已經回不去用其他軟體設計網頁的我 ( hen 誇張 )，前陣子從公司的大大那邊聽聞 Google 發表了一個叫做「 Material Theme Editor 」的工具，而它竟然是今年五月份才發表的東西！就讓我來為大家稍微介紹一下這個還熱騰騰的新玩意吧～

## ▸ 簡單來說，「 Material Theme Editor 」是什麼？

一言以蔽之，這是「讓你快速製作自家品牌的 Material Design 風格 Sketch 套件」。( 也太拗口 )
有接觸網頁、APP設計的設計師應該多少都有聽聞過 Material Design，它是 Google 在 2014 年 6 月的Google I/O 大會發表的 Google 獨創的設計準則，在那之後也影響了非常多介面設計在對於扁平化、紙張特性、轉場動畫等方面的思考方向，在四年後的今天，我們仍然可以隨處看到 Material Design 的深遠影響。
而在基於 Material Design 準則下出生的 Material Theme Editor ，他除了有豐富的 Material Design 元件庫，還能夠使用非常簡單且所見即所得的介面調整整體風格與色系！是不是讓人很心動呢？馬上來看看要怎麼使用吧！

## ▸ 下載～安裝～打開～

下載網址：https://material.io/tools/theme-editor
安裝套件後在工具列選取 Plugins > Material > Open Theme Editor 打開 Material Theme Editor

![Material Theme Editor-安裝](//images.ctfassets.net/8er52l3j5u76/Y0YxX6fqipPecMkoBXeL5/966bd85b7ce5c18a2012ca4b637e8896/UNEvTxW.png)

## ▸ 主題選擇

打開 Material Theme Editor 後可以看到 Sketch 內出現了一個黑黑的小視窗，裡面有「 Baseline 」( 基本設計 ) 、「 Crane 」( 旅遊 ) 、「 Fortnightly 」( 新聞 ) 、「 Shrine 」( 購物 ) 四種主題可選擇，除了最基礎的 Material Design 元件以外，也有針對各個不同類別產品所設計的元件庫。

![Material Theme Editor-主題選擇](//images.ctfassets.net/8er52l3j5u76/6QVX7C3E6db9N5HQKWX965/70084222f7d72c1e8ddbb80e863c1d22/vKN7lHa.png)

選擇了任一主題後，可以看到有五個內建的頁面，分別是 Cover 、 Getting Started 、 Material Theme 、 Material Components 、 Symbols ， 其中 Material Theme 是主要範例介面的展示， Material Components 是所有元件的列表， Symbols 就是所有元件庫。

![Material Theme Editor-頁面](//images.ctfassets.net/8er52l3j5u76/57PrrEGHXnBeg4eWwZ1BAf/726a8aa77741e16318b55d547c48e02e/LFPa3WW.png)

## ▸ 四大功能

**功能一：調色盤**
在這個操控介面上，我們可以任意改變「主要」、「強調」、「背景」這三個顏色，點入任一色塊後，我們可以從 Custom 裡面任意選擇我們要的顏色，也可以從 Material 裡面 Material Design 提供的色盤去選取，選取顏色後會自動產生 Primary ( 主要 ) 、 Light ( 較亮 ) 、 Dark ( 較暗 ) 三種顏色。

![Material Theme Editor-調色盤](//images.ctfassets.net/8er52l3j5u76/23WZGxFbuK35Gwj9Dpnwel/85d23c3a7206fed6e9c007787a278dd3/AKgj2mX.png)

選好顏色以後，這些顏色就會套用在元件上各個對應的色彩設定，完全不需要再像以前一樣要一個個手動調整，是否很方便呢！

**功能二：字型設定**
在這個功能可以設定預設的字型，並可以對不同的標題字階層設定不同的粗細，但無法修改字體的大小。

![Material Theme Editor-字型設定](//images.ctfassets.net/8er52l3j5u76/ZbllVBWeJkacyLgFpRWHq/e314afc3458837354548c1b302bd9a47/2GlqOaF.png)

功能三：形狀設定
形狀設定中有「Curved」和「Angied」兩種模式， Curved 會是平滑的圓角，而 Angied 則會是切角的效果。

Curved
![Material Theme Editor-Curved](//images.ctfassets.net/8er52l3j5u76/75chekq5aOTUE6DTw5UPBE/78cff92c42347849ed53f2f406343515/XxHCO5z.png)

Angied
![Material Theme Editor-Angied](//images.ctfassets.net/8er52l3j5u76/4Vj7QqrmaRegbT7mYIWq54/7f24ae89bf54e7763137ff0d7b33d2b5/aRJqdTB.png)

**功能四：Icon 設定**
在這裡提供了五種不同風格的 Icon ，點選以後可以前往下載，下載以後是一套包含 16 種分類、超過上千種的 Icon，各種想得到想不到的 Icon 都有，非常方便！

![Material Theme Editor-Icon 設定](//images.ctfassets.net/8er52l3j5u76/4uyeZNP8VHnYprzKRpGGoC/a3f9dfbe5ed6d978373cf9a7500a2e67/GiPD3qK.png)

## ▸ 最後

附上官方的介紹影片，希望這篇介紹文能對大家有所幫助！

[https://www.youtube.com/watch?v=BLrgDgd_1c0](https://www.youtube.com/watch?v=BLrgDgd_1c0)


post-Material Design 新利器：Material Theme Editor / cover

Material Design 新利器：Material Theme Editor

post-用 Docker 部署 Rails，原來是這樣！？

用 Docker 部署 Rails，原來是這樣！？

圖片上傳是一個在網路上隨處可見的功能，但是要做起來還真多細節在裡頭。

比方說：

客戶：「那可以預覽圖片嗎？」
客戶：「可以在上傳之前弄個裁切嗎？」
客戶：「可以一次上傳多張圖嗎？」
客戶：「可以拖曳上傳嗎？」

老闆：「加點要等哦～」

## 圖片上傳
圖片上傳可以使用套件來完成，我會推薦使用 [carrierwave](https://github.com/carrierwaveuploader/carrierwave)。

細節就跳過不講，總之我會先用產生器來生成一個 uploader。

```ruby
rails g uploader normal
```

會生成這樣的檔案：

```ruby
class NormalUploader < CarrierWave::Uploader::Base

 storage :file

 def store_dir
 "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
 end
end
```

store_dir 說明了圖檔會被存在哪個資料夾。在一個正常的開發環境下，上傳圖片成功後，你可以在 `/public` 資料夾下找到 uploads 資料夾。

以上傳使用者大頭照來說，我會在 User 上指定透過 image 這個欄位來儲存圖片路徑：

```ruby
class User < ApplicationRecord
 mount_uploader :image, NormalUploader
end
```

對應的 form 欄位大概是長這樣：

```ruby
<%= form_for(user) do |f| %>

...略

 <div class="field">
 <%= f.label : %>
 <%= f.file_field :image, id: 'add_image' %>
 </div>

...略

<% end %>
```

只要 image 的值是一個檔案或是一個網址，carrierwave 就會幫我們把圖存進指定的資料夾中。

## 圖片預覽

在古代，圖片預覽是不可能辦到的事，而現代大概有兩種做法：

### 透過 server

當用戶選擇一個圖檔後，先透過 ajax 上傳圖片到 server，而 server 將圖片儲存後，回傳圖片網址以及圖片 id，瀏覽器端使用 `<img src="https://fakeimg.pl/300/"/>` 來達成圖片預覽。

### 透過 base64

當用戶選擇一個圖檔後，透過 FileReader.readAsDataURL 獲得 base64 格式的檔案內容，使用 img ，在 src 填入 base64 字串，達成圖片預覽。 

透過 server 的好處是，實際上圖片早已存在 server 上，這表示在最終表單送出時，用戶就不需要等待圖片上傳了。

但是相對的，透過 server 的缺點是也許用戶上傳圖片後基於某些原因（也許是停電），他無法填完表單，這將導致 server 上將會存在一些被人們遺忘的圖片，而這些圖片需要定期清理。

透過 base64 達成圖片預覽的話，就比較簡單了。

透過 server 的做法應該很容易就能查到，我就不介紹了。

透過 base64 達成圖片預覽的寫法是這樣的：

```javascript
function file_to_base64(file, callback){
 var reader = new FileReader();
 reader.onload = function (e){
 callback(e.target.result);
 }
 reader.readAsDataURL(file);
}
```

這是一個丟入檔案進去會回傳 base64 格式回來的函數。

```javascript
$("#add_image").change(function(e){
 file_to_base64(e.target.files[0],function(base64){
 $("#preview").attr("src", base64);
 });
});
```

我們在當用戶上傳一張圖片後，將圖檔 `e.target.files[0]` 傳入 `file_to_base64`，獲得對應的 base64 字串後放進 img 就完成了，是不是很簡單呢？

## 圖片裁切

圖片裁切也有兩種做法，透過 server 以及透過 base64。

### 透過 server
當用戶選擇一個圖檔後，先做預覽圖片，然後在畫面上顯示一個裁切區域提供給用戶標記裁切位置，當用戶裁切完成時，將裁切座標儲存至 hidden field 並且透過 css 將預覽圖調整成裁切後的樣子。
在送出表單後圖片將會傳回 server，由 server 進行圖片裁切，通常這會是點陣圖檔的操作。

### 透過 base64
當用戶選擇一個圖檔後，先做預覽圖片，然後在畫面上顯示一個裁切區域提供給用戶標記裁切位置，當用戶裁切完成時，透過 canvas 進行裁切並取得對應的 base64 內容，將 base64 儲存至 hidden field 並將預覽圖的 src 值替換掉。
在送出表單後代表圖片的 base64 將會傳回 server，由 server 將 base64 轉存成圖片。

不管採用哪個做法，我們都需要使用裁切套件來協助我們取得裁切座標，我們這裡示範使用的套件是 [cropper](https://fengyuanchen.github.io/cropper/)。

### cropper 介紹

cropper 官方示範的裁切介面如圖中的左側區塊：

![裁切介面](//images.ctfassets.net/8er52l3j5u76/5II94lEUzICQHnqSEwD7bJ/4ac255300f3f42c9a26092b10933461d/2018-03-05_19.05.12.png)

他的用法也很簡單：

```javascript
$("img").cropper();
```

這樣寫就可以將一個 image 區塊變成一個裁切介面。

如果我們是這樣寫的話：

```javascript
$("#add_image").change(function(e){
 file_to_base64(e.target.files[0],function(base64){
 $("#preview").attr("src", base64).cropper();
 });
});
```

就會在上傳圖片後立即看到裁切介面。

然而我們不只需要一個裁切介面，我們可以做成點擊預覽圖後跳出一個裁切介面，並且包含一個`好哦～`按鈕，當按下`好哦～`時，將裁切介面關閉，並且把裁切數據保留。

我們可以把這樣的工作做成一個函數，讓我們傳入預覽圖片的 base64 值，並且在指定位置下生成裁切區域，在裁切之後將裁切資訊以 callback 傳回。

```javascript
var crop_zone_html = `<div class="crop_zone">
 <img />
 <button class="ok" data-turbolinks="false">好哦～</button>
</div>`;

function crop_for_base64(base64, container, callback){
 var crop_zone = $(crop_zone_html);
 var cropping_img = crop_zone.find("img");
 cropping_img.attr("src", base64).cropper();
 container.append(crop_zone);
 crop_zone.find(".ok").click(function(){
 var base64 = $(cropping_img).cropper('getCroppedCanvas').toDataURL('image/png');
 var cropbox = $(cropping_img).cropper('getCropBoxData');
 callback({base64:base64, cropbox:cropbox});
 $(this).parent().remove();
 });
}
```

我們使用一個樣板字串 `crop_zone_html` 去做出裁切區域，裡面包含一個 img 和一個按鈕。

把 base64 值傳入後，設定到空的 image tag 上再呼叫 `cropper()`，裁切區域就完成了。

當 OK 按鈕被按下後，我們就從 cropper 中擷取對應的 base64 值傳回給 callback，並結束裁切介面。

以下是使用情境：

```javascript
$("#add_image").change(function(e){
 file_to_base64(e.target.files[0],function(base64){
 $("#preview").attr("src", base64).click(function(){
 var preview_img = $(this);
 crop_for_base64(base64, $("#for_cropper"), function(crop_data){
 preview_img.attr("src", crop_data.base64);
 });
 });
 });
});
```

我們在點擊預覽圖片後會去呼叫前面寫好的 crop_for_base64 函數。在每次裁切後會將 base64 設定回預覽圖，結果當然是完美的。剩下來的問題就是如何將結果傳回 server。

那麼以下將示範如何將 base64 傳回並且串接到 carrierwave。

### 透過 base64 裁切
#### 上傳 base64

當我們選擇將 base64 的圖檔傳回 server 時，我們就已經不再需要原本的 file field 了。所以我們可以改成用一個 hidden field 去保存 base64。

model：

```ruby
attr_accessor :base64_image
```

form：

```ruby
<%= f.hidden_field :base64_picture, id:"base64_image_field" %>
```

js：

```javascript
$("#add_image").change(function(e){
 file_to_base64(e.target.files[0],function(base64){
 $("#base64_image_field").val(base64);
 $("#preview").attr("src", base64).click(function(){
 var preview_img = $(this);
 crop_for_base64(base64, $("#for_cropper"), function(crop_data){
 $("#base64_image_field").val(crop_data.base64);
 preview_img.attr("src", crop_data.base64);
 });
 });
 });
});
```

這樣 base64 就會存在 hidden field 裡，前端的部分這樣就完成了，接下來是在後端收到 base64 後該如何串接 carrierwave 的問題。

#### base64 與 carrierwave 串接

簡單的想法是 carrierwave 可以接受檔案的格式，所以我們應該先將圖片存成檔案，再傳給 carrierwave。不過，我們可能不想因為存個檔就產生一個暫存檔。如果他可以只存在記憶體，不產生實體檔案，那就更理想了。

直接使用 StringIO 是個不錯的想法，不過我決定要繼承 StringIO。

目標程式：

```
image = Base64ImageStringIO.new(base64_image)
```

希望經過一個轉換後將 base64 轉換為 StringIO 的樣子讓 carrierwave 能夠進行存檔工作。

完整的 Base64ImageStringIO 的寫法如下：

```
class Base64ImageStringIO < StringIO
 REGEXP = /\Adata:([-\w]+\/[-\w\+\.]+)?;base64,(.*)/m

 def initialize(base64_image)
 @extension = '.png'
 super(base64_to_binary(base64_image))
 end
 def original_filename
 @original_filename ||= "#{SecureRandom.uuid}.#{@extension}"
 end

 def base64_to_binary(base64_image)
 data_uri_parts = base64_image.match(REGEXP)
 return nil if data_uri_parts.nil?
 @extension = MIME::Types[data_uri_parts[1]].first.preferred_extension
 Base64.decode64(data_uri_parts[2])
 end
end
```

在建構時，先假設所有圖片都是 png，並且將 base64 轉換為 binary 再丟給 StringIO 的建構式。

關於檔名的部分，程式會隨機生成一個檔案名稱，並且確保副檔名binary 中的內容相同。carrierwave 會自動抓取 original_filename 的值做為檔案名稱。

這就是完整的圖片裁切流程。

如果是上傳多張圖片再加上裁切，同時還要考慮更新資料時舊圖片跟新圖片的處理，那情況就更複雜了，不過跟透過 server 裁切的方法比起來，我覺得還是各有利弊啦。

### 透過 server 裁切

如果是透過 server 裁切的話，前端就要將 cropbox 資訊透過 hidden field 傳到後端。

可以讓 carrierwave 幫我們做點事：

```
class CropUploader < CarrierWave::Uploader::Base

 # Include RMagick or MiniMagick support:
 # include CarrierWave::RMagick
 include CarrierWave::MiniMagick

 # Choose what kind of storage to use for this uploader:
 storage :file
 # storage :fog

 # Override the directory where uploaded files will be stored.
 # This is a sensible default for uploaders that are meant to be mounted:
 def store_dir
 "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
 end

 process :crop

 def crop
 if model.crop_attributes.present?
 cropbox = JSON.parse(model.crop_attributes)
 manipulate! do |img|
 x = cropbox["x"].to_i
 y = cropbox["y"].to_i
 w = cropbox["w"].to_i
 h = cropbox["h"].to_i
 # example: mogrify +repage -crop 1x2+3+4 file_patch
 img.combine_options do |c|
 c.repage.+
 c.crop("#{w}x#{h}+#{x}+#{y}")
 end
 end
 end
 end
end
```

其他的部分就不多說了，最難的部分就是這個 crop，其中：

```
include CarrierWave::MiniMagick
```

需要 gem "mini_magick" 以及 brew install imagemagick。

```
process :crop
```

這是一個 callback，會在圖片儲存前給你一個機會對圖片做事。所以只要前端傳遞一個矩形座標到後端就能切圖。這裡就先隨便用 1、2、3、4 做為代表。

```
img.crop("#{w}x#{h}+#{x}+#{y}")
```

這個 crop 方法會被轉為系統指令

```
mogrify -crop 3x4+1+2 file_path
```

mogrify 是 imagemagick 提供的指令，可以拿它來切圖。

說明書在這裡：[https://www.imagemagick.org/script/mogrify.php](https://www.imagemagick.org/script/mogrify.php)

一切運作良好，直到我遇到這張圖：

![Color](//images.ctfassets.net/8er52l3j5u76/5y0sRh2MpA7Y3jhO5SvpN2/1fcfd88241682837c7b9f67193441114/color_18_3_lg.png)

怎麼切位置都是錯的。

強者我同事爬了一下文，發現是 ImageMagick 支援叫做 Virtual Canvas （虛擬圖層？）的資訊，這種東西其實是圖片的 Metadata 的一部分。

把出問題那張圖片拿去解析 Metadata會發現

```
Image Offset: 54, 64
```

也就是 ImageMagick 發現他有設定位移，所以就照這個設定去裁切了。然後用 +repage 可以讓他把 Offset 設回 0,0

所以這是我們的目標指令：

```
mogrify +repage -crop 3x4+1+2 file_path
```

但 ruby 是要這樣寫：

```
img.combine_options do |c|
 c.repage.+
 c.crop("#{w}x#{h}+#{x}+#{y}")
end
```
因為有兩個以上的參數，所以需要用 combine_options 去串接參數。
```
c.repage.+
```
會生成出
```
+repage
```

事實上他會把函數名稱拿去當作參數名稱，如果我這樣寫：

```
img.combine_options do |c|
 c.jsdiofaodj.+
 c.crop("#{w}x#{h}+#{x}+#{y}")
end
```

他就會嘗試執行

```
mogrify +jsdiofaodj -crop 199x154+234+343 file_path
```

如果把 .+ 拔掉：

```
img.combine_options do |c|
 c.jsdiofaodj
 c.crop("#{w}x#{h}+#{x}+#{y}")
end
```

就會變成

```
mogrify -jsdiofaodj -crop 199x154+234+343 file_path
```

如果調換順序：

```
img.combine_options do |c|
 c.crop("#{w}x#{h}+#{x}+#{y}")
 c.repage.+
end
```

會變成

```
mogrify -crop 3x4+1+2 +repage file_path
```

你可能會想說，參數順序有差嗎？還真的有差。

因為他不是參數順序，而是執行順序。

總而言之，強者我同事守護了世界的和平。

還是切雞排容易多了。

---

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

post-老闆來一份上傳圖片要切/cover

老闆來一份上傳圖片要切

相信大家平常都有在寫測試吧？咦沒有嗎？！俗話說有寫有保祐，如果還不知道怎麼入門的話，可以參考同事寫的這篇[《為你自己學 Ruby on Rails：寫測試讓你更有信心》](https://railsbook.tw/chapters/23-testing-with-rspec-part-1.html)。不過呢，今天要業配的不是書中範例使用的 RSpec，而是華文圈較少有人著墨的 [minitest](https://github.com/seattlerb/minitest)。

## Minitest, Test Unit 傻傻分不清楚？
會混淆也是理所當然的！以大部分人熟悉的 Rails 來說，在不做任何設定修改的預設狀態下，執行 generator，會看到類似以下的結果：

![post-Minitest 加點一杯 Mocha 帶走](//images.ctfassets.net/8er52l3j5u76/4aZY5hJkh5hI6bsuxgck3M/3ba6c113e1e75a1295125be45074715d/sZVPTqx.png)

打開 Rails 產生的測試檔案來看看，可以知道 Rails 幫我們長出了繼承自 `ActiveSupport::TestCase` 物件的 `BookTest` 物件：

```
# test/models/book_test.rb
class BookTest < ActiveSupport::TestCase
end
```

再往下找 Rails 原始碼的話，就會發現 `ActiveSupport::TestCase` 本身就是繼承自 minitest：

```
# activesupport/lib/active_support/test_case.rb
module ActiveSupport
 class TestCase < ::Minitest::Test
 end
end
```

也就是說骨子裡明明是 minitest，但餵給 generator 的參數卻是命名為 `:test_unit`，這樣不會搞混才奇怪 😂

### 不重要的考古（但資料查了很久，請捧場看一下）
那這樣問題就來了，這個 `:test_unit` 是從哪來的呢？這就需要講古了，因為真的很混亂，如果有哪裡寫錯了還請不吝指正 🙇

時間先回到 Ruby 的上古時代。當時，一個叫作 [test-unit](https://github.com/test-unit/) 的 gem 的 1.2.3 版本被收入了 Ruby 1.8 的標準函式庫（standard library），其模組名稱為 `Test::Unit`。這個名詞等下會一直出現。

在仔細比較過 [Ruby 1.8](https://github.com/ruby/ruby/blob/ruby_1_8/lib/test/unit.rb) 和 [Ruby 1.9.3](https://github.com/ruby/ruby/blob/ruby_1_9_3/lib/test/unit.rb) 的原始碼後可以發現：Ruby 1.9.3 的 `Test::Unit` 根本被 core team 魔改成了 minitest，和原本的 test-unit 1.2.3 已經沒有太大關係了 😱

> 這段還有後話，就是 Ruby 2.2 將 `Test::Unit` 和 `Minitest` 都移出了標準函式庫（不由官方維護，只作為內建的測試工具）。當初有希望兩者能夠被整合的聲音，不過時至今日，Ruby 原始碼裡依然是兩套並行，有興趣的人可以參考[當時的討論](https://bugs.ruby-lang.org/issues/9711)。

講完 Ruby，再拉回到 Rails 這邊。Rails 一開始便採用了（當時內建於 Ruby 的）`Test::Unit` 作為其測試工具，並在 Rails 2 開始提供繼承自 `Test::Unit` 的 `ActiveSupport::TestCase` 模組。

至於前面用到的 generator，則是 Rails 3 加入的功能。這樣看來，參數名稱當時選用 `:test_unit` 也是合情合理。一直到了 Rails 4，才將 `Test::Unit` 全面汰換為 `Minitest`，`:test_unit` 的名稱大概也就這樣原原本本沿用下來了。

## 言歸正傳
那麼，minitest 和 RSpec 有什麼差別呢？不管怎麼說，**最重要的還是寫測試本身**，用什麼工具倒是其次<del>（但編輯器當然只有 vim 好！）</del>。RSpec 由於有完備的生態圈而受到業界青睞，不過筆者個人的 side project 喜歡用 minitest，原因主要是：

- 直接內建於 Rails，不用另外設定
- 可以寫純 Ruby，不用另外記 DSL 語法
- 執行速度超快（個人體感）
- 預設的執行順序是隨機的，讓你自然而然學會寫出獨立、互不影響的測試
- 喜歡的開源專案很多都是用 minitest <del>而當專案沒有文件時，測試就是文件</del>

### 基本使用

為了方便 demo，我們先來做一個簡單的 Ruby 專案（[是 Ruby，不是 Rails 喔](https://railshurts.com/quiz/)）。

先把 minitest 放進 Gemfile 裡：

```ruby
# Gemfile
source "https://rubygems.org"

gem "minitest"
```

再來把 `minitest/autorun` require 進來：

```ruby
# demo.rb
require "minitest/autorun"
```

執行 `bundle install`，事前準備就完成了。檔案目錄大概會長得像這樣：

```ruby
jodeci@~/codebase/lurofan: tree
.
├── Gemfile
├── Gemfile.lock
└── demo.rb
```

#### 來寫第一個測試

還記得前面介紹的，Rails 內建的 `ActiveSupport::TestCase` 嗎？它本身就是繼承自 `Minitest::Test`，我們也來這樣實做：

```ruby
# demo.rb

class LurofanTest < Minitest::Test
end
```

對，這是個測試滷肉飯的程式 XD 馬上來寫第一個測試看看：

```ruby
# demo.rb

class LurofanTest < Minitest::Test
 def test_default_price
 lurofan = Lurofan.new
 assert_equal 50, lurofan.price
 end
end
```

`assert_equal` 這個方法很重要，它可以滿足我們幾乎 90% 的需求。範例用中文來說的話，就是「確認滷肉飯的價錢是 50 元」的意思。

要注意的是，測試方法必須以 `test_` 前綴。Rails 有另外提供下面這種語法，但筆者自己是偏好當成一般的 Ruby 方法寫就好。

```
test "default price" do
end
```

馬上來執行看看：

```ruby
jodeci@~/codebase/lurofan: ruby demo.rb 
Run options: --seed 45041

# Running:

E

Error:
LurofanTest#test_default_price:
NameError: uninitialized constant LurofanTest::Lurofan
Did you mean? LurofanTest
 demo.rb:5:in `test_default_price'

bin/rails test demo.rb:4
```

當然很愉快地噴錯了，因為我們還沒寫 `Lurofan` 的本體。由於只是 demo，我們直接接在同一個檔案裡面補上去就好：

```ruby
# demo.rb

class Lurofan
 attr_reader :price

 def initialize(price: 50)
 @price = price
 end
end
```

再來執行一次，測試就成功了：

```ruby
jodeci@~/codebase/lurofan: ruby demo.rb 
Run options: --seed 51576

# Running:

.

Finished in 0.001230s, 813.0081 runs/s, 813.0081 assertions/s.
1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
```

除了 `assert_equal` 之外，minitest 也提供了檢驗布林值的 `assert`、檢驗空值的 `assert_nil` 等各種 assertion 方法，詳細可以參考[官方文件](http://docs.seattlerb.org/minitest/Minitest/Assertions.html)。

### 孤立測試

有注意到兩次執行結果中的這一行嗎？

```ruby
＃ 第一次
Run options: --seed 45041

# 第二次
Run options: --seed 51576
```

範例檔只有一個測試方法 `test_default_price` 所以感覺不明顯，但 minitest 其中一個好處，就是它每次執行時，`test_` 開頭的測試方法是會隨機執行，沒有固定順序的。Rspec 也有這個功能，但它不是預設值，你需要另外加 `--option random` 的參數進去才會打亂。

打亂有什麼好處呢？這是 isolation testing 的概念；我們希望每個 `test_xxx` 方法都能被獨立執行，不受外部條件影響，當程式出錯時，也方便快速鎖定問題的源頭。將測試執行順序打亂就是一個成本很低的「及早發現問題」的方式，而當這是測試框架的預設行為時，成本就變得更低了。

### minitest/spec

覺得 minitest 太陽春了嗎？懷念 Rspec 的語法嗎？<del>雖然對我來說這是賣點</del>沒問題，minitest 也支援 `minitest/spec` 的寫法：

```ruby
describe Lurofan do
 before do
 @lurofan = Lurofan.new
 end

 it "default price is 50" do
 @lurofan.price.must_equal 50
 end
end
```

這裡則是使用 [expectation](http://docs.seattlerb.org/minitest/Minitest/Expectations.html) 的方式來做檢驗。雖然骨子裡和 assertion 是一樣的東西，但對有 Rspec 經驗的人來說可能比較親切？

以上兩種風格都各有優缺點，也有主觀的喜好。筆者個人是偏好非 DSL 的寫法，理由主要是「測試程式就是普通的 Ruby 程式」，不需要把測試程式當成特殊的東西，平常怎麼寫就怎麼測，refactor 起來也很直覺，例如剛才的範例可以改寫成這樣：

```ruby
require "minitest/autorun"

class Lurofan
 attr_reader :price

 def initialize(price: 50)
 @price = price
 end

 def has_pork?
 true
 end
end

class LurofanTest < Minitest::Test
 def test_default_price
 assert_equal 50, subject.price
 end

 def test_has_pork
 assert subject.has_pork?
 end

 private

 def subject
 Lurofan.new
 end
end
```

## mocha

筆者個人雖然是 minitest 的愛用者，也不得不承認它內建的 mocking/stubbing 工具很不好用（有興趣的人可以參考附錄的教學文，應該會想摔鍵盤）。所幸我們有 [mocha](https://github.com/freerange/mocha) 可以解決這個問題。總之我們先把 mocha 裝進剛才的專案裡 ：

```ruby
# Gemfile

source "https://rubygems.org"

gem "minitest"
gem "mocha"
```

```ruby
# demo.rb

require "minitest/autorun"
require "mocha/minitest"

class Lurofan
 # ...
end

class LurofanTest < Minitest::Test
 # ...
end
```

mocha 的文件滿詳細的，這邊只簡單介紹一下常用的 `stubs` 和 `expects` 就好。還是用剛才的滷肉飯來舉例，我們來加進折扣的功能：

```ruby
require "minitest/autorun"
require "mocha/minitest"

class Lurofan
 attr_reader :price

 def initialize(price: 50)
 @price = price
 end

 def discount_price
 self.price - DiscountService.call
 end
end

class LurofanTest < Minitest::Test
 def test_discount_price
 DiscountService.expects(:call).returns(10)
 assert_equal 90, Lurofan.new(price: 100).discount_price
 end
end
```

在物件導向的概念中，每個物件都只想到它自己。

對於 `LurofanTest` 來說，它只關心 `discount_price` 算出來的價錢是否正確，而不關心 `DiscountService` 是怎麼算出折扣來的（那應該是 `DiscountServiceTest` 要去擔心的事情）。因此我們直接去 stub 折扣的結果，只要確認最後兩者相減的結果是正確的就可以了。

### stubs 和 expects 的差別
`stubs` 和 `expects` 的用法大同小異，那麼差別是在哪裡呢？大概可以這樣去理解：使用 `expects` 表示你關心所模擬的方法「有被執行到」，而使用 `stubs` 則表示你只是要把「模擬的值」準備好備用，有沒有被實際執行到反而不重要。

在範例中我們選擇使用 `expects`，正是因為對 `Lurofan` 來說，重要的是「DiscountService 有被呼叫到」。大家在設計測試時也可以多想想，怎樣的寫法才是最適合的。

## 結語
Rspec 雖然是業界主流，但 minitest 也有其輕便好用的地方。作為一名 Ruby 工程師，兩者兼修不是壞事<del>尤其是要去研究開源專案的原始碼時</del>。對筆者來說，使用 minitest 最大的好處就是可以直接用平常寫 Ruby 的思路，不需要「再多學一套」。最後，重要的事要說三次：**不管你用什麼工具，記得要寫測試 XD**

### 參考資料
- [Getting Started with Minitest](https://semaphoreci.com/community/tutorials/getting-started-with-minitest)
- [My experience with Minitest and RSpec](https://tenderlovemaking.com/2015/01/23/my-experience-with-minitest-and-rspec.html)
- [7 REASONS I'M STICKING WITH MINITEST AND FIXTURES IN RAILS](https://brandonhilkert.com/blog/7-reasons-why-im-sticking-with-minitest-and-fixtures-in-rails/)
- [Bow Before MiniTest](https://speakerdeck.com/ahawkins/bow-before-minitest)
- [Mocking in Ruby with Minitest](https://semaphoreci.com/community/tutorials/mocking-in-ruby-with-minitest)
- [Back to Basics: Writing Unit Tests First](https://thoughtbot.com/blog/back-to-basics-writing-unit-tests-first)

(Photo by rawpixel on Unsplash)

---

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

post-Minitest 加點一杯 Mocha 帶走

Minitest 加點一杯 Mocha 帶走


當使用者進到自家網站時，想知道使用者是點擊哪個商品按鈕？或是讓使用者透過按鈕去分享，該如何知道分享按鈕是被點擊幾次呢？電商網站最常見的就是加入購物車、收藏清單、註冊會員、FB登入等等行為，可以藉由 Google Analytics 去分析網站的訪客行為，這些按鍵點擊我們稱為「事件」，一起來透過 GTM 將這些「事件」傳送到 GA 分析吧！

## 追蹤網頁按鈕點擊 GTM 實戰教學
直接登入 GTM 開始吧 ! GO [https://tagmanager.google.com/?hl=zh-tw](https://tagmanager.google.com/?hl=zh-tw)

Step 1. 新增觸發條件
左上放工作區 > 新增觸發條件 > 選擇「點擊連結」> 選擇所有連結 > 新增各個點擊變數

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/2lM3WwmupC4eJ2A1k4vvfM/93ecf465d8306441ae6ee862bc86212f/scfqi6v.jpg)

Step 2. 觸發條件的啟動時機 > 選擇所有連結點擊

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/5k5Ce8kl5iyKqMo7KSoTXZ/7034c4bedadace4b649cb82bb57c53ec/zTnpgOW.jpg)

Step 3. 工作區 > 變數 > 內建變數 > 設定 > 設定內建變數 > 勾選點擊類別所有項目 

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/3jWJYfZsx8TkzQPF6ryWg9/9f09a98cbdb42a9ea3e32a555ed1b7b1/VZtw7nQ.jpg)

## 啟用預覽功能，找尋要追蹤的按鈕

Step 1. 啟用預覽功能
工作區域 > 右側預覽 

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/3vfDwruKeHvErDKhw3ufwY/2855f40100689e6b73c355c36c37dc41/EaFzqor.jpg)

Step2. 變數欄中查看按鈕的值

在預覽模式下進入有埋 GTM 的網頁，下方出現 listener 介面

查看變數的部分，可以看到有 Classed / Element / ID / Target / Text / URL，你可以根據自己網頁來做選擇，嘗試點擊網頁中不同的按鈕，去檢視 gtm.click 變數吧！

值(Value)基本上都是動態，像是電商網站，因為產品名稱、尺寸、都會因為使用者下單選擇，而會不一樣，值(Value)的部分需要由後端工程師填入欄位。

## 瀏覽並找到要追蹤的 Button

Step 1. 工作區 > 觸發條件 > 點擊 - 所有元素 > 部分點擊
小提醒：值(Value)要記得包含

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/3lx7rNwtBzo7lipPnDY9f5/c934bbe0ffd26c1b0898370d706ba68c/E8u09Ht.jpg)

Step 2.新增代碼，作為 GA 和 按鈕追蹤對應
工作區 > 代碼 > 代碼類型：GA 通用分析 > 追蹤類型：事件 > 類別和動作設定為 click

類別(Category)、動作(Action)、標籤(Label)和值(Value)，標籤為了讓 GA 能夠自己抓取網頁的值，就是事件追蹤要送給 GA 的值

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/6FIg3zVqXS4JwW5tOG2RXT/b9e2877dc6a24ae698fda7cbc84e0cbd/oQg4z4I.jpg)

Step 3. 觸發條件 > 所有 Click Trigger 所有元素 
欄位中填的「類別」跟「動作」會在 GA 事件維度中出現

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/2ozWwSx59kl6QWjLJdQUf3/e5102a63a84a9a27f0b6a953184a1441/7LrZpDd.jpg) 

## 完成追蹤按鈕，到 GA 中檢查追蹤是否有生效吧！

開啟預覽模式到網頁點擊 > GA 看即時數據 > 完成按鈕追蹤！

如何在 GA 內檢查是否有埋入追蹤按鈕？
即時事件 > 事件類別 > 事件動作

當你點擊網頁中的按鈕時，GA 報表中的即時事件，將會有事件類別 button click ，有一個事件動作 click ，這樣就完成追蹤按鈕囉！數字出現 0 ，代表設定上出錯囉！

「事件」是指使用者與你網站或應用程式的互動哦：）

![post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？](//images.ctfassets.net/8er52l3j5u76/40GzpIPyRQ19T08QiGCjLk/e8719a9145d88433a1e5ed0ff162580f/ErVZkSP.jpg)

## 小結
追蹤按鈕可以知道站外連結的點擊次數，可以得知有多少使用者對你的連結有興趣，按下 Button 按鈕的人有多少，透過追蹤後，可以優化網站導向，讓整體的網站體驗上升，當網頁進行 A/B Testing ，也是很好的數據來作為依據，讓網站行銷策略更有方向，而不再是亂槍打鳥，讓數據為你的網站說話吧！


post-如何透過 GTM 追蹤頁面上的每個按鈕點擊？

如何透過 GTM 追蹤頁面上的每個按鈕點擊？


最近很火紅的第一人稱射擊吃雞類型遊戲「Apex Legends」上市8小時內同時在線玩家人數突破100萬人（筆者也是其中之一），這款遊戲和 Ruby 能擦出什麼樣的火花呢？在本文中我們將嘗試使用 Ruby 搭配玩家間熱門的語音通訊社群軟體 Discord 製作聊天機器人再透過 API 獲取玩家於遊戲中的相關戰績資訊。該透過哪些步驟快速製作我們的聊天機器人呢？讓我們接下去看看吧！

## 前置作業
假設你已經安裝好了程式語言 `Ruby`(如果沒有安裝的請到[官方網站](https://www.ruby-lang.org/zh_tw/downloads/)根據自己所使用的 `OS` 安裝 `Ruby`)

然後我們需要建立一個 `Ruby` 檔案，在本文中我們建立一個名為  `chatbot.rb` 的檔案在資料夾 `discord` 下，其中副檔名為 `.rb` 代表這是一個 `Ruby` 的檔案。

接下來透過[終端機](https://gitbook.tw/chapters/command-line/command-line.html)(何謂終端機可以參考連接文章的前面部份)進入 `chatbot.rb` 所在的資料夾中並輸入 `gem install bundler` 透過 `Ruby` 的套件管理工具 `Gem` 來安裝相依性套件版本管理工具 [Bundler](https://bundler.io/) 後再輸入指令 `bundle init` 來初始化 `Bundler` 的相關資料。完成後會自動建立一個檔名為 `Gemfile` 的檔案，這個檔案是用來指定 `Ruby` 專案所使用 `Gem` 相關套件的設定檔。我們在 `Gemfile` 檔案中的最下方添加一行設定：

```ruby
# 你的 Ruby 專案資料夾下/Gemfile
# (其他 gem...)
gem "discordrb"
```
然後透過終端機輸入命令 `bundle install` 就會自動幫我們安裝別人打包好的 `Discord` 機器人函式庫 [discordrb](https://github.com/meew0/discordrb)。

### 獲得 Discord Bot Token

要製作 `Discord Bot` 需要先獲得機器人的 `Token`，需要在 [Discord Developer Portal](https://discordapp.com/developers/applications/) 申請一組帳號和在帳號下新增一個應用程式，並在 Bot 頁面生成一組 Token。如下圖範例位置：

![post-使用 Ruby 快速製作屬於你的 Discord 聊天機器人](//images.ctfassets.net/8er52l3j5u76/2m10uGSkpOTzHTds4KWNQl/9c50f57444bb4d868558fd3fe9eb6f83/UE6JRfo.png)

## 製作測試聊天機器人
成功註冊帳號並獲得 `Token` 後我們要開始撰寫聊天機器人的程式碼囉，利用文字編輯器編輯前面所建立的 `.rb` 檔案並新增下列程式碼：

``` ruby
# 調用在 Gemfile 設定並安裝的 disocrd API 函式庫
require 'discordrb'

# 將你在 Discord 申請的機器人 Token 帶入並實例化機器人
# 記得替換 Bot Token 為你自己的 Bot Token
bot = Discordrb::Bot.new token: '你的 Bot Token'

# 在 Discord 頻道中對機器人說話後機器人會回應的行為設定
# 下方程式碼中 content: 'Ping' 就是代表聊天室收到信息內容為 Ping! 時
# 會觸發事件並產生回覆內容 Pong!
bot.message(content: 'Ping!') do |event|
  event.respond 'Pong!'
end

# 運行機器人
bot.run
```

將檔案編輯完成後透過終端機輸入指令 ``ruby discord.rb`` 執行剛剛撰寫的機器人測試 `Ruby` 檔案。接下來根據官方的文件說明我們要邀請聊天機器人到你所屬的 `Discord` 聊天頻道中，可以透過一組網址為： ``https://discordapp.com/oauth2/authorize?&client_id=你的機器人_Client_ID&scope=bot&permissions=0``

其中 ``你的_Client_ID`` 的部分請替換成 Discord Application 中的 Client ID 如下圖範例所在位置：

![post-使用 Ruby 快速製作屬於你的 Discord 聊天機器人](//images.ctfassets.net/8er52l3j5u76/1rAnN5ztbWDkGUo3clph32/7663f6cfed38e7a540a769d28680434a/1AEoD3q.png)

在瀏覽器輸入網址後我們會被導引到一個 `Discord` App 授權的畫面，當授權成功後我們就可以將機器人加入自己的 Discord Server 後在聊天頻道中輸入信息 ``Ping!`` 後如果有收到機器人回覆 ``Pong!`` 恭喜你機器人到目前為止算是成功設置了！

## 將機器人串接 Apex Legends API
確認機器人可以正常建立並執行後，下一步我們要來串接 Apex Legends API 將現在只會簡單回應的機器人升級為可以透過關鍵字查詢遊戲戰績的機器人喔！

### 註冊 TRN Apex Legends API 帳號
本文中使用第三方服務 TRN Apex Legends Tracker API 來獲取角色戰績，所以需要先前往[TRN 官網](https://apex.tracker.gg/site-api) 頁面註冊帳號並申請 API KEY 並在附在 request header 透過 `Ruby` 發送 API request 時獲得授權才能取得我們想要的資料。

### 調整機器人程式碼
在剛剛測試機器人的檔案 ``discord.rb`` 中我們實做了簡單的關鍵字回答功能，現在我們要利用註冊後取得的 API Key 對 TRN Apex Legends API 端點發送請求。請把檔案中的程式碼調整為以下範例。並替換 其中的 chatbot token 和 api key 為官網中註冊後所取得的 key。

```ruby
# 調用 Discord API 函式庫
require 'discordrb'
# 宣告一個時間變數儲存呼叫 API 的時間
@call_time_last = Time.new

# 創建 Discord Bot 並帶入 Token 並將機器人命令附加前綴詞'!'
bot = Discordrb::Commands::CommandBot.new token: '你的_chatbot_token', prefix: '!'

# 為機器人定義指令 myhero 並處理 Apex Legends API 資料接收與解析
bot.command :myhero do |event, player|
  # 建立 Api 觸發時間，防止 call rate 超過 API 伺服器限制會有被禁止連線的問題
  @call_time_now = Time.now

  # 當機器人收到指令 !myhero 玩家_ID 時將 ID 存入變數 player_name 中
  @player_name = player

  # 將我們要對 API 發送請求的網址存入變數中，並帶入玩家的 ID
  uri = URI("https://public-api.tracker.gg/apex/v1/standard/profile/5/#{@player_name}")

  # 如果這次呼叫 API 的時間距離上一次呼叫的時間經過兩秒半，正常呼叫 API。
  if @call_time_now - @call_time_last > 2.5
    # 紀錄成功呼叫 API 的時間
    @call_time_last = Time.now

    # 使用 Ruby 的 Net::HTTP 模組處理對 API 發出的 request
    Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
      req = Net::HTTP::Get.new(uri)
      # 將 TRN 申請的 Api Key 帶入 request header 中提供給 API 端點驗證
      req['TRN-Api-Key'] = '在 TRN 取得的 api key'

      # 將發送 request 後得到的資料解析成 Json 格式
      response = http.request(req)
      @data = JSON.parse(response.body)
    end

    # 從 API 拿到的資料解析完後使用 event.respond 方法讓機器人在聊天室回應信息
    event.respond "
    #{@data['data']['children'].first['metadata']['icon']}
    等級 (Level)：#{@data['data']['stats'].first['displayValue']}
    使用英雄 (Legend Name)：#{@data['data']['children'].first['metadata']['legend_name']}
    擊殺數 (#{@data['data']['children'].first['stats'].first['metadata']['name']})：#{@data['data']['children'].first['stats'].first['displayValue']}
    "
  else
    # 如果距離上次呼叫 API 所經過時間小於三秒，則顯示忙碌信息。
    event.respond "目前忙碌中，請稍待片刻再呼喚我..."
  end
end

# 使用 run 方法讓機器人運行
bot.run
```

### 測試機器人是否正常回應
調整程式碼後透過終端機再次輸入 ``ruby discord.rb`` 讓 ``Ruby`` 執行我們撰寫好的機器人檔案，接著到聊天機器人所在的 ``Discord`` 伺服器中輸入 ``!myhero 遊戲ID`` 會發現機器人自動回覆該玩家在遊戲中使用的角色圖片、帳號等級、擊殺數。如下圖範例：

![post-使用 Ruby 快速製作屬於你的 Discord 聊天機器人](//images.ctfassets.net/8er52l3j5u76/6hC0dM5LFUoafErkXSJtTx/7be8d807541783bc37eb9c6670f476bd/GTWGJkE.gif)

## 小結
在本文中我們透過 `Ruby` 內建強大的套件工具 `Gem` 來安裝 `Discord` 機器人函式庫並撰寫程式碼製作簡易的聊天機器人。接下來串接第三方 API 讓機器人可以接收到 `Discord` 信息的關鍵字後透過呼叫第三方 API 端點獲取遊戲的相關資料並在聊天室中產生回應。這樣的流程下我們動手製作了屬於自己的聊天機器人，讓聊天室的戰友們可以快速獲得遊戲資訊，是不是一種 `Ruby` 很有趣又實用的應用呢？

---

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


技術文章