分類: 2020鐵人賽

【第 30 天】總結：WordPress 遇上 Chatbot，像極了愛情

就這樣終於成功地將這三十天的文章都寫完了！明天正好就是連假，可以好好休息了(應該吧)。

 

前面二十天是一開始的蹲馬步學習外掛基礎，我們學會了，為什麼要開發 WordPress 外掛

什麼是 WordPress 外掛？為什麼開發自己的 WordPress 外掛？

如何初始化外掛？

  1. 第一個 WordPress 外掛

什麼是 hooks ？怎麼去用 hooks？

  1. 聊聊 WordPress 的 Action Hooks
  2. 聊聊 WordPress 的 Filter Hooks
  3. WordPress 啟用、停用、刪除外掛

如何在 WordPress 上面 debug？

  1. WordPress 如何 Debug?
  2. WordPress 外掛開發者工具

如何使用 WordPress 的 short code？

  1. WordPress 的 Shortcode

如何去改變 WordPress 的後台選單？

  1. 管理選單
  2. 如何修改 WordPress 的後台設置選項

操作 WordPress 的一些資料方法

  1. 如何管理 WordPress metadata
  2. 自定義 WordPress 文章類型
  3. 自定義 WordPress 分類方法
  4. WordPress 操作資料庫

處理用戶的權限：

  1. WordPress 用戶角色

還會透過內建函式打 API

  1. WordPress 的 HTTP API

在 WordPress 操作 JavaScript、Ajax 和 jQuery

  1. JavaScript、Ajax 和 jQuery 應用到 WordPress

也學會了怎麼排程

  1. WP Cron

最後是上架

  1. 上架第一個外掛到 WordPress.org

而後面的十天真的自己刻出一個會動的外掛。其實網路上也有許多 LINE Notify 相關的外掛，例如：

  1. WP LINE Notify
  2. LINE Auto Post

都是非常優秀的外掛，我們也可以直接拿來用，不過這樣一步一步做，才真正讓我學到許多 WordPress 的知識。也很感謝在這過程中，另一個 Eric 給我各種亂問問題XDD

不過，就如同我在前面說過的，無論是 WordPress 外掛開發，或者是學習其他任何知識都是，都不會是簡單 30 天就能學會所有知識，例如說光是一個 hook 就可以講得很深，絕對不是像我這樣一言兩語就能說完的！所以這 30 天所學的可能連基礎都稱不上，學習 WordPress 的這條路還要繼續下去，所以，我最後會把這次開發的外掛，整理到這個 repository 上面： https://github.com/eric0324/wp-lotify ，之後也會不定期更新，歡迎大家上來按星星，鞭小弟的 code。

最後…工商一下：

如果你喜歡 WordPress ，歡迎來參加 WordPress 小聚

如果你喜歡 chatbot ，歡迎來參加 chatbot 線下小聚

也歡迎來我的部落格跟我交流，我們明年見。

閱讀全文 【第 30 天】總結：WordPress 遇上 Chatbot，像極了愛情

【第 29 天】在這些 WordPress Hooks 放在 LINE Notify

在昨天，我們建立了一個 private function 來發送 LINE Notify 訊息通知。

 

在【第 26 天】我們會用到哪些 WordPress hooks？ ，我們也試著找出我們想要用、可能要用的 WordPress hooks。今天我們來試著為這些 hooks 掛上 LINE Notify 訊息通知。

在這之前，先附上昨天寫好的 private function ，方便大家參考：

private function line_send_notify($text) {
    $request_params = array(
        "headers" => "Authorization: Bearer {$this->options['token']}",
        "body"    => array(
            "message" => "{$text}"
        )
    );

    $response = wp_remote_post('https://notify-api.line.me/api/notify', $request_params);
}

如果我們要在建立文章後發送通知，就這樣寫就可以了：

add_action('save_post', 'line_send_notify');

亦或者，我們可以透過外掛提供的 hooks 去做事情，比如說訂單通知：

add_action('woocommerce_checkout_update_order_meta', 'line_send_notify');

保險起見，我們還要來先檢查一下，是否存在這個外掛：

if(is_plugin_active('woocommerce/woocommerce.php'))

會變成這樣：

if(is_plugin_active('woocommerce/woocommerce.php')) {
    add_action('woocommerce_checkout_update_order_meta', 'line_send_notify');
}

為了讓提高程式碼的可維護性，我們把這些 add_action() 放在 __construct 中，會變成這樣


public function __construct()
{
    ...
    add_action('save_post', 'line_send_notify');

    if(is_plugin_active('woocommerce/woocommerce.php')) {
        add_action('woocommerce_checkout_update_order_meta', 'line_send_notify');
    }
    ...    
}

這樣應該就會收到通知囉！

閱讀全文 【第 29 天】在這些 WordPress Hooks 放在 LINE Notify

【第 28 天】在 WordPress 建立傳送 LINE Notify 函式

今天我們要來開始試著寫 LINE notify 這段。我們建立一個 private function 叫做 line_send_notify ，這個函式傳入了一參數叫做 $text：

 

這個函式一開始我們先建立 $request_params ，裡面有我們的 header 和 body。其中 header 包含了我們在 【第 27 天】取出 LINE Notify token ，所拿到的 token ，作為 Authorization 的 value。以及在 body 放入 一個 key 為 message ，value 為剛剛函式傳入的 $text 。

$request_params = array(
    "headers" => "Authorization: Bearer {$this->options['token']}",
    "body"    => array(
        "message" => "{$text}"
    )
);

還記得我們在 【第 15 天】WordPress 的 HTTP API ，了解了 WordPress 提供了許多好用的 HTTP API 讓我們可以對第三方發送 HTTP 請求，這時候就可以派出用場了

LINE 官方文件提到要推送 notify 的位址是 https://notify-api.line.me/api/notify ，並且是 POST 方法，然後要傳入剛剛建立好的 header 和 body：

$response = wp_remote_post('https://notify-api.line.me/api/notify', $request_params);

這樣我們的訊息應該就可以正常送出去了，完整的程式碼如下：

private function line_send_notify($text) {
        $request_params = array(
            "headers" => "Authorization: Bearer {$this->options['token']}",
            "body"    => array(
                "message" => "{$text}"
            )
        );

        $response = wp_remote_post('https://notify-api.line.me/api/notify', $request_params);
    }

順帶一提，如果想要確認一下我們 API 是否有打成功，我們還可以加入：

$response_code = wp_remote_retrieve_response_code($response);

然後用 if…else… 去判斷狀態碼：

if( $response_code == '200' ){
    // Do something...
} else {
    // Do something...
}

閱讀全文 【第 28 天】在 WordPress 建立傳送 LINE Notify 函式

【第 27 天】取出 LINE Notify token

現在 要給 LINE 的 token 也存好了，想要發送 notify 的地方大概也都有想法了，再來我們要試著取出 token 來做使用。

在前面，我們如果把 token 用成 options 的方式去儲存的話。我們可以複習一下 【第 10 天】如何修改 WordPress 的後台設置選項 裡面我們聊到，我們如何用 get_option() 函式來取得值。

 

 

所以說，我們要取得 token ，可以直接

get_option('token');

為了讓 PHP 代碼可以更簡潔，我們試著改寫成 __construct ：

public function __construct()
{
    $this->options = get_option('notify-for-line');
}

這樣我們可以用 $this->options 去取得屬性。換言之，要取用 token 會變成：

$this->options['token']

在這之前，我們還會檢查一下，是真的有 token 可以使用，我們還會多一個 if 邏輯去判斷，如下：

if (isset($this->options['token']) && $this->options['token'] !== '') {
    // do someting(e.g. get token)
}

兩個條件：

  1. token 不為 null
  2. token 不為空字串

再來，我們需要將取得的 token 組成一個字串：

"Authorization: Bearer {$this->options['token']}"

Bearer 是一種 token 方法，有興趣的話可以參考 OAuth 2.0 (RFC 6749) 裡頭清楚的定義了 client 如何去取得 access token 的方法，我這邊就不贅述了。

太好了，我們取得到之前存好的 token 了，接著我們明天要來送出通知了！

閱讀全文 【第 27 天】取出 LINE Notify token

【第 26 天】我們會用到哪些 WordPress Hooks？

今天我們來研究看看，WordPress 核心提供了哪些 hooks 可以拿來用？以及有些時候，我們想對其他外掛做點事情，該怎麼做？

 

WordPress 核心提供的 hook

WordPress 提供了我們兩個清單，分別是 filter hooks 和 action hooks 了！接著，我們還是找到woocommerce_checkout_update_order_metas ：

Filter Reference
Action Reference

我們可以很輕易快速的直接來這兩個清單找到我們可以使用的 hook 。舉例來說，我希望每次發文的時候送出 notify 通知，那我可能可以找到一個 action hook 叫做 save_post()。

他的下面會附上一段簡介，簡介如下：

Runs whenever a post or page is created or updated, which could be from an import, post/page edit form, xmlrpc, or post by email. Action function arguments: post ID and post object. Runs after the data is saved to the database. Note that post ID may reference a post revision and not the last saved post. Use wp_is_post_revision() to get the ID of the real post.

簡單來說就是，每當創建或更新文章或頁面的時候會運行。太好了，這就是我想找的 hook 。那我們就可以在這個 hook 上面掛上我們的 callback function 。

其他外掛提供的 hook

當然了，有的外掛也會提供 hook 給我們使用，所以我們也可以透過這種方式去插入我們自定義的 callback function 。沒錯！WordPress 的世界就是這麼方便。

舉例來說，我今天想要在 woocommerce 上面做訂單通知。我們可以試著上去外掛的官網上面找文件，於是我們找到了這份文件：Action and Filter Hook Reference，翻一翻可以找到 woocommerce_checkout_update_order_meta()，不過打開文件後，確實有點難理解要怎麼用它。

所以我這邊想分享一個網站： hookr.io。

進去後，我們可以直接打開外掛列表頁，這裡記錄了許許多多在 WordPress 上面提供的外掛，假設我們點了 Woocommerce，裡面就會有這個外掛所提供的所有filter hooks 和 action hooks 了！接著，我們找到 woocommerce_checkout_update_order_meta()。他就會告訴我們 description、他會用到哪些 parameters ，以及他的使用方法。整個很方便好用！

明天我們就要來把這個 hook 放上我們自己定義的 callback function 囉！

閱讀全文 【第 26 天】我們會用到哪些 WordPress Hooks？

【第 25 天】在 WordPress 後台取得 LINE Notify token

這幾天實在太忙了，所以文章有點沒時間寫。但是鐵人賽都快結束了，不可以輕易放棄啊！！！

在取得 LINE Notify token 之前，還記得我們在第 22 天的時候說過，使用者的瀏覽器在登入授權後，會透過 redirect_uri 所設定的網址發出 HTTP POST 要求嗎？所以我們要先來搞定取得 LINE 的 POST method 。

 

這部分要感謝也在參加鐵人賽的 Eric 桓桓 為我點通訣竅。

WordPress 接受 post method 的方法非常簡單，我們只需要在外掛的目錄下建立 get_post.php 就可以處理 post method 了，大概是這樣。

<?php 
    require_once('wp-load.php'); // add wordpress functionality
    $post = $_POST;

    if ( $something ) // security check
    // do something...
?>

接著透過 yourdomain.com/plugin_name/get_posts.php ，就可以發送 post 請求。這也意味著我們要去 LINE Notify 修改一下我們的 redirect_uri 到 https://yourdomain.com/plugin_name/get_posts.php。如此一來我們就可以取得一組 token ，所以接著我們需要把它存下來。

如此一來，我們就會有一組 token 清單在資料庫中，以後要發送 Notify 的時候，就找這個清單就可以囉！

至於實作的部分呢，小弟我還在被追殺中．．．．我假日會補啦QQ

閱讀全文 【第 25 天】在 WordPress 後台取得 LINE Notify token

【第 24 天】在 WordPress 後台建立表單填入 Client ID 和 Client Secret

在 【第 22 天】開一個 LINE OA 這篇文章中，我提到，我們必須先拿著 Client ID 和 Client Secret 去取得 code ，再拿這個 code 去換 token 。

所以這個流程看來，我們的第一個步驟，應該先提供一個表單給後台使用者，可以去填入他的 Client ID 和 Client Secret 按下去後會進入 LINE 提供的授權頁面，然後會換回一個 code ，然後我們再拿著這個 code 去存在 WordPress 中。

然後這邊開始我們要開始寫 code 了

然後我被叫去修 bug 了…晚上再來補文QQ

【第 23 天】初始化一個 WordPress 外掛

終於要進入這次參賽的最後尾聲了。接著幾天又要開始捲起袖子寫 code 囉！

我們在第三天有講到如何建立第一個 WordPress 外掛 ，可以回去複習一下：【第 03 天】第一個 WordPress 外掛。

看來，我們需要先想一個好的名稱。

好的外掛名稱

根據官方的建議，外掛的名稱應該反映你和外掛的獨特性。

所以，我們在想名字的時候，必須確保沒有侵犯商標或與其他的產品名稱產生衝突。例如，我們想做一個外掛推播 LINE 通知，但是這並不是 LINE 官方的外掛，我們就就不應該命名這個外掛為 LINE's Notify ，命名為 Notify for LINE 會更好一點。

因此，想出一個好名稱不是一件容易的事情。

建立外掛目錄

假設，我們就叫這個外掛 Notify for LINE 吧！

接著我們要先到 WordPress 的 wp-content/plugins 路徑下創建一個全新的資料夾 notify-for-line 。接著切換到這個資料夾中，創建一個 PHP 檔案 notify-for-line.php 。

別忘了 README.text

README.text 文件不是必須的，但是她很重要，README.text 可以讓其他開發者清楚確定這份外掛的相關資訊。所以我們要確保該文件中包含：

  1. 簡要描述外掛的實際作用是什麼。
  2. 安裝說明，特別是需要特殊配置的時候。
  3. 關於外掛開發主人可以提供和不提供什麼樣的支持。

定義一下外掛

我們來編輯一下 notify-for-line.php 吧！在開頭的地方加入我們資訊：

<?php
/*
Plugin Name：Notify for LINE
Plugin URI：https://ericwu.asia
Description：Notify for LINE
Version：1.1.1
Author：Eric Wu
Author URI：https://ericwu.asia
License：GPL2
License URI：https://www.gnu.org/licenses/gpl-2.0.html
*/

這樣應該就可以在我們的後台看到一個我們剛裝上去的外掛了。

接著，明天我們會來試著取得 LINE notify 所需要的 code 和 access_token

【第 22 天】開一個 LINE OA

在 WordPress 上面建立 LINE Chatbot 推播外掛之前，我們需要在 LINE 平台上面處理一些事情，才可以繼續。如果你對 LINE Chatbot 已經很熟悉，可以跳過這個章節。

服務提供者

還記得昨天我們說的說嗎？我們站在發送訊息方的角色，所以我們需要提供一支程式或網站、和一個 callback 網址給 LINE。

等等！你說我們要一個 callback 網址？那這樣不就意味著，我要搞台主機、再搞個網址、搞完還要弄 SSL？

還好有個好工具 ngrok ，提供我們快速建立一個外部可存取的網站。

ngrok

安裝 ngrok

因為我是使用 mac ，我這邊建議直接使用 Homebrew 來安裝(你也可以直接官網下載解壓縮包來使用)。

brew cask install ngrok

如果你是 windows 的使用者，可以直接去官方網站中下載對應的位元版本下載，解壓縮後直接啟動 ngrok.exe 就可以囉。

啟用 ngrok

我們直接在終端機輸入（我這邊示範 port 8000）：

ngrok http 8000

你會看到如附圖的畫面，會有兩個 Forwarding，因為 LINE 的 callback 有規範要使用 https ，所以我們選用第二個 Forwarding 來做為我們等等在 LINE Notify 訂閱通知時的 callback url：

https://ithelp.ithome.com.tw/upload/images/20200922/20121194TD0Fv2o0ZA.png

登入 LINE Notify 服務

進入 LINE Notify 網站並登入 LINE 帳號。點選右上角的個人名稱，點選 管理登錄服務 進入管理頁面：

https://ithelp.ithome.com.tw/upload/images/20200922/20121194ucKUQPiggW.png

點擊 登錄服務 ：
https://ithelp.ithome.com.tw/upload/images/20200922/20121194rtikWPTy22.png

輸入欄位資料。（除了服務圖片外，其餘皆為必填欄位）。服務名稱建議設定一個好是別的，未來在發通知的時候，使用者會透過服務名稱去得知這是誰發送的通知。

而 Callback URL 欄位，則是剛剛我們複製的第二個 Forwarding 網址。

https://ithelp.ithome.com.tw/upload/images/20200922/20121194yGPcr6wgIv.png

接著，我們要去驗證電子郵件帳號，完成電子郵件帳號驗證後，LINE Notify 服務就算登陸完成。

登陸完成後，我們可以看到 Client ID 和 Client Secret 資訊，我們先把它記下來，等等馬上會用到。

https://ithelp.ithome.com.tw/upload/images/20200922/20121194dZii8OlOca.png

授權通知方

昨天我們說到，我們登陸後服務後，要使用者授權 LINE Notify 發出通知才行，所以下一步，我們要讓使用者必須進入以下網址，才能授權並且訂閱我們的 LINE Notify 通知：

https://notify-bot.line.me/oauth/authorize?response_type=code&scope=notify&response_mode=form_post&client_id=xxx&redirect_uri=xxx&state=xxx

看到這一大坨，可能就頭暈了，其實這就是一個 OAuth 2.0 的登入流程，至於運作原理就不在這贅述，我們只要知道使用者可以透過這個網址登入並授權通知這件事情就好。每個查詢字串的用途說明如下：

  1. scope: 固定寫 notify 就對了。
  2. response_type: 固定寫 code 就對了。
  3. response_mode: 固定寫 form_post 就對了。
  4. redirect_uri: 填上剛剛我們複製的第二個 Forwarding 網址。
  5. client_id: 填上剛剛我們複製的 Client ID
  6. state: 用來防止 CSRF 攻擊，我們填上一組亂碼就可以了。

當使用者點擊這個網址進去後，可以選擇您要接收通知的聊天室，我們也可以選擇 透過1對1聊天接收LINE Notify的通知 來發通知給自己。

選取完畢後，按下 同意並連動 按鈕即可完成訂閱，此時使用者會收到 與「服務名稱」連動完成 的通知。此時瀏覽器會重新轉址，網站會有問題，但是不重要。

順帶一提，如果訊息接收者是群組，那麼你還必須把這個 LINE Notify 帳號加入到該聊天室才可以正常收到通知喔！

訊息接收者

取得授權碼 (code)

當 授權通知方 按下剛剛那坨網址，並且點選 同意並連動 按鈕之後，使用者的瀏覽器會直接對 redirect_uri 所設定的網址發出 HTTP POST 要求，這個請求會被打到剛剛 ngrok 產生的網址。

我們接著透過 ngrok 後台 http://127.0.0.1:4040/ 來看看剛剛 HTTP POST 傳入的內容，其中我們可以看到有 code 這個參數，先複製下來，我們等等要使用！

https://ithelp.ithome.com.tw/upload/images/20200922/20121194I5X93I08Ci.png

取得存取權杖 (access_token)

安裝 curl 工具

我們一樣使用 homebrew 來安裝 curl 工具

brew install curl

發送 請求取得 token

任何通知訊息都需要有 Access Token 才能發出，所以我們要先請求一個 token 來發送通知：

curl -d "grant_type=authorization_code&redirect_uri=xx&client_id=xx&client_secret=xx&code=xx" https://notify-bot.line.me/oauth/token

參數說明如下：

  1. grant_type：固定寫 authorization_code 就對了。
  2. redirect_uri：填上剛剛我們複製的第二個 Forwarding 網址。。
  3. client_id：登錄服務的 Client ID
  4. client_secret：登錄服務的 Client Secret
  5. code：剛剛複製的授權碼 code

你將會得到以下 JSON 內容：

{
    "status":200,
    "message":"access_token is issued",
    "access_token":"xxxxxxx"
}

太好了，這樣我們就拿到 access_token 了。接著，我們就可以透過這個 access token 來發送推播通知給訂閱者囉！

發送 LINE Notify 通知訊息

接著我們可以透過 curl 命令來發出 LINE Notify 訊息：

curl -H "Authorization: Bearer xxxx" -d "message=I Love WordPress" https://notify-api.line.me/api/notify

我們會需要在 Custom Header 放一個 Bearer Token 的 Authorization。所以我們要在 Bearer 後面放上我們剛剛拿到的 Access Token。如果成功發出訊息，也會得到 JSON 回應：

{
    "status":200,
    "message":"ok"
}

並且在 LINE 上也會即時收到通知訊息：

https://ithelp.ithome.com.tw/upload/images/20200922/20121194pZ6odDjPRi.png

【第 21 天】什麼是 LINE Notify？

有在使用 LINE OA 的人應該都有一種痛，那就是發送推播的成本真的很痛。但其實你要透過 LINE 完全免費 的訊息推播服務也不是不行，有種東西就叫做 LINE Notify，這就是我們今天要介紹的主角！

運作方式

LINE Notify 是一個「訊息推播」服務，但和以往我們認識的訊息推播有那麼一些些的不同，他的運作方式是這樣的：

首先，LINE 官方提供了一個 LINE Notify 帳號，他也是一個 LINE chatbot。只要使用者有訂閱你的 LINE Notify 推播服務，當你發送訊息的時候，使用者就會透過這個 LINE Notify 帳號收到通知。也因此我們都可以成為 服務提供者，發送推播給任何人，而且完全不用任何費用！

真的認真要說有什麼缺點的話，我覺得．．．

  1. 因為訊息變成一律由官方的 LINE Notify 帳號發出，而不是由自己建立的 LINE OA 來發出訊息。LINE Notify 就會顯得沒 LINE OA 有那麼強烈的品牌連結！
  2. 所有 LINE 用戶都要主動去訂閱你的通知服務才收得到訊息，大部分 LINE 使用者根本不清楚 LINE Notify 是什麼東西！也就會不敢使用。
  3. 目前還只能發送文字訊息，所以有時候就顯得沒 LINE OA 可以發送 flex message, template message 或 image ….這麼豐富，

但是不得不說，如果要找一個經濟實惠的解決方案，來作為特定訊息的通知，或是用來整合現有服務的通知，LINE Notify 還是個很實際的解決方案！

角色定義

在我們開始使用 LINE Notify 完成通知任務前，我們必須先理解以下角色：

服務提供者

就是發送訊息的我們，通常會是一支程式或網站（是的，我們等等就是要用 WordPress 來發送），他必須要有一個可以接受 OAuth 2.0 認證通過後的 callback 網址。

另外，在發送 LINE Notify 通知的時候必須使用 Access Token ，我們我們也必須透過這個網址來取得。

授權通知方

也就是使用者，而這些 LINE 使用者必須擁有一個可以登入 LINE 的 E-mail 帳號，才能授權 LINE Notify 發出通知。

訊息接收者

也就是授權後的使用者，而 LINE Notify 服務有兩種訊息接收者：

  1. 用戶 user：就是授權的使用者。
  2. 群組 group：就是授權的群組。

這樣應該對 LINE Notify 有些基礎的觀念囉！明天我們會來建立一個 LINE OA ，然後試著透過 curl 發送我們的第一則 LINE Notify 囉！