Como transformar sua aplicação web em um aplicativo mobile em 5 minutos
Não, você não leu errado, vou te ensinar a como transformar uma aplicação web em uma aplicação mobile, e não é PWA (Progressive web app), para isso, vamos utilizar o Capacitor.
O que é o Capacitor?
O Capacitor é um runtime nativo multiplataforma que facilita a criação de aplicativos móveis de alto desempenho que funcionam nativamente no iOS, Android e em outras plataformas, utilizando ferramentas web modernas. Ele representa uma nova abordagem no desenvolvimento de aplicativos móveis, combinando o poder das tecnologias web com o acesso a recursos nativos do dispositivo. Isso significa que você pode desenvolver aplicativos móveis com a simplicidade e a portabilidade da web, ao mesmo tempo em que aproveita os recursos nativos quando necessário.
Ele é mantido pela equipe por trás do Ionic Framework, uma estrutura popular para o desenvolvimento de aplicativos móveis com tecnologias web como HTML, CSS e JavaScript.
Principais características do Capacitor
Essas são algumas das principais características que fazem do Capacitor uma escolha atraente para desenvolvedores de aplicativos móveis:
1. API Consistente
O Capacitor fornece um conjunto consistente de APIs focadas na web que permitem que seu aplicativo permaneça o mais próximo possível dos padrões da web. Isso significa que se uma funcionalidade funciona em um navegador, é muito provável que também funcione em um aplicativo móvel quando você está usando o Capacitor.
2. Acesso a recursos nativos
Uma das vantagens do Capacitor é a capacidade de acessar recursos nativos do dispositivo, como câmera, GPS, sensores e muito mais. Isso permite que você crie aplicativos que ofereçam experiências incríveis e integradas com o hardware do dispositivo.
3. Suporte multiplataforma
O Capacitor suporta várias plataformas, incluindo iOS, Android e web. Isso significa que você pode compartilhar uma grande parte do código entre diferentes plataformas, economizando tempo e esforço no desenvolvimento.
4. Plugins
Adicionar funcionalidades nativas ao seu aplicativo é simples com o Capacitor. Ele oferece uma API de plugins que é fácil de usar e suporta Swift no iOS, Java no Android e JavaScript na web. Isso torna a integração de recursos nativos em seu aplicativo uma tarefa super tranquila.
Mas agora, vamos ao que interessa!
Vou te mostrar como transformar sua aplicação já existente em um app nativo, em alguns minutos e com pouco código.
Como o objetivo desse post é mostrar o Capacitor em ação, vou utilizar como base uma aplicação React usando TypeScript e iniciada com o Vite, sem nenhuma alteração inicial, apenas rodando o comando pnpm create vite, você pode baixar o código inicial clicando aqui.
O Capacitor oferece suporte a uma variedade de outros frameworks e bibliotecas, não se limitando apenas ao React, utilizarei o React nesse post apenas por familiaridade, aqui você pode ver a lista de frameworks que o Capacitor tem suporte:
Antes de começar, é importante destacar que se você estiver utilizando o Windows ou Linux, não será possível seguir os passos para rodar o aplicativo no iOS. Nesse caso, simplesmente pule as partes onde falo sobre o iOS.
A configuração do ambiente de desenvolvimento envolve uma série de etapas específicas que não serão abordadas neste post. Todas essas etapas detalhadas podem ser encontradas na documentação oficial do Capacitor, que pode ser acessada clicando aqui. Certifique-se de seguir as instruções da documentação para garantir que seu ambiente de desenvolvimento esteja configurado corretamente antes de seguir com o post.
Configurando o Capacitor
1. Instalar o Capacitor rodando os comandos:
pnpm install @capacitor/corepnpm install @capacitor/cli -D
2. Iniciar as configurações do Capacitor
Nesse ponto você vai definir o nome do seu aplicativo e o ID do pacote que você gostaria de usar.
3. Crie seus projetos Android e iOS
Após a instalação do core do Capacitor, você pode instalar as plataformas Android e iOS: pnpm install @capacitor/android @capacitor/ios
Assim que as plataformas tiverem sido adicionadas ao seu arquivo package.json, você pode executar os seguintes comandos para criar seus projetos Android e iOS para a sua aplicação nativa:npx cap add androidnpx cap add ios
4. Sincronize seu código da web com seu projeto nativo
Após criar seus projetos nativos, você pode sincronizar sua aplicação web com seu projeto nativo executando o seguinte comando.
Mas antes de rodar o comando do sync é preciso rodar o build da sua aplicação para criar a pasta de distribuição do seu aplicativo web, como estou utilizando o Vite, minha pasta vai ser a dist.
Depois de realizar o build da sua aplicação é só rodar o comando npx cap sync para o Capacitor conseguir vincular seu build com as versões nativas para iOS e Android
O comando npx cap sync copiará a sua aplicação web compilada, que por padrão está localizada na pasta www, para o seu projeto nativo e também instalará as dependências dos projetos nativos.
Rodando no iOS
Para abrir o projeto no Xcode, execute o seguinte comando: npx cap open ios
Para rodar o app no iPhone em um dispositivo físico ou emulador é só rodar o comando: npx cap run ios
Para rodar via Xcode, primeiro selecione o dispositivo ou simulador desejado e, em seguida, clique no botão “play” para executar o seu aplicativo.
Rodando no Android
Para abrir o projeto no Android Studio, execute o seguinte comando: npx cap open android
Para rodar o app no Android em um dispositivo físico ou emulador é só rodar o comando: npx cap run android
No Android Studio, primeiro selecione o dispositivo ou emulador desejado e, em seguida, clique no botão “run” ou “debug” para executar o seu aplicativo. A menos que você esteja depurando código Java ou Kotlin, o botão “run” é a melhor opção.
E é isso!
Agora você conseguiu transformar sua aplicação web em um aplicativo nativo que pode ser compilado e distribuído via App Store e Play Store. Simples e fácil né?!
Como os aplicativos do Capacitor são, no final das contas, aplicativos nativos normais, a maneira como eles são distribuídos na App Store ou Google Play é igual a qualquer outro aplicativo nativo.
Para começar, consulte a documentação oficial da Apple sobre o envio de aplicativos para a App Store clicando aqui e do Google para a Google Play clicando aqui.
Saiba mais na documentação oficial do Capacitor:
Minhas considerações
O Capacitor é, sem dúvida, uma ferramenta impressionante para a criação de aplicativos nativos. No entanto, é importante considerar que existem alternativas para o desenvolvimento de aplicativos híbridos que podem oferecer desempenho e escalabilidade superiores em comparação com uma aplicação construída com o Capacitor.
Minha recomendação é utilizar o Capacitor em projetos de menor porte ou naqueles MVPs que ainda precisam ser validados. Em cenários onde a complexidade e a escalabilidade são fatores críticos, pode ser vantajoso explorar outras opções de desenvolvimento para garantir a melhor experiência possível para os usuários finais.
E por hoje é isso!
Ah e eu criei um repositório no GitHub com o código utilizado nesse post, se você quiser dar uma olhada mais a fundo é só clicar nesse link.
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
