五倍券 Banner - 首頁 - desktop

五倍券 Banner - 首頁 - mobile

五倍的五倍券優惠活動

Blogs - Sidebar


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

# ngrok 服務簡介

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

（圖片來源: ngrok 官網）

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

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

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

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

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

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

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

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

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

這裡要準備的材料有：

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

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

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

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

## nginx 的設定

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

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

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

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

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

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

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

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

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

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

## 如果要 https 怎辦

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

# nginx revers proxy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

造成個錯誤的原因是：

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

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

```ruby
class YourController < ApplicationController
  before_action :puts_request

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

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

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

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

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

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

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

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

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

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

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


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

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

大家好，我是卡米哥。今天要教大家怎麼用 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 的技能欄，你知道該點哪些嗎？


大家好，一年（其實是 16 個月）一度的 [RubyConf Taiwan 2019](https://2019.rubyconf.tw) 即將在兩個月後的 7.26 - 27 日於張榮發國際會議中心召開，作為活動的主辦人與議程委員，在此想跟大家介紹一下本次大會的主題。

### Keynote：

今年一共有 4 場 Keynote，講者分別是

1. Matz (@yukihiro_matz)：未定
1. Aaron Patterson (@tenderlove)：The View Is Clear from Here

	繼 2015 再次來台的 @tenderlove 這次預定發表的是和 Rails view engine 相關的題目，當我們在下 `render` 的時候，究竟 Rails 是怎樣生成最終的 html，這中間到底經過了哪些步驟，以及歷代 Rails 中又進行了哪些優化，這些都是在我們寫 Rails 進行效能優化調整來說非常需要了解的知識，也讓我想到前年 Taipei.rb 羅泓武發表的「[從原始碼了解 Rails template rendering](https://www.facebook.com/ruby.taiwan/videos/10155077911778937/)」這個主題。

1. c9s (@c9s)：Virtual Machines: their common parts and what makes them special

	終於讓我邀請到 c9s 了（感動），其實 RubyConf Taiwan 一直以來都有請其他語言的強者大大交流的慣例，這次 c9s 將為我們帶來對近年流行的腳本語言之間設計的差異的主題，也可以參考他之前在 FB 上的 [PO 文](https://www.facebook.com/photo.php?fbid=10156401137051715&set=a.120173376714&type=3&theater)。

1. Samuel Williams (@ioquatix)：The Journey to One Million

	可能對國內 Rubyist 來講不太廣為人知的 Samuel 除了是 Ruby Committer ，也是新一代 non-block I/O 庫 [async](https://rubygems.org/gems/async) 以及在此之上建立的新 Web Application Server [falcon](https://rubygems.org/gems/falcon) 的作者，預計他將會在 Keynote 中演講 Fiber 的運用方式以及展示如何用 Falcon 達成 100k 同時 Websocket 連線的紀錄，大家也可以先看一下他在 RubyKaigi 的議程 [slide](https://www.codeotaku.com/journal/2018-11/fibers-are-the-right-solution/index) 了解一下。

### 一般議程：

今年從將近 70 份的投稿中選出了 20 份的一般議程，以下是基於個人理解（與偏見）對各議程主題的介紹。

1.	蒼時弦也：從 Enumerator 看 Ruby 的迭代器

	講者從原始碼開始一步步了解我們在 Ruby 每天使用的 `each` 方法並試圖用 Ruby 實作出來，像這樣的理解過程除了增進對 Ruby 的理解外，也可以應用在我們日常的開發上，像是什麼場合要對 ActiveRecord 物件集合（collection）進行一般陣列操作，怎樣的方式可以減少 N+1 查詢等，當我們比較了解背後實作方式的時候，就能在不同場合下做出相對較優的判斷，所以這就是我們需要理解實作方式的理由，也是這個主題的價值。

1.	Joel Hawksley：Rethinking the View Layer with Components

	講者是 GitHubber，主題是講者在改善 GitHub 本體的過程中，發現 Rails 的 view 功能雖然好用而且功能強大，不過同時也造成了測試不好寫、跑的慢（因為只能整合測試）以及幾乎無法有 Test Coverage 等問題；在無法將架構改成 React 或 Vue.js 等前後端分離的前提下，借鏡 React 的 component 概念將之實作在 Rails 的 ActionView 上的過程，同時這個實作也已經應用在部份 GitHub 的功能上。

1.	Jenna Blumenthal：Event Sourcing for Everyone

	這個主題是在講述作者從零開始建立一組名為「Event Sourcing」的 Service Object 機制來將改變物件狀態 = 資料內容的變化，以及追蹤資料變動的紀錄，甚至可以從紀錄還原資料操作等；在近年 Ruby 圈的開發模式逐漸傾向 Service Object 的趨勢下，這個主題適合想要學習建立 Service Object 思維模式的開發者參考。

1.	Kuniaki Igarashi：Road to white mages

	延續上一次講者在 RubyConf Taiwan 2015 的[演講](https://www.youtube.com/watch?v=VVain__fKm8&list=PLhKZ4RWngmpDVKgAH_p_X7gtLSGsvmMJj&index=8)，這次將主題放在如何用 Ruby 內建的功能 TracePoint 或是外部工具 DTrace 等去搜尋「這個 method 是哪裡來的」之類的問題進而幫助我們開發與 debug。

1.	Shinsuke Imai：Reliable distribution system with Ruby x IoT

	講者是日本知名線上食譜社群 Cookpad 的工程師，講題是由講者在 Cookpad 建立讓消費者向小農直接購買食材並集運到指定據點的服務[Cookpad-Mart](https://cookpad-mart.com/) 時，為了解決「使用者從網路上下單，在食材生產者端列印購物清單」需求而建立了一組讓小農端可以隨時自動列印購買清單的器材組，其中包括熱感應印表機、Raspberry Pi 以及無線路由器等，並使用 CRuby 建立了可以自動列印、控管分佈在不同小農家的這些服務組件的程式，和敝司自產的開源 IOT Framework -- [Tamashii](https://tamashii.io/) 有異曲同工之妙；雖然講者也曾在其它場合[分享](https://speakerdeck.com/shinsuke_imai/reliable-label-printer-system?slide=17)過相關主題，不過這次將會是第一次從技術面出發的分享。

1.	Yuji Yokoo：Developing Dreamcast games with mruby

	主題是在研究如何 hack 20 多年前發售的 Dreamcase（DC）主機上用 mruby 寫出可以執行的遊戲，過程包括建構針對 DC 主機的 CPU cross-compiling 環境、從模擬器到用 serial cable 傳輸程式到主機等等的過程；身為一位懷舊電玩愛好者對這個主題不可能不興奮，講者也釋出了這部[影片](https://vimeo.com/335686570)展示在 DC 上給大家參考。

1.	Vipul A M：What's new in Rails 6?

	由於正逢 Rails 6 發佈，因此有一個個這樣的主題也是非常合理的，講者本人也是第 27 名的 Rails Contributor 與 Committer。

1.	The future of library dependency management of Ruby：Shibata Hiroshi

	在 Ruby 2.6 中，Ruby Core Team 正式的把 Bundler 合併到 CRuby repo，作者是主導這一過程的 Ruby Committer，同時近期在 Bundler 1 -> 2 的過程中因為相容性問題導致許多人（包括我）遇到一些困擾，例如 Gemfile 突然「被升級」之類的狀況，講者將在此次講題中說明這些事件的原因、如何應對以及相關的未來計劃等等。

1.	Delton Ding：Protect Your Copyrighted Ruby Code in Distribution

	我們都知道 Ruby 是一個直譯型語言（Interpreted Language）並且具有像 meta-programing 之類執行期動態加載的相關功能，因此無法像編譯型語言可以用二進位執行檔方式散佈執行程式，作者試圖找出一套能讓 Ruby 程式在某些前提下可以安全地散佈的方案。

1.	Bernie Chiu：Let's Scale Ruby Applications with Love

	作者分享在 Shopline 時調整效能達成部份 API Endpoint 有一倍以上效能提升的過程，對於 Rails 效能調整有興趣者必看！

1.	Matias Korhonen：Ruby like it's 1995

	這其實是個相對偏趣味性的題目，作者嘗試用現在的硬體來編譯 1995 年誕生的 CRuby 0.95。

1.	Charles Oliver Nutter：Scalable Applications with JRuby

	講者是 2014 的 Keynote，實質的 JRuby 之父，今年以一般講者的身份登台，在台灣雖然使用 JRuby 的人應該不會很多，不過以個人經驗來說 JRuby 其實是效能非常好，可以突破 GVL 限制又可以使用幾乎所有 Java Lib 的好東西（除了啟動速度以外），講者將講解近年 JRuby 在效能面與相容面的改善，以及未來計劃等。

1.	Wen-Chuan Lin：開拓者們建立鐵道的辛酸血淚史 Building Rails with Trailblazer, The Good, Bad and Ugly. 

	雖然大家幾乎已經把 Ruby 和 Rails 綁在一起，但其實 Trailblazer 也是近年非 Rails Web Framework 裡的後起之秀，講者所在的公司也是極少數在真實產品環境中應用 Trailblazer 的例子，相信這場分享能為大家帶來新的啟發。

1.	John Lin：Automatic Differentiation for Ruby

	這是一個數學與 AI 的題目，也是講者在 RubyKaigi 的 [LT](https://youtu.be/B2NTL_J62JE?t=670) 的延伸。

1.	Soutaro Matsumoto：Ruby with types

	近期 Ruby 圈最重要的新聞莫過於就是即將在 Ruby 3 登場的 type checker 功能，講者作為主導此一計劃的 CRuby Committer，將為大家帶來此一計劃的進程以及 3 大 type checker 實作的解說。

1.	Samuel Giddins：Making CocoaPods Fast(er) with Modern Ruby Tooling

	有在寫 iOS 的人應該都有在使用 CocoaPods 這個等同 Bundler 之於 Ruby 的工具，作者作為 CocoaPods 的 Lead Developer 將在這次演講中分享 CocoaPods 團隊在近年讓 CocoaPods 安裝單一套件的處理時間從 3 分鐘變成 90 秒的改善過程。

1.	Tse-Ching Ho：Suit up for frontend and backend development

	敝司的與專案開發的客人洽談時，常常會聽到「Rails 不適合前後端分離架構」的說法，但事實上我們已經有數個成功使用前後端分離的專案了；講者澤清為敝司長年的盟軍與戰友，具備非常充份的 Rails 前後端分離的實戰經驗，內容會偏重在如何建立一個可立即運用在日常開發工作上的 Rails 前後端分離的專案架構，對於這方面有興趣的人務必要來聽聽看。

1.	Li-Fong Lin：Running and observing Rails application on GKE

	講者為國內最大 GCP 代理商 iKala 的 Engineering VP，iKala = LiveHouse 具有多年直播平台維運開發經驗，這次分享將帶來如何在 GCP 與 GKE 平台上用最適合的方式建立 Rails App 用的 Docker Image、k8s 設定與使用 GCP 的 Profiling 功能調校效能等實戰經驗，對 GCP 有興趣或正在使用的朋友不可錯過。

1.	Luka Huang：Using AWS Lambda with Ruby on a large-scale system

	自從 AWS 在去年底宣佈 Lambda 支援 Ruby 之後，可說是為 Rubyist 們開啟了一個新世界，講者基於把上線產品加入 Lambda 的實戰經驗，講解我們該在怎樣的場合以及如何在 AWS Lambda 上寫 Ruby 應用，可說是非常熱門的主題。

1.	Kazuma Furuhashi：Charty - Visualizing your data in Ruby

	這場講題由獲得了 [Ruby Association Grant 2018](https://www.ruby.or.jp/en/news/20181106) 獎項的圖表生成工具 [Charty](https://github.com/red-data-tools/charty) 的作者帶來關於為何製作、如何設計以及實戰應用這套工具等議題，其實 Ruby 的世界一直不乏圖表產生的工具，不過功能往往不太全面，這套基於 Python matplotlib 的工具看起來完成度非常高，作者也將提及真實世界的應用範例，像這類結合異種語言產生的工具或新語言也是近年 Ruby 圈的發展趨勢之一，值得大家關注。

### 結語：

在 RubyConf Taiwan 即將邁入第一個 10 年的當下，我們來總結一下今年的選稿方向：

1.	「第一手」講者的重要性

	大家可以發現近年的 RubyConf Taiwan 常常會出現許多具有 Ruby / Rails Committer 身份的講者，或是某些知名開源專案核心作者，第一手資訊的人在會場對大家的意義就是：當你有問題時可以直接問他，甚至可能現場就幫你改好了，這也是所謂 CDD（Conference-Driven Development）一詞的意義。

1.	Ruby 3x3

	由於 Matz 訂下了 Ruby 3x3（3.0 版要比 2.0 快 3 倍）的目標，因此近年的 Ruby 發展計劃與 RubyKaigi 的主題也都圍繞著這個方向進行，繼去年的 JIT 之後，今年又推出了 type checker 與 Bundler 整合等發展方向，幸運的是剛好這些方向的主持者都有出現在今年的議程上，讓大家能在台灣獲得這些第一手訊息。

1.	Happy Hacking

	除了工作之外，我們也可以看到一些偏向趣味化的主題，讓大家在工作之餘也能用 Ruby 玩一些有趣的東西。

讓我們期待兩個月後的大會吧！

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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

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

我把資料庫放到 Google Sheets 上了

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

與你每天擦身而過的 Enumerator

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

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

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

RubyConf Taiwan 2019 會前議程搶先看

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款