五倍直播間

Blogs - Sidebar

post-調效 Puma 以打造零 Downtime 的服務

調效 Puma 以打造零 Downtime 的服務


在開發聊天機器人的過程中，可以透過 [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 服務


 > 本文內容主要參考自 http://guides.rubyonrails.org/engines.html

本文會以下列三個段落來介紹 Rails Engine 的基礎知識及用法

* Rails Engine 是什麼?
* 打造一個 Rails Engine
* 在主程式中使用 Rails Engine

### Rails Engine 是什麼？

Rails Engine 主要的目的是透過簡單易用的程式介面 (interface) 來提供主程式 (Host) 額外功能，筆者認為可以把主程式 (Host) 想像成原型機器人，Rails Engine 則可視為具有不同能力的裝甲，只要將具有特殊能力的裝甲，適當地裝備 (hook) 在原型機器人身上，就可以組裝出具有各式能力的裝甲機器人，而程式介面 (interface) 就是相同的裝甲可裝載在不同機器人上的關鍵，當然組裝不好時也會造成效能不佳或容易故障的問題，亦或是選用設計不佳的裝甲 (Rails Engine) 也可能影響原機體 (Host) 的正常運作。

由此可看得出來裝甲之裝載並非是絕對必要的，如果你的團隊有足夠的能力、時間及資源，當然可以將所需要的功能直接「內建」在原型機器人裡，所以裝甲的選用與團隊的現況有直接的關係。

雖然每個裝甲都有既定的能力，但這並非完全不能改動的，技術人員仍然可以依照實際的需求，調整強化 (override) 裝甲原本的行為，使得改良過後的裝甲更為適用，這是因為原型機器人 (Host) 的優先權高於機甲 (Rails Engine) 的關係。

這邊的原型機器人(Host/ a rails application) 是指透過 Rails 框架所建造出來的，而原型機器人基本上就是一個強化版本 (a supercharged engine)，因此 Rails applications 與 Rails Engines 且有很高的共通性，Rails engines 亦可看成是小型的應用程式 (miniature applications)。

## 打造一個 Rails Engine

要打造一個 Rails Engine 很簡單，只要透過 `rails plugin new` 指令就可以產生一個 engine 的雛形。 這邊要特別說明的是 Engines 與 Plugins 是很相似的，相同的是他們都有一個 `lib` 資料夾，也都是透過 `rails plugin new` 指所產生的，不同是當我們提及 engine 時，通常指的是一個完整的 plugin (full plugin)，需要在產生時傳入 `--full` 或 `--mountable` 參數。

指令如下:

* `rails plugin new YOUR_ENGINE_NAME --full` 或
* `rails plugin new YOUR_ENGINE_NAME --mountable`

下列比較表將以 **blorgh** 做為 engine name，主要以 `--full` 與 `--mountable` 參數所產生的 engines 為比較基準

|   |NO OPTION|`--full` | `--mountable` |
|---|--------|---------|---------------|
|app/ 資料夾|╳|〇|〇|
|bin/ 資料夾|〇|〇|〇|
|config/ 資料夾|╳|〇|〇|
|lib/ 資料夾|〇|〇|〇|
|test/ 資料夾|〇|〇|〇|
|config/<br>routes.rb|╳|Rails.application.routes.draw do<br>end|**Blorgh::Engine**.routes.draw do<br>end|
|lib/<br>blorgh/<br>engine.rb|╳|module Blorgh<br>&nbsp;&nbsp;class Engine < ::Rails::Engine<br>&nbsp;&nbsp;end<br>end|module Blorgh<br>&nbsp;&nbsp;class Engine < ::Rails::Engine<br>&nbsp;&nbsp;&nbsp;&nbsp;**isolate_namespace Blorgh**<br>&nbsp;&nbsp;end<br>end|
|app/<br>helpers/<br>**blorgh**/<br>application_helper.rb|╳|╳|module Blorgh<br>&nbsp;&nbsp;module ApplicationHelper<br>&nbsp;&nbsp;end<br>end|
|app/<br>views/<br>layouts/<br>**blorgh**/<br>application.html.erb|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application.js|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application.css|╳|╳|〇|
|app/<br>javascripts/<br>**blorgh**/<br>application_controller.rb|╳|╳|module Blorgh<br>&nbsp;&nbsp;class ApplicationController < ActionController::Base<br>&nbsp;&nbsp;&nbsp;&nbsp;protect_from_forgery with: :exception<br>&nbsp;&nbsp;end<br>end|
|test/<br>dummy/<br>config/<br>routes.rb|Rails.application.routes.draw do<br>end|Rails.application.routes.draw do<br>end|Rails.application.routes.draw do<br>&nbsp;&nbsp;**mount Blorgh::Engine => "/blorgh"**<br>end|

### 實作即將開始
### 這個 Rails Engine (blorgh) 將提供主程式 (host) 一個基本的部落格功能:

* 文章列表
* 新增文章
* 編輯文章
* 刪除文章
* 留言評論

> 此範例取自 [Getting Started with Engines](http://guides.rubyonrails.org/engines.html)

> 請使用 Rails 5.1+ 版本

#### Step1. 產生一個 mountable 的 rails engine 雛形

```ruby
$ rails plugin new blorgh --mountable
```

Engine 產生成功後，請切換到 blorgh 根目錄，找到 blorgh/blorgh.gemspec 檔案，將含有 `TODO` 的資訊進行修改，不然在後續的步驟中會出現 `blorgh/blorgh.gemspec is not valid. Please fix this gemspec. (Gem::InvalidSpecificationException)
The validation error was '"FIXME" or "TODO" is not a description'` 的錯誤訊息。

```ruby
# blorgh/blorgh.gemspec
# 這邊只是用來說明用的範例，請依照實際情況填寫

Gem::Specification.new do |s|
  s.name        = "blorgh"
  s.version     = Blorgh::VERSION
  s.authors     = [""]
  s.email       = [""]
  # 修改前
  # s.homepage    = "TODO"
  s.homepage    = "http://example.com"

  # 修改前
  # s.summary     = "TODO: Summary of Blorgh."
  s.summary     = "Summary of Blorgh."

  # 修改前
  # s.description = "TODO: Description of Blorgh."
  s.description = "Description of Blorgh."
  s.license     = "MIT"

  s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]

  s.add_dependency "rails", "~> 5.2.0"

  s.add_development_dependency "sqlite3"
end
```

#### Step2. 快速產出文章的 Scaffolding (CRUD)

```ruby
# engine 根目錄
$ bin/rails generate scaffold article title:string text:text
```

在 Engine 根目錄，輸入下列指令，執行 migration 以產生 blorgh_articles 資料表

```ruby
# engine 根目錄
$ bin/rails db:migrate
#=> 執行完畢會產生 blorgh_articles 資料表
```

請切換目錄到 `test/dummy` 底下，鍵入 `rails s` 啟動 rails server，在瀏覽器中輸入 http://localhost:3000/blorgh/articles 可看到具有CRUD功能的文章管理畫面，此時你應該已經可以新增、編輯、刪除文章，並在新增文章後可以看到文章列表。這邊的 test/dummy 其實是一個簡化版的 rails application，可讓我們在開發 engine 的時候用來測試之用，模擬日後 Engine 被掛入主程式的行為。

#### Step3. 指定 engine 首頁路徑

```ruby
# 在 config/routes.rb
Blorgh::Engine.routes.draw do
  resources :articles
  root to: "articles#index"
end
```

重啟 rails server 後，瀏覽 http://localhost:3000/blorgh 將會顯示文章列表頁面

#### Step4. 產生評論 (comments) 資源

```ruby
# engine 根目錄
$ bin/rails generate model Comment article_id:integer text:text

# engine 根目錄
$ bin/rails db:migrate

# => 達行完畢後會產生 blorgh_comments 資料表
# 這邊異動的是 test/dummy app
```

為了在文章下面顯示評論內容，需要在 app/views/blorgh/articles/show.html.erb 中的 `<%= link_to 'Edit'` 之前加上下列程式碼

```erb
<h3>Comments</h3>
<%= render @article.comments %>
```

由於一篇文章 (article) 可以有多則評論 (comments)，因此需要在 article model 中定義 `has_many :comments` 關聯

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ApplicationRecord
    has_many :comments
  end
end
```

#### Step5. 加入可新增評論的表單

為了要可以新增評論，我們需要一個表單，在 app/views/blorgh 目錄中建立一個 comments 資料夾，並建立一個 _form.html.erb 的檔案，表單的程式碼如下

```erb
<h3>New comment</h3>
<%= form_with(model: [@article, @article.comments.build], local: true) do |form| %>
  <p>
    <%= form.label :text %><br>
    <%= form.text_area :text %>
  </p>
  <%= form.submit %>
<% end %>
```

將表單放在文章評論 `<%= render @article.comments %>` 的下方，要修改的檔案是 app/views/blorgh/articles/show.html.erb

```erb
<%= render "blorgh/comments/form" %>
```

我們已經在 model 中定義了關聯，還需要定義對應文章-評論的巢狀路由 (Nested Resources)，在 config/routes.rb 中修改路由如下

```ruby
# config/routes.rb
Blorgh::Engine.routes.draw do
  resources :articles do
    resources :comments
  end

  root to: "articles#index"
end
```

有了 model，也有了路由，我們還需要對應新增 comment 所需的控制器 (controller)，可透過下列指令建立一個空的控制器

```ruby
# engine 根目錄
$ bin/rails g controller comments
```

找到剛產生的控制器檔案 app/controllers/blorgh/comments_controller.rb，定義 create 方法，這個方法用以對應新增評論表單中的 POST 請求，程式碼如下

```ruby
# app/controllers/blorgh/comments_controller.rb
def create
  @article = Article.find(params[:article_id])
  @comment = @article.comments.create(comment_params)
  flash[:notice] = "Comment has been created!"
  redirect_to articles_path
end

private
  def comment_params
    params.require(:comment).permit(:text)
  end
```

最後一步我們需要在 app/views/blorgh/comments/ 新增一個 _comment.html.erb 用做評論呈現的畫面，這個畫面對應的是先前加入  app/views/blorgh/articles/show.html.erb 中的 `<%= render @article.comments %>` 部份，畫面所需的程式碼如下，代表的是「一則評論」的樣子

```erb
<%= comment_counter + 1 %>. <%= comment.text %>
```

目前 app/views/blorgh/articles/show.html.erb 中的程式碼應如下所示

```erb
<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Text:</strong>
  <%= @article.text %>
</p>

<h3>Comments</h3>
<%= render @article.comments %>
<%= render "blorgh/comments/form" %>

<%= link_to 'Edit', edit_article_path(@article) %> |
<%= link_to 'Back', articles_path %>
```

現在再次瀏覽任一篇文章時，應該可以在下面看見一個表單，輸入評論後按下 Create Comment，就可以看到評論已經被新增並顯示在該文章的下方了。

完成上述的步驟便可以完成一個可提供發文與評論留言的簡單部落格 Rails Engine

## 在主程式中使用 Rails Engine

首先我們先用 Rails 建立一各新的 Rails application (unicorn)

```ruby
$ rails new unicorn
```

#### Step1. 安裝 Engine

在主程式中使用 Rails Engine 的方式很簡單，你應該也不會太陌生，只要找到主程式的 Gemfile 檔案並加入下列描述即可

```ruby
# 由於我們開發的 Rails Engine 是在本機中，因此要使用 path 指定所在路徑
gem 'blorgh', path: '../the-abc-of-rails-engines/blorgh'
```

接著記得下在主程式的根目錄下 `bundle install` 安裝我們的 engine

#### Step2. 掛載 Engine
然後我們還需要在主程式的 config/routes.rb 中將 engine 掛進來，如此主程式才可以存取 engine 中的路由

```ruby
# config/routes.rb
# at: "/可依個人需求喜好命名"
mount Blorgh::Engine, at: "/blog"
```

#### Step3. 複製 Engine 的 migration 檔案
此指令可重覆執行，不會有重複複製的副作用(用以匯入 Engine 的 migration 檔案)

```ruby
# 在主程式的根目錄
$ bin/rails blorgh:install:migrations

# 會出現下列訊息，檔案時戳會略有不同
# => Copied migration 20180719154413_create_blorgh_articles.blorgh.rb from blorgh
# => Copied migration 20180719154414_create_blorgh_comments.blorgh.rb from blorgh
```

#### Step4. DB migrate

```ruby
# 在主程式的根目錄執行 migrate
$ bin/rails db:migrate

# => 產生 blorgh_articles 與 blorgh_comments 資料表
```

現在在主程式的根目錄中使用 `rails s` 指令啟動伺服器，並瀏覽 http://localhost:3000/blog 應該可以看見文章頁面，你此時應該已經可以新增、刪除、修改文章，還可以在文章下方新增評論了。

*如果沒有要針對 Engine 的既有行為做調整，基本上到這邊就可以告一個段落了。*

接下來要討論是如何讓 Engine 使用主程式所定義的類別，而為了滿足這個需求，我們還需要調整 Engine 最初的設計，這邊希望達成的主要目的是希望可以為文章增加作者的資訊，而這個「作者」類別是具有彈性，將由主程式來進行定義，也就是說在這個調整之後，要使用這個 Engine 的主程式，一律需要告訴 Engine「作者」代表的是主程式中的哪一個類別。

*文章與評論由 Engine 負責定義，作者則交給「主程式」來定義*

#### Step5. 在 Engine 中提供可由主程式定義「作者」類別的方法

修改 lib/blorgh.rb 的 Blorgh module 中加入下列程式碼

```ruby
# blorgh/lib/blorgh.rb
module Blorgh
  # 此類別存取子將開放給主程式定義「作者」類別之用
  mattr_accessor :author_class

  # 覆寫原本的 author_class getter 方法，使回傳值為常數物件
  def self.author_class
    @@author_class.constantize
  end
end
```

#### Step6. Article 的作者

在 article (app/models/blorgh/article.rb) 定義與作者的關聯及參照來源

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ActiveRecord::Base
    # ... 略
    # 由於 Blorgh.author_class 會回傳常數物件，應轉型為字串
    belongs_to :author, class_name: Blorgh.author_class.to_s
    # ... 略
  end
end

```

#### Step7. 新增 author_id 到 article 中的 migration 檔案

```ruby
# engine 根目錄
$ bin/rails g migration add_author_id_to_blorgh_articles author_id:integer

# engine 根目錄
$ bin/rails db:migrate

# => 新增欄位 author_id 到 blorgh_articles 資料表
# 這邊異動的是 test/dummy app
```

#### Step8. 修改 article model 如下

```ruby
# app/models/blorgh/article.rb
module Blorgh
  class Article < ActiveRecord::Base

    # 新增 author_name 欄位供暫時存取之用
    attr_accessor :author_name

    has_many :comments
    belongs_to :author, class_name: Blorgh.author_class.to_s

    # 透過這個 callback 建立/修改文章所對應的作者 (Blorgh.author_class)
    before_validation :set_author

    private

    def set_author
      self.author = Blorgh.author_class.find_or_create_by(name: author_name)
    end
  end
end

```

#### Step9. 新增作者名稱欄位
在 Engine 中的文章表單中 (app/views/blorgh/articles/_form.html.erb) 的 :title 欄位前新增作者名稱欄位

```erb
  <div class="field">
    <%= form.label :author_name %><br>
    <%= form.text_field :author_name %>
  </div>
```

#### Step10. 允許 :author_name 參數的傳遞
在 Engine 的 app/controllers/blorgh/articles_controller.rb 中的私有方法 article_params 允許 :author_name 參數欄位的傳入

```ruby
# app/controllers/blorgh/articles_controller.rb
  def article_params
    params.require(:article).permit(:title, :text, :author_name)
  end
```

#### Step11. 顯示作者資訊
於 Engine 的 views/blorgh/articles/show.html.erb 中，在 "Title" 的上方加入作者的資訊

```erb
<p>
  <b>Author:</b>
  <%= @article.author&.name %>
</p>
```

#### Step12. 用 test/dummy 來測試

```ruby
# blorgh/test/dummy
# 新增 User 類別
$ rails g model user name:string

# blorgh/test/dummy
# 執行 db:migrate
$ bin/rails db:migrate

# => 新增 users 資料表

```

#### Step13. 定義「作者」

在 test/dummy/config/initializers 中新增一個 blorgh.rb 的檔案，並加入下列程式碼指定「作者」的類別

```ruby
# 這邊一定要使用「字串型態」的類別名穩，不可直接類別物件來定義，不然 Rails 會試圖去載入該類別並參考與其對應的資料表，如果此資料表還不存在時，將會造成不必要的問題
Blorgh.author_class = "User"
```

一樣透過 `rails s` 啟動 rails server，打開瀏覽器瀏覽 [http://localhost:3000/blorgh](http://localhost:3000/blorgh)
現在新增文章時應該可同時加上作者資訊，成功新增後亦可顯示作者資訊，但若要正常地編輯作者資訊，則還需要調整一下 Engine 裡 articles_controller 中 edit 方法，完整程式碼請參閱[這邊](https://github.com/spartchou/the-abc-of-rails-engines-engine/tree/master/practice/blorgh)。

如果可以讓 test/dummy 運作正常，那麼在[主程式中只要實作 Step12 及 Step13](https://github.com/spartchou/the-abc-of-rails-engines-main-app)，就可以達到一樣的效果了。

---

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


post-The ABC of Rails Engines / cover

The ABC of Rails Engines

大家好，我是卡米哥。今天要教大家怎麼用 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) 課程唷 ❤️️
>


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

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

調效 Puma 以打造零 Downtime 的服務

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

The ABC of Rails Engines

我把資料庫放到 Google Sheets 上了

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

與你每天擦身而過的 Enumerator

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

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

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

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

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款