Raphael Corrêa

Deep Link – guia prático para configurar seu app

Raphael

Aprenda a configurar deep links no seu aplicativo React Native.

Neste tutorial vamos aprender a configurar deep links em um aplicativo React Native.

Você provavelmente já navegou pela web e em algum momento clicou/tocou em um link que direcionou para dentro de um determinado app. Um bom exemplo são as centrais de atendimento, vendas e chat bots que te direcionam para uma conversa no whatsapp.

essa abordagem só é possível graças ao deep link, uma tecnologia que vem mudando a forma que interagimos com a web e apps.

Antes de tudo, se você gosta desse tipo de conteúdo aproveite para assinar nossa newsletter e ficar por dentro de todas as novidades do blog.

Mas o que é deep link ?

O Deep Link é uma abordagem que permite usuários de um app navegar para outro app. Por exemplo: Imagine que o app de uma loja virtual colocou um produto em promoção, mas só para compras feitas no app. Ao mesmo tempo, começa a rodar uma campanha de marketing no instagram para promover o produto. Sempre que um seguidor clicar na chamada da propaganda, seria interessante levar o usuário até o app da loja, caso tenha instalado, na página de produto em promoção. Você pode fazer isso utilizando deep links.

Você consegue fazer isso usando deep links dessa forma:

// IOS
minhaloja://produto/camiseta-azul

//Android
minhaloja://minhaloja/produto/camiseta-azul

Mas não basta apenas criar um link do seu gosto e publicar nas suas mídias. Você precisa registrar o deep link no seu app para que o sistema operacional reconheça a ação. Eu vou mostrar aqui como fazer essa configuração nos arquivos nativos do seu app.

Configurando Deep Link No Android

Vamos começar configurando o Android para permitir Deep Linking abrindo o arquivo android/app/src/main/AndroidManifest.xml e adicionando um novo intent-filter ao XML:

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="nomedaloja"
        android:host="nomedaloja" />
</intent-filter>

Você pode substituir o “nomedaloja” por algo que faça sentindo, pelo nome da sua marca etc…

Seu arquivo deve ficar parecido com esse.

No Android temos um host e um schema. O host é o que vem antes de :// e o schema é o que vai depois. Como isso o deep link no android tem o seguinte formato.

lojaoctopus://lojaoctopus/pagina/parametro

Configurando o Deep Link no IOS

Se você estiver utilizando um sistema OSx, pode configurar o Deep Linking no IOS. Primeiramente, abra o arquivo ios/{NOME_DO_APP}/AppDelegate.m e adicione o seguinte import junto aos demais:

#import <React/RCTLinkingManager.h>

DICA: No VSCode use o comand + p (mac) ou ctrl + p (windows) para buscar arquivos no seu projeto.

Agora, no fim do arquivo, adicione o seguinte trecho de código:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

Seu arquivo deve ficar muito parecido com esse.

Como isso o nosso app já está preparado para receber o deep link mas ainda precisamos  informar qual a URL que nosso aplicativo reconhecerá (no nosso caso vai ser lojaoctopus://).

Agora no XCode, abra seu projeto, na barra lateral esquerda clique sobre o projeto e nas abas superiores selecione a aba Info. No fim da aba, na opção URL Types, adicione a URL da seguinte forma:

Configurando deep link em sistemas IOS. Print do XCode

Configurando o React Navigation (Recomendado).

Se você chegou até aqui sem nenhum problema então está na hora de configurar a sua camada de navegação. Você pode fazer um script para lidar com deep links e redirecionar para uma determinada tela porém, o mais indicado (e fácil também) é configurar uma lib de rotas. Nesse caso o React Navigate.

Ainda usando o caso do e-commerce que falei no inicio do post, o seu app ainda vai precisar de uma camada de abstração para lidar com os links e saber para onde levar o usuário. O React Navigation trata isso de forma fácil e rápida.

Nesse artigo vou abordar como é feito na versão 4 da lib. Nesse momento a V5 ainda é muito ressente, ou seja, não me atualizei (-_-`)

Você pode conferir a configuração da V5 nesse link aqui.

OBS: Vou assumir que você já sabe trabalhar com rotas no RN. Se você ainda não entende do assunte é importante dar uma lida na documentação do react native e do react navigate. Além disso tem muuuito conteúdo bacana na web.

Configurando as rotas

Tudo vai acontecer na sua router.js. Você pode configurar o React Navigation de várias formas mas vamos seguir com a abordagem mais simples por enquanto.

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import Home from './pages/home';
import Product from './pages/product';

const Router = createStackNavigator({
  Home,
  Product: {
    screen: Product,
    path: 'product/:productId',
  },
});

const prefix = (Platform.OS === 'ios')
  ? 'lojaoctopus://'
  : 'lojaoctopus://lojaoctopus/';

export default () => <Router uriPrefix={prefix} />;

No doc acima tem 3 coisas importantes.

  1. Path: Repare que configuramos a tela de produto diferente da tela home. Isso porque essa tela precisa do parâmetro path. Essa parâmetro é responsável por fazer uma comparação entre o deep link que enviamos e as rotas cadastradas. Dessa forma se eu tentar acessar algo como lojaoctopus://product/1232 ele vai me redirecionar para a tela de produto com o param productId=1232 (que eu posso recupera na tela para carregar as informações do produto através de uma requisição)
  2. Const Prefix : Você deve notar que criamos uma variável com nome prefix. Ela vai conter o host + schema que falamos anteriormente. Repare que existe uma condição para cada sistema operacional
  3. A terceira coisa importante aqui é a props uriPrefix no componente de Rotas. Ela é necessária para preencher o prefixo das rotas.

Testando o deep link no seu app.

Agora que ta tudo pronto vamos testar.

Começando pelo android.

para isso podemos utilizar o adb da seguinte forma:
adb shell am start -W -a android.intent.action.VIEW -d "lojaoctopus://lojaoctopus/product/camiseta-azul"

No nosso projeto ele abre o app na tela de produto carregando o produto camiseta azul.

Testando agora no IOS

No sistema IOS você pode rodar o seguinte comando

xcrun simctl openurl booted locaoctopus://product/camiseta-azul
Rodando isso você deve ter o mesmo resultado…

Uma dica importante

Recentemente precisei configurar o deep link em um app que fazia usa do
createSwitchNavigator. Esse método é usado para aplicação com bottom navigation. Você cria uma stack contendo a configuração daquela sessão para cada opção.

O bottom navigation é um tipo de navegação onde é apresentado uma barra fixa na base do app com navegação rápida. Um app que utiliza esse tipo de navegação é o instagram. Ele tem na base as opções de home, explore, news, likes e user. Para cada opção existe uma configuração de rotas especifica que chamamos de Stack Navigation

Por fim você inclui cada stack no seu createSwitchNavigator que vai retornar uma componente de rotas.

...
export default createAppContainer(
    createSwitchNavigator(
      {
        stack1: stack1,
        mainStack: {
          screen: mainStack,
          path: '', // Necessário para funcionamento do deep link apontando para uma news.
        },
        stack2: stack2,
        stack3: stack3,
      },
      {
        initialRouteName: 'mainStack',
      },
    ),
  );
  ...

É importante configurar o path da sua stack como vazio da mesma forma que fiz na linha 8. Isso é necessário por que a libe reescreve esse path com o nome da stack e ai o sei link acaba sendo processado de forma errada. (Não foi uma falha da lib)

Finalizando !!

Chegamos ao fim de mais um texto enorme mas que faço com o maior carinho do mundo rsrs. O que você achou desse guia? deixa seu comentário, ele é importante e me ajuda a saber se esse tipo de conteúdo é relevante para a comunidade.

Esse post foi inspirado no guia da Rocketseat. A galera de lá é fera e se você quiser dar uma lida no guia delas é só clicar aqui

Muito obrigado e até mais !

Sair da versão mobile