Aplicativo mobile com Vue 3 + Ionic
Hoje eu trago uma das junções mais esperadas por mim. Estou falando do Vue com Ionic :) . Em 2016 eu comecei aprender Angular 1 e logo passei a mexer com o Ionic 1 que hoje esta na versão 5, cheguei a desenvolver alguns aplicativos como o AngoPlay entre outros. Fui estudando outras versões do Angular até o momento que tive contato com Vue.js, mas ainda assim sentia saudades do famoso Angular + Ionic para construção de app híbrido, e parece que a equipe do Ionic atendeu o meu desejo de Vue + Ionic :).
Sem mais historinhas vamos no que interessa, com a saída do Vue.js 3 as coisas dispararam e já temos um suporte 100% pra começar a desenvolver aplicativos multiplataformas com Ionic. Hoje eu trago um tutorial simples que me serviu de teste pra ver como está funcionando essa super combinação.
Requisitos básicos para o tutorial
Conhecer o básico de Javscript e Vuejs.
Dica: O primeiro passo para desenvolver segue a documentação do Ionic que é bem documentada. O Ionic e Vue usa o Typescript, mas para seguir esse tutorial não precisa dominar ele, mas se quiser se aprofundar futuramente nos estudos dessas 2 tecnologias juntas vai precisar.
O aplicativo
O aplicativo desenvolvido nesse tutorial é um aplicativo de pesquisa de países que consome uma api externa criada por mim no MockApi . Se você não conhece MockAPi não faz mal, você pode apenas utilizar a minha api e em outra oportunidade faço um tutorial explicando como funciona ele.
Criando o Projeto
Vamos instalar na nossa maquina o ionic/cli, então abra o terminal e digite a seguinte linha de comando:
npm install -g @ionic/cli
Depois de terminar o processo todo vamos então criar o nosso projeto digitando a seguinte linha de comando:
ionic start vue-app-vue blank --type vue
Pronto, aqui criamos o nosso projeto com o nome de vue-app, e o blank quer dizer que queremos o nosso projeto sem configurações adicionais. Vamos abrir o nosso projeto e teremos algo parecido com a imagem.
Obs: Estou usando a IDE visual code, mas você pode usar qualquer outra do seu gosto. A imagem a seguir mostra o projeto e suas determinadas pastas.
Olhando para imagem consegue-se ver como o sistema de pastas e arquivos se parece muito com o sistema de projetos criados só com Vue. Para quem já desenvolve em Vue.js deve se sentir em casa depois de ver essa imagem. :)
O próximo passo é rodar o projeto e para isso digite a seguinte linha de comando ionic serve
Get Daniel Lufupa’s stories in your inbox
Join Medium for free to get updates from this writer.
No meu caso está rodando na porta 8100 e estou usando o Google chrome no modo mobile.
Agora o que vamos fazer é voltar ao projeto no visual code e começar a brincar com o código. Reforço aqui, usa e abusa bastante da documentação do Ionic.
Vai até o arquivo Home.vue e pode excluir todo código existente nele e vamos fazer o nosso.
Começado pelo template, vamos deixar do jeito que mostra a imagem a seguir.
O que eu fiz aqui é bem simples, não vou entrar em muitos detalhes até para impulsionar a ler a documentação do Ionic que é bem de boa. Vamos lá :)
Uma observação importante, todas as tags do Ionic são tratadas como componentes. Quando você usa no template precisa importar elas também, mas vamos passo a passo. Dentro do<template> criamos o <ion-page> o IonPage é o chamado componente raiz que precisa estar em todas as paginas de uma aplicação Ionic. Criei um <ion-header> com o título do nosso app SAIBA+ e dentro dele coloquei também o <ionc-searchBar> que será a nossa barra de pesquisa, e por fim o <ion-content> que sinaliza que é lugar pra colocarmos o nosso conteúdo. Usei o <iond-card> dentro e fiz um v-for pra listar todos os países que vêm da minha api. Todos essas tags e explicações mais detalhadas estão na documentação.
Importações de componentes
Agora vamos importar os componentes, lembra quando eu disse que todas as tags usadas no template são componentes que precisam ser importados? Isso, agora precisamos importar elas. Vai até o teu script <script lag = “ts”></script> e dentro dele importa os componentes e registra conforme mostra a imagem.
Agora que temos os nossos componentes importados vamos chamar a nossa api de países e criar um método computado que vais nos retornar os países de acordo com a pesquisa .
Explicando o código
No return criei 2 variáveis, search e paises. Em seguida coloquei um created()para pegar a resposta da minha api assim que o componente for carregado, fiz um fetch da minha api de países e joguei a resposta dentro da variável paises this.paises = data;
Bom até ai sem muito segredo, criei também uma computed com o método filtraPaisesque vai me retornar os países com a lógica de filtro. Declarei uma variável como constante do tipo anypaisesDomundo: any que recebe a resposta da api de países que está guardada na variável this.paises
em seguida usei um filter() para filtrar a minha resposta de acordo com a pesquisa feita pelo usuário, peguei o data que vem a informação e setei o nome do país no data.nome e fiz os meus tratamentos de pesquisa usando o toLowerCase e Index( ) para me retornar o país pesquisado. Até aqui suave…..
Se você seguiu certinho o tutorial então você já está com o aplicativo funcionado 100%. Para rodar aplicação digite a seguinte linha no terminalionic serve
E terá o seguinte resultado:
Conclusão
Chegamos ao fim de mais um tutorial como criar um aplicativo mobile com Vue 3 + Ionic. Como vocês viram com conhecimento de Vue.js você cria aplicativos rápidos e para multiplataformas. Até o próximo tutorial :)
