五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


相信大家平常都有在寫測試吧？咦沒有嗎？！俗話說有寫有保祐，如果還不知道怎麼入門的話，可以參考同事寫的這篇[《為你自己學 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) 課程唷 ❤️️
>


post-使用 Ruby 快速製作屬於你的 Discord 聊天機器人

使用 Ruby 快速製作屬於你的 Discord 聊天機器人

在三大主流前端框架中，最年輕的 Vue 無疑是個爆發力最強的一個，尤其是容易上手且中文資源多，對於很多人來說 Vue 是踏入前端框架的首選。Rails 自 3.1 版使用 jQuery 並且搭配 Asset pipeline 來打包前端資源已經好一段時間，在這個前端爆炸的年代這個組合已經略顯不足，直到 Rails 5.1 開始引入了 webpack 並且可搭配 yarn 做前端套件管理後，大大的提升 Rails 對現代前端框架支援的友善度！
本篇將會以一個搞不懂前端生態(誤) 的 Rails 開發者視角來探討：

- 手把手的寫一個簡單的 Rails 搭配 Vue 專案
- 如何在 Rails 中應用 Vue component
- 怎麼在 Rails 中搭配 Turbolink
- 其他有的沒的
(本篇使用的是 Rails 5.2.2)

# 專案初始
以下範例程式，我們將要做一個簡單的通訊錄系統，並且嘗試用 Vue 來顯示結果。
開始之前請先確定：

- 你的電腦上已經安裝好 [node.js](https://nodejs.org/en/)
- 你的電腦上已經安裝好 yarn. Mac user 可以直接使用 homebrew ( `brew install yarn` ) 安裝 

> Rails 利用 yarn 來管理前端套件，你可以把它想像成是一個比較新潮的 npm。

接下來要新增一個「預先裝好 Webpack 並搭載 Vue 而且不裝 Turbolink 的 Rails 專案」，我們命名這個專案為 「vue_example」

```bash
$ rails new vue_example --skip-turbolinks --webpack=vue
```

Turbolinks 是 Rails 用來加入頁面載入的套件，其實就是透過快取來替換部分的頁面內容，但是如果搭配使用前端框架渲染頁面時就有可能產生錯誤，我們之後再說明如何結合 Turbolink 使用 Vue，目前將 Turbolink 關閉。

雖然使用 `rails s` 啟動專案後就可編譯 webpack 的程式碼，但是可以使用 `webpack-dev-server` 來做即時的自動編譯(存檔後瀏覽器就會重新 hot reload)。Webpack 已經內建了 `webpack-dev-server`，在 console 中輸入 `bin/webpack-dev-server` 就可以啟動了。但每次都要開兩個 server 也說不上很方便，所以可以順道安裝 **foreman** 來幫我們同時把需要的服務都開起來。

在 _Gemfile_ 下新增 foreman

```ruby
group :development do
  # other gem ...
  gem 'foreman'
end
```

存檔後記得 `bundle install`

接這在專案根目錄下新增一個 _Procfile_ 檔案，把我們要一起開的服務都輸入進去

```
backend: bin/rails s -p 3000
frontend: bin/webpack-dev-server
```

存檔後，往後就可以在 console 中輸入 `foreman start` 來同時啟動所有需要的服務啦!

接著使用 scaffold 來快速產生我們要的範例程式

```bash
$ rails g scaffold AddressBook name:string email:string phone:string description:text
$ rails db:migrate
```

然後請自己在 `rails console` 下，自己新增一些假資料。

# 開始撰寫 Vue
我們來看一下安裝 webpacker 和 vue 之後, 在 `app/` 資料夾多下了個 `javascript` 資料夾，而底下的 `path/` 資料夾就是放置 webpack 的 entry point。講白話就是最後 webpack 的模組都會匯集到 entry point 裡，最後會利用神奇的魔法將模組編譯在一起，透過這個 entry point 來整合所有複雜的前端元素到我們的 html 網頁中。

```
/app/javascript
├── app.vue
└── packs
    ├── application.js
    └── hello_vue.js
```

vue 幫我們自動產生了一個 entry point - **hello_vue.js** 和模組 **app.vue** ( 有興趣可以看一下裡面在寫什麼 )

我們這裡不使用 hello_vue.js，手動建立一個自己的 entry point - **main.js**

```javascript
import Vue from 'vue/dist/vue.esm'
import NameCard from '../name_card.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#app',
    components: { NameCard }
  })
})
```

[**app/javascript/packs/main.js**]

然後新增一個叫做 **name_card.vue** 的元件檔

```html
<template>
  <div class="name-card">
    {{message}}
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "this is a name card by Vue"
    }
  }
}
</script>

<style scoped>
.name-card {
  border: 1px solid rgba(0, 0, 0, 0.205);
  display: inline-block;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border-radius: .25rem
}
</style>
```

接著我們要把 entry point 放到網頁裡面，最適合的地方就是在 Rails 預設的網頁 layout template： **app/views/layouts/application.html.erb** ，在它的`<head>` 標籤中加入 `javascript_pack_tag` 和 `stylesheet_pack_tag` 來載入 entry point

```erb
<head>
  
  <%= stylesheet_pack_tag 'hello_vue' %>
  <%= javascript_pack_tag 'hello_vue' %> 
</head>
```

[**app/views/layouts/application.html.erb**]

到 _index.html.erb_ 頁面上，加入一個 `<div id="app">` 的標籤作為 Vue 的掛載點，並且把 `NameCard` component放在裡面

```ruby

<hr>
<div id="app">
  <name-card></name-card>
</div>
```

[**app/views/address_books/index.html.erb**]

存檔後啟動專案，打開瀏覽器看一下結果

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

其中 `stylesheet_pack_tag` 是用來載入 webpack 編譯完的 css style。可以試著把它拿掉，你會發現在 `app.vue` 內定義的 `<scope style>` 就失去了效果。

# 更好的 Vue component 掛載方式

如果覺得要使用 Vue component 都要先包一層掛載點像是 `<div id="app">` 覺得很麻煩（到底是多懶？），可以考慮以下的小技巧：
在 application layout 中，用一個標籤把整個 `yield` 包起來

```ruby
<html>
  
  <body>
    <div class="container" data-behavior="app">
      <%= yield %>
    </div>
  </body>
</html>
```

[**app/views/layouts/application.html.erb**]

然後修改掛載點，綁定 `[data-behavior]` 屬性

```javascript
// ...
document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '[data-behavior="app"]',
    // ...
  })
})
```

[**app/javascript/packs/main.js**]

這樣整個 view 都是我的 Vue 掛載點啦，是不是很方便！
這樣一來在 _index.html.erb_ 中我們可以把 `<div id="app">` 拿掉，直接把 component `<name-card>` 放上去就好

# 使用 props 來收 Rails 的資料
接著要來繼續改善我們的程式，透過 Vue 的 `props` 屬性，可以接收由 component 外傳傳遞進來的資訊。
修改 `name_card.vue` 元件

```html
<template>
  <div class="name-card">
    <ul>
      <li>name: {{ item.name }}</li>
      <li>email: {{ item.email }}</li>
      <li>phone: {{ item.phone }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["item"],
}
</script>



```

[**app/javascript/name_card.vue**]

在 index.html.erb 中我們有一個 `@address_books` 是透過 Rails 取得的所有通訊錄資料，將資料個別取出後，轉成 json 格式就可以將每一筆的 `address_book` 餵給 Vue 的 `NameCard` 元件

```erb
<%@address_books.each do |address_book|%>
  <name-card :item="<%=address_book.to_json %>"></name-card>
<%end%>
```

[**app/views/address_books/index.html.erb**]

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

# 關於 Vue 在 Rails 的自問自答
>> Turbolinks 一定要關掉嗎？

其實已經有相關的 Vue 套件 **"vue-turbolinks"** 可以讓 Vue 與 Trubolink 共存
使用 yarn 安裝 **vue-turbolinks**

```bash
$ yarn add vue-turbolinks
```

然後你的 entry point ( _main.js_ ) 必須改成這樣

```js
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    // ...
  })
})
```

主要是因為 Turbolinks 會暫存到 Vue 渲染過的頁面，造成快取到錯誤的頁面結果，而這個套件就是在解決這件事情。

>> 沒有了 jQuery, 有什麼可以替代 $.ajax 呢？

- ES6 原生的 [fetch api](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API)
- [Vue resource](https://github.com/pagekit/vue-resource)
- [Axios](https://github.com/axios/axios) : 目前 Vue 官方推薦使用

>> webpack 好麻煩，不能繼續用 asset pipline 嗎？

如果單純的在 `<script>` 中來撰寫 Vue，是不需要經過 Webpack 編譯的，可以自行將Vue.js library 引入到 _application.js_ 裡面，或者直接安裝[vuejs-rails](https://github.com/adambutler/vuejs-rails) gem。

>> 如果我想要在 Vue 元件中用 i18n 或其他 Rails 的 helper 怎麼辦？

Vue 提供了 inline template 的方式，可以直接在我們的 Rails view file 中撰寫 vue 的模板，而不是去使用原本 _.vue_ 中的 `<template>` 模板

```erb
<%# 我是 .erb  %>
<name-card inline-template>
  <%# 你可以在這邊使用 Rials helper %>
</name-card>

```

# 小結
本篇著重在如何在維持 Rails MVC 的架構下，輕量的導入 Vue.js 前端框架，對於 Rails 開發者來說是相對容易與現行架構整合的一個方式。如果對於 Webpack 想要更深入探索，推薦各位可以參考五倍紅寶石工程師 Roy 寫的 [新手向 Webpack 完全攻略](https://5xruby.tw/posts/webpack-01/) 系列文章，而看了本篇覺得 Vue 很有趣，歡迎來參加五倍紅寶石開設的 [Vue.js 與 Vuex 前端開發實戰課程](https://5xruby.tw/talks/vue-js/)喔！

---

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

post-在 Rails 中開始 Vue

在 Rails 中開始 Vue


隨著數位人才的需求逐年攀升，「工程師」也成為許多人心中嚮往的職涯選項與轉職目標，各式各樣「程式學習」資源也正在蓬勃發展。無論線上或實體課程、免費或付費教學，開始「學寫程式」的人數正在快速成長中。

然而「找到最適合自己的學習方式」可以說是程式學習路上最重要，也是最先要面對的課題之一。畢業於歷史系的小雅，從一個完全沒有程式開發經驗的初心者，到現在成為負責網站開發的專業後端工程師，這趟轉職歷程的起點，就是從五倍紅寶石的課程開始。

## 接觸程式的契機 是為了能更有效的溝通
小雅過去從事數位行銷，經常需要和工程師討論網站開發方向，但從未接觸過網站開發的她，對於網站的想像經常與實際開發的情境有所落差。

「當時最常聽到工程師同事說的一句話就是：『欸你這樣邏輯不對啊？』，其實每次聽到都會很納悶，到底什麼才是對的邏輯？慢慢心中就有了『想找機會接觸看看程式』的想法，想要了解工程師們到底都在想什麼。」

談起學習程式的初衷，小雅表示：「其實最一開始沒想過自己會有轉職工程師的機會，畢竟感覺這塊還是要有專精的知識，或是本科系出身才行，倒不如說是期待學了之後能夠幫上原本行銷的工作，和工程部門更有效的溝通。」

## 學習程式最重要的 是找到適合自己的方法
由於平日白天要上班，小雅決定利用下班時間在線上學習程式，但在學習過程中她發現，由於開課老師無法精確掌握學員進度，課程編排上容易忽略一些重要的基本觀念；除此之外，在課程或專案練習時遇到問題，也只能在 Facebook 的社團發問等待解答，很難得到立即性的回覆。

「後來一起上課的朋友跑來私訊我，説覺得這門課可能不太適合初學者，剛好那時注意到五倍的課程資訊，大家就一起去了解，最後決定加入五倍的課程試試。」

## 為初學者量身打造的課程 跨越從學習到就職的門檻
提起在五倍上課的經驗，小雅很開心的說：「五倍的課程真的是從0到1的課程！不只是基礎的 HTML、CSS 那種意思，而是針對初學者容易有的迷思或不容易理解的概念，反覆耐心的講解到學員都會為止，許多學員畢業後也經常回來求助，老師們也都很熱心的回應。」

另外，小雅也提到每週二在五倍舉辦的「默默會」，一個讓學員們自由交流提問的聚會，不管是實體課程或線上課程的學員，都能在默默會獲得幫助，老師也總是盡心盡力的解答學員遇到的問題。

擔心學生沒有實際接觸過業界、不了解求職眉角，因此在課程之外，五倍也定期舉辦徵才媒合會，小雅的收到第一份工程師面試，就是在媒合會上投遞的履歷，最後面試錄取的公司，也是在五倍上課期間接觸到的團隊。小雅認為：「其實非本科系的人要轉職，最大的門檻還是「如何求職」，五倍提供這樣的資源其實很好，畢竟只要能先踏入這個產業，就是很大的進步了。」

## 給想跨入程式領域的你：「不要害怕。」
「畢竟多數人對程式開發的想像，都是需要高度專業，有些非本科系的人，或是從來沒有接觸過程式的人，會覺得自己做不到、沒機會，光是跨不過這一步，就會把自己排除在學習程式，甚至轉職之外。」

小雅認為，學習程式最重要的是不要害怕，不管成功失敗，先投入試試看。就算最後真的學不起來，頂多就是回到原本的工作而已；如果學的順利，在多一份技能的同時，也多了一項職涯選擇。「學程式，就是這樣一趟苦盡甘來的歷程吧！」

1. 非本科系的你，只要肯嘗試去做，相信你也可以
2. 找到適合自己的方式學習非常重要！
3. 來 [默默會](https://www.facebook.com/rubymokumokukai/) ，認識技術圈的朋友，在學習上面獲得許多不同資訊交流，任何關於課程以及技術問題都能詢問五倍紅寶石專業團隊。
4. 近期舉辦說明會，有興趣不如直接去現場看看吧：[ASTRO X 五倍紅寶石 全端工程師實戰訓練營](https://astro.5xruby.tw/)


post-如何從數位行銷跨入成為軟體工程師？

如何從數位行銷跨入成為軟體工程師？


## 「在飯店上班時，看到外籍的工程師坐在吧台寫程式、遠端工作，當時就在想，我是否有一天也可以做得到？」

我是一個後端工程師，在成為後端工程師之前，我做的是 bartender， 在服務業待了接近六年的時間。

有些人會說：「你應該大學就是資訊相關科系吧～」其實，我大學原本唸的是德文，甚至因為家庭因素，大一唸完就休學去工作；後來下定決心轉職後，從初次接觸程式，到找到工作，前後大約是一年的時間。

轉職之前，我在飯店業工作了滿長一段時間，

那時候看主管們的生活就大概可以想像未來的發展，如果一直留在飯店做服務業，薪水很容易遇到天花板限制，即使做到主管階級，也是長時間被綁在飯店，甚至得住在飯店。

就覺得這不是我想要的，我理想的工作是能夠有自己時間能夠陪陪家人，做想做的事。

曾經跟家人、朋友討論過類似的想法，回饋大概是都是：

「你現在的工作不錯呀，五星級飯店欸，多少人想進去呀」

「那個 xxx 的女兒以前也是跟你一樣，熬過來以後薪水也是...」

「轉職成功的都是特例，你不能把特例作為自己的人生規劃...」

## 開始起步學寫程式時的想法很簡單：

我覺得「所有公司都需要網站」，所以就先從網站開發開始學起。

當時新創創業的風潮很盛行，技術的部分蠻多是採用可以快速開發的 Rails。

加上自己很嚮往在新創上班，又聽說會 Rails 的人很少，就選擇 Rails 做主力學習的目標。

最初在 Udemy 上面找了很多免費課程，但學起來散散的，很沒有系統。

例如：

叫你「把程式碼複製貼上」，貼一次、貼兩次，第三次自己手寫看看。原本跟著教材跑覺得很有趣，這樣拼拼湊湊竟然真的就做出了一個煞有其事的網站。但學到後面，發現自己只會套課程的模板、框架，對程式語言的特性和邏輯完全搞不清楚，沒有能力自己開發出想要的功能。當時真的超崩潰，心裡一直想「我的網頁會動，但我不知道為什麼！」甚至開始覺得自己可能真的不適合走程式這行吧 ⋯⋯

在網路上找技術文章的時候，有找到五倍紅寶石的高見龍（龍哥）在 iT 邦幫忙寫的 Rails 系列文。覺得寫得很清楚，蠻多疑惑有被解開，看他的文章才知道有五倍這個教育機構。後來發現他有開實體的基礎課程，抱著有點去見偶像的心情參加。我印象很深的是那次參加的課程，龍哥講到一句話突破了我的學習盲點：

「要知道程式如何思考，怎麼用程式思考的方式去寫程式、看程式。」

那天還重新聽了一次基本的 function、變數等等的概念。把許多之前上過課不懂的地方都連結起來，整個豁然開朗，後來也報名了他們的完整課程。

總之，他們的課對有程式底子的人來說怎麼樣我不知道，但我自己覺得對曾經自學卻卡住遇到瓶頸的人來說，非常有幫助！

## 轉職規劃

參加完課程後，我原先打算給自己一年的時間，花半年累積一些作品集，半年找工作。當時去上實體課程是 2017 年 10 月的事，因為自己是一邊學習、一邊還有工作，所以有想把戰線拉長一點。

可能是我當初問問題問得特別勤吧，老師們對我都蠻有印象的。課程結業沒多久，在 2017 年 12 月的時候，就受老師們的引薦，獲得了人生中第一個工程師職缺的面試機會，很幸運的，也在 2018 年 2 月的時候確定拿到 offer、3 月到新公司上班！

「當初預計會花一年的時間，最後從開始上課到拿到工作，只花了半年，順利從 bartender 轉職軟體工程師！（笑）」

而這一切會過的這麼順暢，主要原因有以下幾點：

### 1. 實務專案

許多跟我一樣半路出家的朋友，在轉職的路上走得不夠順的原因，就是他們沒有經歷過「真正的專案開發」。這就好像一個廚師他研究過很多食譜、知道每個規則，但從來沒有自己煮過菜一樣，這樣的工程師是很難找到工作的。仿間很多程式教育機構，雖然有協助工程師做專案，但是沒有業界的工程師協助「review」，對於品質與工作流程上，水準與業界的工程師還是有落差。

### 2. 作品集
強烈建議要花時間好好整理自己的「作品集」與個人頁面！

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/d0CD1loFd0kXyp88UKrLO/aa574c20d431b3908600307336350d0c/portfolio-1.png)

> 這是我當時求職的作品集，包含過去的作品、專案、和工作經驗（跟程式設計不相關，所以著墨的很少，基本上只寫單位、職位、期間）

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/4neySDt5BeQkqWPaCgQ9rT/8fec8b95aa4da41f8293dbd5df2bf89e/portfolio-2.png)

> 專案的部分，我把我負責的部分、有什麼功能，用 HR 也看得懂的方式表達

![post-轉職只是選擇，我從 Bartender 轉軟體工程師](//images.ctfassets.net/8er52l3j5u76/nxi7PA2iW2rAtxPVNqLgM/e248b74a58572542d44b36b659e0a2af/portfolio-3.png)

> 面試的時候，因為自己不是本科系而且跳很大，很多面試官都會問「動機」，因此我也獨立整理出來

根據以上這兩個點，五倍紅寶石近期有專門為了這兩個點，設計了全新的線下課程，可以參考。

最後想跟大家講分享一些我自己經歷學習到轉職這段時間後的體悟：

很幸運的，我在開始求職後的三個月找到工作，但同時，這樣的幸運來自於我全心投入轉職的準備與程式學習。

老實說，我覺得其實要轉職成功是真的很辛苦的，從準備成為工程師，到成為工程師，是充滿荊棘的一條路。

網路上許多轉職文章寫的感覺很輕鬆，但只是沒有把累的那一面寫出來。

可能蠻多人的想法是：現在工作薪水太低，想轉工程師得到好起薪，但「工程師」這條職涯選項，是必須一直不停學習的，否則技術推陳出新，真的會跟不上。

如果妳還卡在猶豫要不要轉職的階段，建議妳可以先從免費的課程開始，不論什麼語言，或是前後端。先跟著課程實作點東西出來，才知道自己是否可以接受寫程式。

也可以參加一些社群聚會，例如 [默默會](https://www.facebook.com/rubymokumokukai/) ，來這邊跟五倍的同仁詢問。

寫程式這件事，挫折感和成就感幾乎是一樣大的，想不出來時的挫折很大，但做出來的時候成就感也一樣大。

對真的想要轉職的人來說，重要的是要能禁得起挫折失敗。這段路上，一定是經過無數次的失敗，才終於把版排好、把功能寫出來。

就拿 Rails 當例子，有稍微接觸過 Rails 的朋友應該都一樣，最一開始讓人感到挫折的，就是陰魂不散的紅畫面！像我就不是很有耐心的人，每次看到都覺得很心煩 XD

但是該說幸好這個語言夠體貼嗎？反正 Rails 出錯的原因都會寫在畫面上，靜下心慢慢看，就能找出錯在哪裡。

真正的難關是「如何實作一個想要的功能出來」，這就攸關到你對語言原理的認識，以及如何操作、思考的流程。

以上都是比較辛苦面的說法啦，當然學程式寫程式，一定也是有快樂的地方。對我來說最快樂的時候，就是我順利解決一個又一個的 bug 的時候。還有看到網站上線的成就感，真的會覺得「啊～苦盡甘來！」

最後，總結以上：

1. 轉職是辛苦的，但結果是甜美的（以我自身的例子）
2. 專案一定要給業界工程師「review」過，才能從中獲得扎實的成長，縮短所學與業界的落差
3. 來 [默默會](https://www.facebook.com/rubymokumokukai/) 找已經在業界工作的人聊聊、與五倍紅寶石的課程團隊聊聊，或許會有不同的想法
4. 最近看到他們有在辦說明會，有興趣不如直接去現場看看吧：[ASTRO X 五倍紅寶石 全端工程師實戰訓練營](https://astro.5xruby.tw/)

post-轉職只是選擇，我從 Bartender 轉軟體工程師

轉職只是選擇，我從 Bartender 轉軟體工程師


這篇文章要討論的是 XML 格式的 sitemap，而不是有時在一些網站上會看到的『網站地圖』頁面內容（HTML sitemap），而 XML sitemap 內的 URL 資訊以及附帶的 metadata 主要功能在於幫助搜尋引擎暸解一個網站內的連結以及所對應的頁面的一些額外資訊（如：最後修改時間、修改頻率...等）。

最基本的內容大概會像下方範例。當中可以發現 `<url>` tag 裡除了 `<loc>` 為必要的資訊外其他都可以選擇性填入。而目前支援 [standard sitemap protocol](https://www.sitemaps.org/index.html) 的搜尋引擎包含了 Google、Yahoo!、Microsoft。

```xml
<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <url> # 第一組 URL

      <loc>http://www.example.com/</loc> # 必填

      <lastmod>2005-01-01</lastmod> # 選填

      <changefreq>monthly</changefreq> # 選填

      <priority>0.8</priority> # 選填

   </url>

   <url> # 第二組 URL

      <loc>http://www.example.com/blog</loc>

   </url>

</urlset>
```

## Sitemap 與 SEO

Sitemap 與 Search Engine Optimization (SEO) 之間的關聯，常見的迷思大概有：

* 做了 sitemap 網頁就能在搜尋結果頁中出現
* 做了 sitemap 能提升網頁在搜尋結果頁(SERP)中的排名
* 不做 sitemap 網頁還是會出現在 google

前面兩點，大概可以用『買了兩塊肋眼牛肉回家就會自動變成情人節晚餐』比擬，而 [sitemap.org](https://www.sitemaps.org/index.html) 的說明是：

> Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling ... (略) ... so that search engines can more intelligently crawl the site.

當中說明了 sitemap 的作用在於讓搜尋引擎知道網站的存在以及當搜尋引擎在爬網站時能夠更有效率。這裡有兩個重點：

* **available** for crawling 意思是告訴搜尋引擎網站的 sitemap 已經準備好了，但不保證搜尋引擎的 crawler 什麼時候會爬
* **crawl** 不等同 **index** 。意即，搜尋引擎爬了也不保證會收錄，即使收錄也與 SERP 排名沒有直接關係

關於迷思的最後一項，確實，即使不做 sitemap ，網頁也是有機會被爬並出現在SERP。

#### 那...為什麼還要做？

搜尋引擎爬網站的速度與頻率，如同很多其他 SEO 因素，沒有標準答案。然而國外有些實驗比較網站沒有 sitemap 與有 sitemap 時搜尋引擎爬的速度差異，當中有一個[實驗](https://neilpatel.com/blog/google-index/#step_7)測出結果是，有 sitemap 時，搜尋引擎平均爬的時間是14分鐘，而沒有 sitemap 時是1,375分鐘。

相較於其他 SEO 因素，Sitemap 在提升排名方面或許沒有太大的幫助，但可以確定的是可以加快網頁被爬的速度。畢竟，在進一步優化 organic traffic 前先確保網頁出現在 SERP 會比較好。

## 在 Rails Web App 上實作 sitemap

以下是這次簡易實作範例的範圍，sitemap 部分使用 [sitemap_generator](https://github.com/kjvarga/sitemap_generator) gem。

1. 建立新專案、新增 articles CRUD
2. 產生部落格首頁與文章頁的 standard sitemap
3. 新文章產生後動態更新 sitemap
4. 提交 sitemap

### 建立新部落格專案、新增 blog CRUD

建立專案

``` shell
$ rails new index_me_google
$ cd index_me_google
$ rails db:create
```

因為是為了練習 sitemap，快速 scaffold 出 `Article` ，欄位部分就只給了一個 `title`。

``` shell
$ rails g scaffold Article title
$ rails db:migrate
```

另外設定一下首頁路徑

``` ruby
# routes.rb
root 'articles#index'
resources :articles
```

在 console 裡建立一些 articles

``` ruby
(1..5).each{ |num| Article.create(title: "article-#{num}")}
```

### 產生部落格首頁與文章頁的 standard sitemap
`sitemap_generator` 功能相當完整，從壓縮、ping 搜尋引擎這類貼心功能到支援 sitemap extensions（news, video ... 等），如果不是太奇特的需求，基本上這個 gem 都能幫忙做到。

安裝

``` ruby
# Gemfile
...
gem 'sitemap_generator'
...
```

產生設定檔

``` shell
$ rails sitemap:install
```

完成後會發現 `config` 資料夾下多了一個 `sitemap.rb` 檔案。初始檔案裡面只有幫我們預設一個 `default_host` 選項還有一個空的 create block。

``` ruby
# config/sitemap.rb
SitemapGenerator::Sitemap.default_host = "http://www.example.com"

SitemapGenerator::Sitemap.create do

end
```

`sitemap_generator` 產出的 sitemap 預設為壓縮檔，為了方便檢查之後產出的 xml 檔案內容，在開發階段通常我會將 `compress` 選項改為 `false`，另外記得將 `default_host` 改成自己的 domain。

``` ruby
# config/sitemap.rb
SitemapGenerator::Sitemap.default_host = "http://www.index.me"
SitemapGenerator::Sitemap.compress = false
...略...
```

接下來，在 create block 內加入我們想要放入 sitemap 內的 URL。

``` ruby
# config/sitemap.rb
...略...
SitemapGenerator::Sitemap.create do
  Article.find_each do |article|
    add article_path(article), lastmod: article.updated_at
  end
end
```

在操作上相當簡易， `add` 方法接收的第一個參數是路徑，第二個是 hash 選項，預設的選項為：

``` ruby
{ priority: 0.5, changefreq: 'weekly', lastmod: Time.now, host: default_host }
```

可以留意的是， crawlers 不一定會因為我們把 `priority` 設為 `1` 或 `changefreq` 設為 `always` 就增加重爬的頻率，把這些數值想成是給 crawlers 做決定的線索就好。另外，雖然有預設值，前三個選項不一定都需要（如：google 目前不採用 priority），可以視情況調整使用。

執行 `$ rails sitemap:create` 後產生一個 `sitemap.xml` 檔案，預設位置在 `public` 資料夾下。直接開瀏覽器檢查一下（localhost:3000/sitemap.xml）。設定正確的話會發現除了所有 article 的 URL 被寫入外，額外附贈 root `http://www.index.me`，如果不想要的話需要將設定選項 `include_root` 改為 `false`。

```xml
<urlset>
  <url>
    <loc>http://www.index.me</loc>
    <lastmod>2019-02-13T16:45:39+08:00</lastmod>
    <changefreq>always</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://www.index.me/articles/1</loc>
    <lastmod>2019-02-13T05:14:31+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>http://www.index.me/articles/2</loc>
    <lastmod>2019-02-13T05:14:31+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>

  ...略...

</urlset>
```

### 新文章產生後動態更新 sitemap
到目前為止，我們成功為『現有』的 articles 建立 sitemaps，但像是部落格文章或者是新聞之類不定期會新增或的動態頁面也需要 sitemap。比較常見的做法有使用 cron jobs 定時更新 sitemap，或者在頁面新增後立刻更新。

如果使用 cron jobs，可以參考搭配 [whenever gem](https://github.com/kjvarga/sitemap_generator#crontab) 使用；如果是後者， `sitemap_generator` 提供了對應的方法：

```ruby
class ArticlesController < ApplicationController

  ...略...

  def create
    @article = Article.new(article_params)

    respond_to do |format|
      if @article.save
        # 建立 sitemap
        SitemapGenerator::Interpreter.run(config_file: Rails.root.join('config', 'sitemap.rb'))
        # ping 搜尋引擎
        SitemapGenerator::Sitemap.ping_search_engines

        ...略...

      end
    end
  end

  ...略...

end
```
這樣基本上就能達到新增頁面後立即更新 sitemap 的效果，但建議可以把相關的行為用一個 job 處理。

### 提交 sitemap
在提交 sitemap 到搜尋引擎之前，還要準備一個置放在 server 頂層資料夾的 `robots.txt` 檔，作用在於指示 crawlers 該如何爬網站，當中也包含了提供 sitemap 位置的資訊（暸解更多關於 [robots.txt](https://moz.com/learn/seo/robotstxt) 使用方式）。 這裡只簡單做出允許所有搜尋引擎爬站並提供 sitemap 位置。

```txt
User-agent: *

Sitemap: http://www.index.me/sitemap.xml
```

以下使用 [Google Search Console](https://search.google.com/search-console) 為例提交 sitemap。

如果是第一次使用，必須先新增網站並驗證所有權。另外，新版的 google search console 沒有提供提交前測試的功能，如果有需求可以切到舊版使用。

填寫 `robots.txt` 網址測試

![post-使用 Sitemap 打好網站 SEO 基石](//images.ctfassets.net/8er52l3j5u76/1Vvoe59UySp5V1Dww858Xv/25e7494a5878583be13a64610d798a5b/hFfVjh5.png)

填寫 `sitemap.xml` 網址測試，如果測試結果正常，就可以正式提交了！過一段時間再回來 search console 就可以看到網頁被收錄的狀態。

![post-使用 Sitemap 打好網站 SEO 基石](//images.ctfassets.net/8er52l3j5u76/7o8mDeaug56JdJkJWP4GAr/2f48cc7ac65ea0ecbf1bd4ba6e183b20/pbMRbzJ.png)

## 結語
Rails 搭配 sitemap_generator 實作 sitemap 並不困難，所需時間成本也不高。雖然對於網站 SEO 沒有什麼直接加分的效果，個人會比較用『有好無壞』以及『SEO第一步』的角度看待。另外，如果有多餘心力，建議可以研究 [sitemap extensions](https://support.google.com/webmasters/answer/183668#extensions)，增加網頁在搜尋引擎的足跡。

---

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


post-使用 Sitemap 打好網站 SEO 基石

使用 Sitemap 打好網站 SEO 基石


專案中很常出現按鈕點下跳出 "確認視窗" 的行為，有時候是刪除的警告確認、有時候是資料送出的確認。這些有共同操作行為的 Component 都應該做成共用的元件以方便在各種情況下重複使用， 才不會某 A 做一個版本，某 B 做另一個版本，大家都自己寫自己的造成維護上的困難。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-promise-modal-example) 下來研究研究。

封面圖來源：[https://mrdoob.com/lab/javascript/effects/ie6/](https://mrdoob.com/lab/javascript/effects/ie6/)

---

期望可以用以下程式碼達到我要的目的：

```jsx
import React from 'react'

import { confirmBox } from './promiseModal'

class App extends React.Component {
  render() {
    <button
      onClick={() => {
        confirmBox({
          title: 'Logout',
          description: 'Are you sure to logout?',
        }).then(() => {
          console.log('Confirm, Do some logout action...')
        }).catch(() => {
          console.log('Cancel, Nothing happened...')  
        })
      }}
    >
      Logout
    </button>
  }
}

```

`confirmbox` 執行並帶入客製化 params，期望最後會回傳 `promise` 物件，並由 `.then()` 或是 `.catch()` 來知道使用者點下 `Confirm` 還是 `Cancel` 再做後續的動作。

---

### 實作步驟分析

* 準備一個基本的 popup modal component（確認視窗）。

* 因為 modal 是一個蓋版視窗，使用者必須要按下 `Confirm` 或 `Cancel` 按鈕才能繼續操作，所以選擇使用 `Promise` 物件來等待使用者按下按鈕。

* 執行 `confirmBox` 的時候，預期會 create 一個 `promise` 物件，並在裡面將 React Component 掛載到某個 div 上面(`ReactDOM.render`)，並將 `resolve`、`reject` function 當作 props 一併傳到 modal 中使用。

* 因為 modal 擁有了 `resolve`、`reject` 這兩個可以繼續 `promise` 的 function，所以可以在按下 `Confirm` 按鈕的時候呼叫 `resolve`，按下 `Cancel` 按鈕的時候呼叫 `reject` 來達成 `Promise Chain` 的目的。

* 無論按下哪一個按鈕後都應該要清除、卸載，動態掛上去的 React Component。

* 以下解說都會省略 css code, 有興趣可以看 [source code](https://github.com/treekey999/react-promise-modal-example/commits/master)

---

### Step 0. 準備範例按鈕

```jsx
class App extends Component {
  render() {
    return (
      <div className="App">
        <button
          type='button'
          className='btn-example logout'
        >
          Logout
        </button>

        <button
          type='button'
          className='btn-example submit'
        >
          Submit
        </button>

        <button
          type='button'
          className='btn-example delete'
        >
          Destroy
        </button>
      </div>
    );
  }
}
```

![post-React Promise Modal](//images.ctfassets.net/8er52l3j5u76/7ELSNkT1Mp68uD5EOFVEW0/5db4be62d877273c8c463acc58ad802c/hChnSKR.png)

---

### Step 1. 準備基本 popup modal

使用 [react-modal](https://github.com/reactjs/react-modal) 來快速建造一個確認視窗的 modal。

```jsx
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Modal from 'react-modal'

const ConfirmBox = (props) => {
  const {
    color, // 客製化顏色
    title, // 客製化文字
    description, // 客製化文字
    onConfirm, // 預期收到 resolve function
    onCancel, // 預期收到 reject function
    confirmText, // 客製化文字
    cancelText, // 客製化文字
  } = props

  // `useState` 是 react 16.8 新功能 hooks, 等同於 state/setState 效果
  // 初始值為 true
  const [isOpen, setIsOpen] = useState(true) 

  const onClickConfirm = () => {
    // 按下 Confirm 將 modal 關閉, 並執行 onConfirm (resolve function)
    setIsOpen(false)
    onConfirm()
  }

  const onClickCancel = () => {
    // 按下 Confirm 將 modal 關閉, 並執行 onCancel (reject function)
    setIsOpen(false)
    onCancel()
  }

  return (
    <Modal
      overlayClassName='promise-modal-overlay'
      className='confirm-box'
      isOpen={isOpen}
      onRequestClose={onClickCancel} // 點下 modal 之外的區域時觸發 (modal overlay)
      shouldReturnFocusAfterClose={false}
    >
     <div className={`modal-container color-${color}`}>

      <div className='modal-header'>
        <h3>{ title }</h3>
        <button
          type='button'
          className='close-btn'
          onClick={onClickCancel}
        >
          X
        </button>
      </div>

      <div className='modal-content'>
        <p>{ description }</p>
        <div className='button-list'>
          <button
            type='button'
            className='cancel'
            onClick={onClickCancel}
          >
            { cancelText }
          </button>
          <button
            type='button'
            className='confirm'
            onClick={() => onClickConfirm()}
          >
            { confirmText }
          </button>
        </div>
      </div>
     </div> 
    </Modal>
  )
}

```

測試一下剛剛做的 Component Render 有沒有正確，丟到測試頁面看看 js/css 有沒有正確。

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

---

### Step 2. 製作 Promise function

流程可以拆分為以下：

  * 動態產生不重複的 div element，為了讓 `ReactDom.render` 掛載上去。
  * new 一個 `Promise` 物件，並在第一個 promise 裡面將 `Modal Component` 掛載上去。
  * 成功 render React Modal 之後就會在介面上看到蓋版 Modal，並等待使用者按下按鈕之後接續呼叫 `resolve`、`reject` function。
  * 卸載、移除先前動態產生的 Component、Element。

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from 'react-modal'

// 卸載、移除先前動態產生的 Component、Element
const unsetPromiseModal = (wrapper) => {
  setTimeout(() => {
    ReactDOM.unmountComponentAtNode(wrapper)
    wrapper.remove()
  }, 300)
}

// 動態產生不重複的 div element
const findOrCreateWrapper = (identifyID) => {
  let wrapper = document.getElementById(identifyID)
  if (wrapper === null) {
    wrapper = document.body.appendChild(document.createElement('div'))
    wrapper.id = identifyID
  }
  return wrapper
}

// params 預期接收要被掛載的 Component, 跟客製化 options
const promisableModal = (Component, options = {}) => {

  // 動態產生不重複的 div element
  const wrapper = findOrCreateWrapper(`promise-modal-wrapper-${Date.now()}`)

  // 無障礙網頁辨識用, 參考：http://reactcommunity.org/react-modal/accessibility/#
  Modal.setAppElement(wrapper)

  const promise = new Promise((resolve, reject) => {
    ReactDOM.render( // 掛載 React Component
      <Component
        {...options} // 帶入客製化參數(props)
        onConfirm={resolve} // resolve 傳給 onConfirm
        onCancel={reject} // reject 傳給 onCancel
      />,
      wrapper,
    )
  })

  return promise.then(() => {
    // 使用者按下 Confirm 之後執行此段
    unsetPromiseModal(wrapper)
    return true
  }, () => {
    // 使用者按下 Cancel 之後執行此段
    unsetPromiseModal(wrapper)
    return Promise.reject(false)
  })
}

export default promisableModal

```

由於最後回傳的是一個 `promise` 物件，如果接續著呼叫 `.then()` 會在使用者按下 `Confirm` 後接續執行；如果接續著呼叫 `.catch()` 會在使用者按下 `Cancel` 後接續執行。

---

### Step 3. 組合

```jsx
import './style.scss' // base modal overlay csss

import promisableModal from './promisableModal'
import ConfirmBox from './components/ConfirmBox'

// 將 ConfirmBox 和 promisableModal 做組合
const confirmBox = props => promisableModal(ConfirmBox, props)

export {
  promisableModal,
  confirmBox,
}
```

因為已經寫好了可以 `promisable` 的 function，所以未來如果想要擴充其他種類型的 modal，都可以透過 `promisable` 輸出，例如未來我如果想做一個編輯蓋版視窗：

```jsx=

... 省略

import EditBox from './components/EditBox'

const editBox = props => promisableModal(EditBox, props)

export {
  promisableModal,
  confirmBox,
  editBox, // 新的擴充
}

```

---

### Step 4. 使用

三種不同情境的確認視窗，都只要呼叫同一個 promise function 來達成目的，達到 reuse 的目的。

```jsx
import React, { Component } from 'react'
import './App.scss'

import { confirmBox } from './promiseModal'

class App extends Component {
  render() {
    return (
      <div className="App">
        <button
          type='button'
          className='btn-example logout'
          onClick={() => {
            confirmBox({
              color: 'primary',
              title: 'Logout',
              description: 'Are you sure to logout?',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to logout ...', 'color: blue')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: blue')
            }) 
          }}
        >
          Logout
        </button>

        <button
          type='button'
          className='btn-example submit'
          onClick={() => {
            confirmBox({
              color: 'info',
              title: 'Submit Form',
              description: 'Are you sure to submit form?',
              confirmText: 'Submit',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to fetch data to backend api ...', 'color: green')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: green')
            }) 
          }}
        >
          Submit
        </button>

        <button
          type='button'
          className='btn-example delete'
          onClick={() => {
            confirmBox({
              color: 'danger',
              title: 'Delete Product',
              description: 'Are you sure to delete this product?',
              confirmText: 'Delete',
            }).then(() => {
              console.log('%c Click Confirm!, prepare to fetch data to delete product ...', 'color: red')
            }).catch(() => {
              console.log('%c Click Cancel!, nothing happened ...', 'color: red')
            }) 
          }}
        >
          Destroy
        </button>
      </div>
    );
  }
}
```

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

---

Don't Repeat Yourself，這個範例的元件在我先前的幾份專案中都有用到，而且都只是複製最初的那一份出來調整 css 而已。

寫 React 的時候不妨思考一下專案中哪些是常常共用的元件，試著練習抽離出來做成 shared component，會省下未來不少時間。

---

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


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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

Minitest 加點一杯 Mocha 帶走

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

使用 Ruby 快速製作屬於你的 Discord 聊天機器人

在 Rails 中開始 Vue

如何從數位行銷跨入成為軟體工程師？

轉職只是選擇，我從 Bartender 轉軟體工程師

使用 Sitemap 打好網站 SEO 基石

React Promise Modal

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款