CapacitorJs, PWA e empacotando front-end para Android e iOS.
Tags: frontend, android, ios, javascript
Published: 2023-06-01 11:00:39

E aí artesão do código, se te chamarem para fazer deploy na sexta-feira, cai fora, é furada! 😉

Eu tenho um pé no mobile, já faz um bom tempo, entusiasta das tecnologias para web eu fiquei muito empolgado com a possibilidade de pegar um projeto com HTML, CSS e JS e poder transformar isso em um .apk que poderia ser publicado e instalado nos celulares Android e iOS pelo mundo, fantástico!

Adobe Phonegap, Cordova, Intel XDK, NativeScript-Vue foram tecnologias que estudei, a última em especial foi "quem me deu" o meu primeiro emprego, mas nem tudo são flores, eu chego ao NativeScript devido a um grande problema do desenvolvimento híbrido, a WebView! 

De forma bem simplista, a WebView é um navegador sem a cara de navegador, até aí tudo bem, acontece que muitos celulares tinham seu próprio navegador e esses geralmente não eram tão compatíveis com várias coisas do HTML5, etc. Rolava então uma situação complicada, se teu app caía em um celular com o Chrome(ou o app WebView, logo depois), rodava tudo lindamente, agora, se teu app dava a sorte de cair em celulares com o próprio navegador, como era o caso da Sansung, quebrava tudo! Com o tempo algumas soluções foram surgindo e hoje temos um pouco mais de segurança para poder investir em desenvolvimento híbrido com tecnologias web.

## CapacitorJs

"Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS." [CapacitorJs](https://capacitorjs.com/)

O CapacitorJs é uma criação da glra do Ionic, e vem para ficar no lugar do [Cordova](https://cordova.apache.org/) e a proposta dele é empacotar qualquer front-end ou ser usado em sua PWA, seus plugins seguem esse princípio, exemplo do plugin de geolocation que vai funcionar no navegador e nas plataformas mobile, mas você deve pensar "claro que funciona, é tudo web!", na verdade, não é bem assim, o Cordova, por exemplo, usa tecnologias web, porém não vai rodar em navegadores fora de uma plataforma mobile.

## Simples assim

Para você empacotar o teu aplicativo, será tão simples assim:

```terminal
// instalando o capacitor
npm i @capacitor/core
npm i -D @capacitor/cli

// inicializando configuração
npx cap init
```
Arquivo de configuração:

```javascript
// capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'local-chat',
  webDir: 'dist', // ⚠️ destino da build do projeto front-end
  server: {
    androidScheme: 'https'
  }
}

export default config

```

```terminal
// adicionando as plataformas
npm i @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

// faça build do projeto front-end

// sincronizar o código da build
npx cap sync

// abrir o projeto no android studio ou xcode
npx cap open android/ios

// ou simplesmente rodar se seu ambiente estiver configurado
npx cap run android
```

Seguindo os passos a cima você já pode ver o aplicativo rodando em seu smartphone, considere que o ambiente deve estar configurado para que tudo funcione.

## Conclusão

Atualmente eu considero o desenvolvimento híbrido como uma alternativa válida e eficiente para a maioria dos cenários de aplicativos, o contexto do desenvolvimento é bem maior do que o mostrado aqui, por exemplo, você pode em algum momento ter que produzir código nativo para as plataformas para poder resolver problemas específicos, mas na minha opinião isso não invalida o uso dessa alternativa.