專案應用

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

學習目標

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

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

專案設計流程

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

2.專案總覽

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

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

5.未來展望

鸚鵡_LineBot

一、申請 LINE Developers (開發者帳號)

(一) 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 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 執行如下命令：

pip install -v line-bot-sdk

(三)使用 Django 建立網站

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

pip install -v django

1.建立 Django 專案

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

django-admin startproject 專案名稱

例 django-admin startproject jlinebot

執行命令：

顯示結果：

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

python manage.py startapp 應用程式名稱

例 python manage.py startapp 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

#修改24及25列(加入)LINE_CHANNEL_ACCESS_TOKEN='使用者Channel access token'

LINE_CHANNEL_SECRET='使用者Channel secret'

#30列修改為所有外部連結都可連結到本機伺服器

ALLOWED_HOSTS = ['*']

#42列在INSTALLED_APPS串列中加入新建的 linebotapi

＊註：'linebotapi', #新增的 app

#60列設定路徑，將顯示的模版放置templates目錄中，BASE_DIR是專案的最上層目錄。

＊註：'DIRS': [os.path.join(BASE_DIR,'templates')], #加上templates路徑

#109及111列將預設語系英文更改為繁體中文，台北時區。

＊註：LANGUAGE_CODE = 'zh-Hant' #語系改繁體中文，原英文 LANGUAGE_CODE='en-us'

TIME_ZONE = 'Asia/Taipei' #時區改台北，原 TIME_ZONE='UTC'

#124~126列 static 目錄儲存本機中的圖檔、css、JavaScript 檔案

＊註：

STATICFILES_DIRS = [ #加入 static 路徑

os.path.join(BASE_DIR,'static'),

]

3.設定 urls.py

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

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

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

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

#18-19列匯入所需模組

#22列設定『首頁網址/callback』就會執行 views.py 中 callback函式。

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

#9-10列讀取 setting.py 中設定的 Channel secret及Channel access token資訊。

#14-32列為處理 Line Bot訊息的函式。

#14-24列建立 callback函式，使用者呼叫『首頁網址/callback』就會執行此函式。

#26-28列若接到使用者傳送的訊息，就將收到的文字訊息傳回。

4.使用 ngrok 建立 https伺服器

Line Bot使用webhook url做為伺服器連結，webhook url 須兩個需求：

＊必須是一個網址(不能是IP位址)。

＊通訊協定必須是『https』。

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

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

顯示結果：

(1)啟動本機伺服器

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

python manage.py runserver

如下圖，Django伺服器預設PORT為『8000』

(2)啟動 ngrok伺服器

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

ngrok http PORT號碼

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

ngrok http 8000

      • 如下圖，即啟動 ngrok伺服器。

＊註：請紀錄圖中 https 的網址(本範例為 https://1601e35a.ngrok.io)。

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會如『鸚鵡』般回應相同的訊息。

三、Line的圖文選單

    • 2017年10月起 Line 開始提供圖文的選單，不需靠程式即可在 Line 的聊天室產生。設定如下：

(一)設定步驟

    1. 有 LineBot 的帳號才可製作圖文選單，申請 LineBot 步驟請參閱〈申請 LINE Developers(開發者帳號)〉。

    2. 登入｢LINE Official Account Manager」， 網址 https://manager.line.biz/

    3. 選擇要新增圖文選單的 LineBot 帳號，以利進行圖文選單管理。