PWA e a framework Ionic, uma história de amor com um final feliz?
Hoje em dia, no universo de desenvolvimento web, a importância de uma PWA — Progressive Web App — está cada vez mais relevante.
Porém, o que é afinal uma PWA? Uma PWA é, basicamente, um website com os benefícios, algumas das funcionalidades e características de uma aplicação nativa.
Mas porquê esta relevância? Ora, existem várias razões, como a facilidade de desenvolver um projeto assente numa só linguagem de programação e possível framework. Ou, então, a experiência de utilizador acrescida, que permite aceder à aplicação mesmo que esteja offline ou a partir do browser como se fosse uma aplicação nativa sem necessitar de instalar a mesma no seu smartphone. Outro aspeto que as PWA proporcionam é a possibilidade de um programador conseguir transferir as suas habilidades de Javascript e participar no desenvolvimento de uma aplicação, não necessitando de aprender linguagens como Java ou Kotlin e Swift. Deixo aqui mais recursos referentes a PWA em baixo, visto que existe muito, mas mesmo muito conteúdo acerca desta temática. Por isso, recomendo que vejam, é informativo!
Nos dias de hoje a importância de uma PWA — Progressive Web App — está cada vez mais relevante. Marcas como o Twitter, Starbucks, Tinder, Pinterest entre outras tantas, oferecem plataformas que são PWA.
Foi a partir desta maior utilização e tração de PWA que a Ionic Framework foi ganhando cada vez mais relevância. Esta framework não é propriamente a mais recente no universo de web/mobile development. Foi criada em 2012 quando estes conceitos ainda se encontravam em fase de gestação. Os criadores nesta altura estavam focados em providenciar uma forma de construir apps facilmente com o skillset de conhecimentos de desenvolvimento web e esse motto ainda se encontra hoje no Ionic.
Antes de avançar, não nos esqueçamos que existem outras alternativas para o desenvolvimento de PWAs, como por exemplo o Xamarin, o Flutter, o Framework7 ou o React Native com o Expo e o React Native Web. Contudo, neste artigo irei explorar somente o Ionic e perceber se é uma boa alternativa para um front-end developer de Javascript, com competências de React.js, que tenha interesse em abordar o desenvolvimento de aplicações e PWAs.
Mas porquê o Ionic Framework? É mais do universo de Angular.js, mas deixou-me curioso, uma framework para PWAs, com aparentemente vários recursos e uma nova versão 6.0 acabada de sair. Foi basicamente isto que me fez experimentar o Ionic.
Hoje em dia o conjunto de tecnologias em torno do Ionic e da equipa do Ionic não são poucas, como demonstrado no seu website. tecnologias bastante relevantes especialmente o Capacitor.js, que vou descrever com mais detalhe abaixo. Também não convém esquecer a biblioteca vasta de componentes e de ícones prontos a serem utilizados em qualquer projeto e que já vêm incluídos na framework por predefinição na criação de um novo projeto.
Outro aspeto fundamental e crucial que a framework detém é a alternativa de escolher uma das três framework de Javascript mais utilizadas pela comunidade de frontend developers: o React.js, o Angular e o Vue.js. Esta versatilidade de colocar uma framework em cima do Ionic é algo fantástico, visto que um developer com mais experiência em Vue.js pode desfrutar igualmente de todas as funcionalidades do Ionic e construir uma PWA.
Com todas estas tecnologias a experiência de desenvolvimento para um developer aparenta ser fácil e rápida, em teoria. Para além disso, convém abordar como o Ionic Framework consegue fazer uso de APIs nativas de um dispositivo mobile, sendo que a framework estabelece uma comunicação com estas APIs a partir do Capacitor.js, plugins oficiais ou da comunidade, ou de plugins do Cordova. É de referir que o Capacitor.js é uma alternativa ao Cordova para construir cross-platform hybrid apps, lançado em 2018. A partir destas ferramentas um developer pode utilizar APIs que permitem interagir como, por exemplo, as hápticas (para quem não souber), o filesystem, a câmara fotográfica, a geolocalização de um dispositivo mobile.
Para perceber realmente como funciona na prática idealizei um pequeno projeto que irá fazer uso de algumas APIs referidas acima a partir do Capacitor.js.
Antes de conceber um conceito inicial para este pequeno projeto esmiucei ainda mais a documentação do Ionic, do Ionic com o React.js (visto que é a framework com a qual estou mais familiarizado), do Ionic Components e do Capacitor.js. É de destacar que também investiguei um pouco como fazer debug de uma aplicação de Ionic num emulador de Android, a partir do Android Studio, visto que estou a trabalhar num ambiente Windows o que me dificulta e até de certa forma impossibilita a utilização de um emulador iOS.
Decidi avançar com a ideia do nekogotchi. É uma aplicação, semelhante a um tamagotchi (ainda existem hoje!), onde o utilizador poderá tratar de um gato, alimentá-lo, passeá-lo, brincar e tirar fotos com o mesmo. Desta forma pensei em utilizar as APIs de câmara, geolocalização, filesystem, storage e local notifications.
Mas vamos lá colocar as mãos à obra e começar a explorar o Ionic Framework, sempre com a documentação aberta. O meu primeiro passo foi instalar a CLI do Ionic no meu PC e correr o seguinte comando:
> ionic start nekogotchi blank --type=reactA partir daí comecei a organizar a estrutura do projeto de forma a esta ficar concisa para qualquer developer abrir o projeto e instintivamente perceber o que está em cada diretório. Com isto feito tentei logo testar a aplicação no browser com o comando:
> ionic serveFelizmente, tudo estava a funcionar como suposto. No que toca a testar a aplicação no emulador de Android (Pixel 4), não tive sucesso inicialmente. Apesar de no universo de front-end encontrar-se algumas ocorrências de uma versão de uma biblioteca ser incompatível com outra ou uma versão específica do node.js causarem um projeto não funcionar, acho que não se equipara ao desenvolvimento mobile. Visto que estava a testar num emulador Android, necessitei de instalar o Java, contudo, ao fazer build da aplicação com o comando abaixo ocorriam erros e, consequentemente, a execução era cancelada.
> ionic cap run android -l — externalForam necessárias algumas horas a navegar no Stack Overflow para descobrir que necessitava de colocar uma versão de Gradle compatível com a versão de Java que tinha no meu sistema. Ao menos acabei por descobrir que o Gradle é uma open-source building tool bastante popular.
De seguida integrei o tailwindcss no projeto para estilizar a aplicação de maneira rápida. E essa foi uma coisa que gostei, sem dúvida. Afinal de contas é um projeto de React.js como qualquer outro, posso adicionar as várias bibliotecas que quiser quer seja o redux, lodash, styled-components etc.
Após redigir o JSX e estilizar as páginas que estabeleci, reparei em duas diferenças que detetei ao longo do desenvolvimento, routing e estilização. A definição das rotas é praticamente igual a qualquer outro projeto de React.js, o único aspeto diferente são os links entre as views. Neste caso os links são definidos na maior parte dos componentes Ionic a partir da propriedade “routerLink”, como exemplificado abaixo.
<IonButton routerLink="/dashboard">Go back</IonButton>Relativamente à estilização, como estava a utilizar tailwind, adicionava várias classes a componentes Ionic que, na maior parte das vezes, não eram aplicadas. Isto deve-se ao facto dos componentes que o Ionic oferece serem Web Components e criarem componentes que não são possíveis interagir quando se redige código. A maior parte das vezes necessitei de recorrer a um ficheiro de css para aplicar estilos a classes específicas de componentes gerados pelos Web Components. Também posso dizer que a documentação da biblioteca de componentes do Ionic deveria ilustrar exemplos com base no código colocado na documentação e não o contrário, como podem ver neste exemplo aqui.
A partir deste ponto, comecei a implementar a funcionalidade de tirar fotos a partir da câmara e guardar essas mesmas fotos. A ideia, neste caso, é quando utilizador tirar uma foto permitir que o gato realize um comentário aleatório à foto. Para implementar esta funcionalidade segui o tutorial (constituído por alguns artigos) que a Ionic Framework fornece na sua documentação de React.
Como resultado final, mostro um gif abaixo que demonstra uma pequena amostra do nekogotchi, particularmente a funcionalidade acima descrita implementada e funcional.
Para complementar deixo aqui algumas printscreens do código de algumas das hooks que desenvolvi para interagir com as APIs nativas que o Capacitor.js oferece.
Concluindo, este artigo, apesar de ser focado no Ionic Framework, ajudou-me a compreender uma pequena fração de todo o universo por detrás das PWA. No geral, a Ionic Framework, é uma ferramenta sólida e flexível para desenvolver PWA. Todavia a experiência de desenvolvimento foi longe de perfeita, claro, não existe nenhuma ferramenta perfeita, mas senti que o Ionic ficou um pouco atrás do Flutter e do React Native. Bem, acho que posso dizer que esta é uma história de amor com um final feliz, por agora. Em relação ao nekogotchi, talvez num futuro faça mais um artigo a relatar outras fases do desenvolvimento, quem sabe.
Recursos extra:
- Github: Ionic Team
- Github: Ionic Framework
- Twitter: Ionic Framework
- Ionic Framework Blog
- Ionic Framework Blog: Announcing Ionic 6
- Article: What is Ionic and how does it work
- Artice: Ionic App Development Over Other Frameworks
- Video: Ionic Tutorial #1 — Overview, installation and creating the project (Angular)
- Video: What is IONIC? 🤔
Fontes utilizadas e pesquisadas para escrever este artigo
- Os itens na lista de recursos extra
- Vários links referidos ao longo do artigo
- Ionic.io: Artigos
- Ionic.io: Ionic React vs React Native
- Ionic.io: Capacitor vs Cordova: Modern Hybrid App Development
- Artigo: Pros and Cons of Ionic Framework (CodingNinjas)
- Artigo: The Advantages (and Disadvantages) of Building Apps with Ionic (Cliquestudios)
- Artigo: Ionic React Manual Dark Mode Switch (dev.to)
- Vídeo: What are Web Components? (LevelUpTuts)
- Vídeo: Web Components Crash Course (Traversy Media)
- Wikipedia: Tamagotchi
- Artigo: Keeping Tamagotchi Alive (Smithsonianmag)
Onde encontrar o meu trabalho
