Como implementar Dynamic Link com Firebase e React Native
Tags: firebase, reactnative, beginners, react
Published: 2021-08-27 02:00:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ytkv8bxi8spb9kywpwy.jpeg)

## Configurações no Firebase Console

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

![criando projeto firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwep719kfs4y56v9sbcp.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kquvtumklrsamun7ltgb.png)

**"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 ***<seu-projeto>/android/app/build.gradle.*** 

Você vai encontrar o nome da sua aplicação em **applicationId.**

![etapa 1 - app - name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz8aecfc4okmv76jcg6w.png)

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

```bash
./gradlew signingReport
```

A saída deste comando deve ser semelhante a isto:

```bash
> 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

![etapa 2 - app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1z456xtbknzl15blirx.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkwlhoj3gi8z1imeb3on.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovakys4ch3mbhoyuxh7t.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zug5nmmn476a9p8ttjd3.png)

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

![dominio concluido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heyaap8pcf9c1j01k0h3.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6ymcd2dpfajcgxuq5eq.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnn5buvzvihh8sjyu94f.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4uhr1m8vi8pnkdo4b1k.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkua1tcon804rn22wdrl.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rspz7oq33bjaj124rp65.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrje6i9e5qrj8q46vc1q.png)

### 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:

```xml
<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

![APP DESINSTALADO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8io92bde77tms9ton1ti.gif)

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

### APP INSTALADO

![APP INSTALADO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktez6p7qehmxtikgarqb.gif)

## 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

- [https://medium.com/@c.nwaugha/how-to-implement-firebase-dynamic-links-in-react-native-888a554bd7fa](https://medium.com/@c.nwaugha/how-to-implement-firebase-dynamic-links-in-react-native-888a554bd7fa)
- [https://rnfirebase.io/dynamic-links/usage#android-setup](https://rnfirebase.io/dynamic-links/usage#android-setup)
- [https://firebase.google.com/products/dynamic-links](https://firebase.google.com/products/dynamic-links)