五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar

大家好，我是卡米哥。今天要教大家怎麼用 Google Sheets 存放資料並且在 rails 當中使用。

在本次的教學中，我們主要的需求是想要直接以 Google Sheets 作為後台，來取代 rails 原本的資料庫以及需要自己寫的管理介面。

使用 Google Sheets 作為後台，比起自己做的管理介面，有許多好處，像是可以省下製作後台的時間，編輯速度快，支援共同編輯，支援版本管理等。

注意：在本次的教學中我們不保證資料的安全性。

## 建立 Google Sheet 並且發布成 CSV 格式

首先先新增一個 Google Sheet，我這邊做好了一個示範：

[https://docs.google.com/spreadsheets/d/1kDEbaStqDG-g6HTTwbUx_MOWTtmHtISZzMtcinAKQqI/edit?usp=sharing](https://docs.google.com/spreadsheets/d/1kDEbaStqDG-g6HTTwbUx_MOWTtmHtISZzMtcinAKQqI/edit?usp=sharing)

然後將這個 sheet 做發布：

點選 `File`

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/2ZHisdTPmBWGbNDNEj7ndz/cb6d5acb3d8554add8e8870e4eb1b363/1-bead0662.png)

點選 `Publish to the web...`

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/3mZGtlyfNpKHHQG30CkxH7/c17c51f43b8562895b0774ce4ff0e50f/2-76e74cee.png)

點選 `Entire Document` 改選為 `Sheet1`

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/2f769iGvourLyibfcuyQtb/257d966a16e7b0bdb55f844491152c45/3-d31c4e43.png)

點選 `Web page` 改選為 `Comma-separated values (.csv)`

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/6FOXYrEXofx9BKOQw6oKtb/fd5060cc00d71ae7840f802ebe693d36/4-2558ce31.png)

都選好的時候看起來像這樣：

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/5LrYklYJNpMxssOoouGxq/dd0ecf7003a06d2dc900342cceeaf4e0/5-a1233ceb.png)

點選 `Publish` 並且按下確定後：

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/4rviV9TTRZOT5Yk6ZGx8rJ/cb0fc63e70418ec568fc05a4db3169ea/6-19c29824.png)

把中間的網址複製起來，我的 csv 做好之後的連結如下：

[https://docs.google.com/spreadsheets/d/e/2PACX-1vROPREvtOJD2nRGeRjXAzFgG2Qx4Zdx0DM1bLl7VsPtI8ftp7juEW7g0IPhGsXI5g-fNWdfl1erwV7M/pub?gid=0&single=true&output=csv](https://docs.google.com/spreadsheets/d/e/2PACX-1vROPREvtOJD2nRGeRjXAzFgG2Qx4Zdx0DM1bLl7VsPtI8ftp7juEW7g0IPhGsXI5g-fNWdfl1erwV7M/pub?gid=0&single=true&output=csv)

使用瀏覽器開啟這個網址時，會下載一個 csv 檔。若使用文字編輯器開啟這個檔案，會看到以下內容：

```
keyword,message
喔～,氣氣氣氣氣
```

請注意，任何人只要擁有這個網址，就能夠讀取到完整的資料內容。

## 在 Rails 讀取 CSV 並且解析為 Model

首先，先建立一個新的專案：

```bash
rails new google_sheets_demo
```

在 `./app` 資料夾下建立 `sheets` 資料夾，在 `sheets` 資料夾中新增一個 `keyword.rb` 檔案，並且輸入以下內容：

```ruby
require 'net/http'
require 'csv'

class Keyword
  SHEETS_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vROPREvtOJD2nRGeRjXAzFgG2Qx4Zdx0DM1bLl7VsPtI8ftp7juEW7g0IPhGsXI5g-fNWdfl1erwV7M/pub?gid=0&single=true&output=csv'

  attr_accessor :keyword
  attr_accessor :message

  def initialize(keyword: nil, message: nil)
    self.keyword = keyword
    self.message = message
  end

  def self.all
    body = Net::HTTP.get(URI(SHEETS_URL)).force_encoding('UTF-8')
    sheet = CSV.parse(body)
    title = sheet.shift.map(&:to_sym)
    sheet.map do |row|
      Keyword.new(**title.zip(row).to_h)
    end
  end
end
```

以上的程式碼就是在做一個類似 Model 的 all 方法，用來取得所有的資料，我大概解釋一下原理：

1. 使用 Net::HTTP.get 取得 csv 資料
2. 使用 CSV 解析 csv 資料
3. 去除標題列
4. 將資料轉換為物件模型

好的，那麼馬上來試驗一下，先進入 `rails console` 後輸入以下程式碼：

```ruby
Keyword.all
```

其結果為：

```
 => [#<Keyword:0x00007faf28560e58 @keyword="喔～", @message="氣氣氣氣氣">]
```

取得了一個陣列，雖然沒辦法使用 Active Record 提供的 where 功能，但 [Array](https://ruby-doc.org/core-2.5.1/Array.html) 以及 [Enumerable](https://ruby-doc.org/core-2.5.1/Enumerable.html) 還是有類似的內建方法可以用。

雖然取得了資料，但每次都會去抓取是不好的，畢竟後台的資料不會一直更新，而且 google sheets 的抓取時間其實蠻久的，大約要2～3秒左右。

## 實作簡易的快取機制

我們可以增加一個快取機制，讓他每分鐘重抓一次就好，我們對 `keyword.rb` 進行一些調整，以下是調整後的程式碼：

```ruby
require 'net/http'
require 'csv'

class Keyword
  SHEETS_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vROPREvtOJD2nRGeRjXAzFgG2Qx4Zdx0DM1bLl7VsPtI8ftp7juEW7g0IPhGsXI5g-fNWdfl1erwV7M/pub?gid=0&single=true&output=csv'
  $cached_keywords = nil
  $cached_keywords_expired_at = nil

  attr_accessor :keyword
  attr_accessor :message

  def initialize(keyword: nil, message: nil)
    self.keyword = keyword
    self.message = message
  end

  def self.all
    if $cached_keywords_expired_at.nil? || $cached_keywords_expired_at < Time.current
      body = Net::HTTP.get(URI(SHEETS_URL)).force_encoding('UTF-8')
      sheet = CSV.parse(body)
      title = sheet.shift.map(&:to_sym)
      $cached_keywords = sheet.map do |row|
        Keyword.new(**title.zip(row).to_h)
      end

      $cached_keywords_expired_at = 1.minutes.since
    end

    $cached_keywords
  end
end
```

我們將快取儲存在整個網站的全域變數上，也就是錢字號 `$` 開頭的變數上，如此一來就能夠加快查詢速度。

在每次取得 `Keyword.all` 的時候先檢查是否存在快取，如果不存在的話，才去抓取 CSV 以及解析成 Model 物件。

實際應用的話，我會建議將快取功能以及 Sheets 功能拆解成獨立的檔案，最理想的情況則是做成 gem，在這裡為求簡單理解，就不將問題複雜化了。

## 試用做好的 Model

那麼我們做個簡單的網頁介面來試用看看這個 Model。

先修改 `config/routes.rb` 建立一個 routes 規則指向 `chatbot#talk`：

```ruby
Rails.application.routes.draw do
  get 'talk/:say', to: 'chatbot#talk'
end
```

然後在 `app/controllers` 資料夾下建立一個 `chatbot_controller.rb`，內容如下：

```ruby
class ChatbotController < ApplicationController

  def talk
    reply_message = Keyword.all.find{ |keyword| keyword.keyword == params[:say] }&.message
    render plain: reply_message || "蛤？"
  end
end
```

接著開啟 rails server 做測試，在瀏覽器輸入網址 [http://localhost:3000/talk/喔～](http://localhost:3000/talk/喔～) 後，就會看到：

![post-我把資料庫放到 Google Sheets 上了](//images.ctfassets.net/8er52l3j5u76/5F5huJHKutcJ20yiB0nJX1/75591b9d4d70ff6efa9c82b9feb248bc/7-e51b19d4.png)

那麼今天的教學就到這邊，我是卡米哥，謝謝收看。

---

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


post-我把資料庫放到 Google Sheets 上了

我把資料庫放到 Google Sheets 上了


一個網站核心除了網頁架構和 SEO 策略規劃外，最重要就是為網站埋設追蹤碼，埋設追蹤碼更可以知道網站的策略方向以及統計分析進入網站的流量，更精準的瞭解網站受眾輪廓樣貌，進而優化後續的頁面，本文提供給你目前必備 GA 和 FB 埋設追蹤碼方式，輕鬆 6 步驟讓你完成埋設兩大追蹤碼動作！並提供如何確認埋設追蹤碼是否有成功，讓你一手掌握網站流量分析：）

## Google Analytics（GA）分析是什麼？

Google Analytics（GA）是 Google 提供的免費線上工具，從 GA 可以得知進入的流量停留多久、點了幾個網頁、是透過哪裡點擊進入的、是哪些地區的人點擊的 … 等分析

。瞭解訪客從哪些管道進來網站
。得知訪客停留在網站上多少時間以及跳出率
。進階了解訪客在網站瀏覽過程

- 介紹 Google Analytic 追蹤碼埋設方式

1. 管理 -> 建立帳戶 -> 填寫 帳戶名稱、網站名稱 -> 取得追蹤 ID

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/8mRFOtEqz7JztUcuOYsQw/0d6a5f6fca15b1002203cf89c34a568d/w4LS4m7.jpg)

2. 成功建立帳戶後 -> Google 會提供給你追蹤的程式碼 ->複製貼上 `<head></head>` 標籤內

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/3xy8eq8it2WZGAPH3unxeV/63b030c9e22221ae2c7cf04c3af544f9/bynmcRw.jpg)

- 如何檢驗 Google Analytic 追蹤碼是否正確？
1. 追蹤碼確認是否有埋設在 `<head></head>` 中
2. 查看即時的活躍使用者中是否有人數變化
3. UA 碼是否正確？(GA中資源->資源設定內有 UA 碼)
4. Google Analytic 小工具檢查埋設是否正確
[Tag Assistant (by Google) 小工具](https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=zh-TW)

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/2mW8Lg69ognQ6NTAnJsbu/ccfa80eeca163203b379c5b8f2094b98/LilXjH0.jpg)

Tag Assistant 提供記錄的功能(Record)。我們可以利用這個記錄功能(Record)來驗證 event tracking 的設定！

Tag Assistant，根據檢查結果的不同有不一樣的顯示狀態，當你顯示綠色或是藍色標記，可以觀察出安裝成功。

Tag Assistant 狀態顯示出黃色和紅色標記，則需要重新檢視 GA 代碼是否有埋設正確哦！Tag Assistant 裡面會提出錯誤問題，協助你修正改善。

## Facebook Pixel 是一個讓你可以「追蹤」用戶去做「再行銷 Remarketing」的工具

- 介紹 Facebook Pixel 埋設方式

#### 1.到企業管理平台右上方點擊 -> 像素 選項

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/45lcIEhP1p2ouf9NFJMQpk/9b4e165b460af7c7c1dcb6fa8690233e/UOqqtr9.jpg)

#### 2.安裝像素 -> 自行手動安裝像素程式碼

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/2yTkLRh9C3yVLQXJpsPbIB/e4b13c8e4a2b471379de597e7dbb7cbb/mZfaCCf.jpg)

#### 3.放在網頁 `<head></head>` 標籤內

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/2ADTRsVmKybYX18pqMXIz5/b64d926411cbf8d3d8a3d6fc97643966/WHHY5Dw.jpg)

#### 4.複製 Facebook Pixel 像素代碼，緊接在 `</head>` 標籤上方

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/3kjxGLSqdmJN87Cg8Owi7s/b20385ad7ca8adfabdf673dbc493bd14/fl58pU8.jpg)

- 如何檢驗 Facebook Pixel 是否正確？
利用 Google Chrome 上的小工具 [Facebook Pixel Helper](https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=zh-TW) 
亮綠色的燈代表埋設是沒有問題的喲：）

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/2QuNguX0qb2cNiGxlqGOHf/236db9c1f98a6f5c7163702e28ecf777/4NGXOQ2.jpg)

## UTM 追蹤工具
UTM 是什麼？ UTM 的全名是 Urchin Tracking Module，是 Google Analytics 提供給分析專員可以自訂寫入的連結標記。簡單介紹 UTM 功能，輕鬆幫你追蹤網站流量從哪裡來！

網站範例：
`https://5xruby.tw/talks/?utm_source=facebook&utm_medium=share&utm_campaign=20190727_facebookshare`

拆解網站 UTM 標記：
`utm_source=facebook`
`utm_medium=share`
`utm_campaign=20190727_facebookshare`

可以發現 `?` 之後參數就是 UTM 標記

  - 來源 - `utm_source`：從哪個網站過來，如：FB、Google Ads、E-mail ...
  - 媒介 - `utm_medium`：透過什麼方式、媒介傳遞，如：banner、文章分享、關鍵字廣告 ...
  - 名稱 - `utm_campaign`：活動名稱，用以辨識廣告活動的形式。

▲ 小分享： 介紹好用易懂的縮網址工具
使用 「[uBin 網址縮小燈工具](https://ubin.io/)」，可以點擊追蹤來源外還能埋設 utm 以及分流！簡單產生 超大QRCode，還有特別轉址功能 - 裝置，可根據不同裝置，轉址導向不同的連結（可設定多組）！最棒的是登入後，可以一直享用這些服務！

### 該怎麼透過 Google Analytic (GA) 追蹤 UTM 成效？

點擊 客戶開發 -> 廣告活動 -> 所有廣告活動

![post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略](//images.ctfassets.net/8er52l3j5u76/1uFdHw9MIAjaYL1gkajWGP/fa67765737559261306a69e67d4f9346/JVOsXKK.jpg)

----

還想了解更多網站分析攻略嗎？

推薦：[第一次使用 GTM 就上手 - 輕鬆轉移 GA to GTM 實戰](https://ubin.io/4z8m2b)

推薦：[完整 GA 策略分析秘訣 - 新手立即上手](https://ubin.io/2zF3xL)


post-不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略

不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略


在 Ruby/Rails 開發日常中總少不了對集合物件（例如 hash 與 array）做 iteration（迭代）操作，常見的包含 `select`, `count`, `filter` ...等。例如當我們想從一個 array 中有條件式選取一些元素，可能會這樣寫：

```ruby
arr = [1, 2, 3]

arr.map do |num|
  num * 2
end

#=> [2, 4, 6]
```

Ruby 的常態是使用 Internal Iterator 對每個元素做指定的處理。既然有 `internal` 不難猜想也會有 `external`，而這也是這次的主題： External Iteration 與 Enumerator

## External Iteration

Internal 跟 External Iterator 的差異在於 Internal 由集合物件（常見的是 Array 或 Hash）控制，我們沒有掌控權；而 External 由外部物件所控制，意即，要怎麼 iterate 由你自己決定。

```ruby
arr = [1, 2].to_enum
#=> #<Enumerator: [1, 2]:each>

arr.next
#=> 1

arr.next
#=> 2

arr.next
#=> StopIteration (iteration reached an end)
```

上面的例子一開始對 enumerable 物件呼叫 `to_enum` 後得到的是 Enumerator 物件（更多實例化 Enumerator 的方式後續會提到），接下來就可以使用 `next` 方法告訴這個 iterator 我要拿下一個元素，直到超出範圍時噴出 `StopIteration`。

以下是一個實際應用的範例。假如在製作 rails 列表時，想要在每列 `blog.title` 前循環印出 `icon-up` 與 `icon-down` icon、且不理會 `@blogs` 數量的增減，做法大概可以是這樣。`icons` 被指定使用 `cycle` 方式 iterate，所以當 `next` 到最後一個元素，下一次的 `next` 就會從頭再來過。

```erb
<% icons = %w[up down].to_enum(:cycle) %>

<table>
  <% @blogs.each do |blog| %>
    <tr>
      <td>
        <span class="icon-#{icons.next}"></span>
        <%= blog.title %>
      </td>
    </tr>
  <% end %>
</table>
```

## Enumerator

第一次聽到 Enumerator 可能會有『蛤？那是什麼？從來沒看過』之類的陌生感。事實上，即使從來沒用過，我們跟 Enumerator 的距離可能也只有一個 `return` 或 `enter` 鍵。

這樣描述的原因是因為自己第一次接觸 Enumerator 是在某一次在寫一個 each block 時，寫到 `each` 時不小心按到 `return`，發現不僅沒噴錯還獲得了一個 `#<Enumerator: ..略..>` 物件，也是因為這樣引起好奇心。取得 Enumerator 物件的方式大致有這些：

#### 由 constructor 建立

```ruby
enum = Enumerator.new do |yielder|
  yielder << '發'
  yielder << '大'
  yielder << '財'
end

#=> #<Enumerator: #<Enumerator::Generator:0x00007fd993996ff0>:each>
```

#### 使用 Enumerable （大多數）方法不帶 block 時

```ruby
[9, 4, 8, 7].filter

#=> #<Enumerator: [9, 4, 8, 7]:filter>
```

#### 對 Enuerable 物件呼叫 to_enum

```ruby
[1, 9, 8, 7].to_enum #等同 to_enum(:each) 

#=> #<Enumerator: [1, 9, 8, 7]:each>
```

另外，操作 String 與 Integer 物件時，使用少數的方法時也會得到 Enumerator，例如：

```ruby
# String

"GG".each_char
#=> #<Enumerator: "GG":each_char>

# Integer

5.times
#=> #<Enumerator: 5:times>
```

所以，什麼是 Enumerator？

或許用最簡單的解釋是：Enumerable 加上 External Iteration，而 Enumerator 與 Enumerable 的合作方式是前者負責產生、儲存資料，『需要時』再以後者的方法運用。以下面例子來說，`enum`物件儲存資料，等到呼叫 Enumerable 的 `select` 方法時，資料才一筆一筆 `yield` 進 block 做處理。

```ruby
enum = [1,2,3,4].each
#=> #<Enumerator: [1, 2, 3, 4]:each>

enum.select { |x| x.even? }
#=> [2, 4]
```

除了先存起來之後『需要時』再用的操作彈性，另一個 Enumerator 特性是可以把物件依使用需求不斷 `chain` 起來。例如，如果我們想把`吉大之溜`重新排列之後、加上順序號碼印出：

```ruby
'吉大之溜'.split('').reverse_each.with_index(1) do |word, index|
  puts "#{index}: #{word}"
end

#=> 1: 溜
#=> 2: 之
#=> 3: 大
#=> 4: 吉

# 如果在 block 開始前就 return，可以看到：
#<Enumerator: #<Enumerator: ["吉", "大", "之", "溜"]:reverse_each>:with_index(1)>
```

## Lazy

假設有個情境需要我們從 `1` 開始遞增的正整數中找出前五個偶數，直覺可能會這樣寫：

```ruby
infinity = 1..Float::INFINITY
infinity.select { |num| (num % 2).zero? }.first(5)
```

按下 `return` 後發現時間一直過去，始終沒有回傳 `[2, 4, 6, 8, 10]`，開始懷疑是電腦壞了或懷疑人生。

很多回傳 array 物件的 Enumerable 方法，例如 `collect`, `any?`, `detect`，在底層，這些方法對集合物件呼叫 `each` 方法並做不同的操作後回傳 array；用另外一個角度想，當使用這些方法時，每個集合物件內的元素需要被“跑”過一遍才有辦法繼續處理。

上面的例子中，`first` 也是一樣的特性(eager)。`first` 對前一個接收者 `select` 呼叫 `each` 並想要找出前五筆資料，`select` 對 `infinity` 呼叫並嘗試找出『所有』偶數。恩，到這裡就知道為什麼永遠等不到回傳值了。

```ruby
infinity = 1..Float::INFINITY
infinity.lazy.select { |num| (num % 2).zero? }.first(5)
#=> [2, 4, 6, 8, 10]
```

要解決這類問題只需要多呼叫一個 `lazy` 方法，簡略的敘述原因是 method chain 最後一個 method `first` 反過頭來掌控了整個 iteration 的進行，當接收到5個值時，iteration 就會停止。如果有興趣深入瞭解，可以參考 [Enumerator::Lazy](https://ruby-doc.org/core-2.6/Enumerator/Lazy.html)。

---

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


post-與你每天擦身而過的 Enumerator

與你每天擦身而過的 Enumerator


PM ( Project Manager ) 總是被大大小小繁雜的事情追著跑，如果你的事情總是覺得多到不行、做都做不完，可能得重新審視一下自己的時間規劃囉！

最近看了「私、定時で帰ります」這部日劇，覺得劇情中提到的工作方式特別受用啊！尤其是女主角高效率的工作時間分配和管理，和我真的不謀而合呢（？）
這邊就來分享兩個屬於 PM 管理專案及釐清思緒的部分吧！

## To Do リストを作成する！
製作 Todo List！

> 在影片中，吉高由里子所飾演的女主角，總是準時下班的最主要原因，就是製作 Todo List。除了整理自己的環境之外，能夠將自己的專案內容、追蹤事項、問題需求，分門別類地整理起來，是很重要的！

## 使用 Task 管理工具
### 1. GitHub

* 以「功能」為單位：

  相信工程師們一定對於 GitHub 並不陌生，或是根本每天與之為伍吧？<br />
PM 其實也可以利用 GitHub 的 Project 功能，像是 To Do List 的樣子，將各個 Issue 的狀態整理起來。

![post-成為準時下班的 PM 吧！高效率工作的方法](//images.ctfassets.net/8er52l3j5u76/4O6YUtRPHah346YX3MC3c1/b4d771d5aa7eb2b3222386a9e541ead0/aiVeUrm.png)

GitHub 核心的使用方式之一，是以「功能」為單位，拆分為各個 Issue ，不只讓工程師們整理 Commits 方便，也可以避免讓最後的 Pull Request 太大包。<br />
另外一個好棒棒之處，就是 GitHub Issue 會產生流水號（ #1 , #2 etc. ），團隊在溝通的時候，直接講俗稱「票號」的流水號碼，與工程師們溝通會更方便、對焦更迅速！

* 設立 Milestones( 里程碑 )：

  另外還有一個很棒的功能，那就是「 Milestones ( 里程碑 ) 」。
里程碑可以定義出每一個階段團隊應該要完成的重大功能，並且將屬於這個功能的 Issues 歸類在 Milestones 下方，另外開設時間限制，讓團隊知道此功能應該要在何時完成。最後，當功能開發完成後，整個 Milestones 關掉，也會很有成就感哦！

### 2. Trello
如果對於 GitHub 覺得很陌生、不熟悉的人，也可以使用 Trello 製作屬於自己的工作看板！利用內建的 Todo　List 清單，條列出自己的待辦事項。

* 工作看板

由於我的專案常常需要搭配 GitHub 和工程師對焦，但是又不能把 GitHub 當作自己的記事本記錄追蹤細節。（ 所有的留言紀錄，都會通知專案中所有的人... ）<br />
因此我將待辦清單分成好幾份：「已確定將釋出」、「已完成待回報」、「未完成追蹤中」等等。

![post-成為準時下班的 PM 吧！高效率工作的方法](//images.ctfassets.net/8er52l3j5u76/5T5yKL19NSfe86bv12doFa/db55d23e8804cfed2ea2a6d116cfa210/uSMtlZ4.jpg)

由於待辦清單可以互相拖曳，更可以方便地紀錄該條 Issue 現在目前進度到哪裡了？還缺了哪些 Spec 需要跟進？另外我也會補上更新 Issue 的日期，不然過了一個週末，會完全遺忘自己上週的進度到哪裡了。

### 3. Agenda ( only for iOS )
如果你使用的是 Mac 等 iOS 系統的人，也可以使用 Agenda 這個軟體。雖然 Mac 內建的備忘錄已經很完善了，但你也可以搞剛一點下載這個免費的工具玩玩看。

#### Issues 的歷史紀錄

![post-成為準時下班的 PM 吧！高效率工作的方法](//images.ctfassets.net/8er52l3j5u76/1EUUVTJu1oVzrHo9vnelC7/d72f50cbe77e4fe8dc93fb488c52bb87/C63oeuJ.jpg)

它的介面簡潔美觀，也有新增看板 ( Projects ) 、待辦事項等功能。
我一開始是當作記事本來用，或是會議記錄等大內容，但後來發現我的 Issues 需要更細節地追蹤該票號的所有歷史紀錄，我又自建了另外一個 Project 追蹤最近正在開發的功能票號，看起來有點重工，但對我而言，由於 GitHub 是屬於協作的平台，Issue 的管理方式沒辦法按照自己的方式排序，所以在 Agenda 中條列出來一目瞭然，更方便我追蹤！

（ 以上三種工具都有支援 Markdown 語法。 Agenda 的較不完善 )

## 進行問題分類

> 不管使用哪一種專案管理工具，重要的是分類。
> PM 每天被專案的各種問題以及需求追著跑，因此非常需要將問題分類釐清。
> 透過下方幾個方向，將問題分門別類，讓你的專案管理更輕鬆！

### 優先度&時間：
1. 列出所有需求以及問題：
像是客戶覺得重要的、工程師覺得重要的、自己覺得重要的、有時間性的、無時間性的。
2. 判斷優先度：
根據優先度判斷是不是需要討論的，哪些可以快速被解決，哪些需要花時間。
3. 全部條列出來：
最後可以按照優先度去和工程師討論進度了。

小提醒：通常自己條列的都只是理想上或是暫定的，一定要和團隊討論且和客戶充分溝通後，才可以進行開發。

### 進度追蹤：

![post-成為準時下班的 PM 吧！高效率工作的方法](//images.ctfassets.net/8er52l3j5u76/5Za0YYLqOCdU36LaDr2O3B/77f7101fe6edc7613b172fbbe50c1f4c/DjoOrJ7.jpg)

專案在開發中，一定會遇到很多狀況。
PM 的追蹤狀況會更細瑣繁複，包含連絡的追蹤、問題的追蹤、客戶答覆的回報等等。建議在這個追蹤項目中，補上日期，這樣在一個專案開發的幾十條代辦項目中，幫助你掌握所有的事情的追蹤時間以及每天該跟進的項目有哪些。

## 所要時間を設定し、時間内に課題を終えるよう集中する
設定需要的時間，並且集中精神在設定的時間內，完成所有的工作項目！

> 這個也很見仁見智，每個公司安排的工作繁忙程度不同，但是如果有很需要時間管理的人，也可以試試看使用蕃茄鐘以及 Google 月曆管理你的時間。

### 蕃茄鐘（Pomodoro Technique）
簡單來說，就是人能專注的時間不高，因此用小鬧鐘控制你的工作時間，並給予適當的休息，才可以讓工作高效率的完成。

但在這邊我想提供大家我失敗的例子XD

之前我買了各種線上課程打算慢慢看，但是我發現我大概看頂多三個小時就會各種恍神穿越，所以我就想說用蕃茄鐘試試看。

結果還是失敗...！

後來才 Realized 真的每個人專注度不同， <del>而本人特別差</del> 。
因此我發現，關於專注度，如果對我而言太困難的事情，專注度真的不會超過 25 分鐘，而且休息要不止 5 分鐘...（這邊的休息包含去倒水、滑臉書的時間）

但是如果相對簡單，我就可以專注大概 50 分鐘左右！

工作也是一樣，我覺得可以將任務區分難易度，看自己的精神狀況再來決定先做簡單的還是困難的工作。

### Google 月曆

這個更講究每個人的意志力和時間掌控了。（ <del>是個跟記帳一樣容易被放棄的方法</del> ）

由於 Google 月曆同時有週歷、日曆的功能，也可以設定各種活動起迄時間，如果需要高度掌握一天的時間，那麼這個 Google 功能可能很適合你！

Google 月曆不僅可以切割出更細的時間分配，也可以分享給不同的人觀看，它同時也可以當作工作日誌記錄你的工作概況，在回報工作事項給主管的時候，也可以很方便陳述你一整天做了什麼事情。

### 最後就是 GTD ！( Getting Things Done )
GTD 是另外一種時間管理的方式，但這邊就先不提了。( <del>不然篇幅會破表</del> )<br>
其實上述的方法，全部一起用會很複雜也很混亂，最重要的是找到自己適合的方式，就算是 Excel 表單簡單紀錄也可以（ 其實 Excel 也夠強大了，只是不直覺，完全得靠自己寫 ），只要能夠管理好專案，讓公司內外一片祥和 (?) 都是好方法！有機會再介紹 GTD 囉！我們下次見～

post-成為準時下班的 PM 吧！高效率工作的方法

成為準時下班的 PM 吧！高效率工作的方法


reCAPTCHA 是 Google 在 2009年收購一家叫 CAPTCHA 的公司，其服務的目的是為了辨認機器人與防止廣告垃圾訊息氾濫。

reCAPTCHA 問題的所需的文字圖片，首先會由 reCAPTCHA 計畫網站利用 Javascript API 取得，在終端使用者回答問題後，伺服器再連回 reCAPTCHA 計畫的主機驗證使用者的輸入是否正確 - [wiki](https://zh.wikipedia.org/wiki/ReCAPTCHA)。

---

reCAPTCHA 大致分為 3 種：

  - **v2 Checkbox**：「我不是機器人」核取方塊，網站上最常看到的一種，選取圖片或文字來做驗證。

  - **v2 Invisible**：隱形 reCAPTCHA 標記，在發送之前先在背景依照使用者滑鼠軌跡、瀏覽器資訊、Cookie等...判斷是否為機器人，如果判斷為是，則會跳出 v2 Checkbox 的驗證方式來做第二次驗證。

  - **v3**：以分數驗證要求，驗證完在後端可以得到驗證分數，區間為 0.0 ~ 1.0，分數越低則機器人的可能性越高，可以自行以分數高低，來決定是否要進行第二次驗證，例如：寄送 email、簡訊驗證或是使用 v2 Checkbox ...等。 

---

本次會實作以下幾個項目：

1. 實作 `v2 Checkbox` 在註冊帳號頁面
2. 實作 `reCAPTCHA v3` 在登入頁面
3. 實作 `reCAPTCHA v3` fallback validate

---

### 環境

- ruby 2.5.0
- Rails 5.2.3
- sqlite3 3.22.0

先準備一個擁有 Devise 登入頁面的專案：

[recaptcha-with-rails-devise-demo](https://github.com/treekey999/recaptcha-with-rails-devise-demo)

```shell
$ git clone https://github.com/treekey999/recaptcha-with-rails-devise-demo.git

$ cd recaptcha-with-rails-devise-demo

$ git checkout prepare_for_start # 切到已準備好環境的分支
$ git checkout -b my_practice # 在此建立一個 branch 並 checkout 過去

$ bundle
$ yarn
$ rails db:migrate
$ rails s
```

主要先準備了幾個前置作業：

- [devise setup](https://github.com/plataformatec/devise)：新增 User model
- [devise-bootstrap-views](https://github.com/hisea/devise-bootstrap-views)：簡易版 devise bootstrap layout 
- [dotenv rails](https://github.com/bkeepers/dotenv)：管理 env 變數，存放敏感資訊
- rails scaffold Todos title:string description: string user:reference

每一步驟都可以在 git commit 中找的到。

---

## 實作 v2 Checkbox 在註冊帳號頁面

#### 1. 註冊取得 `site_key` & `secret_key`

site key：前端用來跟 google recaptcha 取得 recaptcha token。

secret key：後端用來驗證從前端來的 recaptcha token。

[註冊： https://www.google.com/u/1/recaptcha/admin/create](https://www.google.com/u/1/recaptcha/admin/create)

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/7dALxlRafm674rvmhVt4iY/99714ebd3cc3ee86f0a92b8c1597edad/recaptcha_register_1-f55797e2.jpg)

![posts-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/6IvsNyknUcudr8vM0QSBjp/142ab2593740b3ade193bcdb65ae98cc/recaptcha_register_2-3f8afb32.jpg)

回到專案下，把 `.env` 複製一份並命名為 `.env.local`，由於已經把 `.env.local` 加到 `.gitignore` 所以不會把敏感資訊推到 github 上。

剛剛註冊得到得 `site_key` 、`secret_key`，填到 v2 對應的 key 上，這時候你在 rails 就可以用 `ENV["RECAPTCHA_V2_CHECKBOX_SITE_KEY"]` 來取得內容。

```ruby
RECAPTCHA_V2_CHECKBOX_SITE_KEY="your_site_key......."
RECAPTCHA_V2_CHECKBOX_SECRET_KEY="your_secret_key......"

RECAPTCHA_V3_SITE_KEY=""
RECAPTCHA_V3_SECRET_KEY=""
```

#### 2. 安裝 gem

在 `Gemfile` 加上這一段，並做 `$ bundle`。

[https://github.com/ambethia/recaptcha](https://github.com/ambethia/recaptcha)

```ruby
gem 'recaptcha', git: "https://github.com/ambethia/recaptcha.git"
```

#### 3. overwrite devise user controller

匯出 devise controller。

```shell
$ rails g devise:controllers users
```

修改 `routes.rb` 告訴 devise `user/registrations` controller 要被覆寫。

```ruby
Rails.application.routes.draw do
  root 'todos#index'  
  resources :todos

  devise_for :users, controllers: {
    registrations: 'users/registrations',
  }
end
```

#### 4. 新增 before_action

修改 `app/controllers/users/registrations_controller.rb`，
在 create 的時候，要做 recaptcha 檢查，如果沒通過就 redirect_to 註冊頁面。

```ruby
class Users::RegistrationsController < Devise::RegistrationsController

  before_action :check_recaptcha_v2, only: [:create]

  ......

  private

  def check_recaptcha_v2
    valid = verify_recaptcha secret_key: ENV["RECAPTCHA_V2_CHECKBOX_SECRET_KEY"]

    if not valid
      redirect_to new_user_registration_path
    end
  end
end
```

此時如果去註冊帳號，就會發現被檔下來了。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/5vNUQxsP1bcqYjt3RbLQpp/6e66ecbdfb744f90f783e8e7843ad86f/registration_not_valid-b60fac7c.jpg)

##### 5. 加入 `recaptcha_tags` 到 register form

修改 `app/views/devise/registrations/new.html.erb` 24 行，
在 submit 前面加上 `recaptcha_tag`。

```ruby
  ......

  <div class="form-group">
    <%= recaptcha_tags site_key: ENV["RECAPTCHA_V2_CHECKBOX_SITE_KEY"] %>
  </div>

  <div class="form-group">
    <%= f.submit t('.sign_up'), class: 'btn btn-primary' %>
  </div>

  ......
```

如果一切都順利的話，可以看到表單上出現了 recaptcha 按鈕，並可以正確的送出表單 🎉 。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/7nPLvhMlD3SqYnaj7XBkSF/35eb53447023aad6897b4cd253cd7896/recaptcha_set_correct-f805b770.jpg)

可以看到帶了一個 `g-recaptcha-response` 的 params。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/1GvjV1DRbiIeoKMAtej7Fn/2528f9c4d740d2c7a051b95793467216/post_registration-66daecf3.jpg)

如果失敗，應該會看到這個畫面，應該檢查一下 `ENV` 的值有沒有正確、`.env.local` 有沒有正確 或 `recaptcha設定` 有沒有加 `localhost` 到 domain 清單裡面。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/1TmokX1MGArshGx79l3Iaw/62709fd8275852c25d7f56590f465096/recaptcha_setup_failure-f95be0e2.jpg)

---

## 實作 reCAPTCHA v3 在登入頁面

#### 1. 註冊 recaptcha 並選擇 v3，加到 `.env.local`

```ruby
RECAPTCHA_V2_CHECKBOX_SITE_KEY="your_site_key......."
RECAPTCHA_V2_CHECKBOX_SECRET_KEY="your_secret_key......"

RECAPTCHA_V3_SITE_KEY="your_v3_site_key......"
RECAPTCHA_V3_SECRET_KEY="your_v3_secret_key......"
```

#### 2. 修改 `routes.rb`，覆寫 `user/sessions` controller

```ruby
Rails.application.routes.draw do
  root 'todos#index'  
  resources :todos

  devise_for :users, controllers: {
    registrations: 'users/registrations',
    sessions: 'users/sessions',
  }
end
```

#### 3. user session controller 加入 before_action

修改 `app/controllers/users/sessions_controller.rb`。

分數為 `0.1` ~ `1.0` 之間，越低代表越可能是機器人，minimum_score 設為 `0.5`，表示低於 `0.5` 就會回傳 `false`。

```ruby
class Users::SessionsController < Devise::SessionsController

  before_action :check_recaptcha_v3, only: [:create]

  ......

  private

  def check_recaptcha_v3
    valid = verify_recaptcha(
      # action：當收到 recaptcha token 的時候要認哪一個名稱來做驗證
      #         與前端 form 表單呼應
      action: 'login',
      minimum_score: 0.5,
      secret_key: ENV["RECAPTCHA_V3_SECRET_KEY"],
    )

    if not valid
      redirect_to new_user_registration_path
    end
  end
end
```

#### 4. 加入 `recaptcha_v3` 到 login form

修改 `app/views/devise/sessions/new.html.erb` 22 行，
在 submit 前面加上 `recaptcha_v3`，`action` 必須跟 controller 驗證端命名一致。

```ruby
  ......

  <div class="form-group">
    <%= recaptcha_v3 action: 'login', site_key: ENV["RECAPTCHA_V3_SITE_KEY"] %>
  </div>

  <div class="form-group">
    <%= f.submit  t('.sign_in'), class: 'btn btn-primary' %>
  </div>

  ......
```

成功的話可以看到出現在該頁右下角的位置。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/1mGqpPFTyO52r6zZFl7AHh/de94835987ae042d0dcf7c9c0d509546/v3_correct-01406d9d.jpg)

可以看到帶了一個 `g-recaptcha-response`，並有剛剛設置的 action 名稱。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/3OACySAYiC01yR4NWrkEyP/2f83408ca4f119c707378329c2030b77/post_session-e1bc4aa3.jpg)

如果失敗，打開 js console 查看錯誤訊息。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/139ZyC2s4QG9t9y5Gd88Te/3cc76e34bf8333794cfd5c8375f73fc1/v3_failure-157bfb92.jpg)

#### 5. 加入 v3 驗證失敗的 fallback 驗證

修改 `app/controllers/users/sessions_controller.rb`

```ruby
class Users::SessionsController < Devise::SessionsController
  before_action :check_recaptcha_v3, only: [:create]
  # before_action :configure_sign_in_params, only: [:create]

  # GET /resource/sign_in
  def new
    # 把參數 `verify_v2` 存起來留給 view 使用
    @verify_v2 = params[:verify_v2] === 'true'
    super
  end

  ......

  private

  def verify_recaptcha_tags
    # 用來驗證 v2 recaptcha_tags (secret_key 不一樣)
    verify_recaptcha secret_key: ENV["RECAPTCHA_V2_CHECKBOX_SECRET_KEY"]
  end 

  def check_recaptcha_v3
    v3_valid = verify_recaptcha(
      # action：當收到 recaptcha token 的時候要認哪一個名稱來做驗證
      #         與前端 form 表單呼應
      action: 'login',
      minimum_score: 0.5,
      secret_key: ENV["RECAPTCHA_V3_SECRET_KEY"],
    )
    v2_valid = verify_recaptcha_tags unless v3_valid

    if v3_valid || v2_valid
      # 如果驗證成功要額外做什麼事...
    else
      # 驗證失敗, 導到登入頁面並帶一個 verify_v2=true 的參數
      redirect_to new_user_session_path(verify_v2: true)
    end
  end
end
```

修改 `app/views/devise/sessions/new.html.erb`

```ruby
  ......

  <div class="form-group">
    <% if @verify_v2 %>
      <%= recaptcha_tags site_key: ENV["RECAPTCHA_V2_CHECKBOX_SITE_KEY"] %>
    <% else %>
      <%= recaptcha_v3 action: 'login', site_key: ENV["RECAPTCHA_V3_SITE_KEY"] %>
    <% end %>
  </div>

  <div class="form-group">
    <%= f.submit  t('.sign_in'), class: 'btn btn-primary' %>
  </div>

  ......
```

由於無法完全模擬出分數很低的情況，所以可以直接在登入網址加上 `?verify_v2=true`，來測試用 v2 checkbox 與用 v3 可不可以成功登入。

---

#### 模擬機器人瀏覽

打開 js console，將 `User agent` 改成 `Googlebot/2.1`，recaptcha 就會認為這是機器人瀏覽，使用此情況最好是在浮動 IP 的網路上會比較好，recaptcha v3 會記錄你的 ip verify 次數。

但是這也沒辦法完全測試剛剛完成的 fallback 驗證，因為在進行 v2 checkbox 的過程中，他會吐出無窮盡的圖片給你點選。

![post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise](//images.ctfassets.net/8er52l3j5u76/4dQj98cTmc0elmtxi3UmA/b601149f72421d38501cb8110844db84/simulate_low_score-7f4dfadc.jpg)

---

參考：

[https://github.com/ambethia/recaptcha](https://github.com/ambethia/recaptcha)

[https://developers.google.com/recaptcha/intro?hl=zh-TW](https://developers.google.com/recaptcha/intro?hl=zh-TW)

[react 版本 recaptcha](https://github.com/appleboy/react-recaptcha)

[google recaptcha demo](https://recaptcha-demo.appspot.com/)

---

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


post-整合 reCAPTCHA 到你的專案上，搭配 rails、devise

整合 reCAPTCHA 到你的專案上，搭配 rails、devise

在這裡淺談幾項 PM 路途中會用上的技能，希望能帶給要邁向 PM 之路的你一點共鳴。

專案管理聽起來是個很陌生的名詞，但其實生活上很容易遇到，
人生也可以譬喻成一個放大版的專案管理，
首先列出目標優先順序，訂定每一個項目的細節，再來分配資源，一個一個完成目標，遇到困難時要解決掉，解決不掉的問題要去問有經驗的人，這樣一看，還真有 87% 相似。

此篇會提到下述幾個軟技能：

## 筆記的重要性

>釐清眼前的一片霧霾，把思緒整理清楚，列出要記下的重點。

### 隨手筆記
>沒有整理過的筆記，時間久了再回去看時，是不是常冒出：“我這行是寫了什麼?” 的想法呢?

我並非擁有程式技術相關背景入門，剛進來五倍時，理所當然的呈現了手忙腳亂的概念 (XD)
與同事同行跟客戶開會，整場會議下來，滿腦思緒充滿了陌生的名詞，
那時候我只想到一件事：先把這些單詞記下來再說！

就算不知道這些單詞的正確拼音，但還是硬著頭皮寫下來，把前後文也紀錄下來，會議結束後再丟去 Google 一下，相信大部分都可以找到解答，再把它們一一記起來，前後文也記錄下來，是因為若真的找不到解答，要去請教主管或同事時，他們起碼還抓得出來你指的意思是什麼。

感謝我在吸收詞彙的路上，團隊的主管跟同事都非常熱心替我解答疑惑，還會把意思轉換成凡人如我都聽得懂的比喻，漸漸聽久之後，會發現這些詞彙不像一開始那麼陌生，當然在此同時，也得付出相對的努力去學習相關知識，同時俱進，非技術背景，總是會比別人多出一些不足，需要付出更多努力去追上。

畢竟在不懂這些意思的狀況下要去跟 RD 還有客戶開會，連自己都搞不清楚狀況，絕對是行不通的。 (哭)

### Agenda

>能在會議中找出關鍵性事項來討論，避免冗長的開會時間中，重點卻沒有幾個。

另外一個要提到的是 Agenda (會議流程)：

會議開始前，會在準備的 Agenda 中，列出待討論的事項、議題的細節等，有時候也會代入這一週工程師的進度簡短概述，讓工程師跟客戶能夠同步雙方進度。

開會過程中也可以在 Agenda 的各個項目下方備註討論進度或結果，某方面來說也算是筆記的一種，方便自己會議後整理。

主要是可以在會議過程中，__讓開發團隊與客戶能彼此認知到此次討論的重點__，避免想到什麼才討論什麼，最後會議結束，才發現手中還有一堆問題遺漏了。

筆記其實不只在會議紀錄這種動作可以使用，
在五倍上 Git 跟網頁設計相關課程時，課後整理筆記可以讓我思考上課來不及吸收(偶爾發生)的內容，也具有**重複學習，加深記憶**的功能。

## 管理的技術，博大精深
>PM 不只是居中的協調者，還要跟團隊有默契、一起制訂出一套標準的工作流程。

我們常聽到的開發方式有成千上萬種，其中耳熟能詳的莫過於瀑布式開發、敏捷式開發...等。
我們來簡單提及一下最近很出名的敏捷式開發：

#### 敏捷式開發：
>敏捷式開發 好耳熟喔⋯⋯所以那是什麼 ?

敏捷式開發有許多方法，其中較為靈巧、好活用的 scrum，迷人的特色在於衝刺週期 (sprint) 與 Stand up meeting ，適用於小團隊(3-8人左右)，當然還有 story point、 team member role ⋯⋯等特色，這裡就不一一詳細介紹。

* Sprint：你可以將每週設為一段衝刺期，大家列出這週自己能夠"徹底完成"的事情。

* Daily Stand-up Meeting：每天固定時間的站立式會議，

  會議只有簡短的10-15分鐘的站立時間，可以快速讓團隊成員了解彼此的進度，以及需要協助的問題、今天要完成的待辦事項等。

  會議中只需要簡短快速報告以下三點：

  * 昨天做了什麼？

  * 今天預計要做什麼？

  * 進行中有遇到什麼障礙無法解決？

透過這樣的簡短會議，使團隊溝通飽和度上升，也可以讓自己整理一下腦內思緒，有時成員自己瓶頸很久的問題，另一位成員知道更快解決的方法，也可以透過站立會議提出跟建議，讓整體效率與進度更加提升。

---

## 說話的溝通技巧與藝術

>管事很難，管人更難。
當意見雪花般的飄來：應該成為一個整合大家意見的人，而非夾心餅乾。

當 PM 時，除了要站在客戶那邊去思考，也要站在 RD 這邊用客戶的思考去延伸，客戶有時候會不太確定自己需要的是什麼 "需求"，提出的反而是客戶自己想到的 "規格"，

那 PM 的功能就要發揮了，幫客戶釐清：是什麼原因想要提出這個規格？或是在什麼情況下需要這個功能？跟客戶手拉手心連心將需求條件詳細的列出來，畢竟直接丟給 RD 一坨定義很模糊的項目，他們也不知道從何下手。(登愣)

溝通除了確保表達出自己的想法外，也得確保他人是**能完全理解你想表達的意思**，有時候覺得自己講的已經夠清楚了，但對方可能還是不太理解你的概念，

溝通時要用“聽者的角度”去思考，甚至對方理解你的概念之後，也可能對你的看法提出異議，這時候就需要彼此討論、說服、妥協退讓來達成共識。

上述情況可套用在跟 RD 、客戶、抑或一般生活對話當中，掌握住技巧，可以確保團隊是依循著同一個概念向前進的 。

團隊氣氛與默契掌握得好，才能在彼此需要支援的時候幫上一把，有共同意識一起將專案以最高效率去完成。

## 管理工具會是你的小助手

PM 的生活當然不是一個人單幹，你會需要幾項工具輔助你掌握團隊時程、進度。

耳熟能詳的像是：Trello、Redmine、Asana ....等，有些是免費提供，有些若是要設定為非公開，則需另外付費，有優有缺，大家可以依團隊跟客戶偏好與方便性去篩選。
另外 RD 較常使用到管理程式碼的 GitHub、GitLab ，也需要去熟悉。

找尋適合團隊的管理工具是極為重要的，若未善用好，會使專案的不確定性與變動性增加，也會無法追蹤好項目與進度，所以說除了選擇合適管理工具，也必須在管理的過程當中確認細節，確認哪些項目是需要修改，以及調整整體的管理方式，讓專案能夠維持在理想的進度上。

---

PM 的技能欄要討論的還很廣泛，除了上述提到的軟技能：管理方法與技術、說話的藝術等，後面還有未提及的專業知識、商業知識與市場知識技能等等⋯⋯，尤其是硬技能中必須持續鞭策自己增進的專業知識，連我自己也在路途中持續學習，在每一次經驗中吸收、學習讓整體更有效率，畢竟全方位的 PM 才能夠在團隊中發揮最大成效。

PM 做的不只是專案管理，實際上更像溝通的橋樑，一個專案實際上藏了許多細節，而我們的任務就是去挖出更多細節，更要在團隊與客戶關係中找出平衡點，掌握每個人的進度與情緒脈動，做好溝通，保持好相同認知度，而這些技能，都要一點一滴的累積，儲存在你的技能欄內。

post-PM 的技能欄，你知道該點哪些嗎？

PM 的技能欄，你知道該點哪些嗎？


Elixir 這個名字，對女生朋友來說也許比較熟悉一些，因為它是一款知名化妝品廠商所推出的某一種[保養品的品牌](https://www.shiseido.com.tw/brand.aspx?b=2#/new)，但我並沒有接廠商的業配而且自己也沒在用保養品，所以今天也不是要介紹這款保養品。

我第一次認識 Elixir 這個單字，其實是因為當年玩 Final Fantasy 這款遊戲時候，遊戲裡有一款叫做「エリクサー」的道具，使用後會恢復全部的 HP 跟 MP，而這個「エリクサー」其實就是從 Elixir 這個英文字轉變來的日文外來語。

這篇文章要介紹的，是一款名為 Elixir 的電腦程式語言。本文的目的並不是要告訴你 Elixir 有多好多棒、效能有多好多棒（雖然是事實），而僅介紹一些我認為這個程式語言讓我覺得寫起來很開心的地方，特別是對一個喜歡 Ruby 的人來說。

首先，學習一門新的程式語言，先不說別的，外表看得順眼是很重要的。Elixir 這款程式語言的 Logo 是一顆紫色的水滴：

![Elixir Logo](https://kaochenlong.com/images/2017/elixir-logo.png)

好吧，我個人覺得 Logo 還不錯看（我的看法啦）。

Elixir 是一款函數型的程式語言，跟其它物件導向的程式語言比起來，Elixir 沒有類別、沒有物件、沒有所謂的實體方法、類別方法，只有一般平鋪直敘的函數（Function）。

什麼是函數？我們國、高中的數學都應該看過這樣的東西：

```
f(x) = 3x + 2
```

這個一元一次方程式，就是一個函數。函數通常會有輸入值也有輸出值，以上面這個為例，它的「輸入值」是 `x`，「輸出值」是 `3x + 2`。

在 Elixir，函數是一等公民，甚至可以把函數傳給另一個函數當做一般的參數。不過少了我們平常習慣的物件導向的觀念，一開始真的有點不習慣，會不知道該把程式寫在哪邊比較好。

Elixir 這個程式語言可以介紹的內容很多，應該不是我這一篇文章就可以聊完的，更多關於這個程式語言的細節，請各位移駕至 [Elixir 的官網](https://elixir-lang.org/)，在這邊就一些我個人覺得有趣、好玩的語法跟大家分享。

## 好玩的語法

### Pipe Operator

也許你曾看過這樣的程式碼：

```
func1(func2(func3(super_function(best_function("I love you")))))

```

先不管這個 `func1`、`func2` 或是 `super_function` 是在幹嘛，像這樣洋蔥式或大腸包小腸式一層包一層的寫法，雖然仔細看還是能知道意思，但可讀性上就稍微沒那麼好。如果改成多行，可以變這樣：
```
tmp1 = best_function("I love you")
tmp2 = super_function(tmp1)
tmp3 = func3(tmp2)
tmp4 = func2(tmp3)
tmp5 = func1(tmp4)
```
老實說這樣寫也沒好多少，特別如果又像我這樣故意用一堆之後用不上的 temp 變數。

Elixir 可以直接這樣寫：
```
"I love you"
|> best_function
|> super_function
|> func3
|> func2
|> func1
```
Elixir 的 `|>` 這個 Operator，意思就是「把前一個 function 執行的結果，當做第一個參數傳入下一個 function」，所以下面這段 Elixir 範例：
```
"ruby is awesome!"
|> String.split
|> Enum.map(fn(x) -> String.capitalize(x) end)
|> Enum.join(" ")

# 得到 "Ruby Is Awesome!"
```

它做了「把字串接開」→「把每個元素的首字改大寫」→「把各個元素組回字串」。其中中間 `Enum.map/2` 那段可以再改成這樣：
```
"ruby is awesome!"
|> String.split
|> Enum.map(&(String.capitalize/1))
|> Enum.join(" ")
```
像這樣可以把前一個 function 執行的結果，一路往下一個 function 接下去，可以讓每個 function 的「任務」分得很清楚，隨時可以再增加或刪除，個人覺得這樣超有趣的！

### Metaprogramming

習慣 Ruby 之後，程式語言有沒有直接支援 Metaprogramming 的功能對我來說就會變得很重要。Elixir 直接就有支援 Metaprogramming：

其實我不太確定 Metaprogramming 該怎麼翻成中文比較適當，不過請大家先看看這張截圖：

![elixir](https://kaochenlong.com/images/2017/elixir_made_by_elixir.png)

從帳面上的數字看起來，放在 GitHub 的 Elixir 程式語言專案，有 89.7% 的內容是用 Elixir 這個程式語言寫的。咦？有覺得哪裡怪怪的嗎？也就是說這個程式語言，有將近九成的組成都是 Elixir 這個程式語言本身。用自己寫自己，我覺得這超酷的！

在 Elixir 要使用 Metaprogramming 的技巧，主要都是使用 `macro` 搭配 `quote` 跟 `unquote` 來撰寫：

再從 Metaprogramming Elixir 書上借個例子：
```
    defmodule Math do
      defmacro say({:+, _, [lhs, rhs]}) do
        quote do
          IO.puts "#{unquote(lhs)} 加 #{unquote(rhs)} 等於 #{unquote(lhs + rhs)}"
        end
      end

      defmacro say({:*, _, [lhs, rhs]}) do
        quote do
          IO.puts "#{unquote(lhs)} 乘以 #{unquote(rhs)} 等於 #{unquote(lhs * rhs)}"
        end
      end
    end
```
先不管其實這程式看起來怎麼樣（好啦，其實有點不太容易懂），但用起來的樣子像這樣：
```
$ iex math.exs
Erlang/OTP 20 [erts-9.1.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]
Interactive Elixir (1.5.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> require Math
Math
iex(2)> Math.say 1 + 2
1 加 2 等於 3
:ok
iex(3)> Math.say 2 * 3
2 乘以 3 等於 6
:ok
```
發生什麼事了？ 我先把 `1 + 2` 透過 `quote` 拆解成這樣：
```
iex(1)> quote do: 1 + 2
{:+, [context: Elixir, import: Kernel], [1, 2]}
```
這等於是直接在操作 AST（Abstract Syntax Tree）了，這超酷的。可以做到這種層級的操作，我想大概什麼功能都能寫得出來了。

其實在 Macro 在 Elixir 的應用非常廣，甚至後來有次無聊去翻 Elixir 的原始碼才發現，原來在 Elixir 裡，連 `if...else` 跟 `unless` 之類看起來像關鍵字的語法，就是用 Macro 的方式寫出來的：
```
    # 檔案位置：lib/elixir/lib/kernel.ex
    defmacro if(condition, clauses) do
      build_if(condition, clauses)
    end

    defp build_if(condition, do: do_clause) do
      build_if(condition, do: do_clause, else: nil)
    end

    defp build_if(condition, do: do_clause, else: else_clause) do
      optimize_boolean(
        quote do
          case unquote(condition) do
            x when x in [false, nil] -> unquote(else_clause)
            _ -> unquote(do_clause)
          end
        end
      )
    end

    defp build_if(_condition, _arguments) do
      raise ArgumentError,
            "invalid or duplicate keys for if, only \"do\" and an optional \"else\" are permitted"
    end
```
如果你仔細看上面這段原始碼，就會發現在 Elixir 的 `if ... else` 其實就是 `case ... when` 而已，這真的太有趣了 :)

對 Macro 有興趣的話，可以再參考官網上的[文件](https://elixir-lang.org/getting-started/meta/macros.html)。

### 其它我覺得有趣的...

#### 可以省略小括號

這對別的程式語言的人來說可能沒什麼感覺，但對寫習慣 Ruby 的人來卻是一大福音。

#### 有 REPL 可以用

REPL 是「Read-Eval-Print Loop」幾個字的縮寫，許多程式語言都有提供這樣的工具，以 Ruby 來說是 `irb`，而在 Elixir 則是 `iex`。在終端機環境下輸入 `iex` 指令後會進入互動式的環境，可以在這裡試驗或練習程式語法：

![iex](https://kaochenlong.com/images/2017/iex.png)

#### 跟 Ruby 的語法有像

這對已經習慣 Ruby 語法的人來說算是福音，但別誤會，即使從 Ruby 轉換到 Elixir 也不會是完全無痛，畢竟 Elixir 是一款函數式的程式語言，沒有物件導向的那些類別、物件的東西，這點需要花一點時間習慣。

## 小結
### 學 Elixir 可以幹嘛

學這個可以幹嘛喔？想幹嘛就幹嘛，學習本來就不需要為公司、不需要為長官、同事、不需要為別人，只為你自己，你自己覺得有趣最重要！

話是這樣說沒錯，但實際一點，你爸媽可能還是會想問你學這東西要幹嘛？學這個找得到工作嗎？

如果想要開發網站應用程式，有 [Phoenix](https://phoenixframework.org/) 這款 Web 開發框架可以用，Phoenix 較早版本跟 Ruby on Rails 有 87% 像，對現有的 Rails Developer 來說還算是滿友善的（但改版後長得有點不太一樣了）；另外想玩硬體，也有 [Nerves](https://nerves-project.org/) 可以研究一下。

### 聚會

目前 Elixir 在全世界的人口數還不算多，就我觀察，在台灣應該就只有一小群人在用。不過每個月都有[聚會](https://www.meetup.com/Taipei-Elixir-Erlang-Meetup-Group/)，目前也有自己專屬的 [Facebook 粉絲專頁](https://www.facebook.com/groups/elixir.tw/)。

![AD](https://kaochenlong.com/images/2017/elixir_ad.jpg)
圖片來源：[Shiseido 官網](https://www.shiseido.com.tw/)

借用該知名保養品品牌的宣傳台詞「遇見『水玉光』，遇見更好的自己」，小改一下變成：

> 遇見 Elixir，遇見更好的自己！

### 研討會

雖然在台灣的使用人口還不算多，但我們明年在辦 RubyConf Taiwan 的時候，會把 Elixir 也正式的納入議程（就說 Ruby 跟 Elixir 是好朋友了）

反正在國外的 RubyConf 也越來越多的 Elixir 議程，即然這樣，我們就光明正大把辦在一起吧！

![RubyElixirConf Taiwan](https://kaochenlong.com/images/2017/ruby-elixir-conf.png)

除了 Ruby 程式語言的老爸[松本行弘](https://twitter.com/yukihiro_matz)之外，也邀請到了 Elixir 的老爸 [José Valim](https://twitter.com/josevalim) 來擔任主題演講。

咦？說到底這篇竟然是 [Ruby X Elixir Conf](https://2018.rubyconf.tw/) 的業配文啊，可...可惡！

你看過 Elixir 嗎？如果沒有，現在讓你看看！

這是綠界的電子發票介接技術文件：[綠界科技股份有限公司 電子發票介接技術文件](https://www.ecpay.com.tw/Content/files/ecpay_004.pdf)

根據這份文件，我們可以做的事情有蠻多的，本文只介紹最最基本的功能：

- 開立發票
- 查詢發票明細

本文將會從建立一個新的 Rails App 開始，最後實作開發票和查詢發票明細的功能。

## 建立一個 Rails App

在 console 輸入以下指令：

```bash
rails new ecpay_invoice_demo
cd ecpay_invoice_demo
```

## 新增一個開發票的 service

在專案資料夾中的 `app/services/ecpay/invoice` 資料夾下，新增 `create_service.rb`，此時你應該會發現 app 資料夾下不存在 services 資料夾，你要自己新增資料夾。

在 `create_service.rb` 中加入以下程式碼：

```ruby
module Ecpay
  module Invoice
    class CreateService
      def initialize(params = {})
      end

      def run
        'yo'
      end
    end
  end
end
```

接著在 Rails console 下測試看看

```ruby
> Ecpay::Invoice::CreateService.new.run
# => "yo"
```

看到 yo 代表你做對了。

## 串接綠界API

在這裡我會直接使用綠界提供的測試環境做展示，所以不會實作切換環境的程式碼，以下是綠界的測試環境：

相關連結：

- 開立發票的API網址：[https://einvoice-stage.ecpay.com.tw/Invoice/Issue](https://einvoice-stage.ecpay.com.tw/Invoice/Issue)
- 綠界測試環境後台登入頁：[https://vendor-stage.ecpay.com.tw/Home/Index](https://vendor-stage.ecpay.com.tw/Home/Index)
- 綠界測試環境電子發票後台：[https://vendor-stage.ecpay.com.tw/Einvoice/Index](https://vendor-stage.ecpay.com.tw/Einvoice/Index)

綠界測試環境後台帳密

- 帳號：StageTest
- 密碼：test1234

API 串接參數

- MerchantID：2000132
- HashKey：ejCk326UnaZWKisg
- HashIV：q9jcZX8Ib9LM8wYk

我們只需要把正確的參數傳進正確的網址，就可以成功開立發票了，現在來修改一下我們的 service code：

```ruby
module Ecpay
  module Invoice
    class CreateService
      def initialize(params = {})
        @params = params
      end

      def run
        create(sample_params)
      end

      private

      def url
        'https://einvoice-stage.ecpay.com.tw/Invoice/Issue'
      end

      def sample_params
        {}
      end

      def create(params)
        uri = URI(url)
        # 送出 Post request 到綠界，並取得回應內容
        response = Net::HTTP.post_form(uri, params)
        response.body.force_encoding('UTF-8')
      end
    end
  end
end
```

目前的程式碼可以幫我們把 sample_params 傳到綠界，並且獲得回應內容。只要我們再將 sample_params 填入，整個開發票的功能就完成了。現在讓我們回到 Rails console 測試一下目前的程式跑起來是怎樣的結果：

```ruby
> Ecpay::Invoice::CreateService.new.run
 => "無效的MerchantID「商品編號為空白」"
```

我們成功獲得了來自綠界測試環境的錯誤訊息。

## 填入開發票的參數

修改開發票的參數 sample_params 如下：

```ruby
def sample_params
  # 基本參數
  {
    'TimeStamp' => Time.current.to_i.to_s,
    'MerchantID' => '2000132',
    'RelateNumber' => SecureRandom.hex(10), # 訂單編號
    'CustomerEmail' => 'service@5xruby.tw', # 客戶信箱
    'TaxType' => '1', # 課稅類別
    'InvType' => '07', # 字軌類別

  # 商品參數
    'SalesAmount' => 1900, #總金額
    'ItemCount' => '3|2', #商品數量
    'ItemPrice' => '300|500', #商品單價
    'ItemAmount' => '900|1000', #商品小計
    'ItemName' => '衣服|褲子', #商品名稱
    'ItemWord' => '件|件', #商品單位

  # 發票參數
    'Print' => '0', # 要列印嗎？ 0代表不要 1代表要
    'Donation' => '1', # 要捐嗎？ 0代表不要 1代表要
    'LoveCode' => '168001', # 要捐給誰，一個7字元的愛心碼
  }
end
```

試用一下

```ruby
> Ecpay::Invoice::CreateService.new.run
 => "InvoiceDate=&InvoiceNumber=&RandomNumber=&RtnCode=10200090&RtnMsg=CheckMacValue is null.&CheckMacValue=2F3E82F5A5C582BB0E1E5E34EE749F1A"
```
他傳回了一個 query string 來告訴我們發生了什麼事情，我們要關注的地方是 `RtnMsg`。這裡我特寫一下：

```ruby
RtnMsg=CheckMacValue is null.
```
## 計算 CheckMacValue

綠界的回應是說我們沒有傳遞 CheckMacValue 給綠界， CheckMacValue 的功能是用來確認雙方身分用的。我們會把我們要傳遞的參數加入綠界給我們的 HashKey 跟 HashIV，然後進行一個 hash 運算，就可以獲得 CheckMacValue 了。

CheckMacValue 的詳細計算流程如下：
- 將傳遞參數依照第一個英文字母，由 A 到 Z 的順序來排序(遇到第一個英名字母相同時，以第二個英名字母來比較，以此類推)，並且以&方式將所有參數串連。
- 參數最前面加上 HashKey、最後面加上 HashIV
- 將整串字串進行 URL encode
- 轉為小寫
- 使用 MD5 產生雜凑值
- 再轉大寫

由於綠界的 API Server 是用 ASP.NET 實作的，所以我們的 URL encode 的結果必須跟 ASP.NET 上的 URL encode 相同。不同的語言實作的 URL encode 的結果可能會有些微差異，所以我們需要針對這一點特別處理。

全部實作完之後的程式碼如下：
```ruby
require 'net/http'

module Ecpay
  module Invoice
    class CreateService
      def initialize(params = {})
        @params = params
      end

      def run
        create(sample_params)
      end

      private

      def url
        'https://einvoice-stage.ecpay.com.tw/Invoice/Issue'
      end

      def sample_params
        # 基本參數
        {
          'TimeStamp' => Time.current.to_i.to_s,
          'MerchantID' => '2000132',
          'RelateNumber' => SecureRandom.hex(10), # 訂單編號
          'CustomerEmail' => 'service@5xruby.tw', # 客戶信箱
          'TaxType' => '1', # 課稅類別
          'InvType' => '07', # 字軌類別

        # 商品參數
          'SalesAmount' => 1900, #總金額
          'ItemCount' => '3|2', #商品數量
          'ItemPrice' => '300|500', #商品單價
          'ItemAmount' => '900|1000', #商品小計
          'ItemName' => '衣服|褲子', #商品名稱
          'ItemWord' => '件|件', #商品單位

        # 發票參數
          'Print' => '0', # 要列印嗎？ 0代表不要 1代表要
          'Donation' => '1', # 要捐嗎？ 0代表不要 1代表要
          'LoveCode' => '168001', # 要捐給誰，一個7字元的愛心碼
        }
      end

      def create(params)
        params['CheckMacValue'] = compute_check_mac_value(params)
        uri = URI(url)
        # 送出 Post request 到綠界，並取得回應內容
        response = Net::HTTP.post_form(uri, params)
        response.body.force_encoding('UTF-8')
      end

      def compute_check_mac_value(params)
        # 先將參數備份
        params = params.dup

        # 某些參數需要先進行 url encode
        %w[CustomerName CustomerAddr CustomerEmail].each do |key|
          next if params[key].nil?
          params[key] = urlencode_dot_net(params[key])
        end

        # 某些參數不需要參與 CheckMacValue 的計算
        exclude_keys = %w[InvoiceRemark ItemName ItemWord ItemRemark]
        params = params.reject do |k, _v|
          exclude_keys.include? k
        end

        # 轉成 query_string
        query_string = to_query_string(params)
        # 加上 HashKey 和 HashIV
        query_string = "HashKey=ejCk326UnaZWKisg&#{query_string}&HashIV=q9jcZX8Ib9LM8wYk"
        # 進行 url encode
        raw = urlencode_dot_net(query_string)
        # 套用 MD5 後轉大寫
        Digest::MD5.hexdigest(raw).upcase
      end

      def urlencode_dot_net(raw_data)
        # url encode 後轉小寫
        encoded_data = CGI.escape(raw_data).downcase
        # 調整成跟 ASP.NET 一樣的結果
        encoded_data.gsub!('%21', '!')
        encoded_data.gsub!('%2a', '*')
        encoded_data.gsub!('%28', '(')
        encoded_data.gsub!('%29', ')')
        encoded_data
      end

      def to_query_string(params)
        # 對小寫的 key 排序
        params = params.sort_by do |key, _val|
          key.downcase
        end

        # 組成 query_string
        params = params.map do |key, val|
          "#{key}=#{val}"
        end
        params.join('&')
      end

    end
  end
end
```

試試看結果如何：

```ruby
> Ecpay::Invoice::CreateService.new.run
 => "InvoiceDate=2018-07-19 14:35:02&InvoiceNumber=FX30000137&RandomNumber=8833&RtnCode=1&RtnMsg=開立發票成功&CheckMacValue=D2AEB7BDE6F9ADA94831233A4D0FB2BC"
```

節錄重點：

```ruby
RtnMsg=開立發票成功
InvoiceNumber=FX30000137
```

發票開立成功了！而且我們獲得了發票號碼。

## 發票參數簡介

我把發票參數分為三類：

- 基本參數
- 商品參數
- 發票參數

### 基本參數
- TimeStamp：你的系統的目前時間，綠界會用來做 timeout 檢查
- MerchantID：商店代號，這是綠界發給你的參數
- RelateNumber：在你的電商系統上的訂單編號
- CustomerEmail：買家的mail，如果發票開立成功或中獎，這個信箱有可能會收到信
- TaxType：課稅類別，填 1 代表應稅，填 2 代表零稅率，填 3 代表免稅
- InvType：發票字軌類型，填 07 代表一般稅額， 填 08 代表特種稅額

### 商品參數
- SalesAmount：發票總金額
- ItemCount：商品數量，以 | 做為分隔符號
- ItemPrice：商品單價，以 | 做為分隔符號
- ItemAmount：商品小計，以 | 做為分隔符號
- ItemName：商品名稱，以 | 做為分隔符號
- ItemWord：商品單位，以 | 做為分隔符號

綠界會檢查商品小計的加總必須等於發票總金額

### 發票參數

#### 我要捐發票
如果你這張發票是要捐的，需要傳遞以下參數：

- Print：要列印這張發票嗎？填 0 代表不要，填 1 代表要
- Donation => 要捐嗎？填 0 代表不要，填 1 代表要
- LoveCode => 要捐給誰？填入愛心碼

其中 Print 傳 0，Donation 傳 1。

#### 我要印發票
如果你這張發票是要印的，需要傳遞以下參數：

- Print：1
- Donation：0
- CustomerName：客戶名稱
- CustomerAddr：客戶地址
- CustomerIdentifier：統一編號，此欄位為選填欄位

也就是說，如果你要印，就不能捐。如果你要打統編，就一定要印。即使你必須將客戶名稱跟地址傳給綠界，綠界還是不會幫你印發票寄給客戶。

所以當客戶選擇要印發票時，管理人員則必須要回到綠界電子發票後台去操作列印。

綠界電子發票列印頁網址：[https://vendor-stage.ecpay.com.tw/Einvoice/InvoicePrint](https://vendor-stage.ecpay.com.tw/Einvoice/InvoicePrint)

#### 我要存發票
如果你不捐，也不印，那麼你要找一個載具來儲存這張電子發票，載具相關參數如下：

- Print：0
- Donation：0
- CarruerType：載具類別，值可能為 1、2、3 其中之一
- CarruerNum：載具編碼

其中 CarruerType 的值的意義如下：

- 1：綠界科技電子發票載具
- 2：自然人憑證號碼
- 3：手機條碼

CarruerNum 的值會在 CarruerType 的值不同而改變其意義，特別的是當 CarruerType 為 1 時，CarruerNum 必須傳遞空字串。

## 微調程式碼

剛剛我們是使用測試資料來開發票，但真正要使用的時候，params 應該是要由外部傳入。

需要修改程式碼如下：

```ruby
def run
  create(@params)
end
```

再 parse 一下輸出：

```ruby
def create(params)
  params['CheckMacValue'] = compute_check_mac_value(params)
  uri = URI(url)
  # 送出 Post request 到綠界，並取得回應內容
  response = Net::HTTP.post_form(uri, params)
  body = response.body.force_encoding('UTF-8')
  CGI.parse(body).transform_values(&:first)
end
```

測試一下效果

```ruby
params = Ecpay::Invoice::CreateService.new.send(:sample_params)
Ecpay::Invoice::CreateService.new(params).run
 => {"InvoiceDate"=>"2018-07-19 17:11:18", "InvoiceNumber"=>"FX30000163", "RandomNumber"=>"5453", "RtnCode"=>"1", "RtnMsg"=>"開立發票成功", "CheckMacValue"=>"848B5BAF997E316617967BFC09079BA6"}
```

順利～
補充說明：在這邊我使用 `Ecpay::Invoice::CreateService.new.send(:sample_params)`，而不是寫 `Ecpay::Invoice::CreateService.new.sample_params` 是因為 `sample_params` 是 private 方法，不能直接從外部呼叫。

## 查詢發票明細

一樣，我們建立一個 Ecpay::Invoice::FindService，以下就直接來：

```ruby
require 'net/http'

module Ecpay
  module Invoice
    class FindService
      def initialize(relate_number)
        @relate_number = relate_number
      end

      def run
        find(build_params)
      end

      private

      def url
        'https://einvoice-stage.ecpay.com.tw/Query/Issue'
      end

      def build_params
        {
          'TimeStamp' => Time.current.to_i.to_s,
          'MerchantID' => '2000132',
          'RelateNumber' => @relate_number, # 訂單編號
        }
      end

      def find(params)
        params['CheckMacValue'] = compute_check_mac_value(params)
        uri = URI(url)
        # 送出 Post request 到綠界，並取得回應內容
        response = Net::HTTP.post_form(uri, params)
        body = response.body.force_encoding('UTF-8')
        CGI.parse(body).transform_values(&:first)
      end

      ...下略 compute_check_mac_value

    end
  end
end
```

其實只是修改網址跟換一下參數，查詢發票明細就完成了。現在讓我們來測試一下，測試流程如下：
- 產生測試參數
- 從參數中擷取出訂單編號 relate_number
- 使用參數開立一張發票
- 使用訂單編號做查詢

```ruby
params = Ecpay::Invoice::CreateService.new.send(:sample_params)
relate_number = params["RelateNumber"]
Ecpay::Invoice::CreateService.new(params).run
Ecpay::Invoice::FindService.new(relate_number).run
 => {"IIS_Award_Flag"=>"", "IIS_Award_Type"=>"", "IIS_Carruer_Num"=>"", "IIS_Carruer_Type"=>"", "IIS_Category"=>"B2C", "IIS_Check_Number"=>"", "IIS_Clearance_Mark"=>"", "IIS_Create_Date"=>"2018-07-19 17:14:46", "IIS_Customer_Addr"=>"", "IIS_Customer_Email"=>"service@5xruby.tw", "IIS_Customer_ID"=>"", "IIS_Customer_Name"=>"", "IIS_Customer_Phone"=>"", "IIS_Identifier"=>"0000000000", "IIS_Invalid_Status"=>"0", "IIS_IP"=>"118.163.124.163", "IIS_Issue_Status"=>"1", "IIS_Love_Code"=>"168001", "IIS_Mer_ID"=>"2000132", "IIS_Number"=>"FX30000167", "IIS_Print_Flag"=>"0", "IIS_Random_Number"=>"9234", "IIS_Relate_Number"=>"f633510627a2eddeea0c", "IIS_Remain_Allowance_Amt"=>"", "IIS_Sales_Amount"=>"1900", "IIS_Tax_Amount"=>"0", "IIS_Tax_Rate"=>"0.050", "IIS_Tax_Type"=>"1", "IIS_Turnkey_Status"=>"", "IIS_Type"=>"07", "IIS_Upload_Date"=>"", "IIS_Upload_Status"=>"0", "InvoiceRemark"=>"", "ItemAmount"=>"900|1000", "ItemCount"=>"3|2", "ItemName"=>"衣服|褲子", "ItemPrice"=>"300|500", "ItemRemark"=>"", "ItemTaxType"=>"", "ItemWord"=>"件|件", "PosBarCode"=>"10708FX300001679234", "QRCode_Left"=>"FX3000016710707199234000000000000076c0000000053538851KIjD/jYtIwQXOONltIuFzA==:**********:2:2:1:", "QRCode_Right"=>"**衣服:3:300:褲子:2:500","RtnCode"=>"1", "RtnMsg"=>"查詢發票成功", "CheckMacValue"=>"20F155F2A8CDB994B4EB7B949D98FD9E"}
```

查詢發票成功！值得一提的是發票號碼的 key 變成 `IIS_Number` 了呢～由於篇幅的關係，今天就講到這裡。

因為本次的教學其實根本沒講到 Rails，所以你們要自己實作自己的 Controller 和 Model，並且傳遞正確的參數進入 Service。記得如果想要使用正式環境，就要修改Url、HashKey、HashIV 那些東西哦～重構什麼的自己來齁～

對了，在綠界的測試環境裏只能使用綠界的測試帳號，所以你無法使用你自己註冊的綠界帳號去打綠界的測試環境。你問我「其實綠界有提供 SDK，為什麼你不用？」嗯... 這個不好說阿，但這是一個很棒的問題。

還有，我把程式碼都放在 [github](https://github.com/etrex/ecpay_invoice_demo) 上了，想要的話就拿去吧。

---

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

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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

我把資料庫放到 Google Sheets 上了

不可不知的流量追蹤術！Google Analytic 追蹤碼及 Facebook Pixel 攻略

與你每天擦身而過的 Enumerator

成為準時下班的 PM 吧！高效率工作的方法

整合 reCAPTCHA 到你的專案上，搭配 rails、devise

PM 的技能欄，你知道該點哪些嗎？

你看過 Elixir 嗎？如果沒有，現在讓你看看！

Rails 串接 Ecpay 電子發票，就是這麼簡單

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款