Amazonのlexとフラッターアプリを統合する

業界や企業の競争相手に優位性を維持するために、より良い顧客サービスの提供は、モバイルアプリケーションで重要です.それで、それはフラッターアプリでボットを統合する方法を理解することも等しく重要です.アマゾンは、その増幅サービスを使用してフラッタアプリの開発におけるシェアを増加している今、フラッタとアマゾンのlexの統合は今までより簡単になっている.
現時点では、増幅は、フラッタの認証、ストレージ、および解析をサポートしています.
LEXでREST APIを使用して通信します.

私たちが使用するもの💻?
我々はボットとチャットを作成し、いくつかの驚くべきパッケージを使用してからflutter pub 私たちの仕事を効率的かつ容易にする.
起動するには、次のパッケージをインストールする必要があります.

http 0.13.3 : リクエストをAmazon

sigv4 5.0.0 : サービスを認証する

uuid 3.0.4 : ユニークUUIDを作成するには

flutter_chat_ui 1.1.9 : 基本的なチャットUIを作成するには

今、我々のビジョンは明確で、我々のプロジェクトを始める準備ができています.


レッツスタート
通常、バックエンドを最初に設定し、フロントエンドを接続します.うまくいけば、AWSでAmazonのlexをうまくセットアップしました.


バックエンドファイル
ファイル名を作成しましたbot_service.dart これは、我々のlexボットと対話するコードが含まれます.

import 'dart:convert';
import 'dart:developer';

import 'package:amazon_cognito_identity_dart_2/sig_v4.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:sigv4/sigv4.dart';

class BotService {
  Map<String,dynamic> result;
  String botName= "<NAME_OF_BOT>";
  String kAccessKeyId = '<ACCESS_KEY>';
  String kSecretAccessKey = '<SECRET_ACCESS_KEY>';
  String botAlias= "<BOT_ALIAS>";
  String botAWSRegion= "<AWS_LEX_REGION>";


  Future<Map<String,dynamic>> callBot(String message) async {
    var response;
    String requestUrl= "https://runtime.lex."+botAWSRegion+".amazonaws.com/bot/"+botName+"/alias/"+botAlias+"/user/1234/text";

    Sigv4Client client = Sigv4Client(
      region: botAWSRegion,
      serviceName: 'lex',
      defaultContentType: 'application/json; charset=utf-8',
      keyId: kAccessKeyId,
      accessKey: kSecretAccessKey,
    );

    final request = client.request(
     requestUrl,
      method: 'POST',
      body: jsonEncode({'inputText': message}),
    );

    response = await http.post(request.url,
        headers: request.headers, body: request.body);
    result = jsonDecode(response.body);
    return result;
  }
}

必要な値とアマゾンのlexボットの領域を挿入しながら特別な注意を取る.
イン<ACCESS_KEY> and <SECRET_ACCESS_KEY> Amazon Roleの秘密の値を挿入したり、ボットの新しい役割を作成したり、Amazonラムダ関数を呼び出すことができます(BOT用の新しいロールを作成するのを好みます).

チャットのUIを作る
チャットUIを作成するにはflutter_chat_ui パッケージは、メッセージやチャットメッセージモデルを処理するように、すでに構築された機能の多くを提供します.

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:uuid/uuid.dart';

import './bot_service.dart';

class BotScreen extends StatefulWidget {
  const BotScreen({Key? key}) : super(key: key);

  @override
  _BotScreenState createState() => _BotScreenState();
}

class _BotScreenState extends State<BotScreen> {
  List<types.Message> messages=[];
  final _user = const types.User(id: '1234556');
  final _bot = const types.User(id: "123");
//id of bot and user doesn't matter here as we have only pair interaction

  BotService _botService = BotService();

  @override
  void initState() {
    super.initState();
    _loadMessages();
  }

  void _addMessage(types.Message message) async {
    setState(() {
      messages.insert(0, message);
    });
    log("${message.toJson()["text"]}");
    var data = await _botService.callBot(message.toJson()["text"]);
    log("#####${data['message']}");
    setState(() {
      messages.insert(0, botMessageReply(data['message']));
    });
  }

  types.Message botMessageReply(String message) {
    return types.TextMessage(
      author: _bot,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message,
    );
  }

  void _handleSendPressed(types.PartialText message) {
    final textMessage = types.TextMessage(
      author: _user,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message.text,
    );
    _addMessage(textMessage);
  }

  void _loadMessages() async {
    List<types.Message> messagesList = [];
    Future.delayed(Duration(milliseconds: 300), () {
      messagesList.add(types.TextMessage(
        author: _bot,
        createdAt: DateTime.now().millisecondsSinceEpoch,
        id: const Uuid().v4(),
        text: "Hello. My name is TUTU- your bot. How can I help you?",
      ));

      setState(() {
        messages = messagesList;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(automaticallyImplyLeading: false,title:Text("BOT"),backgroundColor:Colors.purpleAccent),
      body: Chat(
        messages: messages,
        showUserNames: true,
        onSendPressed: _handleSendPressed,
        user: _user,
      ),
    );
  }
}

`_この関数は、firebase/localファイルからこの関数を読み込みます.ここで、私はユーザがこのロボットを開くとき、ボットによってインスタンス化される起動メッセージを押しています.

`_addmessage ()関数この関数はBotCountサービスと対話します.さらに、LEX APIがユーザーによって送られたメッセージの結果を得るために相互作用するDART.

3 .最終製品はこちら🔥🔥
ボットスクリーン


祝辞🎉

偉大な仕事、あなたはlexボットにフラッタアプリを接続しました.よくできた!
あなたがこの記事についての質問または懸念があるならば、知らせてください、そして、私は助けるために、または、より多くを学ぶために最善を尽くします.