Dialogflow를 사용하여 Whats App 채팅 로봇을 만들도록 안내하겠습니다.나는 처음에 몇 편의 블로그 문장에서 이렇게 하려고 했지만, 나는 한 문장에서 전부 소개할 것이다.정신 차려. 좀 길어.

선결 조건

Twilio계좌

Dialogflow account

노드 Js

Javascript 지식

입문

없으면 최신 안정 버전의 Node Js를 설치하십시오.

회사 명

액세스 twilio 새 계정이 없으면 새 계정을 등록하십시오.너는 공부를 시작하기 위해 약간의 학점을 받을 것이다.그것들이 끝난 후에 더 많은 비용을 지불해야 하기 때문에 현명하게 사용해야 한다.
대시보드에 Account SID 및 Auth Token 를 기록합니다.
https://www.twilio.com/console/sms/whatsapp/learn로 가서 설명에 따라 Whatsapp 계정을 샌드박스에 연결합니다.이것은 모래상자 환경에 필요한 것이다.이것이 바로 네가 지금 필요로 하는 것이니, 우리는 잠시 후에 다시 토론하자.

대화 상자 흐름

그들website에 따르면

Dialogflow is an end-to-end, build-once deploy-everywhere development suite for creating conversational interfaces for websites, mobile applications, popular messaging platforms, and IoT devices. You can use it to build interfaces (such as chatbots and conversational IVR) that enable natural and rich interactions between your users and your business. Dialogflow Enterprise Edition users have access to Google Cloud Support and a service level agreement (SLA) for production deployments.

우리는 채팅 로봇에 Dialogflow를 사용하여 전기를 공급할 것이다.Dialogflow Console로 이동하여 새 에이전트를 만듭니다.나는 창설과 교육 대리, 실체 처리, 의도 등의 세부 사항을 깊이 있게 연구하지 않을 것이다.이것은 본 강좌의 범위를 넘어섰다.너는 인터넷에서 여러 개의 자원을 찾을 수 있다.
프록시를 만든 후 왼쪽의 Small Talk 탭을 클릭하여 활성화합니다.이것은 우리 로봇으로 하여금 잡담과 흔히 볼 수 있는 단어에 응답할 수 있게 한다.동일한 탭에서 응답을 사용자 정의할 수 있습니다.당신은 이렇게 해서 더욱 개성화된 체험을 얻을 수 있습니다.Dialogflow 컨트롤러 오른쪽에 입력 필드가 있습니다. 로봇을 테스트할 수 있습니다.
채팅 로봇을 테스트하고 만족스러우면 API를 통해 채팅 로봇에 접근할 수 있도록 다음 절차에 따라 인증을 설정할 수 있습니다.

Dialogflow 콘솔에서 항목 이름 옆에 있는 기어 아이콘을 클릭하여 설정을 엽니다.

구글 프로젝트 부분에서 페이지의 일반 옵션 카드에 있는 프로젝트 Id를 주의하십시오.우리는 잠시 후에 그것을 사용할 것이다.

서비스 계정 옆에 있는 링크를 클릭합니다.

새로운 서비스 계정을 만들어서 적당한 이름을 줍니다.

Dialogflow 역할을 Dialogflow API Admin

으로 설정

새 키를 만들고 JSON을 선택합니다.

다운로드한 JSON 파일의 이름을 credentials.json 로 변경합니다.이것은 단지 우리가 참고하는 데 편리하도록 하기 위해서이다.우리는 잠시 후에 이 파일로 돌아갈 것이다.

백엔드(노드 JS)

이 프로젝트에서 typescript를 사용할 것입니다.설령 네가 이전에 그것을 사용한 적이 없다 하더라도, 너는 두려워해서는 안 된다.typescript와 express를 어떻게 사용하는지 볼 수 있습니다.
터미널을 열고 새 항목을 만듭니다.

mkdir wa-chatbot && cd wa-chatbot

디렉터리를 새로 만들고 변경한 폴더에서 새 node js 프로젝트를 초기화합니다.

npm init -y

다음 개발자 의존 항목 설치

nodemon

타자 스크립트

ts 노드

ts lint

npm i -D nodemon typescript ts-node ts-lint

다음 의존 항목 설치

택배

dotenv

twilio

dialogflow

@overnightjs/core

@overnightjs/logger

바디 해상도

cors

우리는 격야를 사용하여 MVC 모드에 더욱 가깝고 대상을 대상으로 하는 프로그래밍 스타일을 이용한다.밤을 지새우는 것에 대한 더 많은 정보를 읽으세요this guide.

npm i -S express dotenv twilio dialogflow @overnightjs/core @overnightjs/logger body-parser cors

이 모듈에 대한 설치 유형이 필요합니다.

npm i -D @types/node @types/express @types/twilio @types/dialogflow @types/body-parser @types/cors

다음은 tsconfig.json 파일을 만들 것입니다.프로젝트의 루트 디렉터리에 새 파일을 만듭니다.

touch tsconfig.json

새 파일에서 다음 내용을 복사하여 붙여넣기

{
  "compilerOptions": {
    "module": "commonjs",
    "strict": true,
    "baseUrl": "./",
    "outDir": "build",
    "removeComments": true,
    "experimentalDecorators": true,
    "target": "es6",
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "types": ["node"],
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["./src/public/"]
}

저는 지금 상세하게 소개하지 않겠지만, typescript 문서를 읽고 더 많은 정보를 알 수 있습니다.
다음은 프로젝트의 루트 디렉터리에 tslint.json 파일을 만들고 다음 내용을 붙여넣습니다.

{
  "defaultSeverity": "warning",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "trailing-comma": [false],
    "no-bitwise": false,
    "jsdoc-format": true,
    "deprecation": true,
    "interface-name": true,
    "no-duplicate-imports": true,
    "no-redundant-jsdoc": true,
    "no-use-before-declare": true,
    "variable-name": false,
    "object-literal-sort-keys": false,
    "member-ordering": true,
    "await-promise": true,
    "curly": true,
    "no-async-without-await": true,
    "no-duplicate-variable": true,
    "no-invalid-template-strings": true,
    "no-misused-new": true,
    "no-invalid-this": true,
    "prefer-const": true
  },
  "rulesDirectory": []
}

백엔드 구조를 설정합시다.
터미널을 열고 프로젝트 루트 디렉터리에서 다음 명령을 실행합니다.

mkdir src && touch src/AppServer.ts && touch src/start.ts

AppServer.ts는 우리가 express 응용 프로그램을 설정한 곳이다.
내부에 다음 내용 붙여넣기src/AppServer.ts

import * as bodyParser from "body-parser";
import * as controllers from "./controllers";
import { Server } from "@overnightjs/core";
import { Logger } from "@overnightjs/logger";
import * as cors from "cors";
export class AppServer extends Server {
  private readonly SERVER_STARTED = "Server started on port: ";

  constructor() {
    super(true);
    this.app.use(bodyParser.json());
    this.app.use(bodyParser.urlencoded({ extended: true }));
    this.app.use(cors());
    this.setupControllers();
  }

  private setupControllers(): void {
    const ctlrInstances = [];
    for (const name in controllers) {
      if (controllers.hasOwnProperty(name)) {
        const controller = (controllers as any)[name];
        ctlrInstances.push(new controller());
      }
    }
    super.addControllers(ctlrInstances);
  }

  public start(port: number): void {
    this.app.get("*", (req, res) => {
      res.send(this.SERVER_STARTED + port);
    });
    this.app.listen(port, () => {
      Logger.Imp(this.SERVER_STARTED + port);
    });
  }
}

이 파일에서 우리는 서버 클래스를 하룻밤 사이에 확장하는 App Server 클래스를 설정했습니다.구조 함수에서, 우리는true를 매개 변수로 전달하는 서버 클래스를 초기화합니다.그리고 나서 우리는 응용 프로그램에 중간 부품을 설정하기 시작했다.요청에서 JSON 데이터를 수신할 수 있으므로 body-parser 를 사용하여 올바른 처리를 보장합니다.
그리고 우리는 컨트롤러를 설정합니다. 우리는 짧은 시간 안에 컨트롤러를 만들 것입니다.그 다음에 우리는 start 방법을 정의했다. 이 방법은 매개 변수로 전달된 포트에서 응용 프로그램을 시작할 것이다src/start.ts에 붙여넣습니다.이것은 우리 응용 프로그램의 출발점이다.

import { config } from "dotenv";
config();
import { AppServer } from "./AppServer";

const appServer = new AppServer();
appServer.start(3000);

맨 위에서, 우리는 config 에서 dotenv 를 가져오고 호출합니다.환경 변수를 구성하여 process.env 에 로드하는 데 사용합니다.우리는 또한 서버의 새로운 실례를 시작하고 start 방법으로 사용할 포트를 전달합니다.
이때 우리는 컨트롤러를 설치해야 한다.src 내에 폴더를 만들고 이름을 controllers 로 지정합니다.src/controllers 내에 두 개의 파일을 만듭니다. BotController.ts 및 index.tsBotController.ts에 다음 코드 붙여넣기

import { Request, Response } from "express";
import { Controller, Post } from "@overnightjs/core";
import { Logger } from "@overnightjs/logger";

@Controller("api/bot")
export class BotController {

}

우리의 컨트롤러 클래스에 앞서 당신은 이상한 문법을 알아차릴 수 있습니다.그것은 장식사다.우리는 그것으로 컴파일러에게 우리의 클래스가 컨트롤러라는 것을 알려 주었다.우리는 또한 하나의 매개 변수를 전달했는데, 그것은 우리의 URL 경로이다.이게 있으면 우리는 지금 [SERVER]:[PORT]/api/bot 에게restful 요청을 할 수 있습니다.
우리는 아직 어떤 노선도 정의하지 않았다.Twilio의 경우 POST 노선이 하나만 필요합니다.BotController 클래스에 다음 코드를 추가합니다.

@Post()
  private postMessage(request: Request, response: Response) {
    Logger.Info("A post request has been received");
    return response.status(200).json({
      message: "A post request has been received"
    });
  }

다른 decorator를 보실 수 있습니다. 컴파일러가 POST 요청을 처리하는 방법을 알려 줍니다.src/controllers/index.ts에 다음 코드를 추가합니다.이것은 미래의 컨트롤러를 쉽게 내보낼 수 있도록 우리의 컨트롤러를 내보낼 것이다.

export * from "./BotController";

여기 있다 재미있는 물건

재미있는 일을 시작할 때가 되었다.Twilio와 Dialogflow와 통신할 응용 프로그램을 설정합니다.utils 아래에 src 라는 폴더를 만듭니다.UTIL 내부에 두 개의 파일 만들기: dialogflow.ts 및 twilio.ts내부 Dialogflow.ts:

// dialogflow.ts

const dialogflow = require("dialogflow");
const credentials = require("../../credentials.json");

const sessionClient = new dialogflow.SessionsClient({
  credentials: credentials
});
const projectId: string = process.env.DIALOGFLOW_PROJECT_ID!;

export const runQuery = (query: string, number: string) => {
  return new Promise(async (resolve, reject) => {
    try {
      // A unique identifier for the given session
      //const sessionId = uuid.v4();
      const sessionId = number;
      // Create a new session

      const sessionPath = sessionClient.sessionPath(projectId, sessionId);

      // The text query request.
      const request = {
        session: sessionPath,
        queryInput: {
          text: {
            // The query to send to the dialogflow agent
            text: query,
            // The language used by the client (en-US)
            languageCode: "en-US"
          }
        }
      };

      // Send request and log result
      const responses = await sessionClient.detectIntent(request);

      const result = responses[0].queryResult;

      resolve(result);
    } catch (error) {
      reject(error);
    }
  });
};

여기에서 Dialogflow 및 자격 증명을 가져옵니다.Dialogflow에서 채팅 로봇을 설정할 때 다운로드한 json 파일입니다.그 서류를 기억하십니까?항목의 루트 폴더로 이동합니다.자격 증명 파일을 사용하여 새 SessionsClient를 설정하고 있습니다.우리의 runQuery 함수에서, 우리는 Dialogflow에 보낼 조회와 사용자의 Whatsapp 번호를 수신합니다. 우리는 이 번호를 사용하여 이 사용자 특유의 Dialogflow 세션을 설정할 것입니다.그런 다음 Dialogflow로 질의를 보내고 응답으로 돌아갑니다.twilio.ts에 다음 코드를 추가합니다.

import { Twilio } from "twilio";
const accountSid = process.env.TWILIO_ACCOUNT_SID!;
const authToken = process.env.TWILIO_AUTH_TOKEN!;

const client = new Twilio(accountSid, authToken);

export const sendMessage = (to: string, from: string, body: string) => {
  return new Promise((resolve, reject) => {
    client.messages
      .create({
        to,
        from,
        body
      })
      .then(message => {
        resolve(message.sid);
      })
      .catch(error => {
        reject(error);
      });
  });
};

여기에서 우리는 새로운 Twilio 클라이언트를 만들고 우리의 Twilio 계정 SID와 인증 영패를 사용하여 실례화했다.그리고 우리는 client.messages.create 함수를 호출합니다. 이 함수는 사용자의 번호, 메시지를 보내는 번호 (이 예에서 Twilio 샌드박스 번호) 와 주체를 수신합니다.그런 다음 메시지 ID로 돌아갑니다.
우리가 아직 정의되지 않은 환경 변수를 사용했다는 것을 알 수 있습니다.프로젝트의 루트 디렉터리에 .env 파일을 만듭니다.내부에 다음 코드를 붙여넣고 자리 표시자를 적당한 값으로 교체해야 합니다.나는 당신에게 이 강좌 중 어느 때에 필요한 값을 주의할 것을 요구합니다.

TWILIO_ACCOUNT_SID=PLACEHOLDER
TWILIO_AUTH_TOKEN=PLACEHOLDER
DIALOGFLOW_PROJECT_ID=PLACEHOLDER

BotController.ts 로 돌아가서 다음 코드로 바꾸기 postMessage 방법.

@Post()
  private postMessage(request: Request, response: Response) {
    // Here we get the message body, the number to which we're sending the message, and the number sending the message.
    const { Body, To, From } = request.body;

    // Here we're sending the received message to Dialogflow so that it can be identified against an Intent.
    runQuery(Body, From)
      .then((result: any) => {
        // We send the fulfilment text received back to our user via Twilio
        sendMessage(From, To, result.fulfillmentText)
          .then(res => {
            console.log(res);
          })
          .catch(error => {
            console.error("error is ", error);
            Logger.Err(error);
          });
      })
      .catch(error => {
        console.error("error is ", error);
        Logger.Err(error);
      });
    return response.status(200).send("SUCCESS");
  }

Twilio는 Whatsapp의 메시지를 받았을 때 이 방법을 누릅니다.우리는 메시지 본문, 발송자, 수신자를 추출한다.그리고 우리는 받은 본문을 Dialogflow에 보내고 실현된 텍스트를 얻을 것입니다.이전에 설정한 Twilio 클라이언트를 사용하면 텍스트를 사용자에게 전송할 수 있습니다.
이제 한 가지 할 일만 남았다.열기package.json 및 스크립트 대체

"scripts": {
    "tsc": "tsc",
    "prestart": "npm run build",
    "dev": "ts-node src/start.ts",
    "dev:watch": "nodemon",
    "build": "rm -rf ./build/ && tsc",
    "start": "node build/start.js"
  },

전체 파일은 다음과 같습니다.

{
  "name": "wa-chatbot",
  "version": "1.0.0",
  "description": "",
  "main": "build/start",
  "scripts": {
    "tsc": "tsc",
    "prestart": "npm run build",
    "dev": "ts-node src/start.ts",
    "dev:watch": "nodemon",
    "build": "rm -rf ./build/ && tsc",
    "start": "node build/start.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/body-parser": "^1.17.1",
    "@types/cors": "^2.8.6",
    "@types/dialogflow": "^4.0.4",
    "@types/express": "^4.17.2",
    "@types/node": "^13.1.2",
    "@types/twilio": "^2.11.0",
    "nodemon": "^2.0.2",
    "ts-lint": "^4.5.1",
    "ts-node": "^8.5.4",
    "typescript": "^3.7.4"
  },
  "dependencies": {
    "@overnightjs/core": "^1.6.11",
    "@overnightjs/logger": "^1.1.9",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dialogflow": "^1.0.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "twilio": "^3.39.1"
  }
}

만약 내가 어떤 의존항을 빠뜨렸다면, 당신은 다시 실행할 수 있습니다 npm install.노드몬을 설정해야 합니다.프로젝트의 루트 폴더에 nodemon.json 를 만들고 다음 내용을 붙여넣습니다.

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/public"],
  "exec": "NODE_ENV=development ts-node src/start.ts"
}

이제 npm run dev:watch 을 실행하고 프로젝트가 성공적으로 실행되었는지 확인할 수 있습니다.다음은 로컬 서버를 공개해야 합니다. 는 가장 좋은 소스 오픈 솔루션 중 하나이지만 원하는 모든 것을 사용할 수 있습니다.
노출된 서버 URL을 복사하여 엽니다Ngrok.메시지가 전송되면 의 URL을 공개된 URL로 바꿉니다.경로를 우리의 로봇 컨트롤러에 추가하는 것을 잊지 마라.i、 e./api/botTwilio Whatsapp Sandbox
새 변경 사항을 저장하면 Twilio 샌드박스 번호로 메시지를 보낼 수 있습니다. 응답을 볼 수 있습니다.

여기에 너에게 줄 숙제가 좀 있다.POST 요청을 처리하는 새 컨트롤러를 만들고 URL을 의 상태 콜백 URL 입력에 전달합니다.창의적이어야 합니다. 사용자가 당신의 메시지와 메시지를 읽을 때 알림을 받아야 합니다.
전체 소스 코드는 여기서 찾을 수 있습니다 Twilio Whatsapp Sandbox