DEV Community

Guilherme Selair
Guilherme Selair

Posted on

Implementando link dinâmico com firebase e react native

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:

  1. Redirecionar para o aplicativo: Quando o app estiver instalado, devemos abri-lo.
  2. 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:

app react native

Configurações no Firebase Console

Com o app criado, agora é preciso entrar no Firebase console e criar um novo projeto.

criando projeto firebase

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

etapa 1 - app

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

etapa 1 - app - name

"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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Copie a chave SHA-1 gerada e adicione no campo. Logo após você pode processar para a próxima etapa.

Etapa 2

etapa 2 - app

Nessa etapa faça o download do arquivo "google-servces.json" e adicione-o na pasta "/android/app" de seu projeto.

Etapa 3

etapa 3 - app

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

etapa 4 - app

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:

escolhendo dominio

Logo após concluirmos a seleção de domínio a próxima tela será semelhante a esta:

dominio concluido

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 1

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 2

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 3

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.

etapa 5

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

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.

arvore 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"/>
Enter fullscreen mode Exit fullscreen mode

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

APP DESINSTALADO

Vale ressaltar que o aplicativo que deve ser aberto na loja, pode ser alterado pelo Firebase console.

APP INSTALADO

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! 🤠

REFERÊNCIAS

Discussion (0)