Dialogflowを使って簡単なチャットボットを作成し、API部分をDenoで作ります

v1.0がリリースされ今話題のDeno（ディーノ）を使って簡単なチャットボットを作ってみませんか？

Dialogflowを使って簡単なチャットボットを作成し、API部分をDenoで作ります。

事前準備

Deno環境構築
VSCode

GitHubから環境をダウンロードしましょう。

$ cd ~/Documents
$ git clone https://github.com/gaomar/deno-dialogflowhandson.git
$ code deno-dialogflowhandson

ハンズオン資料

https://katacoda.com/gaomar/scenarios/deno-dialogflow-handson-playground

ハンズオン動画

1. Denoに触れてみよう！

1-1. Denoを動かしてみよう

VSCodeのターミナルを開いて、下記コマンドを実行してみよう。Welcome to Deno 🦕と表示されればOKです。

$ deno run https://deno.land/std/examples/welcome.ts

1-2. TypeScriptから動かしてみよう

hello.ts ファイルを開いてください。下記プログラムをファイルに反映してみましょう。

hello.ts

let myName: string;
myName = '私の名前は「XXX」です。';

console.log(myName);

下記コマンドを実行してみよう。コンパイルされてログが出力されます。

$ deno run hello.ts

2. REST APIを作成しよう

2-1. Agentを作成する

https://dialogflow.cloud.google.com/ にアクセスしてください。

［Sign-in with Google］ボタンをクリックします。お持ちのGoogleアカウントでログインしてください。

初めてDialogflowをお使いになる方は利用許可してください。

Terms of Service部分のチェックを入れてから［ACCEPT］ボタンをクリックします。

［CREATE AGENT］ボタンをクリックします。

HelloDeno と入力し、デフォルト言語を Japanese - ja に選択してから［CREATE］ボタンをクリックします。

2-2. オウム返しをしよう

Default Fallback Intent をクリックします。

Fulfillment カテゴリにある「Enable webhook call for this intent」を有効化にします。

これで応答をWebhook経由で返すことができます。

左側メニューの Fulfillment をクリックします。Webhookカテゴリを有効化にします。（※2つあるので、上側のWebhookを有効化にします）

Webhook URLは下記コマンドで発行されたngrokのURL（https側）を貼り付けてください。

$ ngrok http --region jp 3000

hello.ts を開いて、下記プログラムをコピペしてください。

hello.ts

import { Application, Context } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts";
const app = new Application();

app.post('/', async (ctx: Context) => {
    const {queryResult} = await (ctx.body());

    let js = {
            fulfillmentText: `Denoから「${queryResult.queryText}」`
    }

    await ctx.json(js);

});

// ポート開く
app.start({port: 3000});

下記コマンドを実行します。

$ deno run --allow-net hello.ts

画面右側の Try it now 部分に好きな言葉を入力してください。

すると Denoから「XXXXXX」 と入力した言葉が返ってきます。

#deno #dialogflow #chatbot #developer