Cordova Introdução

Sr...
... par a aula teremos a introdução ao Cordova. Primeiramente,  vamos ao contexto histórico do surgimento da ferramenta. Tudo começou quando uma empresa chamada Nitobi criou o Phonegap em 2009. Em 2011 a Adobe comprou a Nitobi e pouco tempo depois doou para a Apache o core desse projeto. Entre outros motivos a Adobe queria se certificar que outras empresas pudessem contribuir com o projeto. A Apache então foi uma escolha natural para a Adobe pois muitas grandes empresas já confiavam na Apache e estavam confortável com as suas licenças. Por fim, para evitar problemas com o nome Phonegap que é uma marca registrada da Adobe, debaixo da Apache o projeto recebeu o nome de Cordova.
Bem, neste momento Trabalharemos com o Cordova.

Para trabalhar com CORDOVA temos que instalar o NODE.JS - que neste momento será tratado como uma plataforma linear de execução de sistemas JavaScript.

Para Instalar o NODE, vá ao endereço do desenvolvedor "https://nodejs.org/en/download/"
e baixe a ferramenta.


Pegue a versão mais recente para seu sistema.
Depois de baixar o arquivo, abra e aceite os termos de licença, escolha o local de salvamento da instalação e conclua o procedimento.



Com o NODE instalado, verifique se tudo está normal com o sistema, abra o prompt de comandos e digite "node -v" para visualizar a versão do sistema, caso veja a versão está tudo certo...


Agora podemos instalar o CORDOVA. Vá no site do desenvolvedor e verifique os comandos para a instalação ou abra diretamente prompt e siga a instrução abaixo...



Para isso escreva no prompt de comando "npm install -g cordova" e o processo de instalação do CORDOVA se inicializará.


Agora o CORDOVA está instalado!
Podemos começar a trabalhar, vamos criar um projeto simples. Veja...


Digite no Prompt "cordova create <nome do projeto>", observe que o nome do projeto no exemplo acima é aula_01_cordova. Depois a pergunta do desenvolvedor questiona se pode utilizar seus trabalhos para aprimorar a ferramente. 



Observe que o projeto criado pelo cordova é uma pasta com todas as propriedades de aplicação, com index, www, plugins etc. 

Utilizando um editor como o SUBLIME TEXT, podemos verificar o que tem o projeto e editá-lo completamente. Se ainda não tem, baixe aqui o Editor "https://www.sublimetext.com/3".

Com o Editor instalado, jogue a pasta que o cordova criou dentro do editor que ele abre a estrutura das pastas para que você possa trabalhar no projeto veja abaixo como fica...


Note que o que é exibido a o arquivo index dentro da pasta WWW. aqui podemos trabalhar livremente com o javascript, css e html. observe a inserção do codigo javascript dentro do código que já vem com o projeto.


Note em destaque acima que um trecho em javascript foi inserido na página, veremos agora como rodar este projeto. Primeiro temor que criar a plataforma que queremos, neste momento vamos simplificar com o BROWSER para os testes. Então no prompt de comandos escreva "CD < nome da pasta que possui o projeto>" no exemplo caso ficou assim: "CD aula_01_cordova" e agora o prompt mostra que estamos dentro da pasta. Agora digite "cordova platform add browser", isto é, criamos um navegador para visualizar os codigos e inserimos ele no projeto. 

E por fim para rodar o projeto escreva no prompt de comendos: "cordova run browser", e o navegador abrirá e exibirá o que fizemos... veja o resultado abaixo...


Note no canto superior esquerdo o código em javascript que inserimos...  rodando no cordova.

Pronto! Pronto!

Na próxima aula vamos inserir os recursos android.

Nenhum comentário: