Conceitos básicos da AWS

Criar uma aplicação Flutter

Criar uma aplicação Flutter simples usando o AWS Amplify

Módulo 5: Adicionar uma categoria Analytics

Neste módulo, você adicionará uma categoria Analytics, criará eventos personalizados e verá o acompanhamento de suas análises.

Introdução

O aplicativo Galeria de Fotos agora está totalmente funcional com a capacidade de autenticar um usuário e permitir que ele tire fotos que são carregadas para o armazenamento. Agora precisamos nos concentrar em registrar a análise de dados para entender como os usuários estão interagindo com o nosso aplicativo.

Neste módulo, adicionaremos a categoria Analytics ao nosso aplicativo Amplify, criaremos eventos de análise de dados personalizados, implementaremos esses eventos e acessaremos nosso painel do Amazon Pinpoint para conferir o acompanhamento de nossas análises.

O que você aprenderá

  • Criar a categoria Analytics
  • Registrar os eventos de análise de dados no Amazon Pinpoint
  • Acessar o painel do Amazon Pinpoint

Principais conceitos

Análise de dados - Registrar quando os eventos ocorrem para cada instância do aplicativo pode ser uma forma valiosa de coletar dados para a análise do comportamento dos usuários, levando a um melhor entendimento de quais recursos são mais importantes para o aplicativo.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Criar o serviço de análise de dados

    Adicione o serviço de análise de dados ao seu projeto Amplify executando o seguinte comando no terminal no diretório raiz do seu projeto:

    amplify add analytics

    A CLI do Amplify fará uma série de perguntas para configurar o serviço de análise de dados. Pressione a tecla Enter para escolher a resposta padrão para cada pergunta. O resultado será parecido com este:

    ➜  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

    Depois que o recurso for totalmente configurado, o resultado deverá ser parecido com o seguinte:

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    Observe que a adição do serviço de análise de dados atualizará nossa categoria de Autenticação. Poderemos confirmar isso antes de configurar o back-end executando este comando:

    amplify push

    Receberemos um relatório de status das alterações feitas no nosso aplicativo 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

    Depois de o recurso Anaytics ser configurado no back-end, você verá uma mensagem de conclusão com êxito com um link para o painel Pinpoint do seu aplicativo.

    ✔ 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
    

    Clique no link para ver o painel. Ele será parecido com este:

    FlutterApp-Module5Photo1

    Voltaremos ao painel depois de gravar alguns eventos de análise de dados.

  • Instalar a dependência

    No Visual Studio Code, abra o arquivo pubspec.yaml e adicione o Amplify Analytics como uma dependência:

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

    Agora, salve o arquivo para que o Visual Studio Code instale o plug-in Amplify Auth Cognito. Você também pode executar o comando $ flutter pub get do terminal se a dependência não for instalada depois de salvar.

    O resultado será este:

    exit code 0
  • Configurar o plug-in

    Abra o main.dart e adicione o plug-in Analytics à instância do Amplify usada para configurar os outros plug-ins:

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

    Execute o aplicativo. Você verá a mensagem de conclusão com êxito nos logs indicando que o Amplify continua devidamente configurado e inclui o plug-in do Analytics.

    flutter: Successfully configured Amplify 🎉
  • Implementar funcionalidade

    O Amplify Analytics facilita muito a gravação de eventos de análise de dados com um código como:

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

    No entanto, definir e criar eventos constantemente em pontos arbitrários no aplicativo pode ser uma tarefa maçante. Em vez disso, definiremos todos os eventos de análise de dados em um só arquivo e tornaremos cada evento seu próprio objeto.

    Crie um novo arquivo chamado analytics_events.dart e adicione o seguinte:

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

    Quando criamos o AbstractAnalyticsEvent, podemos criar objetos de evento de análise de dados personalizados que terão uma propriedade em comum (value) e que conterão a instância AnalyticsEvent. Com uma linha de código, poderemos instanciar um AbstractAnalyticsEvent enquanto mantemos os detalhes de implementação em um só arquivo.

    Podemos ir ainda mais longe. Vamos criar um AbstractAnalyticsEvent para quando um usuário tirar uma foto, mas também concederemos a capacidade de monitorar se o usuário utilizou a câmera frontal ou traseira do dispositivo. Para fazer isso, primeiro precisamos adicionar outro construtor para o AbstractAnalyticsEvents aceitar um AnalyticsEvent como parâmetro.

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

    Agora podemos implementar o 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. Criamos um construtor privado chamado _fromEvent que possibilitará chamar o construtor super que aceita um AnalyticsEvent como parâmetro.
    2. O construtor de fábrica será um que usamos para criar esse evento e que aceita um parâmetro String, permitindo que a direção da câmera seja incluída como uma propriedade do AnalyticsEvent.

    Agora vamos criar um objeto com a capacidade de transformar uma instância de nosso AbstractAnalyticsEvent em um AnalyticsEvent. Crie um novo arquivo chamado analytics_service e adicione o seguinte:

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

    O AnalyticsService é simples e tem um método estático chamado log que observará um AbstractAnalyticsEvent e passará o valor para Amplify.Analytics. É só isso.

    Agora podemos implementar cada uma de nossas classes AbstractAnalyticsEvent criadas simultaneamente.

    Adicione LoginEvent à função _login em login_page.dart:

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

    Adicione SignUpEvent à função _signUp em sign_up_page.dart:

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

    Adicione VerificationEvent à função _verify function em verification_page.dart:

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

    Adicione ViewGalleryEvent ao construtor em gallery_page.dart:

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

    Por último, adicione TakePictureEvent a _takePicture em camera_page.dart:

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

    Podemos passar o lensDirection ao nosso evento já que o construtor aceita um argumento de string.

    Execute o aplicativo e tente acionar todos os diferentes eventos para que sejam registrados no mínimo uma vez.

    Depois de acionar alguns dos eventos de análise de dados para serem registrados, volte ao painel do Pinpoint. Se você fechou essa janela, pode voltar executando o seguinte comando:

    amplify console

    Você verá a visão geral do seu projeto Amplify:

    FlutterApp-Module5Photo2

    Navegue até a guia Analytics e clique no botão View in Pinpoint (Ver no Pinpoint):

    FlutterApp-Module5Photo3

    Navegue até a seção de eventos de análise de dados. Você verá a quantidade de eventos de análise de dados registrados:

    FlutterApp-Module5Photo4

    Neste caso, consegui acionar 20 eventos diferentes no aplicativo Galeria de Fotos, mostrando que implementamos o Amplify Analytics com êxito no nosso aplicativo.

    Sinta-se à vontade para adicionar ainda mais recursos de análise de dados ou tornar os atuais mais detalhado. Em seguida, você poderá entender como os usuários interagem com seu aplicativo para saber em quais áreas se concentrar em melhorar.

Conclusão

Você criou uma aplicação Flutter usando o AWS Amplify. Agora que o aplicativo Galeria de Fotos foi concluído e você implementou os serviços de autenticação, armazenamento e análise de dados, há apenas alguns caminhos possíveis: tornar o código visível publicamente, ampliar o projeto para uma plataforma diferente ou excluir o projeto.

Neste módulo, exploraremos as etapas necessárias para seguir cada uma dessas rotas.

  • Compartilhar seu projeto com segurança

    Se o que você quer é tornar o aplicativo Galeria de Fotos visível para outras pessoas hospedando o código em um repositório público ou acessível para outras pessoas no geral, recomendamos remover as informações sigilosas do projeto que possam levar ao abuso de recursos da AWS. A maioria dos arquivos sigilosos já deve estar listada no .gitignore, mas é recomendável assegurar que estas duas linhas sejam incluídas no seu repositório:

    amplify/
    **/amplifyconfiguration.dart

    Essas linhas garantirão que o diretório amplify e o arquivo amplifyconfiguration.dart não sejam incluídos ao transmitir seu código para um repositório.

  • Compartilhar seu back-end

    O AWS Amplify facilita o compartilhamento de seu back-end Amplify de configuração entre múltiplas plataformas ou com membros da equipe. Se você quer criar o aplicativo em uma nova plataforma, na Web por exemplo, basta navegar até o diretório raiz do seu projeto e executar o seguinte comando:

    ? 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

    Acima vemos o resultado se você escolhesse uma plataforma JavaScript com React.

    Você ainda poderia executar $ amplify pull se quisesse trabalhar em equipe, mas o membro da equipe precisaria ter acesso ao mesmo perfil da AWS no qual o aplicativo Amplify Galeria de Fotos está armazenado.

  • Excluir o projeto

    Se você tiver concluído o projeto e não quiser trabalhar mais nele, considere excluir o aplicativo Amplify. Isso garante que ninguém abuse de seus recursos caso alguém acesse as credenciais do seu projeto.

    Para excluir todos os arquivos locais associados ao Amplify e o projeto Amplify no back-end, execute o seguinte comando:

    amplify delete

    Se você optar por excluir o projeto Amplify, o resultado será este:

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ Esta ação não pode ser desfeita. Depois que o projeto for excluído, não será possível recuperá-lo e você precisará reconfigurar as categorias e os arquivos de configuração do projeto se quiser usá-lo novamente.

Agradecemos por seguir este tutorial até o fim. Compartilhe sua opinião usando a ferramenta abaixo.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Parabéns!

Você criou uma aplicação Flutter na AWS com êxito! Para continuar em grande estilo, aprofunde-se nas tecnologias específicas da AWS e eleve sua aplicação a um novo patamar.