Construindo aplicações móveis com o Cordova e o Visual Studio #2

Fala pessoal, tudo bom?
Nesse post, vou criar uma pequena demo que acessa a câmera e o álbum de fotos de um dispositivo móvel e mostrar como é fácil desenvolver um aplicativo híbrido no Visual Studio com o Apache Cordova. Com um único código, o app funcionará para Android, Windows Phone e IOS.

Essa publicação é a continuação do vídeo Construindo aplicações móveis com o Cordova e o Visual Studio #1 que publiquei alguns dias atrás. Então, vamos lá!

Para seguir com a demonstração, será necessário o Visual Studio Community 2015 com os seguintes recursos:

É possível usar outras versões do Visual Studio, só mencionei a Community porque ela é free*. Você pode, até mesmo, usar o Visual Studio 2013 a partir do update 4 com a extensão Visual Studio Tools for Apache Cordova.

Ao finalizar a instalação, crie um novo projeto do tipo JavaScript > Apache Cordova Apps:

Essa demo será pequena, portanto, teremos somente uma tela e não usaremos frameworks javacript (Angular, jquery, etc.) e nem bibliotecas css (bootstrap, materialize, etc.).

Na solution explorer, abra o arquivo index.js dentro da pasta www. No código do arquivo index.html, vamos adicionar dois botões (um para abrir a câmera e outro para abrir o álbum de fotos) e uma imagem para exibirmos a foto, como mostra o código abaixo:

<body>
 
Demo Câmera
 
<button id="camera">Tirar foto</button>
 
<button id="albumFoto">Abrir o álbum de fotos</button>
 
 <img id="foto" />
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
 
<script src="scripts/index.js"></script>
</body>

Antes de escrever o comportamento dos botões, vamos adicionar um plugin que, através de uma api javascript, nos permitirá acesso aos recursos de câmera do dispositivo. Para adiciona-lo ao projeto, dê dois click’s no arquivo config.xml, na raiz da solution. Na janela que abrir, selecione Plugins no menu do lado esquerdo. Uma lista de Plugins será listada, selecione Camera e clique no botão Add, como na imagem abaixo. Aguarde a instalação.

Tudo preparado, estamos prontos para definir o comportamento dos botões. Abra o arquivo index.js, dentro da pasta www > scripts e escreva o seguinte código:

(function () {
 document.getElementById("camera").addEventListener("click", capturarFoto);
 document.getElementById("albumFoto").addEventListener("click", abrirAlbumDeFotos);
 
 function capturarFoto() {
   navigator.camera.getPicture(captureSuccess, onFail, {
   quality: 50,
   destinationType: navigator.camera.DestinationType.FILE_URI //Tipo de retorno da imagem
  });
 }
 
 function abrirAlbumDeFotos() {
   navigator.camera.getPicture(captureSuccess, onFail, {
   quality: 50,
   destinationType: navigator.camera.DestinationType.FILE_URI, //Tipo de retorno da imagem
   sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM //Local da onde buscará a imagem, o padrão é abrir a camera
  });
 }
 
 //callback que receberá o caminho da imagem e atribuirá no source da tag img
 function captureSuccess(foto) {
   document.getElementById("foto").setAttribute("src", foto);
 }
 
 //callback de falha
 function onFail(message) {
   alert("Erro: " + message);
 }
})();

Coloquei alguns comentários em itens que defini como importantes, mas, caso você queira saber mais sobre a api de camera, acesse a documentação.

Com essa implementação, já conseguimos testar o app. Normalmente uso o meu device pessoal (android) ou um emulador. A Microsoft tem um emulador muito bom e de graça, caso você não queira usar o do google.

Galera, era isso que eu queria mostrar nesse post. No próximo, será mostrado em um vídeo a execução dessa demo em emuladores Android e Windows Phone.

Até o próximo post!