híbrido mobile ou: como atender dois nichos com um codebase só

Olá!

Tinha esse artigo aqui que é um débito de muito tempo, e finalmente chegou a hora de pagar.

Imagine: você quer fazer aquele aplicativo super-duper e quer ele agradando meninos e meninas, dos 8 aos 80 e rodando no android e no ios. Quer nada, né? rsrsrs.

Nem tudo é tão distante quanto parece.

Uma estratégia comum é fazer um aplicativo híbrido, capaz de rodar em mais de uma plataforma. Esse caminho, claro, apresenta vantagens e desvantagens. Mas não é a filosofia da coisa que eu vou abordar aqui, eu vou abordar o raul-tú da coisa, um jeito de fazer.

Adianto logo que tem outras formas, mas eu faço desse jeito aqui because reasons.

Valendo?




Nosso projeto híbrido é em realidade vários projetos, como vocês verão adiante. No tutorial de hoje vamos construir eles, um a um.

Ingredientes iniciais:

1. nodejs + npm mais recentes. Se você estiver de linux, prefira a versão disponibilizada pelo repositório oficial da sua distro.
2. um JDK, o que estiver mais fácil. Novamente, muito linux já tem empacotado.
3. android studio.
4. xcode, caso você seja rico.

Uma vez instalados, abra um terminal de sua preferência, crie uma pasta e dentro dela crie o projeto npm:

mkdir projeto-hibrido
cd projeto-hibrido
npm init -y

Pura paz.

O passo seguinte é adicionar as tecnologias web que permitem trabalhar em tempo de desenvolvimento. Lembre-se que um projeto híbrido é basicamente um app web que entubamos dentro de uma webview, por isso em boa parte do tempo trabalhamos como se estivéssemos fazendo o app web regular.

instale o básico:

npm install budo browserify --save-dev

Agora estamos minimamente armados. Vamos modificar o package.json (criamos ele com o npm init, na verdade se você ver um package.json por aí, já pode suspeitar de um projeto npm) para colocar a reza nele:

Agora, sempre que desejarmos trabalhar, basta digitar npm run dev e aí o budo será acionado. Um bônus é adicionar o make como dependência de desenvolvimento e criar um Makefile, mas por hora vamos deixar o megaman sem a armadura.

Você deve criarum index.html,  a pasta src e dentro dela o main.js que será doravante conhecido por application entry point.

O budo tem a função mágica de criar um index.html pra você, mas isso nem sempre vai ser vantagem. deixe o seu index assim:

Nosso index.html tem uma div com id="app", que é onde vamos montar nosso app web modernoso.

Agora modifique o package.json para detalharmos a linha do budo:

budo src/main.js:build.js -l -o

Explicando rapidinho:

• src/main.js:build.js - faz o budo gerar um bundle chamado build.js que, se você notar lá no index.html, é o que espera-se que exista.
• -l ativa o live reload, que em resumo te salva de pegar aquele TOC de ficar apertando F5
• -o serve pra abrir o browser pra você. Só isso mesmo.

Tem o -H caso você queira forçar um ip, mas a documentação é simples e você pinça depois o que achar que precisa.

Vamos adicionar um framework da alegria:

npm install vue --save

Vamos ao nosso main.js fazer uso das balas mágicas:

Daí por diante é mais do mesmo.

O plot twist é agora.

use o npm para instalar o cordova a nível de sistema:

sudo npm -g install cordova

Aí o momento inception: vamos criar um projeto dentro do projeto!

cordova create dist foo.bar.hibrido projeto-hibrido

Explicando:

• cordova create é pra criar projetos cordova.
• dist é o nome da pasta a ser criada pelo projeto. o cordova é meio chato com isso então deixa ele fazer a pasta
• foo.bar.hibrido é um id que o cordova usa. no android vira o package, no ios vira o app id também
• projeto-hibrido vira o nome do app mobile.

O mais interessante desse comando é que você vai usar quase nunca, mas pelo menos é bem documentado.

Note ainda que o projeto gerado tem um config.xml e um package.json também. Se isso acontecer com você também, nada tema! O cordova 7 é uma versão onde a migração para um gerenciamento via npm está ocorrendo. o npm vai dominar todo mundo se continuar assim.

O nosso próximo passo é fazer as modificações necessárias para, a partir do projeto principal, alimentar esse projeto agora.

Entre na pasta dist, da dist entre na www e apague tudo o que tem lá:

Agora crie no package.json do projeto principal a regra dist:

browserify src/main.js -o dist/www/build.js ; cp -f index.html dist/www/index.html ; cd dist ; cordova build

Como você pode ver, os npm scripts são convenientes mas tem o péssimo hábito de ficarem gigantescos.

E como nem todo mundo entende um make de primeira, coisas como gulp/grunt surgem e vendem a falsa ideia de que o fluxo de trabalho do desenvolvedor frontend é complicado. Mas vamos adiante.

Temos que modificar nosso main.js porque estamos dando o start do app sem verificar o deviceready. Em projetos cordova, só é seguro dar play no app depois do deviceready:

Caso não estejamos no telefone, não tem window.cordova então seguimos com o bootstrap normal.

Isso também traz para a luz o seguinte: quão menores forem suas necessidades de hardware mobile específico, mais rápido e fácil de testar o app vai ser.

Pra fechar, antes de você tentar seu primeiro npm run dist, adicione ao projeto cordova uma plataforma:

cd dist ; cordova platform add android

isso salva os dados de plataforma dentro dos arquivos de configuração do projeto cordova, a saber:

• dist/config.xml
• dist/package.json

Agora, sem mais demoras, na pasta do projeto principal experimente o seu npm run dist:

Na primeira vez que ele for dar o build, ele vai baixar a internet inteira, tá tudo bem, é só essa vez mesmo.

Lembre-se ainda que você precisa configurar corretamente seu ambiente nativo para que o apk ou o ipa seja construído corretamente.

Veja a documentação caso seu build nativo saia diferente do mostrado aqui.

No mais, sem mais!

Boa sorte, até a próxima.