Cordova é um framework de desenvolvimento mobile criado pela equipe do Apache para que sua equipe pudesse desenvolvedor suas próprias aplicações (uma história bem semelhante ao BootStrap). O Cordova surgiu a partir do código do fonte do PhoneGap da Adobe. O PhoneGap fazia uso de funções JS para criar aplicações mobile e a equipe da Apache criou várias melhorias, tanto que hoje é o PhoneGap que faz uso do Cordova em sua plataforma de desenvolvimento.
O Cordova utiliza como principal linguagem o JavaScript e através dele o desenvolvedor consegue acessar funções nativas de dispositivos que executam Android, iOS ou BlackBarry. É sensato entender que as interfaces dos aplicativos usem HTML e CSS.
É comum encontrarmos na internet outros frameworks para desenvolvimento Web Mobile, no entanto, a grande maioria também se baseia no Cordova.
Intel XDK e PhoneGap
As principais ferramentas para desenvolvimento que usam o Cordova é o Intel XDK e PhoneGap, ambos gratuitos. A diferença entre os dois é que o ambiente de desenvolvimento do XDK é mais amigável para iniciantes e já possui um emulador de aplicativos incluso, já o PhoneGap depende de comandos executados pelo usuário e não oferece um ambiente de desenvolvimento, oferece apenas o Cordova e um emulador para testar as aplicações que é acionado via prompt.
Na Etec, usaremos o Intel XDK que pode ser obtido no site https://software.intel.com/pt-br/intel-xdk
O Intel XDK é famoso pelos seus bugs constantes encontrados nas primeiras versões, portanto, é importante sempre manter sua instalação devidamente atualizada.
Simpatizando com o ambiente Intel XDK
Ao criar um projeto no Intel XDK, inicialmente você deve escolher o framework CSS para montar suas interfaces. Recomendo o Twitter BootStrap por ser a escolha natural de quem estuda na Etec, afinal, desde de TPI I o BS faz parte das nossas aulas, porém, o Framework 7 também é um poderoso framework mobile e que vale a pena perder algumas horinhas para aprendê-lo.
O editor de código no Intel XDK, iniciamos o projeto com o arquivo index.html, neste arquivo há vários comentários explicando algumas funções do código, como o meta viewport por exemplo. Os códigos mais importantes da aplicação são;
Estas são as bibliotecas JS que contêm as funções que permitem fazer o acesso nativo a dispositivos.
O Objeto navigator e addEventListener
Para você que já sabe o básico de JS (se ainda não sabe, vejas as aulas aqui no blog) entenda que as funções do Cordova são acessadas em sua maioria por dois objetos básicos, navigator e addEventListener.
O navigator permite acessar as funções e o addEventListener permite verificar se as funções que deseja acessar estão ativas.
Partindo deste principio vamos para um exemplo prática.
Os retornos de sucesso (onSuccess) e erro (onError)
O objeto navigator pode ser testado para que o desenvolvedor saiba se acesso à determinado dispositivo foi realizado com sucesso ou não. Para isso, normalmente criamos duas funções, uma denominada de onSucess e outra de onError. Os exemplos a seguir demonstram a prática de como realizar o acesso aos dispositivos de camera, GPS e testando o acesso destes recursos.
Dica: os códigos dentro do elemento <HEAD> mostrados nestes exemplos podem mudar de acordo com a versão do IntelXDK que você utilizar.
Plugins Cordova
Os recursos do dispositivo são adicionados com o uso de plugins. Para adicionar um plugin cordova clique no menu PROJECTS do seu Intel XDK, selecione o projeto e em seguida selecione o plugin desejado em Plugin Management.
Exemplo de acesso à câmera do dispositivo
O acesso a camera via Cordova é feito pelo plugin camera do Cordova e pelo objeto javascript navigator.camera. Para saber todos os métodos que este objeto oferece acesse o site da documentação do Cordova: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/
Como diz a documentação, o recurso getPicture é responsável por abrir a camera, então nosso código de acesso ao dispositivo ficaria:
navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);No entanto, devemos checar se a câmera está ativa, para isso usamos o código;
document.addEventListener("deviceready",onDeviceReady,false);
Agora colocando em pratica, nosso código ficará assim;
Captura de Foto
Resultado
O simulador do Intel XDK não é capaz de simular o acesso nativo ao dispositivo, portanto, precisamos fazer o teste diretamente no celular através da instalação do Intel App Preview ou podemos usar um emulador de Android instalando no seu PC.
Eu uso o BlueStacks, com ele instalado, posso testar o acesso aos recursos nativos. Para facilitar instalei no BlueStacks o Intel app Preview, assim posso codificar, atualizar o servidor e testar logo em seguida, o resultado será este;
Mais exemplos
Muitos exemplos podem ser encontrados no perfil da Intel na github – https://github.com/gomobile e outros exemplos também podem ser encontrados no site de artigos na Developer Zone da Intel. Outro site muito bom é o QNimate – http://qnimate.com/?s=XDK e http://qnimate.com/post-series/intel-xdk-complete-training/, o blog da comunidade oficial do IntelXDK no Brasil também oferece uma gama de exemplos e vídeo-aulas, acesse http://xdkplus.blogspot.com/