# TOC-Project 2018 FAQ

###### tags: `NetDB`

:::info
如果要寄信詢問Code問題，建議除了錯誤訊息之外也把 Code 附上。

另外郵件內文如果包含 '502' 之類的文字會進到垃圾信，這點要注意一下。

:::

## Index
- [Q1. macOS 安裝 pygraphviz 有 Error 發生？](#Q1-macOS-%E5%AE%89%E8%A3%9D-pygraphviz-%E6%9C%89-Error-%E7%99%BC%E7%94%9F%EF%BC%9F)
- [Q2. 如何在 Heroku 使用 pygraphviz](#Q2-%E5%A6%82%E4%BD%95%E5%9C%A8-Heroku-%E4%BD%BF%E7%94%A8-pygraphviz)
- [Q3. 用 anaconda 執行 app.py 出現 TypeError](#Q3-%E7%94%A8-anaconda-%E5%9F%B7%E8%A1%8C-apppy-%E5%87%BA%E7%8F%BE-TypeError)
- [Q4. Page Webhook 驗證並儲存後， ngrok 跟 終端機都沒顯示收到訊息](#Q4-Page-Webhook-%E9%A9%97%E8%AD%89%E4%B8%A6%E5%84%B2%E5%AD%98%E5%BE%8C%EF%BC%8C-ngrok-%E8%B7%9F-%E7%B5%82%E7%AB%AF%E6%A9%9F%E9%83%BD%E6%B2%92%E9%A1%AF%E7%A4%BA%E6%94%B6%E5%88%B0%E8%A8%8A%E6%81%AF)
- [Q5. Webhook 驗證成功，但 Messenger 發訊息時 ngrok 沒反應](#Q5-Webhook-%E9%A9%97%E8%AD%89%E6%88%90%E5%8A%9F%EF%BC%8C%E4%BD%86-Messenger-%E7%99%BC%E8%A8%8A%E6%81%AF%E6%99%82-ngrok-%E6%B2%92%E5%8F%8D%E6%87%89)
- [Q6. 用朋友的帳號對臉書發訊息沒反應](#Q6-%E7%94%A8%E6%9C%8B%E5%8F%8B%E7%9A%84%E5%B8%B3%E8%99%9F%E5%B0%8D%E8%87%89%E6%9B%B8%E7%99%BC%E8%A8%8A%E6%81%AF%E6%B2%92%E5%8F%8D%E6%87%89)
- [Q7. 一定要用 pygraphviz 畫 FSM 的圖？](#Q7-%E4%B8%80%E5%AE%9A%E8%A6%81%E7%94%A8-pygraphviz-%E7%95%AB-FSM-%E7%9A%84%E5%9C%96%EF%BC%9F)
- [Q8. ubuntu 上 pip3 install pygraphviz 有 error](#Q8-ubuntu-%E4%B8%8A-pip3-install-pygraphviz-%E6%9C%89-error)
- [Q9. 收到非文字訊息(貼圖or圖片)會產生 Error](#Q9-收到非文字訊息貼圖or圖片會產生-Error)

## Q1. macOS 安裝 pygraphviz 有 Error 發生？

以下介紹是用 homebrew 安裝 graphviz，如果你是用 anaconda 也是相同步驟，只是指令會有不同。

1. 你的環境需要先有 python3, pip3, homebrew
2. 使用 homebrew 安裝 graphviz
`brew install graphviz`

3. 先找到 graphviz 的路徑，可以用 `brew info graphviz` 查看


4. 使用 pip3 安裝 pygraphviz，並指定 graphviz 的路徑

$ pip3 install 
--install-option="--include-path=/usr/local/Cellar/graphviz/2.40.1/include/graphviz" 
--install-option="--library-path=/usr/local/Cellar/graphviz/2.40.1/lib/graphviz"
pygraphviz

5. 測試，如果在 python 中 `import pygraphviz` 沒問題的話，就代表裝成功了！

reference:
- https://blog.csdn.net/qq_36847641/article/details/78224910
- https://github.com/pygraphviz/pygraphviz/issues/100

## Q2. 如何在 Heroku 使用 pygraphviz

**注意： 部署到 Heroku 是加分項目**

安裝 pygraphviz 需要一些相依套件，這些套件在 heroku 上需要另外安裝。

1. 設定 使用兩種 heroku buildpack

$ heroku buildpacks:set heroku/python
$ heroku buildpacks:add --index 1 heroku-community/apt

設定成功終端機應該會列出下列資訊

2. 新增 `Aptfile` 於應用程式根目錄 (跟 `Procfile` 相同路徑)
裡面放這三行( pygraphviz 需要用到這三個 package)，如果你有用到其他需要 apt-get 的 package 也是寫在這裡。

graphviz
libgraphviz-dev
pkg-config

3. 再重新 deploy 即可

:::danger
:bulb: 注意，如果你是用介誠助教的 code 來改，那請參考[Toc deploy 2018](https://moodle.ncku.edu.tw/mod/forum/discuss.php?d=350808) 這份簡報p25
(1) 再多加 Procfile 這個檔案，裡面放你的code 執行方式

web: python app.py

#### web: python app.py 即可，不需要用web: python3 app.py
(2) 還有 PORT 的地方 deploy 時記得改成讀環境變數，不能寫死，因為 heroku 不會用 port 5000 跑你的程式。 host 也記得改成 0.0.0.0

如果後續你想繼續在自己電腦跑這程式，記得自己也要設定本機的環境變數

$ export PORT=5000

[Ref: How To Read and Set Environmental and Shell Variables](https://www.digitalocean.com/community/tutorials/how-to-read-and-set-environmental-and-shell-variables-on-a-linux-vps)

(3 Optional) VERIFY_TOKEN 跟 ACCESS_TOKEN 這兩個如果你不是直接寫死在code裡，而是也改成讀環境變數的話，那請自己設定 Heroku 上這些變數要設多少

$ heroku config:set VERIFY_TOKEN=你設定的 verify token
$ heroku config:set ACCESS_TOKEN=你的粉專 access token

- 這裏 PORT 就不用設定了，不然意義跟寫死一樣

:::

References:
- [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
- [heroku-buildpack-apt](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-apt)
- [Heroku Buildpack: Python](https://github.com/heroku/heroku-buildpack-python)
- [Configuration and Config Vars](https://devcenter.heroku.com/articles/config-vars)

## Q3. 用 anaconda 執行 `app.py` 出現 TypeError


如果你的環境是 anaconda，而在執行 `app.py` 時，出現跟上圖一樣的 Error，這是 bottle 這個套件的 Bug，

run(host="localhost", port=5000, debug=True, reloader=True)

將 reloader 這個參數拿掉，改成

run(host="localhost", port=5000, debug=True)

就可以成功執行。

## Q4. Page Webhook 驗證並儲存後， ngrok 跟 終端機都沒顯示收到訊息

點擊驗證並儲存後，成功驗證，但 ngrok 沒收到請求

A: 這是臉書的Bug，請務必先 "移除訂閱"
> 如果你沒有移除訂閱那就算token(驗證權杖)沒輸入，他也會像驗證通過一樣回到設定頁面。

再重新綁定 (選 page 的 webhook，不是User的)。

驗證成功終端機應該會收到這樣的訊息。

:::danger
:bulb: 警告：如果你有重開 ngrok，重新驗證 page webhook 成功後，如果在 messenger發送訊息 ngrok 也沒反應，請務必"先取消再重新訂閱粉專" (見Q5說明)。
:::

## Q5. Webhook 驗證成功，但 Messenger 發訊息時 ngrok 沒反應

A: 原則上這時候 `不需要重開 ngrok`，也`不需要重設粉絲專頁存取權杖(ACCESS_TOKEN)(如果你之前有取得過就繼續沿用)` 也`不需要創建新的應用程式甚至粉專` 只要先取消再重新訂閱粉專即可。
> 如果你之前碰到這問題時已經開了很多應用程式，也都曾綁定該粉專，建議把那些應用程式全部砍掉。

### 說明

當你剛移除webhook訂閱，再重新驗證並儲存時，你所看到的頁面應該長這樣，顯示未訂閱任何粉絲專頁。

> 但這似乎是臉書的 Bug，他其實是有訂閱先前粉專的(如果你的BOT沒問題你會發現這時BOT仍可正常收發訊息)。

這時請先編輯事件再儲存，原則上如果只要收發文字功能勾選 messages 即可


如果你之前有訂閱過粉專，你會發現這時他自動沿用舊的粉專。

這時請點選"選擇粉絲專頁:"，重新選取該粉專，再"取消訂閱"

這時再重新訂閱一次該粉專，理論上這時BOT就可正常運作了。 如果仍不行可再來信。

## Q6. 用朋友的帳號對臉書發訊息沒反應

原則上在 chatbot 審核完成進入上線模式前，能使用該 bot 的只有管理員, 開發人員與測試用戶。


[審核方式](https://developers.facebook.com/docs/messenger-platform/app-review?locale=zh_TW)

## Q7. 一定要用 pygraphviz 畫 FSM 的圖？

不用，只要你的 FSM 圖是用程式畫出來即可，用什麼工具都可以。 原則上畫出來之後把圖儲存起來放到 README 上即可，畫圖的程式也不一定要保留。

## Q8. ubuntu 上 pip3 install pygraphviz 有 error (12/14 23:08 更新)


pygraphviz 需要一些相依套件，可以先把以下套件裝完，

sudo apt-get install graphviz libgraphviz-dev pkg-config

# 如果你用 OS 課給的 ubuntu，請再多跑下面這一行
# 後面 python3.6-dev 是看你的 python 版本，也可能要改成 python3.5-dev

sudo apt-get install python3.6-dev

這樣再 `pip3 install pygraphviz` 應該就可以了

如果這樣還是有問題請來信或約時間討論

或者可以換個環境
(1) 不要用OS課給的ubuntu，用[別的](https://www.virtualbox.org/wiki/Linux_Downloads)
(2) 在 windows 上裝 python 來跑。
(3) 參考 moodle 公告來申請AWS教育版，再開一台EC2 Instance(虛擬機)

--
注意 一般用 pip install 會裝在 python2 的環境下，pip3 install 才會在 python3 環境下

或者你也可以用 [pipenv](https://codinganimal.info/%E7%94%A8-pipenv-%E4%BE%86%E7%AE%A1%E7%90%86-python-%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83-ce9f619825a2) 管理環境

## Q9. 收到非文字訊息(貼圖or圖片)會產生 Error

如果是用 [TOC-Project-2019](https://github.com/winonecheng/TOC-Project-2019) 這份的範例程式碼來改，因為助教這邊沒有例外處理非文字訊息的狀況，所以收到貼圖或圖片等訊息，會有 `KeyError` 產生，如下圖：


如果要處理掉非文字訊息，你可以參考同一份 Repo 中的 [fsm.py](https://github.com/winonecheng/TOC-Project-2019/blob/master/fsm.py)，助教有更新程式碼了，新增以下這行條件即可。

if event.get("message") and event['message'].get("text"):

### 說明
這是收到「讚」會得到的 request，可以看到 `message` 這個 field 下並沒有 `text` 這個 key，也因此直接存取 `body['entry'][0]['messaging'][0]['message']['text']`
會發生 `KeyError`

{
  "object": "page",
  "entry": [
    {
      "id": "456171064909069",
      "time": 1545198854126,
      "messaging": [
        {
          "sender": {
            "id": "1827331834032458"
          },
          "recipient": {
            "id": "456171064909069"
          },
          "timestamp": 1545198853620,
          "message": {    // 沒有 text 這個 key
            "mid": "NIpssuRqIrz2NiMGATrlvzwkjsrSlWNecpJ96uMsSAEwtqujXKU24KEioWRkSCocKkIWPOmyCtl-d7BRoRG1KQ",
            "seq": 1264303,
            "sticker_id": 369239263222822,
            "attachments": [
              {
                "type": "image",
                "payload": {
                  "url": "https: //scontent.xx.fbcdn.net/v/t39.1997-6/39178562_1505197616293642_5411344281094848512_n.png?_nc_cat=1&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&oh=056f708ae682055bb08ca753b9ceaf45&oe=5C8FD375",
                  "sticker_id": 369239263222822
}}]}}]}]}