DAY 7 回話機器人(鸚鵡LINE Bot)與ngrok

2022 iThome 鐵人賽

DAY 7

自我挑戰組

30天建構出一個簡單 LineBot 機器人系列第 7 篇

14th鐵人賽

Lumeowmo

2022-09-21 20:42:08

4951 瀏覽

分享至

前置作業準備完畢後，就要來寫第一個程式啦~
首先就來帶大家寫一個能跟使用者互動的簡單功能，讓LINE Bot能像鸚鵡一樣學使用者說話！

利用上一篇所建立的Django專案，開始前要先來做一些設定。

取得LINE Bot API程式需的資訊

使用LINE Bot API程式時需要用到LINE Bot的Cannel secret及Channel accesstoken兩樣資訊。
可以在LINE Developers上我們做好的LINE Bot的設定頁面找到它們。
如果這個值不小心被看到，可以按issue來更新它～

安裝LINE Bot SDK

必須安裝才能在程式中加入LINE Bot API，所以我們在命令提示字元視窗輸入以下指令：

pip install line-bot-sdk==1.8.0

環境設定

接下來要改一些Djanjo專案裡檔案的設定。

1.<settings.py>

它是整個專案的環境設定檔，新建的檔案都要做一些設定。
（以下行數皆為參考，有時候會因為多一些空行而變的不一樣，但大多在差不多的位置！）

首先需在第12行補上

import os

第24列、25列的地方，我們要先將剛才找到的Cannel secret及Channel accesstoken資訊貼上來：

LINE_CHANNEL_ACCESS_TOKEN = '使用者Channel accesstoken'
LINE_CHANNEL_SECRET ='使用者Cannel secret'

第27列的DEBUG = True為除錯模式，真正上線時改為 False可增加網站安全，但如果僅為測試，使用Ture可以幫助除錯。

DEBUG = True

修改第30列(改為所有外部連結都可以連到本機伺服器)

ALLOWED_HOSTS = ['*']

INSTALLED_APPS中已經有許多預設的app，在這邊我們將上一篇設定好的app(firstapp)加進來(第42列)：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'firstapp', #新增的APP
]

如同上一篇所提到的Django是使用MVT的架構，將顯示模板放置在templates中，因此必須在DIRS中設定其路徑（第60列）。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

第107列、109列原本的預設語系為英文，這邊我們將它改為中文以及台北時區。

LANGUAGE_CODE = 'zh-Hant'
TIME_ZONE = 'Asia/Taiwan'

如同上一篇提到static目錄儲存圖形檔、CSS或JacaScript檔案等，因此在第124~126列加入STATICFILES_DIRS設定其路徑。

STATICFILES_DIRS =[
    os.path.join(BASE_DIR,'static')
]

2.<urls.py>

第18、19列加入所需的模組。
第23列設定/callback就會執行下面view.py中的callback函式。

3.<view.py>

在view.py中加入以下程式碼，這點簡單說明一下：

第9、10列為讀取setting.py中設定的Channel secret及Channel accesstoken資訊。
第14～23列建立callback函式，前面urls.py所設定的/callback就會呼叫這邊的函式
第26～28列將接收到的訊息回傳

關於回傳更詳細的說明會在下一篇介紹，這邊如果沒有很懂可以先照抄沒有關係～

from django.conf import settings
from django.http import HttpResponse, HttpResponseBadRequest, HttpResponseForbidden
from django.views.decorators.csrf import csrf_exempt

from linebot import LineBotApi, WebhookParser
from linebot.exceptions import InvalidSignatureError, LineBotApiError
from linebot.models import MessageEvent, TextSendMessage

line_bot_api = LineBotApi(settings.LINE_CHANNEL_ACCESS_TOKEN)
parser = WebhookParser(settings.LINE_CHANNEL_SECRET)


@csrf_exempt
def callback(request):
    if request.method == 'POST':
        signature = request.META['HTTP_X_LINE_SIGNATURE']
        body = request.body.decode('utf-8')
        
        try:
            events = parser.parse(body, signature)
        except InvalidSignatureError:
            return HttpResponseForbidden()
        except LineBotApiError:
            return HttpResponseBadRequest()

        for event in events:
            if isinstance(event, MessageEvent):
                line_bot_api.reply_message(event.reply_token,TextSendMessage(text=event.message.text))
                
        return HttpResponse()
    else:
        return HttpResponseBadRequest()

使用ngrok建立https伺服器

LINE Bot是使用webhook url來作為伺服器連結，而它有兩個需求：

必須是一個網站（不能是IP位置）
必須是https

ngrok是一個代理伺服器，可以建立https伺服器，因此這邊我們選用ngrok。

ngrok下載：[https://ngrok.com/download]

解壓縮下載的ngrok-v3-stable-windows-amd64會產生ngrok.exe檔，

這邊最重要的就是要將ngrok.exe放進我們的FirstProject專案資料夾，不然會沒辦法執行喔！

開啟ngrok.exe
輸入指令便會跑出一段網址(黃框)

ngrok http 8000

有了網址之後再回到LINE Developers找到Messaging API的Webhook settings，
記得放入網址之後後面一定要加上callback，不然就不會回傳了！！
放好之後就按下Update。

可以按Verify來確認是不是有成功，成功就會跳出下圖視窗。

放入網址之後要記得開啟Use webhook，

最後掃描條碼，加入好友後就可以跟機器人對話囉！！完成會如下圖~是不是很像鸚鵡呢٩(ˊᗜˋ*)و✧*｡

小提醒：
如果Region的位置不在us，可能變成jp等其他地方，就沒辦法用ngrok http 8000打開ngrok，需要輸入ngrok http -- region us 8000來打開

最後幫大家快速複習開啟檔案的步驟，先有了Django專案後開啟命令提示字元：

安裝LINE Bot SDK
輸入pip install line-bot-sdk==1.8.0
開啟Django伺服器
進入D:＞cd linebotTest＞python manage.py runserver*
將ngrok.exe檔案存到建立的Django資料夾內
開啟ngrok伺服器
進入D:＞cd linebotTest＞ngrok http 8000

不知道大家都學會了嗎~相信跟著編編的腳步大家都可以成功完成的！(♡˙︶˙♡)
那麼下一篇會開始講前面所提到的view.py程式碼的寫法以及其他連結LINE Bot圖文選單的回傳功能。