2019/11/01 謝碧景(c)編製更新

• 學會申請 LINE Developers (開發者帳號)，以利程式應用。

• 學會在 Line 平台上開發聊天機器人的應用。

專案設計流程

1.專案發想(動機&目的)

2.專案總覽

3.介面配置(畫面編排 Designer )

4.專案分析和程式設計說明

5.未來展望

鸚鵡_LineBot

• • 官網：https://developers.line.biz/

(一) LINE Login

• • 步驟1：如下圖，點選【Login】。

  • 步驟2：如下圖，使用 Line 帳號登入(或建立帳號)。

(二)建立新的Provider

• • 步驟3：建立新的Provider，如下圖，點選【Create New Provider】。

  • 步驟4：建立新的 provider information：如下圖，輸入Provider 名稱，如範例『JingBot』，後按下【Confirm】，即可建立新的Provider。

(三)建立Line Bot

• • 步驟5：選取左側新建立的 Provider名稱，如下圖，按下 Messaging API 下方【Create Channel】鈕，建立一個Line Bot。

• • 步驟6：上傳 Line Bot圖標，如下左圖，按下【Register】鈕，選取欲上傳的圖標，即如下右圖。

• • 步驟7：如下圖，App name 欄輸入Line Bot 名稱，App description 欄輸入Line Bot 說明，Category 及 Subcategory 選擇 Line Bot 類別，填入電子郵件，後按下【Confirm】確認資料正確，再核選同意接受版權宣告，後按下【Create】鈕 。

• • 步驟8：如下圖，選取新建的 Line Bot 即進入Line Bot 設定頁面。

• • 步驟9：設定頁面中，如下左圖，Auto-reply messages 及Greeting messages欄位預設Enabled，表示 Line Bot會自動發送歡迎及回覆訊息。欲關閉自動發送歡迎及回覆訊息，請在Auto-reply messages 及Greeting messages欄位分別按下【Set message】，核選停用『加入好友的歡迎訊息』及停用『自動回應訊息』，即如下右圖。

(四)加入Line Bot 為朋友

• 步驟10：如下左圖，使用者可掃描設定頁面中『Bot Informations→QR code of your bot』欄位的QR code，即可如下右圖，按下【加入】Line Bot 為朋友。

• • 步驟11：如下圖，因Auto-reply messages 及Greeting messages欄位預設Enabled，點選【聊天】即可與Line Bot 對話。

◆ 範例：在 Line中輸入訊息，Line Bot會如『鸚鵡』般回應相同的訊息。

本範例使用 Line Bot API 程式需 Line Bot 的 Channel secret及Channel access token 資訊，以利API 程式正常運作。Line Bot API 完整說明請參考 https://github.com/line/line-bot-sdk-python

(一)獲取Line Bot API程式所需資訊

1.請在 Line Bot 設定頁面【Basic settings】項目下方紀錄 Channel secret 值備用，如下圖，該值不宜外流，若需重新設定，可按右方【issue】按鈕產生新的 Channel secret 值。

2.Channel access token在建立 Line Bot 時預設不會自動產生，請在【Messaging API→Channel access token】右方按下【issue】按鈕，接著請紀錄產生的 Channel access token值備用。

(二)安裝 Line Bot SDK

• 安裝 Line Bot SDK才能在程式中加入 Line Bot API，以利 Line Bot 與使用者互動。請至 Anaconda Prompt 執行如下命令：

(三)使用 Django 建立網站

• • 使用 Line Bot 需建立網站伺服器，在此安裝 Django 模組以利建置，請至Anaconda Prompt 執行如下命令：

1.建立 Django 專案

(1)建立專案資料夾：請至 Anaconda Prompt 執行，先切換到欲建立專案的資料夾，如下圖執行命令。

(2)建立 Application 應用程式：接著切換到專案資料夾建立 Application 應用程式，如下圖，系統會在 jlinebot 資料夾中建立 linebotapi應用程式。

(3)建置存放網頁的資料夾：如下圖，建立templates資料夾，以存放網頁模板(即.html檔)；及建立 static 資料夾，以存放網頁圖檔、css、JavaScript等檔案。

＊註：Django完整架構中，若要使用資料庫，需如下命令，將模型同步到資料庫。(本範例並未應用)。

python manage.py makemigrations

python manage.py migrate

2.設定環境設定檔：

• • 新專案需先設定『settings.py』檔案，如下圖，請以 Spyder 開啟整個專案的環境設定檔。該檔案位於範例中 C:\jlinebot\jlinebot\

• • 程式：settings.py

3.設定 urls.py

Django 程式以 urlpattern網址和函式對照方式設計，如下兩個步驟：

(1)先設定 urls.py 檔 urlpatterns 串列中 url 網址和函式的對照。

(2)再於 views.py 中撰寫函式。

• • 如下圖，修改 urls.py 程式：該檔案位於範例中 C:\jlinebot\jlinebot\

• • 如下，修改程式 views.py 撰寫函式：該檔案位於範例中 C:\jlinebot\linebotapi

4.使用 ngrok 建立 https伺服器

• • ngrok是一個代理伺服器，可為本機網頁伺服器建立安全的對外通道，其可建立http 或 https 伺服器，適合 Line Bot伺服器需求。

• • 請先下載使用者系統壓縮檔 http://ngrok.cn/download.html

如下圖，下載檔案(ngrok-stable-windows-amd64.zip)解壓後將其中的ngrok.exe檔複製到Django專案資料夾(本範例為 C:\jlinebot資料夾)。

(1)啟動本機伺服器

• • • • 請至 Anaconda Prompt 並切換到專案資料夾(C:\jlinebot) 執行如下命令。

(2)啟動 ngrok伺服器

• • • • 啟動 ngrok伺服器命令，如下：

• • • 請開啟另一個命令視窗(注意：執行本機伺服器的命令視窗不能關閉)，並切換到專案資料夾(C:\jlinebot)，執行啟動 ngrok伺服器，命令如下，

5.設定 LineBot 的 Webhook URL

• • Line Bot使用 Webhook URL 做為伺服器連結，在此設為ngrok伺服器的 https 伺服器網址，則 LineBot 即可回應使用者訊息。

(1) 開啟 LineBot→ Messaging API 頁面中，如下圖，按下 Webhook URL下方【Edit】按鈕

(2) 如下圖，請輸入【ngrok 伺服器/callback】網址(本範例為 https://1601e35a.ngrok.io/callback)。

(3) 如下圖，核選 Use webhook為 Enabled (預設為 Disabled)，設定完成即可測試，在 Line中輸入訊息，Line Bot會如『鸚鵡』般回應相同的訊息。