AWSアンプでServerlessなChatbotを開発する方法

AWSアンプでServerlessなChatbotを開発する方法

あなたのchatbot、ステップバイステップを作成します.コード＆アーキテクチャ.
このブログ記事では、AWS Amplify & AWS Lexを使ったチャットボットアプリケーションの作成について紹介します.この技術スタックを使用することについての大部分は、データサイエンスやNLP知識は、AWSによって管理されたサービスで純粋に作成されるので、必要ないということです.同じ技術はAlexaの中で使用されます.したがって、それは防弾スタックです.
このポストでは、車を予約するためのチャットボットを作成します.あなたはコードを見つけることができますhere .
レッツゴー!

建築
建築から始めましょう.

アーキテクチャには4つの異なるコンポーネントがあります.

Webインターフェイス
Webインターフェイスは、単一のページアプリケーション(SPA)、反応＆typescriptで構築されます.これは私たちの機会を格安の方法でアプリケーションをホストし、非常に高速なユーザーには、世界中のサービスを提供します.また、既に存在しているライブラリを使用することもできます.

AWS増幅
このアプリケーションでは、増幅2つの異なるユースケースに使用されます.

クラウド環境をブートストラップし、インフラストラクチャをコードとして構築するためのCLIを増幅する

AWSコンポーネントにアクセスし、chatbotインターフェイスを構築するためのjsライブラリを増幅します.

Webアプリケーションは、バックグラウンドでS 3とCloudfrontを使用してAmplifyを介してホストされます.chatbot関数とlambda関数はamplifyで作成します.

アマゾンLex
アマゾンLexは、AWSによるChatbotインタラクションサービスです.それはアマゾンAlexaを使用して、多くの顧客にサービスを提供するために構築されているのと同じサービスです.

アムズランドバ
ラムダはAWSによるServerlessな機能サービスです.このユースケースはオプションです.しかし、通常、それは彼らにより多くのビジネスロジックを加えることによってchatbotsの機能性を広げるのに用いられます.実際には、UFOを予約するため.
あなたはアーキテクチャが本当に簡単で、ちょうど4つの異なる部分から成るのを見ることができます.

コードしましょう!
さあ、実際のchatbotアプリケーションを作成しましょう.あなたがすでに持っていないならば、Amplifythis guide .
このプロジェクトの前提条件は以下の通りです.

増幅する

糸またはNPM

国立天文台

AWSアカウント

プロジェクト設定

反応アプリ
まず最初に、プロジェクト初期設定とフォルダ構造から始めましょう.プロジェクトをコンソールに入力するフォルダに移動します.

npx create-react-app chatbot-with-amplify --template typescript

これは、主な言語としてtypescriptで最初のフォルダ構造をブートストラップします.

増幅アプリ
今、我々は増幅のために同じことを行います.ジャストランamplify init 新しく作成されたプロジェクトフォルダ内で、CLIコマンドに従ってください.

cd chatbot-with-amplify
amplify init

CLIワークフロー:
ほとんどどこでもデフォルト値を使用することができます.

? Enter a name for the project chatbotwithamplify
The following configuration will be applied:

Project information
| Name: chatbotwithamplify
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start? Initialize the projectwith the above configuration? (Y/n) YUsingdefault provider  awscloudformation
? Select the authentication method you want touse: (Use arrow keys)
❯ AWS profile
  AWS accesskeys

ここでは、認証方法(プロファイルまたはアクセスキーのいずれか)を選択し、Enterキーを押す必要があります.私は常にあなたの異なるアカウントのAWSプロファイルを使用することをお勧めします.Here を作成する方法の簡単な説明です.それを選択した後、あなたのamplify .

サンプルボット
ここで、実際のchatbotコンポーネントを構築します.AmplifyはChobotと呼ばれる独自のカテゴリを持っていますinteractions . 我々は、別の旅行を予約するための定義済みのchatbotテンプレートを使用して起動します.
まず、私たちはinteraction コンポーネント.

amplify add interactions

私たちは異なるものの束を構成しなければなりません.

? Provide a friendly resource name that will be used to label this category in the project: (lex282f4c21) lex282f4c21
? Would you like to start with a sample chatbot or start from scratch? (Use arrow keys)
❯ Start with a sample
  Start from scratch
? Choose a sample chatbot: (Use arrow keys)
❯ BookTrip
  OrderFlowers
  ScheduleAppointment
? Please indicate if your use of this bot is subject to the Children's Online Privacy Protection Act (COPPA). No
Successfully added resource

我々は、サンプルChatbot Booktripから始めます.このリソースを追加した後、我々はAWSにプッシュされます.The push コマンドを追加するすべてのコンポーネントの簡単な概要を示します.

amplify push

出力:

✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────────┬─────────────────┬───────────┬───────────────────┐
│ Category     │ Resource name   │ Operation │ Provider plugin   │
├──────────────┼─────────────────┼───────────┼───────────────────┤
│ Auth         │ cognito8550b67d │ Create    │ awscloudformation │
├──────────────┼─────────────────┼───────────┼───────────────────┤
│ Interactions │ lex282f4c21     │ Create    │ awscloudformation │
└──────────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) Y

概要では、増幅された1つの新しいInteraction コンポーネントlex282f4c21 とAuth BOTの認証方法として機能するコンポーネント.入力を押すと、CloudFormationテンプレートが実行され、AWSアカウントで展開されます.
これでサービスを開くことができますLex 新しく作成されたchatbotを見てください.BookTrip_dev .

これはchatbotの概要がどのように見えるかです.私たちはあなたがここで見ることができるさまざまな部分を通過します.

意図
左側には別の意図を見ることができます.二つある

BookCar_dev

BookHotel_dev

一つのchatbotは、それが役立つことができる異なる意図を持つことができます.我々は、ちょうど見ますBookCar_dev .

サンプル発話
発話は、特定の意図を誘発する方法に関する文か語です.の場合BookCar これらの発言は以下の通りです.

車を予約する

車を再送する

車を予約する

スロット
スロットは、ユーザーによって収集されなければならないデータポイントです.車を予約する例では、時間、日付、車の種類のような異なる情報が必要です.スロットには以下のような属性があります.

優先順位:スロットの順序

必要:このスロットが必要ですか?

スロットタイプ:スロットはどんなタイプですか.定義済みの型がありますAMAZON.DATE or AMAZON.TIME 日付と時刻にテキストを解析することができます.例えば、自己定義型はCarTypeValues . これらはテンプレートで定義され、下の左側に見ることができますSlotTypes .

プロンプト:スロットとしてスロットを受け取るためにユーザーを表示する質問は何ですか?

確認プロンプト
これは、chatbot会話の最終的な確認です.この例では、全体の車予約の概要です.

chatbotのテスト
ウィンドウの右側にTestchatbotをクリックしてチャットボットをテストすることができます.チャットウィンドウがポップアップ表示されます.

あなたがメッセージを入力して、あなたが満たされたスロットを見る反応を受ける間、これは本当に役に立ちます.事前定義されたスロット型についての大きなことは、適切な日付形式にテキストに隠されている例の日付のためのAWSを解析することです.私が質問に答えるならば、あなたはどんな日にあなたのレンタルを始めたいですか?明日、それは正しい日付にそれを解析します.

チャタリング情報
すべては、amplifyで定義されたサンプルによって作成されました.AmplifyとしてAmplify asインフラストラクチャを使用しているので、これはコードとして定義できます.あなたがファイルであなたのプロジェクトを見るならばamplify/backend/interactions/lex282f4c21/lex-params.json つのJSONファイル内のすべてのパラメータが表示されます.

{"resourceName": "lex282f4c21","intents": [
        {"cancelMessage": "Okay, I have cancelled your reservation in progress.","confirmationQuestion": "Okay, I have you down for a {CarType} rental in {PickUpCity} from {PickUpDate} to {ReturnDate}. Should I book the reservation?","slots": [
                {"name": "PickUpCity","type": "AMAZON.US_CITY","prompt": "In what city do you need to rent a car?","required": true,"customType": false },
              ...
            ],"utterances": ["Make a car reservation","Reserve a car","Book a car" ],"intentName": "BookCar","newSlotTypes": [
                {"slotType": "CarTypeValues","slotTypeDescription": "Enumeration representing possible types of cars available for rental","slotValues": ["standard","full size",
                       ...
                    ]
                }
            ]
        }
    ],"outputVoice": "Matthew","botName": "BookTrip","coppa": false}

これらのパラメータを使用すると、調整することができますし、任意の方法であなたのchatbotをカスタマイズする😉

インタラクションコンポーネント
次のステップは、我々自身のWebアプリケーションでChatbotコンポーネントを持つことです.そのために、我々は我々の大好きなIDE(おそらくVSCode)で反応プロジェクトを開けて、新しいフォルダを加えますcomponents and chatbot インストール@aws-amplify/ui-react 定義済みのUIライブラリを使用する場合.その後、開発サーバを起動します.

cd chatbot-with-amplify
code .
mkdir src/components
mkdir src/components/Chatbot
touch src/components/Chatbot/Chatbot.tsx
yarn add aws-amplify @aws-amplify/ui-react 
yarn start

にChatbot.tsx ファイルを返しますAmplifyChatbot コンポーネントと私たちのchatbotに接続します.ファイル全体を見ることができるhere .
.

<AmplifyChatbot
    botName="BookTrip_dev" botTitle="This is a chatbot made with Amplify" welcomeMessage="Hi! I was made with Amplify. How can I help you?"/>

これは、chatbotの全体のコンポーネントをレンダリングし、我々はすでにlexのインターフェイスのように話すことができます.ちょうどあなたのsrc/App.tsx そして、chatbotを加えてください、そして、あなたはそれを見ることができなければなりません.参照App.tsx here :App.tsx

functionApp() {return <Chatbot />;
}

あなたのブラウザと頭を開く場合http://localhost:3000/ あなたのchatbotアプリを見ることができますし、それと対話します.

会話を終えた後に、ブラウザでコンソールをチェックし、満たされたスロットを見つけることができます.

{"slots": {"CarType": "luxuery","DriverAge": "21","PickUpCity": "Munich","PickUpDate": "2021-09-01","ReturnDate": "2021-09-02" }
}

仕上げ🥳
それだ!それはchatbotを構築するためのワークフロー全体です.このユースケースでは、サンプルchatbotを構築する簡単なアプローチを使用しました.ワークフローは、ゼロから1つを構築するためのほぼ同じです.次の記事の1つで、私はそれを正確に行う方法を示します.
あなたがAWSに関してより多くを知りたいならば、Serverlessで、AWSにあなたの製品をブートストラップしてください.