AWS 시작하기

Flutter 애플리케이션 구축

AWS Amplify를 사용하여 간단한 Flutter 애플리케이션 생성

모듈 5: Analytics 범주 추가

이 모듈에서는 Analytics 범주를 추가하고, 사용자 지정 이벤트를 생성하고, 추적 중인 분석을 볼 수 있습니다.

소개

이제 사진 갤러리 앱이 사용자를 인증하고 저장소에 업로드된 사진을 찍을 수 있는 기능을 완벽하게 지원합니다. 이제 사용자가 앱과 어떻게 상호 작용하는지 이해하기 위해 분석 기록 작업에 집중해야 합니다.

이 모듈에서는 Analytics 범주를 Amplify 앱에 추가하고, 사용자 지정 분석 이벤트를 생성하고, 이러한 이벤트를 구현하고, Amazon Pinpoint 대시보드를 통해 분석 내용이 추적되는지 확인하겠습니다.

배우게 될 내용

  • Analytics 범주 생성
  • Amazon Pinpoint에 분석 이벤트 기록
  • Amazon Pinpoint 대시보드 보기

주요 개념

Analytics - 앱의 각 인스턴스에 대해 이벤트가 발생할 때 기록하는 것은 사용자 행동에 대한 분석을 수집하는 중요한 방법이 될 수 있으므로 앱에서 가장 중요한 기능을 보다 잘 이해할 수 있습니다.

 완료 시간

10분

 사용되는 서비스

구현

  • Analytics 서비스 생성

    터미널을 통해 프로젝트의 루트 디렉터리에서 다음을 실행하여 Analytics 서비스를 Amplify 프로젝트에 추가합니다.

    amplify add analytics

    Amplify CLI에 Analytics 서비스를 구성하기 위한 일련의 질문이 표시됩니다. Enter 키를 눌러 각 질문에 대해 기본 대답을 제공합니다. 출력은 다음과 같습니다.

    ➜  photo_gallery git:(master) ✗ amplify add analytics
    ? Select an Analytics provider Amazon Pinpoint
    ? Provide your pinpoint resource name: photogallery
    Adding analytics would add the Auth category to the project if not already added.
    ? Apps need authorization to send analytics events. Do you want to allow guests
    and unauthenticated users to send analytics events? (we recommend you allow this
     when getting started) Yes

    리소스가 완전히 구성되면 다음과 같은 출력이 표시됩니다.

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    Analytics를 추가하면 Auth 범주가 업데이트됩니다. 백엔드를 구성하기 전에 다음을 실행하여 이를 확인할 수 있습니다.

    amplify push

    Amplify 앱의 변경 사항에 대한 상태 보고서를 얻게 됩니다.

    ➜  photo_gallery git:(master) ✗ amplify push
    ✔ Successfully pulled backend environment dev from the cloud.
    
    Current Environment: dev
    
    | Category  | Resource name        | Operation | Provider plugin   |
    | --------- | -------------------- | --------- | ----------------- |
    | Analytics | photogallery         | Create    | awscloudformation |
    | Auth      | photogallery42b5391b | Update    | awscloudformation |
    | Storage   | s33daafe54           | No Change | awscloudformation |
    ? Are you sure you want to continue? Yes

    Analytics 리소스가 백엔드에 구성된 후에는 성공 메시지와 함께 앱의 Pinpoint 대시보드에 대한 링크가 표시됩니다.

    ✔ All resources are updated in the cloud
    
    Pinpoint URL to track events https://us-west-2.console.aws.amazon.com/pinpoint/home/?region=us-west-2#/apps/ca14fce9dd034d6dbd7ca3ec27afc67c/analytics/overview
    

    이 대시보드를 보려면 링크를 클릭합니다. 다음과 같습니다.

    FlutterApp-Module5Photo1

    몇 가지 분석 이벤트를 기록한 후 대시보드를 다시 살펴보겠습니다.

  • 종속 구성 요소 설치

    Visual Studio 코드에서 pubspec.yaml을 열고 Amplify Analytics를 종속 구성 요소로 추가합니다.

    ... # amplify_storage_s3: '<1.0.0'
    
    amplify_analytics_pinpoint: '<1.0.0'
    
    ... # cached_network_image: ^2.3.3

    이제 파일을 저장하여 Visual Studio 코드가 Amplify Auth Cognito 플러그인을 설치하도록 합니다. 저장 시에 종속 구성 요소가 설치되어 있지 않은 경우 터미널에서 $ flutter pub get을 실행할 수도 있습니다.

    다음과 같은 출력이 표시됩니다.

    exit code 0
  • 플러그인 구성

    main.dart를 열고 다른 플러그인을 구성하는 데 사용되는 Amplify 인스턴스에 Analytics 플러그인을 추가합니다.

    ... // void _configureAmplify() async {
    
    _amplify.addPlugin(
        authPlugins: [AmplifyAuthCognito()],
        storagePlugins: [AmplifyStorageS3()],
        analyticsPlugins: [AmplifyAnalyticsPinpoint()]);
    
    ... // try {

    앱을 실행합니다. Amplify가 여전히 올바르게 구성되어 있으며 Analytics 플러그인이 포함되어 있음을 나타내는 성공 메시지가 로그에 계속 표시됩니다.

    flutter: Successfully configured Amplify 🎉
  • 기능 구현

    Amplify Analytics를 사용하면 다음과 같은 작업을 수행하여 분석 이벤트를 매우 손쉽게 기록할 수 있습니다.

    final myEvent = AnalyticsEvent('my_event_name');
    myEvent.properties.addStringProperty('property_name', 'property_value');
    Amplify.Analytics.recordEvent(event: myEvent);

    그러나 앱의 임의의 지점에서 이벤트를 정의하고 생성하면 유지 관리하기가 번거로워질 수 있습니다. 대신 모든 분석 이벤트를 단일 파일로 정의하고 각 이벤트를 자체 객체로 만듭니다.

    analytics_events.dart라는 새 파일을 생성하고 다음을 추가합니다.

    import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
    
    abstract class AbstractAnalyticsEvent {
      final AnalyticsEvent value;
    
      AbstractAnalyticsEvent.withName({String eventName})
          : value = AnalyticsEvent(eventName);
    }
    
    class LoginEvent extends AbstractAnalyticsEvent {
      LoginEvent() : super.withName(eventName: 'login');
    }
    
    class SignUpEvent extends AbstractAnalyticsEvent {
      SignUpEvent() : super.withName(eventName: 'sign_up');
    }
    
    class VerificationEvent extends AbstractAnalyticsEvent {
      VerificationEvent() : super.withName(eventName: 'verification');
    }
    
    class ViewGalleryEvent extends AbstractAnalyticsEvent {
      ViewGalleryEvent() : super.withName(eventName: 'view_gallery');
    }

    AbstractAnalyticsEvent를 생성하면 AnalyticsEvent 인스턴스를 포함하는 공통 속성, value가 포함된 사용자 지정 분석 이벤트 객체를 생성할 수 있습니다. 코드 한 줄로, 구현 세부 정보를 단일 파일에 보관하는 동시에 AbstractAnalyticsEvent를 인스턴스화할 수 있습니다.

    여기서 한 발 더 나아갈 수 있습니다. 사용자가 사진을 찍을 때 사용할 AbstractAnalyticsEvent를 만들면서 사용자가 디바이스의 전면 또는 후면 카메라 중 무엇을 사용했는지 추적할 수 있는 기능도 제공합니다. 이 작업을 수행하려면 먼저 AnalyticsEvent를 파라미터로 받는 AbstractAnalyticsEvents에 다른 생성자를 추가해야 합니다.

    ... // : value = AnalyticsEvent(eventName);
    
    AbstractAnalyticsEvent.withEvent({AnalyticsEvent event}) 
          : value = event;
    
    ... // AbstractAnalyticsEvent closing }

    이제 TakePictureEvent를 구현할 수 있습니다.

    class TakePictureEvent extends AbstractAnalyticsEvent {
      // 1
      TakePictureEvent._fromEvent(AnalyticsEvent event)
          : super.withEvent(event: event);
    
      // 2
      factory TakePictureEvent({@String cameraDirection}) {
        final event = AnalyticsEvent('take_picture');
        event.properties.addStringProperty('camera_direction', cameraDirection);
        return TakePictureEvent._fromEvent(event);
      }
    }
    1. AnalyticsEvent를 파라미터로 받는 super 생성자를 호출할 수 있도록 하는 _fromEvent라는 private 생성자를 생성합니다.
    2. factory 생성자는 이 이벤트를 만드는 데 사용하고 String 파라미터를 적용하여 AnalyticsEvent의 속성으로서 카메라 방향을 포함할 수 있도록 합니다.

    이제 AbstractAnalyticsEvent의 인스턴스를 AnalyticsEvent로 전환하는 기능이 있는 객체를 생성해 보겠습니다. analytics_service라는 새 파일을 생성하고 다음을 추가합니다.

    import 'package:amplify_core/amplify_core.dart';
    import 'analytics_events.dart';
    
    class AnalyticsService {
      static void log(AbstractAnalyticsEvent event) {
        Amplify.Analytics.recordEvent(event: event.value);
      }
    }

    AnalyticsService는 간단하며, AbstractAnalyticsEvent를 받아 값을 Amplify.Analytics에 전달하는 로그라는 정적 메서드가 있습니다. 정말 간단합니다!

    이제 각각의 AbstractAnalyticsEvent 클래스를 구현할 수 있습니다.

    login_page.dart의 _login 함수에 LoginEvent를 추가합니다.

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(LoginEvent());
    
    ... // _login closing }

    sign_up_page.dart의 _signUp 함수에 SignUpEvent를 추가합니다.

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(SignUpEvent());
    
    ... // _signUp closing }

    verification_page.dart의 _verify 함수에 VerificationEvent를 추가합니다.

    ... // widget.didProvideVerificationCode(verificationCode);
    
    AnalyticsService.log(VerificationEvent());
    
    ... // _verify closing }

    gallery_page.dart의 생성자에 ViewGalleryEvent를 추가합니다.

    ... // : super(key: key) {
    
    AnalyticsService.log(ViewGalleryEvent());
    
    ... // constructor closing }

    마지막으로 TakePictureEvent를 camera_page.dart의 _takePicture에 추가합니다.

    ... // widget.didProvideImagePath(path);
    
    AnalyticsService.log(TakePictureEvent(
        cameraDirection: widget.camera.lensDirection.toString()));
    
    ... // } catch (e) {

    이 생성자가 string 인수를 받으므로 lensDirection을 이벤트에 전달할 수 있습니다.

    앱을 실행하고 다른 모든 이벤트를 한 번 이상 기록하도록 시도합니다.

    기록할 일부 분석 이벤트를 트리거한 후에는 Pinpoint 대시보드로 이동합니다. 해당 창을 닫은 경우 다음을 실행하여 돌아갈 수 있습니다.

    amplify console

    Amplify 프로젝트 개요를 볼 수 있습니다.

    FlutterApp-Module5Photo2

    [Analytics] 탭으로 이동하여 [핀포인트에서 보기(View in Picknect)] 버튼을 클릭합니다.

    FlutterApp-Module5Photo3

    분석 이벤트 섹션으로 이동하여 기록된 분석 이벤트 수를 확인할 수 있습니다.

    FlutterApp-Module5Photo4

    이 경우 Photo Gallery 앱에서 20개의 다양한 이벤트를 트리거할 수 있었습니다. 이는 Amplify Analytics를 앱에 성공적으로 구현했음을 보여줍니다.

    더 많은 분석을 추가하거나 현재 분석을 자세히 설명할 수도 있습니다. 그러면 사용자가 앱과 상호 작용하는 방식을 제대로 이해할 수 있으므로 어떤 영역에 초점을 맞춰 개선해야 하는지 알 수 있습니다.

결론

AWS Amplify를 사용하여 Flutter 애플리케이션을 구축했습니다! 이제 사진 갤러리를 완성하고 인증, 스토리지 및 분석 서비스를 구현했으므로 코드를 공개적으로 볼 수 있도록 설정하거나 프로젝트를 다른 플랫폼으로 확장하거나 프로젝트를 삭제하는 몇 가지 경로를 사용할 수 있습니다.

이 모듈에서는 각 경로를 진행하는 데 필요한 단계를 살펴보겠습니다.

  • 프로젝트를 안전하게 공유

    퍼블릭 리포지토리에서 코드를 호스팅하거나 일반적으로 다른 사용자가 액세스할 수 있도록 사진 갤러리 앱을 표시하려는 경우 AWS 리소스가 악용되도록 할 소지가 있는 중요한 정보를 프로젝트에서 제거하는 것이 좋습니다. 중요한 파일의 대부분은 이미 .gitignore에 나열되어 있지만 다음 두 줄이 리포지토리에 포함되어 있는지 확인하는 것이 좋습니다.

    amplify/
    **/amplifyconfiguration.dart

    이렇게 하면 코드를 리포지토리로 푸시할 때 amplify 디렉토리와 amplifyconfiguration.dart 파일이 포함되지 않습니다.

  • 백엔드 공유

    AWS Amplify를 사용하면 구성을 여러 플랫폼 또는 팀 구성원과 손쉽게 공유할 수 있습니다. 새 플랫폼(예: 웹)에서 앱을 만들려면 프로젝트의 루트 디렉터리로 이동하여 다음 명령을 실행하면 됩니다.

    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default
    ? Which app are you working on? d3p0ir7eqcu4le
    Backend environment 'dev' found. Initializing...
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building javascript
    Please tell us about your project
    ? What javascript framework are you using react
    ? Source Directory Path:  src
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    
    ? Do you plan on modifying this backend? Yes

    다음은 React를 사용한 JavaScript 플랫폼을 선택하는 경우 출력입니다.

    팀에서 작업하려는 경우에도 $ amplify pull을 실행하지만 팀 구성원은 Photo Gallery Amplify 앱이 저장된 동일한 AWS 프로파일에 액세스할 수 있어야 합니다.

  • 프로젝트 삭제

    프로젝트를 마쳤으며 더 이상 작업을 수행할 생각이 없다면 Amplify 앱을 삭제하는 것을 고려해야 합니다. 이렇게 하면 다른 사용자가 프로젝트의 자격 증명에 액세스할 수 있는 경우에도 리소스가 악용되지 않습니다.

    백엔드에서 로컬 Amplify 관련 파일 및 Amplify 프로젝트를 모두 삭제하려면 다음 명령을 실행합니다.

    amplify delete

    Amplify 프로젝트를 삭제하면 다음과 같은 출력이 표시됩니다.

    ✔ Project deleted in the cloud
    Project deleted locally.

    이 작업은 실행 취소할 수 없습니다. 프로젝트가 삭제되면 복구할 수 없으며 프로젝트를 다시 사용해야 하는 경우 범주 및 프로젝트 구성 파일을 재구성해야 합니다.

이 자습서를 끝까지 진행해 주셔서 감사합니다. 아래 도구를 사용하여 피드백을 보내주시기 바랍니다.

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
닫기
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
닫기

축하합니다!

AWS에서 Flutter 애플리케이션을 구축했습니다. 다음 단계로, 특정 AWS 기술을 자세히 살펴보고 애플리케이션의 수준을 한 차원 높여보겠습니다.