iOS: trabalhando com navegação por deeplink e tratamento de erros

Teste com deep link - Apresentação

Olá! Eu sou o Ândriu Coelho e te dou boas-vindas a mais um curso de iOS.

Audiodescrição: Ândriu se descreve como um homem branco, de cabelo e barba castanho-escuros, e olhos pretos. Ele veste uma camiseta azul-escura com o logo da Alura em branco, e está sentado em frente a um microfone. Ao fundo, há uma parede clara com iluminação amarela, uma TV à esquerda do instrutor exibindo o mesmo logo branco da Alura sobre um fundo azul-escuro, e dois vasos de planta, um à esquerda e outro à direita.

O que vamos aprender?

Neste curso, daremos continuidade ao aplicativo Swift Bank, no qual trabalhamos ao longo de toda a formação de escalabilidade. A partir de agora, a ideia é trabalharmos com a navegação com deeplinks.

No emulador, temos um exemplo de link do nosso aplicativo que redireciona para a tela de empréstimos:

Teste deeplink com parâmetros

• swiftbankapp://loan?amount=2000

Dessa forma, conseguimos abrir a tela de empréstimos através de um link externo. Isso é muito importante tanto para push notification (notificação push), quanto para quando trabalhamos com Server Driven UI (Interface de Usuário Orientada pelo Servidor) e gostaríamos de trocar alguma opção de lugar e redirecionar a pessoa usuária para alguma tela específica.

Nesse caso, não precisamos subir uma alteração para a loja e esperar o deploy. Conseguimos fazer isso através do servidor, apenas mudando o deeplink.

Além disso, aprenderemos a passar parâmetros de uma tela para outra com deeplink. Também vamos aprender a fazer tratamento de erros para obter uma view genérica de erros, e a montar uma estrutura de navegação para dar suporte aos deeplinks.

Pré-requisitos

Para realizar este curso, é interessante que você tenha conhecimentos sobre a linguagem Swift, saiba construir layouts com SwiftUI, e também saiba um pouco sobre modularização e Server Driven UI.

Conclusão

Gostou do conteúdo que iremos abordar? Esperamos você na primeira aula!

Teste com deep link - Configurando e testando o primeiro deep link

Durante o desenvolvimento de um aplicativo, inevitavelmente, em algum momento, será necessário disponibilizar partes dele para que sejam acessadas a partir do mundo externo. Para exemplificar, vamos utilizar o Google Maps.

Configurando deeplinks no projeto

Analisando o exemplo do Google Maps

Ao acessar a aplicação, é aberto um modal para fazer o upgrade da ferramenta. Nesse caso, vamos clicar em "Continuar usando o site".

Geralmente, em empresas que possuem tanto produtos web quanto mobile, é recomendado que, se a pessoa usuária acessar algum serviço web a partir do celular, seja sugerido que ela utilize o aplicativo.

Isso se deve a diversos fatores, como segurança e usabilidade, por exemplo. Portanto, se a pessoa usuária acessar seu produto, aplicativo ou site usando o smartphone, e você possuir um aplicativo também, o ideal é fazer essa sugestão de que a pessoa usuária mude para o aplicativo.

No Google Maps, por exemplo, temos um botão azul "Abrir app" no canto superior direito. Ao clicar nele, seríamos redirecionados para o aplicativo do Google Maps. Com isso, sabemos que esse botão possui o que chamamos de deeplink, tema central do nosso curso.

Nossa ideia é configurar alguns deeplinks no projeto Swift Bank, que permitam o acesso ao nosso projeto sem ser clicando no botão do aplicativo na tela inicial do dispositivo. Isso tem várias vantagens, como trabalhar com push notification, por exemplo, entre outras aplicações.

Iniciando a configuração de deeplinks no Swift Bank

Após uma reunião com a equipe de negócios e com product managers da Swift Bank, definimos que nós, da área de desenvolvimento, começaremos a aplicar esses deeplinks no projeto.

Com o projeto SwiftBank aberto no Xcode, podemos dar início à configuração dos deeplinks. Para isso, vamos clicar no target principal do projeto, isto é, em SwiftBank no menu lateral esquerdo.

Ao fazer isso, temos acesso a uma página aberta na aba "General". Temos outras abas, como "Signing & Capabilities" e "Resource Tags", por exemplo, e entre elas, temos também a aba "Info", exatamente a que precisamos acessar.

Nessa aba, o que nos interessa é a última seção "URL Types", onde conseguimos configurar a abertura do aplicativo através de um deeplink. Para isso, vamos clicar no ícone de + ("Add items") na parte inferior da aba. Dessa forma, será adicionado um formulário para preenchermos.

Definindo o identificador

Nesse formulário, temos os campos "Identifier", "Icon", "URL Schemes" e "Role". O campo "Identifier" deve ser preenchido com o Bundle Identifier da aplicação, que é basicamente o RG do nosso aplicativo, ou seja, algo que irá identificá-lo de forma única.

Para copiá-lo, basta clicar na seta à direita do campo "Bunde Identifier", localizado na seção "Identity". Feito isso, podemos colar em "Identifier" no formulário.

com.afc.SwiftBank

Definindo o esquema de URL

O próximo passo é definir um esquema no campo "URL Schemes". Esse esquema funciona como um nome que vamos adicionar para a URL, através do qual será possível abrir o aplicativo. Nesse caso, vamos definir esse esquema como, por exemplo, swiftbankapp.

swiftbankapp

Realizando testes

Somente com esses dois campos, já conseguimos realizar um teste. Para isso, vamos fazer o build do aplicativo com essas novas alterações, clicando no ícone de play no canto superior direito do menu lateral esquerdo. Com isso, rodamos o projeto e podemos usar o terminal para testar.

No terminal, executaremos o seguinte comando:

xcrun simctl openurl booted swiftbankapp://home

Embora as telas do deeplink ainda não tenham sido configuradas, adicionamos ://home ao final do comando, pois é o que será lido a partir das configurações que fizemos na aba "Info".

A primeira parte do comando (xcrun simctl openurl booted) é disponibilizada pelo próprio Xcode quando o instalamos, e a segunda parte (swiftbankapp://home) é o deeplink que acabamos de configurar.

Ao executar esse comando, o aplicativo será aberto através do link, considerando que, por enquanto, nosso objetivo é abrir apenas a tela inicial, isto é, a tela Home.

Outra forma de testar seria abrir um aplicativo de notas no emulador, como o "Notes" do próprio iOS. Após clicar em "Novo Lembrete" na parte inferior da aplicação, podemos adicionar a mensagem "Teste deeplink" seguida do link do aplicativo, ou seja, swiftbankapp://home.

Teste deeplink
swiftbankapp://home

Ao fazer isso, swiftbankapp://home se transformará em um link, e ao clicar nele, também será aberta a tela inicial do aplicativo Swift Bank.

Lembrando que tudo isso acontece porque configuramos na aba "Info" do Xcode o campo "URL Schemes".

Conclusão

Essa era a primeira etapa que queríamos te apresentar. Falamos um pouco sobre o que é um deeplink, para que ele serve, e como fazemos a configuração inicial em um projeto. A seguir, vamos avançar com o uso de deeplinks e entender como ele pode ser útil no nosso projeto!

Teste com deep link - Instalando o módulo de empréstimos no aplicativo

Com a configuração inicial do deeplink realizada, conseguimos abrir o aplicativo a partir de um link que nos direciona para a tela inicial do aplicativo da Swift Bank. A partir de agora, vamos começar a unir vários conceitos que aprendemos nesta formação de escalabilidade no nosso projeto.

Instalando o módulo de empréstimos no projeto

O primeiro passo será instalar a biblioteca de empréstimos que desenvolvemos no curso de modularização com CocoaPods, de modo a começar a integrar todos esses conceitos.

Conforme dito anteriormente, o objetivo deste curso é falarmos de navegação com deeplinks. Como já aprendemos a abrir o aplicativo, a próximo etapa é aprendermos a abrir uma tela específica. Nesse caso, vamos usar a view de empréstimos desenvolvida no curso de modularização.

Instalando o CocoaPods

Com o projeto aberto no Xcode, vamos abrir o terminal, onde devemos estar no diretório do projeto SwiftBank (ios-server-driven-swift-bank-main). Começaremos instalando o CocoaPods. Para isso, executaremos os seguintes comandos no terminal:

pod init

pod install

Ao executar o comando pod install, teremos um novo ícone no diretório do projeto: o workspace SwiftBank.xcworkspace. A partir de agora, usando bibliotecas do CocoaPods, abriremos o projeto através deste novo ícone.

Acessando o projeto pelo CocoaPods

Com o Xcode aberto, vamos fechar o projeto anterior e abri-lo novamente pelo ícone do CocoaPods (SwiftBank.xcworkspace). A principal mudança é que, a partir deste momento, teremos uma aba chamada "Pods" no menu lateral esquerdo, onde conseguimos adicionar as dependências do projeto.

Um ponto importante é que, caso já tenha feito o curso de modularização da Alura, você pode usar o projeto que desenvolveu como dependência no arquivo Podfile.

Podfile:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'SwiftBank' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for SwiftBank

end

Caso não tenha realizado o curso, vamos disponibilizar o projeto para você. Basta fazer o download para conseguir instalar usando o CocoaPods da mesma forma.

Instalando bibliotecas com o CocoaPods

Na documentação do CocoaPods, são descritas várias maneiras de instalar uma biblioteca. No nosso caso, vamos instalar a partir de uma URL, pois já temos o projeto no GitHub. Sendo assim, utilizaremos a seguinte opção de comando:

pod 'Alamofire', :git => 'https://github.com/Alamofire/Alamofire.git'

Caso você realize o download do projeto e queira instalar a biblioteca local, basta utilizar a primeira opção da documentação:

pod 'Alamofire', :path => '~/Documents/Alamofire'

No lugar de Alamofire, colocaríamos o nome da biblioteca SBLoan, e em :path, teríamos o caminho do diretório onde armazenamos o projeto. Se você ainda não tem o projeto no GitHub, siga esse caminho.

Com o comando copiado, vamos acessar novamente o projeto no Xcode e colar na linha 9 do arquivo Podfile, após # Pods for SwiftBank. Feito isso, basta substituir o nome da biblioteca e o link do repositório: em vez de Alamofire, teremos SBLoan; e após :git, colocaremos a URL do nosso GitHub.

Podfile:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'SwiftBank' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for SwiftBank
  pod 'SBLoan', :git => 'https://github.com/AndriuCoelho/SBLoan.git'

end

Instalando a nova dependência

Sempre que adicionamos uma nova dependência, precisamos realizar sua instalação. De volta ao terminal, vamos executar o comando pod install novamente.

pod install

Primeiramente, será feito o download do projeto, e ao final, teremos instalado o projeto SBLoan, módulo que desenvolvemos no curso de modularização.

Executando o projeto

Podemos voltar ao Xcode e abrir o projeto, onde já teremos a view que precisamos no target Pods. Ao acessar a pasta "Pods", encontraremos o módulo SBLoan, contendo a view de empréstimos que desenvolvemos anteriormente (SBLoanView). Na sequência, podemos realizar o build do projeto.

Conclusão

A partir de agora, começaremos a entender o contexto do que precisamos fazer. O projeto roda normalmente, e agora o nosso objetivo é abrir a tela de empréstimos, por exemplo, através de um deeplink. No vídeo anterior, começamos a testar a abertura de telas via deeplink.

Para isso, utilizamos o comando abaixo:

xcrun simctl openurl booted swiftbankapp://home

A primeira parte do comando (xcrun simctl openurl booted) é responsável por abrir um deeplink, enquanto a segunda parte (swiftbankapp://home) é o Bundle Identifier que configuramos.

O que nos interessa agora é o que vem após as duas barras do Bundle Identifier. No exemplo acima, adicionamos //home, mas o objetivo é utilizar, por exemplo, //loan ("empréstimos" em inglês), e ao fazer isso, devemos conseguir abrir a tela de empréstimos.

xcrun simctl openurl booted swiftbankapp://loan

Se tentarmos executar esse comando no momento, será aberta a tela inicial, ou seja, a tela Home, pois ainda não configuramos essa navegação de deeplinks no aplicativo. Faremos isso a seguir!

Sobre o curso iOS: trabalhando com navegação por deeplink e tratamento de erros

O curso iOS: trabalhando com navegação por deeplink e tratamento de erros possui 111 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de iOS em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Teste com deep link
• Abertura de telas com deep link
• Navegação interna
• Passagem de parâmetros
• Tratamento de erros com deep link