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:
  

  

  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:
  

  

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

  

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

  

  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.
  

• 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.