Esta página foi traduzida pela API Cloud Translation.

Sua primeira experiência de mensagens no aplicativo

1. Introdução

Metas

Neste codelab, você instrumentará um experimento de mensagens no aplicativo para um aplicativo móvel multiplataforma de recomendação de restaurantes com tecnologia Flutter e Cloud Firestore .

Depois de concluído, você será capaz de projetar e implementar experimentos de mensagens no aplicativo para aumentar efetivamente o envolvimento do usuário em qualquer aplicativo iOS ou Android enquanto escreve uma quantidade mínima de código.

O que você aprenderá

Como usar o Firebase In-App Messaging (FIAM) em um aplicativo Flutter
Como personalizar a aparência de suas mensagens no aplicativo
Como projetar um experimento de mensagens no aplicativo e implementá-lo em seu aplicativo
Como interpretar os resultados de um experimento de mensagens no aplicativo

O que você gostaria de aprender com este codelab?

Sou novo no assunto e quero uma boa visão geral.

Eu sei algo sobre esse assunto, mas quero uma atualização.

Estou procurando um exemplo de código para usar em meu projeto.

Estou procurando uma explicação para algo específico.

Mensagens no aplicativo do Firebase

O Firebase In-App Messaging (FIAM) ajuda você a envolver os usuários que estão usando ativamente seu aplicativo, enviando-lhes mensagens direcionadas e contextuais que os incentivam a realizar ações importantes no aplicativo, como vencer um nível de jogo, comprar um item ou assinar conteúdo .

Teste A/B do Firebase

Desenvolvido pelo Google Optimize, o Firebase A/B Testing (ABT) ajuda a otimizar a experiência do seu aplicativo, facilitando a execução, análise e dimensionamento de experimentos de produtos e marketing. Ele lhe dá o poder de testar alterações na interface do usuário, nos recursos ou nas campanhas de engajamento do seu aplicativo para ver se elas realmente influenciam suas principais métricas (como receita e retenção) antes de lançá-las amplamente.

O que você precisa

Se você não estiver muito familiarizado com o Flutter ou o Firestore, primeiro conclua o codelab do Firebase para Flutter :

Você pode executar este codelab usando qualquer um dos seguintes dispositivos:

Um dispositivo físico (Android ou iOS) conectado ao seu computador e configurado no modo de desenvolvedor.
O simulador iOS. (Requer instalação de ferramentas Xcode ).
O emulador do Android. (Requer configuração no Android Studio ).

Além do acima, você também precisará de:

Um navegador de sua preferência, como o Chrome.
Um IDE ou editor de texto de sua preferência, como Android Studio ou VS Code configurado com os plug-ins Dart e Flutter. O VS Code é recomendado para uso com Flutter.
A versão estável mais recente do Flutter (ou beta, se você gosta de viver no limite).
Uma conta do Google, como uma conta do Gmail, para criar e gerenciar seu projeto do Firebase.
O código de exemplo do codelab. Veja a próxima etapa para saber como obter o código.

2. Preparando-se

Obtenha o código

Clone o repositório GitHub na linha de comando:

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

O código de amostra será clonado no diretório friendlyeats-flutter . De agora em diante, certifique-se de executar comandos deste diretório:

cd friendlyeats-flutter

Em seguida, vá para o diretório codelab e confira o branch fiam-abt :

git checkout fiam-abt

Esta ramificação contém todo o código necessário para este codelab, incluindo uma versão completa na pasta done . As outras ramificações neste repositório contêm código para construir o aplicativo FriendlyEats, conforme mostrado no codelab Firestore Flutter multiplataforma . Para este codelab, removemos a integração da Web nesta ramificação.

Importe o aplicativo inicial

Abra ou importe o diretório codelab-fiam-abt para seu IDE preferido. Este diretório contém o código inicial do codelab, que consiste em um app de recomendação de restaurantes. Neste codelab, você instrumentará um experimento de mensagens no aplicativo para os usuários deste aplicativo.

Crie um projeto do Firebase

No console do Firebase , clique em Adicionar projeto e nomeie o projeto do Firebase como FriendlyEats . Lembre-se do ID do seu projeto do Firebase (ou clique no ícone Editar para definir o ID do seu projeto preferido).
Certifique-se de que o Google Analytics esteja ativado para o projeto e clique em Continuar.
Clique em Criar projeto .

Parabéns! Você acabou de criar seu primeiro projeto do Firebase. Agora você pode clicar no nome do projeto para entrar no console.

A seguir, você verá como configurar e ativar os serviços necessários usando o console do Firebase.

Habilitar autenticação anônima

Embora a autenticação não seja o foco deste codelab, é importante ter alguma forma de autenticação no seu app. Você usará o login anônimo , o que significa que o usuário está conectado silenciosamente, sem ser solicitado.

Para ativar o login anônimo:

No console do Firebase, localize Autenticação na barra de navegação esquerda.
Clique em Autenticação e, em seguida, clique em Começar e selecione a guia Método de login (ou vá diretamente para o console do Firebase ).
Ative o Provedor de login anônimo e clique em Salvar .

Ativar o login anônimo permite que o aplicativo faça login silenciosamente nos usuários quando eles acessam o aplicativo. Para saber mais, consulte a documentação de autenticação anônima para Android e iOS .

Ativar o Cloud Firestore

O aplicativo usa Cloud Firestore para salvar e receber informações e classificações de restaurantes.

Para ativar o Cloud Firestore:

Na barra de navegação esquerda do console do Firebase, clique em Firestore .
Clique em Criar banco de dados no painel Cloud Firestore.

Selecione a opção Iniciar em modo de teste e clique em Avançar após ler o aviso sobre as regras de segurança e, em seguida , Ativar .

O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Você tornará seu banco de dados mais seguro posteriormente neste codelab.

3. Configuração do Firebase específica para celular

A maioria das alterações de código necessárias para ativar o suporte do Firebase já foram verificadas no projeto em que você está trabalhando. No entanto, para adicionar suporte para plataformas móveis, você precisa:

Cadastre a plataforma desejada no projeto Firebase
Baixe o arquivo de configuração específico da plataforma e adicione-o ao código.

No diretório de nível superior do seu aplicativo Flutter, existem subdiretórios chamados ios e android . Esses diretórios contêm os arquivos de configuração específicos da plataforma para iOS e Android, respectivamente.

Configurar iOS

No console do Firebase , selecione Configurações do projeto na parte superior da barra de navegação esquerda e clique no botão iOS em Seus aplicativos na página Geral .

Você deverá ver a seguinte caixa de diálogo:

O valor importante a ser fornecido é o ID do pacote iOS. Você obtém o ID do pacote executando as próximas três etapas.

Na ferramenta de linha de comando, acesse o diretório de nível superior do seu aplicativo Flutter.
Execute o comando open ios/Runner.xcworkspace para abrir o Xcode.

No Xcode, clique no Runner de nível superior no painel esquerdo, para mostrar a guia Geral no painel direito, conforme mostrado. Copie o valor do identificador do pacote .

Volte para a caixa de diálogo Firebase, cole o identificador de pacote copiado no campo ID do pacote iOS e clique em Registrar aplicativo .

Continuando no Firebase, siga as instruções para baixar o arquivo de configuração GoogleService-Info.plist .
Volte para o Xcode. Observe que Runner possui uma subpasta também chamada Runner (mostrada na imagem anterior).
Arraste o arquivo GoogleService-Info.plist (que você acabou de baixar) para a subpasta Runner .
Na caixa de diálogo que aparece no Xcode, clique em Concluir .
Volte para o console do Firebase. Na etapa de configuração, clique em Avançar , pule as etapas restantes e volte para a página principal do console do Firebase.

Você concluiu a configuração do seu aplicativo Flutter para iOS!

Configurar Android

No Firebase Console , selecione Configurações do projeto na parte superior da barra de navegação esquerda e clique no botão Android em Seus aplicativos na página Geral .

Você deverá ver a seguinte caixa de diálogo:

O valor importante a ser fornecido é o nome do pacote Android . Você obtém o nome do pacote ao executar as duas etapas a seguir:

No diretório do aplicativo Flutter, abra o arquivo android/app/src/main/AndroidManifest.xml .
No elemento manifest , encontre o valor da string do atributo package . Este valor é o nome do pacote Android (algo como com.yourcompany.yourproject ). Copie este valor.
Na caixa de diálogo Firebase, cole o nome do pacote copiado no campo de nome do pacote Android .
Você não precisa do certificado de assinatura de depuração SHA-1 para este codelab. Deixe isso em branco.
Clique em Registrar aplicativo .
Continuando no Firebase, siga as instruções para baixar o arquivo de configuração google-services.json .
Vá para o diretório do aplicativo Flutter e mova o arquivo google-services.json (que você acabou de baixar) para o diretório android/app .
De volta ao console do Firebase, pule as etapas restantes e volte para a página principal do console do Firebase.
Toda a configuração do Gradle já foi verificada. Se o seu aplicativo ainda estiver em execução, feche-o e reconstrua-o para permitir que o Gradle instale dependências.

Você concluiu a configuração do seu aplicativo Flutter para Android!

4. Execute seu aplicativo localmente

Você está pronto para realmente começar a trabalhar no seu aplicativo! Primeiro, execute o aplicativo localmente. Agora você pode executar o aplicativo em qualquer plataforma configurada (e para a qual você tenha um dispositivo e um emulador disponíveis).

Descubra quais dispositivos estão disponíveis com o seguinte comando:

flutter devices

Dependendo de quais dispositivos estão disponíveis, a saída do comando anterior será semelhante a esta:

Agora, execute o aplicativo localmente com o seguinte comando:

flutter run

Agora, você deverá ver sua cópia do FriendlyEats, conectada ao seu projeto Firebase.

O aplicativo se conecta automaticamente ao seu projeto do Firebase e faz login silenciosamente como um usuário anônimo.

5. Crie e teste sua primeira mensagem

Integre o Firebase In-App Messaging ao seu aplicativo

A integração básica do In-App Messaging é totalmente sem código, tudo que você precisa fazer é adicionar a dependência e você está pronto para começar! Adicione a seguinte dependência ao seu arquivo pubspec.yaml

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Redija uma mensagem no Firebase Console

Agora que você adicionou o FIAM ao seu aplicativo, vamos redigir uma mensagem que será acionada quando o aplicativo for aberto pela primeira vez.

Para redigir sua primeira mensagem:

Na seção Engage do console do Firebase, clique em Mensagens no aplicativo .
Clique em Criar sua primeira campanha no painel Mensagens no aplicativo.

Vamos redigir uma mensagem Modal básica para garantir que a integração esteja funcionando. Sinta-se à vontade para personalizar a mensagem da maneira que desejar – você pode adicionar imagens, botões ou alterar cores.

Certifique-se de direcionar o aplicativo que deseja testar, dependendo do caminho de integração que você está seguindo, você pode ter iOS, Android ou ambos.

Queremos ter certeza de que a mensagem será acionada quando o aplicativo for aberto, para que a configuração de agendamento padrão funcione aqui.

Feito o agendamento podemos publicar a mensagem. Clique em "revisar" e você verá algo como o seguinte

Veja a mensagem em seu aplicativo

Agora, desinstale e reinstale seu aplicativo e você verá a mensagem que criou ao abri-lo. Parabéns, você acabou de enviar sua primeira mensagem no aplicativo! Na próxima etapa, você aprenderá como adicionar um evento analítico para acionar uma mensagem no aplicativo com base nas ações que seus usuários realizam no aplicativo.

6. Integre o Firebase Analytics para acionamento avançado de mensagens

Integre o Firebase Analytics ao seu aplicativo

Para entender como os usuários estão interagindo com nosso aplicativo e acionar uma mensagem no aplicativo com base em suas ações, adicionaremos agora um evento do Analytics para quando um usuário clicar em um restaurante.

Adicione a dependência do Firebase Analytics ao Flutter em pubspec.yaml

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

Importe análises em home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Adicione uma instância do Firebase Analytics à classe HomePage em home_page.dart

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

Dispare um evento de análise quando o usuário clica em um cartão de restaurante em home_page.dart

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Edite sua mensagem para ser acionada no evento de análise

Agora que temos um evento "click_restaurant", vamos acionar nossa mensagem no aplicativo com base nisso, e não quando o usuário abre o aplicativo.

No Firebase Console, volte para Mensagem no aplicativo e edite sua campanha existente

Agora altere a seção de agendamento para acionar a mensagem do novo evento

A partir daí podemos publicar nossas alterações clicando no botão "revisar"

Teste seu gatilho no aplicativo

Neste ponto, você poderá executar seu aplicativo com

flutter run

E quando você clica em um restaurante, você verá sua mensagem no aplicativo

7. Crie uma campanha FIAM+ABT

Comece com um objetivo

Nosso aplicativo Friendlyeats já parece ótimo, mas para que seja útil precisamos de algumas análises. Eles serão provenientes de usuários do Friendlyeats, então vamos encontrar uma maneira de incentivar os usuários a deixar comentários.

Primeiro vamos definir nosso evento de conversão

Como queremos ver se os usuários estão avaliando restaurantes, vamos adicionar um evento analítico para medir esse comportamento.

Importe o Firebase Analytics como antes e adicione uma instância do Analytics ao RestaurantPage em restaurant_page.dart

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

Agora vamos acionar um evento em _onCreateReviewPressed quando salvamos uma avaliação em restaurant_page.dart

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Configurar o teste A/B no Firebase Console

Agora que sabemos como criar campanhas de mensagens no aplicativo, é hora de considerar que tipo de comportamento gostaríamos de incentivar em nosso aplicativo por meio dessas campanhas. Para o FriendlyEats, gostaríamos que mais pessoas deixassem comentários, o que tornaria o aplicativo mais útil! Existem algumas maneiras de incentivar isso usando mensagens no aplicativo. Uma delas é por meio de uma mensagem simples no aplicativo que apenas informa ao usuário que ele deve fazer uma avaliação do restaurante para ajudar a melhorar o aplicativo FriendlyEats. Outra forma é usar uma mensagem no aplicativo para oferecer algum tipo de incentivo ao fornecimento de uma avaliação, como um cupom ou código de desconto para um determinado restaurante.

Ambas as abordagens podem aumentar a frequência com que os usuários fornecem avaliações sobre restaurantes no FriendlyEats, e parece que fornecer um cupom pode ter um impacto ainda mais forte nesse caso. Mas qual seria a probabilidade de o fornecimento desse cupom levar os usuários a escrever um comentário? Em primeiro lugar, vale a pena o custo do cupom? Para determinar isso, realizaremos um experimento de mensagens no aplicativo! Podemos usar o Firebase A/B Testing para exibir aleatoriamente uma de nossas mensagens no aplicativo aos usuários e medir o efeito que isso tem no comportamento do usuário, como um ensaio clínico. O melhor de tudo é que isso pode ser feito totalmente por meio do console do Firebase, sem a necessidade de código!

Para compor seu primeiro experimento de mensagens no aplicativo:

Na seção Engage do console do Firebase, clique em Teste A/B .
Clique em Criar experimento e selecione se deseja experimentar o In-App Messaging . Isso o levará ao compositor do experimento mostrado abaixo.

Dê um nome à sua experiência e uma descrição opcional.

A próxima etapa é onde você redigirá as diferentes mensagens no aplicativo que enviará aos usuários em seu experimento. A primeira mensagem no aplicativo que redigiremos é a “linha de base”, ou o controle do nosso experimento. Podemos transformar esta em nossa mensagem simples "faça uma avaliação":

Agora que temos uma linha de base, vamos compor uma variante, a mensagem no aplicativo que oferece aos usuários um código de cupom para incentivá-los a deixar um comentário. Isso não está totalmente visível na visualização abaixo, mas o título da mensagem é “Pegue um cupom, deixe um comentário!”, e o corpo da mensagem é “Na próxima vez que você estiver no Burrito Cafe, use o código de cupom FRIENDLYEATS-15 em finalize a compra com 15% de desconto no seu pedido. E lembre-se de deixar um comentário depois!". Esperamos que isso inspire alguns usuários a conferir o Burrito Cafe!

Na próxima etapa, direcionaremos nosso aplicativo e definiremos a Exposição. Esta é a porcentagem de usuários qualificados (aqueles que atendem às condições de segmentação/acionamento) que verão uma das mensagens do experimento. Podemos apenas definir isso como 100% neste exemplo, pois gostaríamos que todos os usuários vissem a linha de base ou nossa variante de cupom. Se você deseja ter um grupo de controle que não mostre nenhuma mensagem no aplicativo, você pode reduzir essa porcentagem de exposição.

A seguir, você definirá alguns objetivos para o experimento. Este é o resultado do experimento que gostaríamos de medir. Definiremos isso como o evento de análise review_success que definimos na seção anterior, pois gostaríamos de ver o impacto que nossas diferentes mensagens no aplicativo têm sobre os usuários que deixam comentários sobre restaurantes.
Para agendamento, deixaremos a campanha começar imediatamente e definiremos click_restaurant como condição de acionamento, para que os usuários vejam uma das duas mensagens no aplicativo quando clicarem em um restaurante.

Agora, tudo o que resta é revisar nosso experimento e clicar em Iniciar experimento . Então podemos sentar e esperar que os dados do nosso experimento cheguem!

Confira a coleta de dados em tempo real

Agora que iniciamos nosso experimento, os usuários do FriendlyEats verão aleatoriamente uma das duas mensagens no aplicativo que compusemos quando clicarem em um restaurante, seja a mensagem básica ou a mensagem variante . Isso dividirá nossos usuários em dois grupos, com base na mensagem que viram. Podemos então olhar no console do Firebase (novamente na seção Teste A/B) para comparar os dados analíticos ao vivo de ambos os grupos. Levará algum tempo para que os dados cheguem, pois precisamos esperar que os usuários realmente vejam as mensagens no aplicativo e ajam de acordo. Esta será a aparência dos seus resultados após dados suficientes:

Nesse caso, a variante melhorou significativamente em relação à linha de base, então poderíamos optar por selecionar Implementar variante , que então distribuiria a mensagem no aplicativo com o cupom para todos os usuários.

8. Parabéns

Parabéns, você criou e executou com sucesso seu primeiro experimento de mensagens no aplicativo. Agora você pode realizar uma experiência em seu próprio aplicativo e usar os resultados para tornar suas campanhas de mensagens no aplicativo mais eficazes.

Qual é o próximo?

Confira alguns desses codelabs...

Leitura adicional

Acabamos de arranhar a superfície do que pode ser feito com o Firebase In-App Messaging e o Firebase A/B Testing. Dê uma olhada se quiser saber mais...

Documentos de referência

Crie experimentos de mensagens no aplicativo com testes A/B