Hoje iremos criar o nosso primeiro projeto utilizando o Cordova CLI, em uma postagem anterior, citei alguns Framework’s disponíveis para facilitar o desenvolvimento Mobile, particularmente gosto de usar o Cordova pela “liberdade” que tenho nos meus códigos ~opinião minha~.
Para continuar este artigo acredito que você já executado as etapas abaixo:
– Criando ambiente de desenvolvimento
– Criando uma máquina virtual Android
Enfim, vamos colocar a mão na massa.
Pressupondo que você seguiu as postagens acima você terá no seu disco local C: a pasta cordova ou uma pasta de sua preferência que foi criada para salvar os seus arquivos baixados, dentro desta pasta vamos criar uma nova pasta chamada “projetos“, dentro dela iremos colocar os projetos que iremos desenvolver ao longo do caminho…
Obs.: Quando ver [enter] é para apertar o botão Enter ok? 😛
1° – Abra o prompt e navegue até a pasta de projetos, no meu caso vou ter o seguinte comando abaixo:
CD C:\cordova\projetos [enter]
2° – Iremos criar agora nosso projeto, ainda com o prompt aberto digite o comando abaixo:
cordova create phpiando br.com.phpiando Phpiando [enter]
– Cordova : comando que sempre será usado, ele defini que estaremos utilizando os recursos do cordova.
– Create: estamos dizendo para o cordova criar, no nosso caso um novo projeto
– phpiando: é nome da nossa pasta do projeto
– br.com. phpiando: Este argumento identifica um valor único para o seu projeto, usando o endereço reverso, cada projeto novo é recomendável que você coloque um novo identificador, caso você coloque dois aplicativos com o mesmo identificador poderá sobrepor a instalação entre ambos.
– Phpiando: É o nome que colocaremos em exibição em nosso aplicativo após instalado no dispositivo.
Após feito o processo acima aguarde um momento deverá surgir a seguinte mensagem para você no console do prompt:
Creating a new cordova project.
3° Com o projeto criado, vamos acessar este diretorio, no prompt ainda aberto digite:
CD phpiando [enter]
4° Quando criamos o nosso projeto, precisamos definir as plataformas que iremos utilizar, no meu caso irei utilizar apenas o Android, para isso digite no prompt:
cordova platform add android --save [enter]
– Platform: Estamos dizendo para o cordova que iremos usar o recurso das Platformas.
– Add: Queremos adicionar uma plataforma ao nosso projeto
– Android: A plataforma que será utilizada será o android
Comando –save, é um novo recurso adicionado recentemente no Cordova no qual facilita a vida de quem trabalha em equipe em grandes projetos, no momento que você utiliza está flag, salvará no Config.xml o recurso que estiver usando, assim a outra máquina se auto-configurará conforme o que você salvou, lembre-se está flag é utilizada na platform e nos plugins que iremos utilizar.
Obs.: Esse foi o meu entendimento sobre o flag –save, caso tenha colocado algo “nada a ver” peço perdão e estou aberto para correções.
Aguarde um momento até adicionar a plataforma , se tudo ocorrer bem a última linha será:
Saving android@^4.0.0 into config.xml file...
5° Feito até aqui, vamos testar nossa aplicação? Digite o seguinte comando no prompt:
cordova prepare android [enter]
~Aguarde, se não aparecer nenhuma mensagem é sinal que está tudo ok…
cordova emulate android [enter]
– Prepare: Verifico se possui algum erro no projeto, caso possuir ele acusará.
– Emulate: Eu utilizo para compilar o projeto e abrir o emulador do Android, você poderia usar apenas o comando Build por exemplo para gerar um APK e instalar em dispositivo físico por exemplo…
Obs.: O Apk gerado fica dentro da pasta phpiando/platforms/android/build/outputs/apk/android-debug.apk
Após feito estes processos acima, aguarde um momento, pode demorar um pouco para iniciar o Emulador do Android e instalar o Aplicativo de teste que estamos fazendo.
O Resultado final deverá ser este abaixo:
6° Vamos adicionar algum plugin para nossa aplicação? Como este é apenas uma postagem para você ter uma noção das inúmeras funções que poderá criar estarei utilizando o plugin Device que recupera algumas informações do nosso dispositivo.
Digite no prompt o comando:
cordova plugin add cordova-plugin-device --save [enter]
– Plugin: Estamos dizendo para o cordova que vamos trabalhar agora com os Plugins
– Add: Queremos adicionar um plugin para o nosso projeto
– cordova-plugin-device: É o plugin que queremos, este nome foi alterado na nova versão do Cordova, entendo que você está seguindo estes passos conforme o artigo que postamos aqui no Blog.
Executando este comando acima o resultado no prompt será:
Installing "cordova-plugin-device" for android
Que não é nada mais dizendo que o nosso plugin foi instalado corretamente para nossa plataforma android.
Execute novamente o seu projeto usando o “cordova emulate android“, porém poderá perceber que nada mudou, devemos após a instalação do plugin trabalhar no código fonte do projeto.
Vamos agora começar a parte de edição do código fonte do projeto. Você poderá ter maiores informações vendo a biblioteca do Device aqui.
Abra o arquivo index.js que está localizado na pasta phpiando/www/js, dentro da função receivedEvent iremos adicionar este trecho de código que está na parte do Javascript, e o trecho de HTML você colocará em abaixo da div deviceready.
Salve os arquivos e vamos testar usando o comando cordova emulate android, o resultado final será este:
Fácil até aqui não é?
Como citei no meio da postagem desse artigo, através desse pequeno passo você conseguirá realizar várias outras coisas em sua aplicação.
Usei como base para escrever este artigo informações da própria Cordova Cli que você pode ver clicando aqui, neste docs possui outros plugins e outras funcionalidades que você pode dar para seu aplicativo.
Qualquer dúvida ou sugestão é só colocar aqui nos comentários!
Até a próxima.