Deep Linking em aplicativos React Native: tudo o que você precisa saber!

Publicados: 2023-03-13

Deep linking tornou-se um componente essencial no mundo interconectado de hoje. O termo “link direto” pode soar novo para muitos; mas, a maioria de vocês deve ter usado o conceito de links diretos de uma forma ou de outra.

Você se lembra de uma instância em que você clicou em um link e abriu diretamente uma tela específica em um aplicativo instalado em seu dispositivo; sem você ter que navegar manualmente pelo app? Ou, por exemplo, você queria que seu amigo lesse um artigo e compartilhou o URL desse artigo. Seu amigo clicou no link e foi direcionado para o conteúdo desejado de uma só vez, em vez de ter que abrir a página inicial primeiro e depois procurar o artigo.

Você já se perguntou como isso acontece?

Bem, isso é o que o deep linking faz. Os usuários clicam em um link e são redirecionados para um determinado local em um aplicativo móvel ou site, sem perder tempo navegando pela tela principal. Outros exemplos incluem compartilhar o link de um vídeo do YouTube ou produto da Amazon com um amigo, abrir um link promocional de uma marca para acessar a página de um produto específico e assim por diante. Nesses cenários, os links diretos são essenciais, pois os links regulares da Web não funcionam de maneira eficaz com aplicativos móveis nativos.

Este post é sobre entender como o conceito de deep linking funciona e aprender sobre seus benefícios. Também discutiremos as principais etapas sobre como implementar links diretos em aplicativos móveis React Native para os sistemas operacionais Android e iOS. Escolhemos a estrutura React Native porque é uma das preferências mais populares para o desenvolvimento de aplicativos móveis atualmente.

O que são links profundos?

Deep linking é uma técnica que permite vincular um determinado conteúdo ou tela dentro de um aplicativo móvel a partir de uma fonte externa, como outro aplicativo ou site. Deep links são links clicáveis que direcionam os usuários diretamente para um determinado local em um aplicativo móvel, em vez de uma loja online ou um link da web. Esse local no aplicativo pode ser algo como um conteúdo seguro por trás de um paywall, um artigo, um produto ou uma tela de login. Os usuários podem acessar o local desejado no aplicativo apenas clicando em um URL ou recurso sem a necessidade de procurar a página por conta própria.

Como funciona o conceito de deep linking?

O link direto especifica um esquema de URL personalizado, como links universais (para dispositivos iOS) e um URL de intenção (para dispositivos Android). Quando um usuário clica em um link profundo, o sistema operacional intercepta o link e abre o aplicativo relevante se estiver instalado no dispositivo do usuário. As informações presentes no deep link são então utilizadas pelo aplicativo para navegar até o conteúdo ou tela desejada.

Links profundos adiados?

E se os usuários obtiverem links diretos para um aplicativo, mas o aplicativo não estiver instalado em seu dispositivo? Aqui, deep links adiados entram em cena. Se um usuário clicar em um link e o aplicativo ao qual o link pertence não for baixado; o usuário é direcionado para a App Store. Aqui, os usuários são direcionados para o local exato da App Store, onde podem instalar o aplicativo pretendido com apenas um clique. E, assim que o aplicativo é instalado, a tela específica é aberta imediatamente.

Quais são os benefícios dos links diretos?

Os links diretos economizam o tempo dos usuários e aprimoram significativamente a experiência do usuário.

Os links diretos são ótimas ferramentas para marcas comerciais aumentarem a retenção de usuários e a taxa de conversão. As marcas podem vincular campanhas promocionais e incentivos a links diretos; redirecionando os usuários para a página do produto com apenas um clique. Dessa forma, as marcas podem facilmente convencer os usuários a experimentar novos produtos ou serviços. Por exemplo, o proprietário de um aplicativo de música gostaria de promover um novo álbum de música. Assim, o proprietário investe em publicidade e se vincula a um site famoso. A capa do álbum de música com um link profundo é exibida nesse site como uma campanha publicitária. Quando os usuários do site clicam no link profundo, eles são redirecionados para a página específica no aplicativo de música e podem ouvir o álbum.

Além disso, você pode rastrear campanhas de links diretos e verificar o desempenho de suas campanhas. Os links diretos também melhoram suas classificações de SEO e minimizam a rotatividade de seu aplicativo.

Como você pode implementar links diretos em aplicativos nativos React?

A biblioteca react-navigation fornece o módulo Linking para links diretos de aplicativos React Native. Isso é útil para desenvolvedores React Native.

Você precisa definir um esquema de links diretos no aplicativo que mapeará URLs específicos para as telas relevantes do aplicativo. react-navigation fornece componentes como o módulo Linking e o NavigationContainer para definir o esquema. Depois de definir o esquema, ele pode ser usado para lidar com os links diretos recebidos. Você precisa registrar uma função de retorno de chamada com a ajuda do método addEventListner fornecido pelo módulo Linking para lidar com os links diretos recebidos. Quando o aplicativo é iniciado por meio de um link profundo, a função de retorno de chamada é chamada. Esta função de retorno de chamada pode ser usada para navegar na tela desejada no aplicativo.

Configurando Deep Linking em IoS e Android

Você precisa configurar um aplicativo móvel com um esquema de URL (uma URL exclusiva). Esse esquema de URL é responsável por localizar e iniciar o aplicativo instalado no smartphone do usuário. Para fazer o aplicativo navegar para uma tela, você deve configurar prefixos que correspondam ao esquema de URL no qual o aplicativo foi configurado. Em seguida, as telas precisam ser mapeadas dentro do app com seus respectivos caminhos. Quando o caminho é anexado ao URL, o aplicativo pode navegar diretamente para telas específicas.

A configuração de links diretos é um pouco diferente para os sistemas operacionais iOS e Android. Vamos dar uma olhada em como os desenvolvedores React Native profissionais implementam links diretos para Android e iOS!

Configurando Deep Links em Aplicativos Android React Native

Passo #1 Definindo Deep Links

Abra o arquivo de manifesto e defina os links diretos que você planeja usar em seu aplicativo para que os usuários possam navegar diretamente para uma página específica dentro do aplicativo. Aqui, você precisa definir um link profundo para essa página específica. Veja como você pode definir um link direto em seu arquivo AndroidManifest.xml:
<atividade

android:name=”.ProductActivity”

android:label="Produto">

<dados

android:host=”exemplo.com”

android:pathPrefix="/products"

android:scheme="http" />

<dados

android:host=”exemplo.com”

android:pathPrefix="/products"

android:scheme="https" />

</intent-filter>

</atividade>

Etapa 2 Configurando o filtro de intenção

Vá para android/app/src/main e de lá abra o arquivo chamado AndroidManifest.xml. Agora, você precisa configurar o filtro de intenção para cada link direto. O filtro de intenção especifica a quantidade de dados e as ações que seu aplicativo é capaz de manipular.

Etapa # 3 Manipulação de intenção

Você precisa lidar com a intenção na atividade do seu aplicativo. Essa intenção iniciará seu aplicativo a partir de um link direto. Para manipulação de intenção, você precisa extrair dados da intenção e determinar aquele local específico ou tela específica dentro de seu aplicativo para a qual deseja que os usuários sejam direcionados. A partir daí, seu projeto precisa ser reconstruído no emulador do Android.

Configurando Deep Links em React Native IOS Apps

Configure seu esquema de URL em tipos de URL no Xcode. Modifique o arquivo 'AppDelegate' e reconstrua o projeto no emulador iOS. Agora o projeto iOS é aberto no Xcode.

Passo #1 Definindo o Esquema de URL

Defina um esquema de URL personalizado para seu aplicativo. Esse esquema de URL é uma maneira exclusiva de seu aplicativo ser identificado. Outros sites ou aplicativos usarão esse identificador exclusivo para iniciar seu aplicativo.

Abra o arquivo info.plist. Adicione um novo tipo de URL na parte superior deste arquivo. O esquema de URL pode ser inserido no campo identificador e esquemas de URL. Em seguida, expanda o item 0 (zero), selecione os Esquemas de URL e nomeie o item 0. Esse nome é aquele com o qual seu aplicativo poderá ser vinculado. Por exemplo, o nome do seu aplicativo é “OurApp”. O esquema de URL ficará assim “ourapp://” ou “ourapp://detail?id=123”.

Passo #2 Lidando com a Implementação do Código

Agora, você precisa implementar o código que irá lidar com o deep link. Vá para o arquivo 'AppDelegate' e adicione um método para lidar com o esquema. Quando seu aplicativo será iniciado por meio do esquema de URL; este método será chamado. A URL será recebida por este método. As informações necessárias serão extraídas do URL e a tela certa será exibida em seu aplicativo.

Passo #3 Teste

Agora, o deep link precisa ser testado. Para isso, você pode usar a ferramenta Safari ou qualquer outro aplicativo de terceiros que suporte o conceito de deep linking. Por exemplo, você está usando o Safari. Abra a URL que tinha o esquema de URL definido no Safari. Depois disso, seu aplicativo é iniciado com a tela correta.

Etapa 4 Manipulação de links universais

Além de adicionar esquemas de URL personalizados, seu aplicativo também pode ser configurado para oferecer suporte a links universais – links HTTPS padrão usados por outros aplicativos ou sites – para iniciar seu aplicativo. É assim que você precisa lidar com links universais. Configure os direitos de seu aplicativo. Em seguida, crie o código relevante para manipulação de link universal e implemente o código no delegado do seu aplicativo.

Agora, você pode reconstruir seu projeto no simulador iOS.

Pensamentos finais

Espero que agora você esteja bem versado no conceito de desvinculação, bem como em seu processo de execução. Deep linking tornou-se uma necessidade para os aplicativos de hoje. No entanto, é importante realizar o processo de implementação de links profundos com o máximo de experiência profissional. Se você não tiver o conhecimento técnico ou os recursos necessários, uma empresa experiente de desenvolvimento de aplicativos React Native pode ajudá-lo a navegar pelo processo de criação e execução de links diretos sem esforço.