Criando app webview com cordova

Preâmbulo 

(se não souber o que é preâmbulo olhe no google) só leia essa parte se quiser, ninguém é obrigado a nada!

Vamos nos situar no tempo e espaço!! Existem várias plataformas de App Mobile: IOS, Android, Windows Phone e etc. 

Os empresários pensaram: Meu Deus! Não vou contratar um desenvolvedor para cada plataforma. E agora? Quem vai me defender? Apareceu uma luz no fim do túmel e não era o trem, era Webview. Muitos desenvolvedores defensores do desenvolvimento nativo sentem vontade de vomitar quando escutam essa palavra. Como cada celular tem um navegador web, um cidadão teve a brilhante idéia de desenvolver um "APP" em HTML e CSS para rodar no celular. Olha só que beleza!!! agora eu só preciso saber HTML, css, Javascript, gerar um apk só de "migé" mas na verdade meu "APP" contém uma página html rodando no navegador no celular "por baixo dos panos". 

Essa página fica embarcada no celular e pode fazer requisições ajax para consumir informações de algum servidor web. Uma das principais desvantagens dessa alternativa seira acessar hardwere do aparelho como GPS, Camera e etc. Mas já inventaram alternativas para contornar essa necessidade. São plugins. Existem muitos plugins, muitos mesmo. Basta acessar o site https://cordova.apache.org/plugins/ , selecionar a plataforma desejada e pesquisar pelo nome. A documentação é muito clara e tem instruções de instalação do plugin e exemplos de como utilizar. Nesse post  mostro como utilizar o plugin google firebase para enviar notificaçãoes para o aparelho, mesmo se o app estiver fechado a notificação chega. Vale apena conferir.

Agora chega de conversa e vamos entrar em ação!!

Agora é VALENDO!!!

Primeiro instale o nodejs pelo site https://nodejs.org

 Imagem

Recomendo a versão LTS do lado esquerdo. Mas com a mais recente deve funcionar também.

Despois de clicar em "next" até aparecer "Finish", basta abrir o prompt e digitar esse comando para saber se a instalação fucionou:

   node -v 

Imagem

Se deu tudo certo, aparece o número da versão instalada.

Abra o prompt de comando do windows e execute:

   npm install -g cordova 

Vai aparecer algo parecido com isso:

Imagem

OBS: no meu caso, o prompt do windows e node aparece em abas por que estou usando conemu para deixar o visual mais agradável. Mais detalhes veja esse outro post clicando aqui

E quando concluir a instalação, aparece algo parecido com isso:

Imagem

Agora digite o comando (prompt windows)

npm -v

para verificar se o NMP está instalado. Para testar se o node está funcionando, crie um arquivo chamado teste.js com o conteudo:

   console.log('Node OK! Deu rock!!'); 

Vá até o local do arquivo e execute:

   node teste.js 

Deve aparece a mensagem conforme a imagem abaixo:

Imagem

Agora digite o comando abaixo para criar um projeto:

   cordova create workshop com.yourname.workshop Workshop 

O projeto é criado na pasta que estiver executando o comando. Segue a estrutura de pasta do projeto criado:

Imagem

Esse é um projeto híbrido em HTML, css e javascritp. A partir desse projeto, posso gerar uma versão para cada plataforma que precisar: Android, IOS e etc... Para gerar uma versão para Android, por exemplo, basta entrar na pasta do projeto e executar o comando:

   cordova platforms add android 

Depois que executar o comando, vai ser criada uma pasta chamada android dentro da pasta platforms. Essa pasta contem um projeto android nativo gerado apartir do projeto híbrido em HTML, css e javascript. Da mesma forma, basta executar os outros comandos correspondente a cada outra plataforma para gerar versões para cada uma.

Como eu falei, essas pastas são projetos. para gerar o apk apartir do projeto e rodar a aplicação, deve ter instalado o SKD de cada plataforma. 

Se for android, é necessário ter instalado o SDK do android, se for IOS, SDK do IOS e consequentemente você vai precisar de um computador da apple para gerar apk para IOS. 

E assim por diante para as outras plataformas!

Para fazer deploy do projeto na plataforma android gerada, execute o comando:

   cordova run android  
 

Se seu celular estiver conectado na porta USB, com driver instalado e modo depuração ativado, o app deve brir direto no seu celular.

Imagem

Ou se preferir pode usar um emulador. Se o projeto não abrir no emulador, você pode copiar o arquivo apk para o celular e instalar o app direto. O apk gerado fica na pasta:

   C:/Users/davi/workshop/platforms/android/build/outputs/apk/android-debug.apk 

workshop é o nome do projeto. Obviamente, o arquivo apk só é gerado depois que você executar o comando cordova run android.

Segue a versão do Android SDK que usei:

Imagem

 

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente