Flutter 앱과 Amazon Lex 통합

산업과 기업이 경쟁사보다 우위를 유지하려면 모바일 앱에서 더 나은 고객 서비스를 제공하는 것이 중요합니다. 따라서 Flutter 앱에 봇을 통합하는 방법을 이해하는 것도 똑같이 중요합니다. Amazon이 Amplify 서비스를 통해 Flutter 앱 개발에서 점유율을 높이고 있기 때문에 이제 Amazon lex와 Flutter의 통합이 그 어느 때보다 쉬워졌습니다.

현재 Amplify는 인증, 저장소 및 Flutter용 분석을 지원합니다.

REST API를 사용하여 Lex와 통신합니다.

무엇을 사용할까요💻?

우리는 봇과 채팅을 만들고 작업을 효율적이고 쉽게 만들기 위해 flutter pub의 몇 가지 놀라운 패키지를 사용할 것입니다.
시작하려면 다음 패키지를 설치해야 합니다.

http 0.13.3 : Amazon Lex에 요청 보내기

sigv4 5.0.0 : 서비스 인증을 위해

uuid 3.0.4 : 고유 uuid 생성

flutter_chat_ui 1.1.9 : 기본 채팅 UI를 만들기 위해

이제 우리의 비전은 매우 명확하고 프로젝트를 시작할 준비가 되었습니다.

시작하자

일반적으로 백엔드를 먼저 설정한 다음 프런트엔드를 연결합니다. 다행히 AWS에서 Amazon Lex를 성공적으로 설정했습니다.

1. 백엔드 파일 설정

lex 봇과 상호 작용하는 코드를 포함할 bot_service.dart라는 파일을 만들었습니다.

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;
  }
}

Amazon Lex 봇의 필수 값과 지역을 삽입하는 동안 특별히 주의하십시오.
<ACCESS_KEY> 및 <SECRET_ACCESS_KEY>에서 Amazon 역할의 암호 값을 삽입하거나 봇에 대한 새 역할을 생성하고 Amazon Lambda 함수를 호출하도록 허용할 수 있습니다. 봇).

2. 채팅 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,
      ),
    );
  }
}

`_loadMessages() 함수`: 이 함수는 Firebase/로컬 파일에서 메시지를 로드합니다. 여기에서는 사용자가 이 봇을 열 때 봇에 의해 인스턴스화될 시작 메시지를 푸시하고 있습니다.

`_addMessage() 함수`: 이 함수는 LEX API와 추가로 상호 작용하여 사용자가 보낸 메시지의 결과를 가져오는 bot_service.dart와 상호 작용합니다.

3. 최종 제품입니다🔥🔥

봇 화면

축하합니다🎉

잘하셨습니다. Flutter 앱을 Lex 봇에 연결했습니다... 잘하셨습니다!
이 기사와 관련하여 질문이나 우려 사항이 있는 경우 알려주시면 최선을 다해 돕거나 자세히 알아보겠습니다.