Fala, clã 😎.
Garanto que você já se perguntou como ao clicar em um anúncio em redes sociais você era redirecionado para o aplicativo do anunciante. É exatamente isso que vamos implementar no post de hoje!
Nessa funcionalidade existe, pelo menos, dois casos de uso: Quando o usuário já tens o aplicativo instalado em seu dispositivo e será preciso apenas redireciona-lo para dentro do app. Ou quando o usuário não tens o aplicativos instalado e então será preciso redireciona-lo para a página na loja do aplicativo a ser instalado.
Este comportamento pode ser construído utilizando o Dynamic Links disponibilizado pelo Firebase e serve tanto para dispositivos IOS, Android e WEB.
Neste post abordaremos com mais foco a configuração dessa funcionalidade em dispositivos Android.
Vou mostrar para vocês como é simples e rápido configura-lo! 🔥 Vamos então definir o escopo de nosso exemplo.
Escopo
Teremos duas situações:
- Redirecionar para o aplicativo: Quando o app estiver instalado, devemos abri-lo.
- Redirecionar para a Play Store: Sem o app instalado, devemos abrir a Play Store. Como nosso app não esta disponível nela, abriremos a página do app da Netflix.
Criando o aplicativo de exemplo 📳
Utilizaremos o aplicativo padrão quando iniciamos um projeto com react-native-cli apenas para não tomarmos muito tempo deste post. O app será semelhante a este:
Configurações no Firebase Console
Com o app criado, agora é preciso entrar no Firebase console e criar um novo projeto.
Logo após o projeto ser criado, vamos adicionar o aplicativo Android que irá ser utilizado nesta prática.
Adicionando um app Android no Firebase
Não se preocupe com esse monte de informações! Vamos ver ponto a ponto. Então bora lá!
Etapa 1
"Nome do pacote do Android": Este é o nome do seu app android, como o próprio nome diz. Este nome esta disponível dentro do arquivo /android/app/build.gradle.
Você vai encontrar o nome da sua aplicação em applicationId.
"Apelido do app": É o nome que você pode dar para seu app dentro do firebase e servirá para identicação dele.
"Certificação de assinatura de depuração SHA-1": Apesar de ser um campo opcional você precisará preenche-lo mais tarde. Neste campo precisamos inserir a chave SHA-1 de certificação do projeto. Para gerarmos a chave acesse a pasta "android" dentro de seu projeto no terminal e execute o seguinte comando.
./gradlew signingReport
A saída deste comando deve ser semelhante a isto:
> Task :app:signingReport
Variant: debug
Config: debug
Store: ~/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8D:06:71:6D:FE:33:76:87:AC:AD:19:23
SHA1: A7:89:E5:05:C8:17:A1:22:EA:90:6E:A6:EA:A3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2C:35:EE:F2:51:23:72:4D:72:67:A5:6C:8C:58:22:2A:00:D6:DB:F6:45:D5:C1:82:D2:80:A4:69:A8:FE
Valid until: Wednesday, August 10, 2044
Copie a chave SHA-1 gerada e adicione no campo. Logo após você pode processar para a próxima etapa.
Etapa 2
Nessa etapa faça o download do arquivo "google-servces.json" e adicione-o na pasta "/android/app" de seu projeto.
Etapa 3
Nesta etapa siga as instruções apresentadas inserindo os itens em em seus lugares e logo após tudo feito basta avançar para a quarta etapa.
Etapa 4
Esta é a etapa de conclusão. Já podemos voltar para o console e criarmos o link dinâmico.
Configurando o domínio do link dinâmico
Indo até a sessão "Engajamento", selecionamos a opção "Dynamic Links".
A primeira tela será destinada a preencher o domínio que o link ficará registrado. Caso você não tenha um domínio, não se preocupe, basta escrever um domínio de testes único que o firebase disponibilizará. Semelhante ao que esta abaixo:
Logo após concluirmos a seleção de domínio a próxima tela será semelhante a esta:
Será nesta página que realizaremos grande parte das configurações necessárias e também onde ficará todas as estatísticas sobre seus links dinâmicos.
Criando um link dinâmico
Clicando no botão "Novo link dinâmico" será aberto um modal com algumas configurações:
Etapa 1
A primeira etapa para a criação é definir um link "curto" a fim de identificar mais facilmente o link que acabamos de criar.
Etapa 2
Na segunda etapa, vamos definir qual URL deverá ser aberta caso o link seja acessado através de um computador. Devemos adicionar uma URL e um nome identificador para esta URL para posteriormente conseguirmos mensurar a quantidade de cliques nela.
Aqui, como exemplo, vou adicionar a URL da Netflix.
Etapa 3
Na terceira etapa, vamos definir o comportamento do nosso link dinâmico em dispositivos IOS. Temos duas opções, abrir o link em um navegador ou abrir o link em um app IOS. Caso a seleção "abrir no navegador" for marcada, quando um dispositivo IOS acessar o link dinâmico será aberto a URL definida anteriormente no navegador do dispositivo.
Para selecionar a opção abrir no app IOS será preciso cadastrar um aplicativo IOS. Nesse exemplo vamos selecionar a opção do navegador.
Etapa 4
A quarta etapa é bem semelhante a anterior porém para dispositivos Android. Nessa etapa vamos selecionar a opção para abrir no app Android e selecionarmos o aplicativo que criamos no inicio do post.
Como o aplicativo que criamos não está na Play Store, vamos adicionar uma URL personalizada para ser aberta caso no dispositivo não tenha instalado nosso app. Para este exemplo adicionei o link do aplicativo da Netflix no Play Store.
Etapa 5
Vamos pular esta etapa porque ela se destina apenas para rastreamento de campanhas e marketing.
Com isso já podemos concluir a criação de nosso link dinâmico! 🎉🎊 Este é o fluxo de navegação do link.
Etapa 6
Depois de finalizada a configuração no Firebase console, precisamos adicionar o domínio do link dinâmico que acabamos de configurar. Dentro de seu app vamos editar o seguinte arquivo: android/app/src/main/AndroidManifest.xml, nele dentro das tag <intent-filter> adicionamos as seguintes linhas:
<data android:host="DOMINIO_LINK_DINAMICO" android:scheme="http"/>
<data android:host="DOMINIO_LINK_DINAMICO" android:scheme="https"/>
Você deve adicionar o dominio de seu link dinamico sem o protocolo. Você deve inseri-lo da seguinte maneira: seudominio.page.link
Resultado 🚀
Após feito todas as configurações necessárias, basta esperar alguns minutinhos e já testar seu link dinâmico. Para te mostrar como tudo isso que a gente fez funciona, fica abaixo os resultados.
APP DESINSTALADO
Vale ressaltar que o aplicativo que deve ser aberto na loja, pode ser alterado pelo Firebase console.
APP INSTALADO
FICOU MUITO SHOW!!! 😎😍
Espero ter ajudado você a entender melhor como funcionar essa funcionalidade do Firebase e a utilizar ela na prática. Esta é uma alternativa simples, rápida e que precisa de muito pouco código para funcionar, o que a torna incrível!
See you soon! 🤠
Top comments (0)