Links de navegação com Ionic 2 (deep links)

https://apptimize.com/blog/2016/01/how-to-personalize-mobile-user-onboarding/

Antes de começar vamos entender um pouco sobre os deep links, e pra isso vamos ao por que ele foi criado.

Vamos ao exemplo de um aplicativo de ecommerce no qual os usuários podem compartilhar o link do produto, mas ao receber um desses links se você tiver o aplicativo do ecommerce instalado, ele abre o aplicativo na página do produto, isso são os deep links!

Mas e se a pessoa não tiver o aplicativo instalado? Bom o deep link é um endereço web, por exemplo http://ecommerce.com/produto/123 nesse caso se a pessoa que recebeu não tiver o aplicativo instalado, vai abrir automaticamente o browser padrão do smartphone, mas se ela tiver o aplicativo instalado tanto iOS quanto o Android irão perguntar se a pessoa deseja abrir aquele link associado ao aplicativo, o aplicativo irá receber os parametros da url produto e o código 123, para saber qual página irá abrir (produto) e qual produto buscar pelo código 123.

Poxa que bacana na teoria, mas e na prática?

Vamos criar um projeto com o Ionic 2 e aprender como isso funciona na prática.

O que eu preciso pra começar a brincar?

Primeiro de tudo se você ainda não tem o NodeJS instalado na sua máquina, ta esperando o que?

Mas qual a melhor forma de instalar o NodeJS ?

Ótima pergunta, como o NodeJS é uma tecnologia que está em evolução, pode ser que você precise atualizar conforme o tempo, então eu recomendo usar uma forma chamada NVM (Node Version Manager), que agora tem suporte pra Windows, nada mais é que um gerenciador de versão do NodeJS.

Para Windows

Para Mac e Linux

Obs. Por favor não usem sudo nas instalações!

E agora tem duas versões do NodeJS, qual é a melhor?

A versão que você deve usar no momento é a última versão 6.x, no seu terminal basta digitar

$ nvm install 6.10.3 (para instalar a versão do nodejs 6.10.3)
$ nvm alias default 6.10.3
(para colocar a versão 6.10.3 como versão padrão)

Pronto você já tem o NodeJS instalado, no futuro você pode instalar uma versão mais nova com o comando install, e depois alterar entre as duas.

Quem saber mais? Leia a documentação ;-)

Já tenho o NodeJS, e agora vamos começar?

Agora falta só a gente instalar o Ionic 2 para iniciar nosso estudo prático sobre deep-link, abra seu terminal e vamos instala o Yarn (gerenciador de pacotes criados pelo Facebook) e o Ionic 2.

$ npm install -g yarn ionic

Com o Ionic instalado vamos iniciar nosso projeto

Escolha a versão blank, e tecle enter para confirmar.

Na tela abaixo, irá perguntar se você quer testar sua aplicação no Ionic View, digite N e tecle enter para continuar.

Agora só entrar na pasta do projeto

$ cd deep-link

Abra na sua IDE (Editor de código favorito), no meu caso eu gosto muito do WebStorm(pago mas vale muito a pena!)

Dica grátis de Webstorm ! :-p

O Webstorm tem o melhor auto complete na minha opnião, só que isso exige que ele fique monitorando seus códigos o tempo todo, mas tem algumas pastas que são de build, no caso do ionic é a pasta www, então dizemos a ele para deixar essa pasta fora da verificação como na imagem abaixo

Vamos codar!!!

Agora com tudo preparado vamos dar uma olhada na documentação do Ionic Native:

Pra começar, vamos ter que digitar esse comando gigante, alterando algumas variáveis, para o nosso projeto no nosso terminal.

Só copiar, colar e teclar !

$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=minhaloja --variable DEEPLINK_SCHEME=http --variable DEEPLINK_HOST=minhaloja.com --variable ANDROID_PATH_PREFIX=/

Obs: As partes em negrito são aonde eu mudei para o nosso projeto.

Depois de instalado, abra seu arquivo config.xml e lá no final vai ter as configurações do plugin do deep-link para usar nativamente!

Vamos agora adicionar o Provider para usar no Ionic 2

$ yarn add @ionic-native/deeplinks

Criando uma pagina de produto

Uma das coisas mais legais do Ionic 2 é que agora podemos usar o terminal para criar páginas, componentes e providers, economizando um tempo enorme de criação de pastas e arquivos.

$ ionic g page produto

Depois adicionar o modulo de page do produto e o provider do deeplink no nosso arquivo src/app.app.module.ts

Vamos dar um visual mais bonito home, adicionando um botão para a nossa página do produto

src/pages/home/home.html

src/pages/home/home.ts

Página de Produto

src/pages/produto/produto.ts

scr/pages/produto/produto.html

Testando no Browser

Agora vamos configurar para testar no navegador! Como assim?

O Ionic 2 é uma versão web que depois roda dentro de um mini browser para acessar conteúdo nativo com uma tecnologia chamada Cordova, nosso desenvolvimento é feito todo no Browser e no final compilamos uma versão nativa para testar recursos nativos como camera, vibração e até o deeplink, mas no caso do deep-link podemos fazer o teste no browser, e gerar uma versão web do nosso aplicativo para publicar na internet como uma versão web.

$ ionic serve

Configurando o Deep Link no arquivo src/app/app.module.ts

src/app/app/app.module.ts

Pronto, agora com tudo configurado, vamos testar no browser

$ ionic run server

Copie e cole esse endereço no seu browser

http://localhost:8100/#/produto/produto-teste e veja que o produto-teste irá ser recebido como código do produto, como você pode ver abaixo.

Tá, mas eu não quero usar essa hashtag (#) ai no endereço que não fica muito semântico… fmz, bora descomentar a linha 23 do arquivo app.module.ts

Que legal, mas fui testar no Android ou no meu iPhone e não funcionou, e agora?

Por algum motivo, que eu ainda não entendi, precisamos acrescentar uma regra de rotas para funcionar nativamente, não é nada muito diferente do que fizemos no arquivo app.module.ts, mas agora iremos adicionar a rota no arquivo de app.componets.ts como você pode conferir na imagem abaixo

src/app/app.components.ts

Agora só testar no android

$ ionic cordova platform add android
$ ionic cordova run android

Ou no iPhone

$ ionic cordova platform add ios
$ ionic cordova run ios

Digite o endereço em algum lugar dentro do smartphone e tente clicar no link que se formou para poder testar, como no exemplo abaixo:

Pronto, agora você pode usar e abusar desse recurso para deixar seu aplicativo ainda mais interessante e inovador!

Grande abraço e espero que esse artigo possa ter te ajudado!

Código fonte no Github:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.