Flutter ChatBotApp Part-1에서 화웨이 클라우드 기능을 챗봇 서비스로 사용하기


소개

이 기사에서는 Huawei Cloud Functions 서비스를 Flutter의 ChatBotApp에서 Chatbot 서비스로 사용하는 방법을 알아봅니다. Cloud Functions는 서버리스 컴퓨팅을 지원합니다. 서비스 로직을 함수로 분할하여 앱 개발 및 O&M을 단순화하는 FaaS(Function as a Service) 기능을 제공하고, 앱 기능을 보다 쉽게 ​​구현할 수 있도록 Cloud DB 및 Cloud Storage와 연동되는 Cloud Functions SDK를 제공합니다. Cloud Functions는 실제 트래픽을 기반으로 기능을 자동으로 확장 또는 축소하여 서버 리소스 관리에서 벗어나 비용을 절감할 수 있도록 도와줍니다.

주요 기능

주요 컨셉

서비스 작동 방식
Cloud Functions를 사용하려면 AppGallery Connect에서 특정 서비스 기능을 구현할 수 있는 클라우드 기능을 개발하고 이에 대한 트리거(예: HTTP 요청에 대한 HTTP 트리거, Cloud DB 통합 후 데이터 삭제 또는 삽입 요청에 대한 Cloud DB 트리거)를 추가해야 합니다. . Cloud Functions SDK를 통합한 앱이 특정 함수 트리거 조건을 충족하면 앱에서 클라우드 함수를 호출할 수 있으므로 서비스 함수 구축이 크게 용이해집니다.

플랫폼 지원

개발 개요
IDE에 Flutter 및 Dart 플러그인을 설치해야 하며 Flutter 및 Dart에 대한 사전 지식이 있다고 가정합니다.

하드웨어 요구 사항
  • Windows 10을 실행하는 컴퓨터(데스크톱 또는 노트북).
  • 디버깅에 사용되는 Android 휴대폰(USB 케이블 포함).

  • 소프트웨어 요구 사항
  • 자바 JDK 1.7 이상.
  • Android 스튜디오 소프트웨어 또는 Visual Studio 또는 Code가 설치되어 있습니다.
  • HMS 코어(APK) 4.X 이상.

  • 통합 프로세스

    1단계: Flutter 프로젝트를 만듭니다.


    2단계: 앱 수준 Gradle 종속성을 추가합니다. 내부 프로젝트 Android > 앱 > build.gradle을 선택합니다.

    apply plugin: 'com.android.application'
    apply plugin: 'com.huawei.agconnect'
    


    루트 수준 Gradle 종속성

    maven {url 'https://developer.huawei.com/repo/'}
    classpath 'com.huawei.agconnect:agcp:1.5.2.300'
    


    3단계: Android Manifest 파일에 아래 권한을 추가합니다.<uses-permission android:name="android.permission.INTERNET" />5단계: 다운로드한 파일을 프로젝트의 상위 디렉토리에 추가합니다. 종속성 아래의 pubspec.yaml 파일에서 플러그인 경로를 선언합니다.

    자산 이미지의 경로 위치를 추가합니다.





    코딩을 시작하자

    메인 다트

    void main() {
      runApp(const MyApp());
    }
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'ChatBotService',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'ChatBotService'),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    class _MyHomePageState extends State<MyHomePage> {
      bool isLoggedIn = false;
      String str = 'Login required';
      final HMSAnalytics _hmsAnalytics = new HMSAnalytics();
    
      List<String> gridItems = ['Email Service', 'Call Center', 'FAQ', 'Chat Now'];
    
      @override
      void initState() {
        _enableLog();
        super.initState();
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child:  
                Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Visibility(
                  visible: true,
                  child: Card(
                    child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Text(
                        str,
                        style: const TextStyle(color: Colors.teal, fontSize: 22),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              if (!isLoggedIn) {
                setState(() {
                  isLoggedIn = true;
                  signInWithHuaweiID();
                });
                print('$isLoggedIn');
              } else {
                setState(() {
                  isLoggedIn = false;
                  signOutWithID();
                });
                print('$isLoggedIn');
              }
            },
            tooltip: 'Login/Logout',
            child: isLoggedIn ? const Icon(Icons.logout) : const Icon(Icons.login),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
      void signInWithHuaweiID() async {
        try {
          // The sign-in is successful, and the user's ID information and authorization code are obtained.
          Future<AuthAccount> account = AccountAuthService.signIn();
          account.then(
            (value) => setLoginSuccess(value),
          );
        } on Exception catch (e) {
          print(e.toString());
        }
      }
      Future<void> _enableLog() async {
        _hmsAnalytics.setUserId("ChatBotServiceApp");
        await _hmsAnalytics.enableLog();
      }
      void setLoginSuccess(AuthAccount value) {
        setState(() {
          str = 'Welcome ' + value.displayName.toString();
        });
        showToast(value.displayName.toString());
        print('Login Success');
    
      }
      Future<void> signOutWithID() async {
        try {
          final bool result = await AccountAuthService.signOut();
          if (result) {
            setState(() {
              str = 'Login required';
              showToast('You are logged out.');
            });
          }
        } on Exception catch (e) {
          print(e.toString());
        }
      }
      Future<void> showToast(String name) async {
        Fluttertoast.showToast(
            msg: "$name",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIosWeb: 1,
            backgroundColor: Colors.lightBlue,
            textColor: Colors.white,
            fontSize: 16.0);
      }
    }
    
    


    결과



    트릭과 팁
    agconnect-services.json 파일이 추가되었는지 확인합니다.
    종속성이 yaml 파일에 추가되었는지 확인하십시오.
    종속성을 추가한 후 flutter pug get을 실행합니다.
    agc에서 서비스가 활성화되어 있는지 확인하십시오.
    이미지가 yaml 파일에 정의되어 있는지 확인합니다.

    결론
    이 기사에서는 Flutter ChatBotApp의 분석 키트인 Huawei 계정 키트를 통합하는 방법을 배웠습니다. 계정 키트가 통합되면 사용자는 초기 액세스 권한을 부여한 후 Huawei ID로 빠르고 편리하게 앱에 로그인할 수 있습니다. 2부에서는 실제 Cloud Functions as Chatbot 서비스에 대해 알아봅니다.

    읽어주셔서 정말 감사합니다. 이 기사가 Flutter ChatBotApp에서 Huawei 계정 키트와 분석 키트의 통합을 이해하는 데 도움이 되기를 바랍니다.

    참조
    Cloud Functions
    Checkout in forum

    좋은 웹페이지 즐겨찾기