Tema do aplicativo: Placas de carros

Você sabia que é possível identificar o estado de origem de um veículo pelo número de sua placa? Isso é possível, porque os Detrans são órgãos estaduais e cada um deles recebe uma faixa de numeração para emplacar os carros do seu estado.

Qual é relevância disso? Quando você vai trocar de carro é importante saber a procedência do veículo.

Quasar Framework

Resumidamente, o Quasar é um framework baseado em Vue.js para construção de SPA (Single Page Applications), sites com Server Side Render, PWA (Progressive Web Application), Mobile App (Cordova) e Desktop App (Electron). Isso tudo com o mesmo código!

O projeto Quasar começou em 2015 e foi criado pelo programador romeno Razvan Stoenescu. O projeto é totalmente Open Source e está disponível sob a licença MIT, ou seja, você tem muita liberdade na hora de programar e distribuir seu software.

Fase 1: Preparando o ambiente

Importante deixar claro que o sistema operacional que eu uso (e recomendo) é o Ubuntu 18.04. Se você usa outro sistema operacional, consulte a documentação do Quasar. Outro ponto importante é que eu desenvolvi o aplicativo para executar somente na plataforma Android, uma vez que tenho pouca experiência com a plataforma e equipamentos da Apple.

Para criar o projeto você precisa instalar o Quasar CLI, na documentação oficial tem as instruções de instalação e de crianção do projeto. Vale lembrar que o Quasar CLI também será extremamente útil para executar e empacotar o aplicativo final.

Algo que gera muitas dúvidas é quando o Vue.js deve ser instalado, mas por incrível que pareça, você NÃO instalará o Vue.js. O Quasar CLI instala silenciosamente para você.

A partir de agora você precisa instalar o Cordova e o Android Studio, que são as ferramentas que possibilitarão que seu aplicativo funcione na plataforma Android. No site do Quasar tem um passo a passo ensinando a instalar e configurar as duas ferramentas.

Algo que não está na documentação do Quasar (pelo menos eu não encontrei) é que antes de prosseguir, você precisa ter instalado o Oracle JDK 8. Inicialmente eu tentei instalar a versão mais recente do Java, mas não funciona, precisa ser a versão 8.

Aqui temos um problema, a versão 8 não é mais distribuída nos repositórios tradicionais e você precisa instalar manualmente. Para isso, acesse este Tutorial para instalar o Oracle JDK 8 e siga todos os passos.

Pelo que percebi a maioria da comunidade Cordova utiliza o Oracle JDK, mas segundo este link o Cordova também funciona com o Open JDK.

Outra coisa que não está na documentação oficial do Quasar é que você precisa instalar o Gradle, mas para quem usa o Ubuntu, basta executar o comando sudo apt install gradle. Para quem utiliza outras plataformas, acesse o site do Gradle e veja as instruções.

Sobre estes itens que não estão na documentação, eu encontrei este tutorial que ajuda muito no processo de configuração e preparação do Cordova.

Se você concluiu esta etapa, saiba que o pior já passou. Daqui para frente é mais tranquilo.

Fase 2: Desenvolvimento

Para desenvolver um aplicativo com Quasar você precisa ter uma boa noção de Vue.js. Não precisa ser um usuário muito experiente, mas também não pode ser um usuário iniciante. É preciso ter um claro entendimento sobre templates, componentes e rotas (no mínimo isso).

Mesmo para quem é mais experiente pode estranhar algumas coisas. Por exemplo, você não encontrará um arquivo main.js onde o Vue.js é instanciado, uma vez que o Quasar cria a instância de maneira oculta.

Você pode se perguntar: Mas se eu precisar passar algum parâmetro para o Vue.js? (algo bem comum em plugins e bibliotecas). Neste caso você precisa utilizar os Boot Files do Quasar, nesta documentação você vai entender melhor como eles funcionam.

Situações como esta podem parecer meio estranhas, mas são necessárias. O Quasar precisa portar seu código para diferente plataformas, então é preciso organizar melhor algumas coisas.

Outro exemplo: O ícone do seu aplicativo. O Quasar possui uma extensão que cria, redimensiona e configura o ícone do seu aplicativo para todas as plataformas e todos os tamanhos. Isso pode parecer algo banal, mas cada plataforma possui um padrão diferente e você pode ter muito trabalho se fizer isso tudo manualmente. Veja como instalar e utilizar o Icon Genie.

Para executar o aplicativo em modo de desenvolvimento, você pode executar os seguintes comandos:

# Command 1: For SPA App
quasar dev

# Command 2: For Android App
quasar dev -m cordova -T android

Mais detalhes sobre estes comandos estão nestes links: SPA Build Commands e Mobile App Build Commands .

Vale ressaltar que o segundo comando, abre o Device Emulator, que é praticamente uma máquina virtual. Porém eu achei isso bem pesado e no meu caso não funcionou muito bem.

Por isso eu optei por durante o desenvolvimento abrir o aplicativo como um SPA. Posteriormente, com o desenvolvimento bem encaminhado, eu testei o aplicativo no meu Smartphone Android por meio do Android Debug Bridge.

Fase 3: Publicar o aplicativo

Para publicar o aplicativo é necessário: Empacotar o projeto e assinar digitalmente o arquivo APK. Mas não se preocupe, o Quasar tem uma excelente documentação e mostra cada passo detalhadamente.

Teoricamente está tudo pronto e é só publicar no Play Store, porém eu tive um problema.

Agora, o Google só permite a publicação de aplicativos por meio do Android App Bundle, ou seja, você precisa gerar um arquivo AAB que contenha o arquivo APK. Segundo o Google a função do Android App Bundle é a seguinte:

• "Os pacotes de apps usam um novo modelo de envio, conhecido como Dynamic Delivery do Google Play, que cria e exibe APKs otimizados para a configuração de cada dispositivo. Ao remover códigos e recursos não utilizados de outros dispositivos, esse modelo de exibição gera um app menor e mais eficiente para instalação dos usuários." Google Support

Enfim, para gerar um arquivo AAB a partir de um projeto Quasar/Cordova, você precisa seguir os passos detalhados neste link.

Resultados

O aplicativo desenvolvido está disponível no PlayStore e também como Single Page Application neste link. Fique à vontade para testar. Se você quiser fazer contribuições, o código-fonte está disponível no GitHub.

Sobre o Quasar, eu sinceramente achei um framework muito bom e poderoso. É uma ferramenta que se propõe a portar seu código para várias plataformas e consegue fazer isso muito bem. É comum relatos negativos sobre a performance de aplicativos criados com Cordova, mas neste caso não houve problemas.

Em relação às desvantagens, tenho dois pontos a destacar:

• Sua documentação é extensa e a curva de aprendizagem pode ser lenta no início.
• Atualmente é praticamente obrigatório usar o Quasar CLI, porém eu gostaria que existisse mais suporte para Vue CLI 3.

Dúvidas ou sugestões é só entrar em contato. Abraço.