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:
- nodejs + npm mais recentes. Se você estiver de linux, prefira a versão disponibilizada pelo repositório oficial da sua distro.
- um JDK, o que estiver mais fácil. Novamente, muito linux já tem empacotado.
- android studio.
- 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.
Nenhum comentário :
Postar um comentário