Dialogflow + Webhook

在“使用 Dialogflow 打造聊天机器人”文章里已经学会使用 DialogFlow 建立聊天机器人，接下来这篇文章将会介绍如何使用 Python + Flask 架设简单的服务器，建立 Webhook 网址，并将 DialogFlow 串接 Webhook，就能透过服务器做到更多 DialogFlow 做不到的事情。

快速导览：

• 什么是 Webhook？
• Dialogflow 与 WebHook 的关系
• 使用 ngrok + 本机环境建立 Webhook
• 使用 ngrok + Colab 建立 Webhook
• 使用 Cloud Functions 建立 Webhook
• Dialogflow 串接 WebHook

什么是 Webhook？

Webhook 指的是一个“网址”，透过服务器建立 Webhook 网址后，有串接 Webhook 的位置就能使用 HTTP 的 POST 方法，向服务器传送或接收特定的数据。

Dialogflow 与 WebHook 的关系

当用户与串接 Dialogflow 的机器人聊天时，如果 Dialogflow 有串接 Webhook，则会发生下列的步骤：

• Step 1：向串接 Dialogflow 的机器人发送消息。
• Step 2：机器人收到消息后，将消息透过 Dialogflow 解析语意。
• Step 3：解析语意后，将解析的语意透过 Webhook 传送到用户 Python 的服务器，根据自订义的逻辑处理语意内容。
• Step 4：处理语意内容后，将结果再透过 Webhook 回传到 Dialogflow。
• Step 5：Dialogflow 收到结果后，透过串接的机器人，将结果的消息传送给用户。

使用 ngrok + 本机环境建立 Webhook

参考“使用 Anaconda”或“使用 Python 虚拟环境”文章，选择其中一种作为本机架设环境，接着参考“使用 ngrok 服务”文章注册 ngrok 服务，接着在本机环境使用命令提示字元启用 ngrok。

ngrok http 5000

启用后就会看见 ngrok 服务对应到本机服务器产生的临时网址。

ngrok 网址完成后，回到命令提示字元，输入下列指令安装 Flask 函数库 ( Anaconda Jupyter 已经内建不需安装 )。

pip install Flask

建立一个新的 Python 文件，使用下方的程序码，执行后就能建立一个简单的服务器，当中 /webhook 的入口就是 Webhook 的网址，webhook() 函数的内容会将 Dialogflow 传送过来的字串转换成 dict 格式，取出当中要回应的字串，并在字串后方加上 ( webhook ) 文字，证明这是透过 Webhook 服务器处理后的文字消息。

from flask import Flask, request

app = Flask(__name__)

@app.route("/")
def home():
    return "<h1>hello world</h1>"

@app.route('/webhook', methods=['POST'])
def webhook():
    req = request.get_json()    # 轉換成 dict 格式
    print(req)
    reText = req['queryResult']['fulfillmentText']   # 取得回覆文字
    print(reText)
    return {
          "fulfillmentText": f'{reText} ( webhook )',
          "source": "webhookdata"
      }

app.run()

程序执行后，打开浏览器，输入刚刚 ngrok 产生的网址 ( 后方不要加上 /webhook )，如果出现 hello world 的文字，表示顺利建立成功，成功后直接前往下方继续阅读“Dialogflow 串接 Webhook”。

使用 ngrok + Colab 建立 Webhook

参考“使用 ngrok 服务”和“Google Colab 使用 ngrok”的文章内容，注册 ngrok 服务并取得 token，接着打开 Colab 并安装 ngrok，安装步骤都完成后，在 Colab 里输入下方的程序码 ( 记得要安装 flask_ngrok )。

from flask import Flask, request
from flask_ngrok import run_with_ngrok

app = Flask(__name__)
run_with_ngrok(app)     # 連結 ngrok

@app.route("/")
def home():
    return "<h1>hello world</h1>"

@app.route('/webhook', methods=['POST'])
def webhook():
    req = request.get_json()
    print(req)
    reText = req['queryResult']['fulfillmentText']
    print(reText)
    return {
          "fulfillmentText": f'{reText} ( webhook )',
          "source": "webhookdata"
      }

app.run()

点击 Colab 的执行按钮，就会得到一串 ngrok 对应的网址，这串网址就是要与 Dialogflow 串接的 Webhook。

程序执行后，打开浏览器，输入刚刚 ngrok 产生的网址 ( 后方不要加上 /webhook )，如果出现 hello world 的文字，表示顺利建立成功，成功后直接前往下方继续阅读“Dialogflow 串接 Webhook”。

使用 Cloud Functions 建立 Webhook

由于使用 Colab + ngrok 所建置的 Webhook，会受限于 Colab 只能运行几个小时，以及 ngrok 在每次部署都会改变网址的特性，所以无法当作正式的 LINE BOT Webhook ( Colab 闲置超过一段时间后还会停止执行并清除安装的函数库，需要再次重新安装 )。

如果要建立一个可以 24 小时不断运作的 Webhook，就可以选择 Google Cloud Functions 作为 Python 运作的后台，参考“使用 Google Cloud Functions”文章，新增并启用一个 Cloud Functions 程序编辑环境，基本设定如下图所示：

进入编辑画面后，环境执行阶段选择 Python ( 3.7～3.9 皆可 )，进入点改成 webhook ( 可自订名称，之后的程序码里也要使用同样的名称 )。

接着输入下方的程序码，完成后点击下方的“部署”，就会将程序部署到 Cloud Functions 里。

def webhook(request):
    try:
        req = request.get_json()
        reText = req['queryResult']['fulfillmentText']
        return {
              "fulfillmentText": f'{reText} ( webhook )',
              "source": "webhookdata"
          }
    except:
        print(request.args)

如果部署顺利完成，就会看见该专案前方出现一个绿色打勾图示，这时切换到“触发条件”页签，就可以看到所需要的 Webhook 网址，接着就直接前往下方继续阅读“Dialogflow 串接 Webhook”。

Dialogflow 串接 Webhook

参考“使用 Dialogflow 打造聊天机器人”文章，回到 Dialogflow 的专案里，进入“Intents”页签，点击需要串接 Webhook 的 Intent，进入后在最下方勾选“Enable webhook call for this intent”，表示该 Intent 会透过 Webhook 处理后再进行回复 ( 如果 Webhook 失败则会直接套用内容回复 )。

进入“Fulfillment”页签，勾选启用 Webhook，将刚刚产生的 Webhook 贴上并储存 ( 如果是本地端或 Colab 网址，后方要加上 /webhook )

完成后在右侧的聊天测试里，输入一些文字就可以看见机器人的自动回复，如果回复文字的后方有加上 ( webhook ) 文字，表示已经顺利串接 Webhook ( 额外加上的文字是在 Webhook 服务器端加入的，可以自行修改程序 )。

这时如果进入 Webhook 服务器后台，也能看见传递的消息出现在记录档里。

小结

当 Dialogflow 可以串接 Webhook 之后，就能运用服务器做到更多有趣的事情，例如爬虫、数据分析、串接其他服务...等。

延伸阅读：

• LINE BOT 串接 Dialogflow ( 基本串接 )
• LINE BOT 串接 Dialogflow ( 搭配外部 Webhook )
• LINE BOT 串接 Dialogflow ( 气象聊天机器人 )

意见反馈