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.
É 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:
[sourcecode language="html"]
<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>
[/sourcecode]
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:
[sourcecode language="javascript"]
(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);
}
})();
[/sourcecode]
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!
Comentários