Deeplink: o que é, como funciona e como implementar no SwiftUI

No seu dia a dia, provavelmente você já recebeu links que abrem diretamente um aplicativo em uma tela específica, como cupons ou promoções no iOS. Já se perguntou o que é deeplink, como funciona e como criar um deeplink no iOS usando SwiftUI? 

A resposta é: essa funcionalidade é possível graças ao uso de deeplinks. 

Neste artigo, vamos entender o que são deeplinks e como funcionam em aplicativos iOS construídos com SwiftUI. 

Você vai descobrir: 

1. O que são deeplinks em iOS e como funcionam; 

2. Como implementar deeplinks em um app usando SwiftUI; 

3. Boas práticas para o uso de deeplinks. 

Vamos lá? 

O que é deeplink em iOS e como funciona: 

Imagine que você recebe o aviso de uma promoção ou cupom de desconto em um app. 

Ou, até mesmo, prefere acessar diretamente uma nova funcionalidade no seu app de rede social. 

Seria muito mais prático acessar diretamente essa oferta, sem precisar navegar por múltiplas telas. 

É para isso que os deeplinks servem: redirecionar o usuário do aplicativo para uma tela, páginas ou seções específicas com apenas um toque em um link. 

Mas o que são os deeplinks? 

Os deeplinks personalizados são uma forma eficiente de vincular recursos específicos dentro do seu aplicativo. Quando os usuários interagem com um deeplink personalizado, seja através de um e-mail ou de outros aplicativos, eles são direcionados diretamente para uma seção ou página específica, eliminando a necessidade de navegar por várias telas e menus. 

Essa abordagem proporciona uma experiência mais fluida, já que elimina a necessidade de navegar por menus e telas iniciais. Usando deeplink, é possível direcionar a pessoa diretamente para uma página de cupom, aumentando o engajamento, a satisfação e as chances de conversão. 

Com o poder do deeplink no iOS, podemos otimizar a experiência do usuário, aumentar o engajamento e redirecionar usuários para conteúdo relevante, com apenas um link! 

A plataforma iOS oferece suporte a esquemas de URL comuns, como e-mails e ligações telefônicas, entre outros. 

Existem diferentes formas de implementar deeplinks no iOS, como custom URL schemes e universal links (que utilizam associated domains).

Os custom URL schemes permitem abrir o app por link iOS, já os universal links funcionam tanto para aplicativos como para web, exigindo configuração de associated domains no projeto. Entender a diferença entre deeplink e universal link é importante para escolher a abordagem certa conforme seu aplicativo. 

Para entender o assunto deeplinks de forma prática, vamos usar um projeto bastante simples de exemplo para auxiliar no entendimento. 

Projeto que será utilizado 

Neste artigo, vamos utilizar um projeto pronto que pode ser acessado e baixado. O foco será unicamente a implementação do deeplinking. 

Sinta-se à vontade para abrir o projeto, testá-lo e conferir como ele está organizado. 

Agora, vamos entender como utilizar um deeplink na prática. 

Como criar deeplink iOS: passo a passo para implementar deeplink no SwiftUI usando URL Schem

Vamos começar com a implementação de uma URL que vai abrir o nosso app! 

Etapa 1: Criando o suporte para a URL 

Primeiro, acesse o arquivo .xcodeproj; neste arquivo há diversas configurações globais para todo seu aplicativo e é nele que vamos começar: 

• Vá na aba "Info" e procure e clique na linha com o nome "URL Types"; 
• Em seguida, clique no símbolo de mais para adicionar um suporte para URL; 
• No campo "Identifier", coloque o nome para identificar essa URL, e fique à vontade para escolher o que preferir e fizer mais sentido. No meu caso, colocarei "Alinking e-commerce"; 
• Agora, o campo "URL Schemes" vai ser o link do nosso app, como se fosse o domínio de um site, mas para um app iOS. Aqui colocarei "alinking"; 
• Pronto! Seu suporte para a URL já está configurado. 

Etapa 2: Testando a URL 

Com o suporte configurado, inicie seu app, abra um navegador de sua preferência e digite <seu_url>:// - no meu caso, o link será: alinking://. Se todas as configurações foram feitas corretamente na etapa 1, o sistema vai perguntar se você quer abrir o link com o seu aplicativo. 

Muito legal, não é mesmo? Já temos uma implementação bastante básica, porém vamos avançar mais nas possibilidades e funcionalidades oferecidas pelos deeplinks. 

Etapa 3: Como usar onOpenURL no SwiftUI para navegação por deeplink 

Para implementar a funcionalidade de clicar em um link e redirecionar diretamente para alguma página em nosso app, vamos tratar essa URL na nossa struct com a anotação main. 

Dentro do arquivo DeepLinkingApp.swift, haverá o seguinte código: 

import SwiftUI 
@main 
struct DeepLinkingApp: App { 
@StateObject private var appData: AppData = .init() 
var body: some Scene { 
        WindowGroup { 
            ContentView() 
             .environmentObject(appData) 
     }  
} 
}

Para conseguir usar o suporte à URL, ou seja, para que o nosso app saiba qual link ele deve receber e computar, geralmente recebemos um texto no link e é preciso que esse texto seja recuperado.

Para fazer isso, vamos empregar o método onOpenURL logo após o .environmentObject(appData): 

import SwiftUI 
@main 
struct DeepLinkingApp: App { 
@StateObject private var appData: AppData = .init() 
var body: some Scene { 
        WindowGroup { 
            ContentView() 
             .environmentObject(appData) 
             .onOpenURL { url in 
             } 
     }  
} 
}

Com isso, já será possível fazer o tratamento de parâmetros (ou query string) dentro da URL, então vamos remover o link e separar os parâmetros que houver: 

.onOpenURL { url in 
// Agrupando os parâmetros 
let string = url.absoluteString.replacingOccurrences(of: "alinking://", with: "") 
// Separar os parâmetros agrupados 
let componentsOnString = string.components(separatedBy: "?") 
// Percorrendo os parâmetros 
for component in componentsOnString { 
     // Separando os parâmetros tab e verificando se existem dentro da classe Tab 
     // para acessar alguma página do app 
     // Tabs que você pode usar: inicio, favoritos ou configuracoes 
     let tabRawValues = component.replacingOccurrences(of: "tab=", with: "") 
     if let requestedTab = Tab.convert(from: tabRawValues){ 
            appData.activeTab = requestedTab 
     } 
} 
}

O código do arquivo `DeepLinkingApp.swift` ficará assim: 

import SwiftUI 
@main 
struct DeepLinkingApp: App { 
@StateObject private var appData: AppData = .init() 
var body: some Scene { 
        WindowGroup { 
            ContentView() 
             .environmentObject(appData) 
             .onOpenURL { url in 
                 // Agrupando os parâmetros 
                 let string = url.absoluteString.replacingOccurrences(of: "alinking://", with: "") 
                 // Separar os parâmetros agrupados 
                 let componentsOnString = string.components(separatedBy: "?") 
                 // Percorrendo os parâmetros 
                 for component in componentsOnString { 
                     // Separando os parâmetros tab e verificando se existem dentro da classe Tab 
                     // para acessar alguma página do app 
                     // Tabs que você pode usar: inicio, favoritos ou configuracoes 
                     let tabRawValues = component.replacingOccurrences(of: "tab=", with: "") 
                     if let requestedTab = Tab.convert(from: tabRawValues){ 
                            appData.activeTab = requestedTab 
                     } 
                 } 
             }  
     } 
} 
}

Esta abordagem permite a navegação no SwiftUI usando deeplink com parâmetros no iOS, facilitando abrir telas específicas via link. 

Para realizar esse teste, vá até o safari (ou qualquer outro navegador) e digite "alinking://?tab=favoritos", assim, o app vai abrir diretamente na aba de favoritos. 

Vamos ver mais uma funcionalidade possível com os deeplinks a seguir. 

Etapa 4: Exemplo de deeplink com parâmetros no iOS - promoções e cupons

Agora, vamos implementar outra funcionalidade. 

Imagine que você recebeu uma notificação no seu app: o seu site de compras online preferido está oferecendo um cupom de 50% de desconto. Todo mundo adora um desconto, né? 

Então, ao clicar nessa notificação do app, você entra em uma tela especial que mostra detalhes da promoção. 

Mágico! Como podemos criar essa funcionalidade? Bom, isso é uma aplicação do deeplink junto da navegação do SwiftUI, e vamos ver como implementar essa funcionalidade a seguir. 

No app fornecido no começo do artigo, já temos essa tela de promoções pronta para usar. Nosso único trabalho será implementar a funcionalidade de deeplink, ou seja, criar o link e levar o usuário direto para a tela de promoção. 

Para fazer isso, acesse a raiz do projeto que está no arquivo DeepLinkingApp.swift. Em seguida, dentro do nosso for de componentes, adicione mais uma condicional tratando o parâmetro do tipo "promo": 

// Código omitido 
for component in componentsOnString { 
// Código omitido 
if component.contains("promo=") { 
     let promoValues = component.replacingOccurrences(of: "promo=", with: "") 
     // Verificando se o código de promoção foi o 50A e mudando o valor da propriedade "isShowingPromo" que 
     // Controla se a tela de promoção será mostrada ou não 
     if (promoValues == "50A") { 
            appData.isShowingPromo = true 
     } 
} 
}

E, com isso, já será possível visualizar este resultado: 

Repare que o acesso à tela de promoção é possível apenas com o deeplink. Se o usuário a procurar no app, não conseguirá encontrá-la. Essa é uma funcionalidade bem interessante, pois podemos ocultar telas do usuário e permitir seu acesso apenas com um deeplink específico. 

Pronto! Finalizamos a implementação da segunda funcionalidade de deeplinks. 

Agora, vamos entender algumas práticas para deixar o código mais legível e organizado! 

Boas práticas com deeplinks 

Antes de implementar deeplinks em produção, é essencial considerar aspectos de segurança: 

Validação de entrada 

Sempre valide e sanitize todos os parâmetros recebidos através de deeplinks. Segundo especialistas em segurança mobile, falhas nessa validação podem expor seu app a ataques de injection e manipulação maliciosa. 

Whitelist de valores 

Mantenha uma lista de valores permitidos (whitelist) para parâmetros críticos. Nunca confie cegamente em dados vindos de URLs externas. 

Dados sensíveis 

Nunca transmita informações sensíveis (tokens, senhas, dados pessoais) diretamente através de deeplinks, pois URLs podem ser facilmente interceptadas ou registradas em logs. 

Universal Links  

Quando possível, prefira Universal Links a URL schemes customizados, pois oferecem maior segurança através da verificação de domínio via arquivo AASA (Apple App Site Association). 

Boas práticas gerais 

Pensando na reutilização do código, podemos aperfeiçoar a implementação apresentada de diversas maneiras. A seguir, veremos como reutilizar essa lógica por meio de classes. 

Assim, crie uma classe chamada DeepLinkManager.swift e leve todo o código de verificação de URL para dentro ela: 

import Foundation 
class DeepLinkManager { 
    func handleDeepLink(url: URL, appData: AppData) { 
     let string = url.absoluteString.replacingOccurrences(of: "alinking://", with: "") 
     let componentsOnString = string.components(separatedBy: "?") 
     for component in componentsOnString { 
         if component.contains("tab=") { 
             let tabRawValues = component.replacingOccurences(of: "tab=", with: "") 
             if let requestedTab = Tab.convert(from: tabRawValues) { 
                    appData.activeTab = requestedTab 
             } 
         } 
         if component.contains("promo=") { 
             let promoValues = component.replacingOccurrences(of: "promo=", with: "") 
             if (promoValues == "50A") { 
                    appData.isShowingPromo = true 
             } 
         } 
     } 
} 
}

Ao concentrar a implementação em uma classe isolada, fica mais fácil reutilizar o código e encontrá-lo se for necessário fazer alguma manutenção e correção de bugs. 

Para utilizar essa classe no nosso DeepLinkingApp.swift, basta implementar este código: 

import SwiftUI 
@main 
struct DeepLinkingApp: App { 
@StateObject private var appData: AppData = .init() 
var body: some Scene { 
        WindowGroup { 
            ContentView() 
             .environmentObject(appData) 
             .onOpenURL { url in 
                 let deepLinkManager = DeepLinkManager() 
                    deepLinkManager.handleDeepLink(url: url, appData: appData) 
             } 
     } 
} 
}

E, com isso, aplicamos uma boa prática de isolar a funcionalidade de tratar os deeplinks em uma classe. 

Essa abordagem faz sentido para você? 

Resumo: quando usar deeplink, url scheme ou universal links no iOS 

Como vimos, o deeplink no iOS (neste caso específico, utilizamos o SwiftUI) é uma poderosa ferramenta que permite redirecionar os usuários diretamente para seções ou páginas específicas em um aplicativo com apenas um toque em um link. 

Isso proporciona uma experiência fluida, eliminando a necessidade de navegar por menus e telas desnecessárias para o objetivo final, o que pode aumentar o engajamento, a satisfação e a probabilidade de conversão dos usuários. 

A implementação do deeplink no iOS envolve a configuração de esquemas de URL personalizados e o tratamento desses links em seu aplicativo. É possível criar funcionalidades como acesso a abas específicas do aplicativo ou exibição de promoções especiais por meio do deeplink. 

Curtiu? Se você se interessa ou já está no mercado iOS, que tal conferir a formação SwiftUI disponível na Alura? 

Nessa formação, você vai construir layouts bonitos, aprender gerenciamento de estados e navegação, criar animações elegantes e até conectar o arquivo com uma API por meio de requisições HTTP. 

Bons estudos e até a próxima! 

Referências 

• Documentação Apple: Universal Links 

• Documentação Apple: onOpenURL no SwiftUI 

• Artigo: Diferença entre deeplink e universal link 

• Documentação da Apple 

• Shutterstock