É redundante dizer que o espaço que desenvolvimento de aplicações para dispositivos móveis vem ocupando no Mercado está cada dia maior. A cada dia que passa, nós desenvolvedores somos presenteados com novas ferramentas e tecnologias para facilitar o nosso trabalho, possibilitando atingir novos horizontes e desafiando os nossos limites.

A Microsoft em novembro deste ano, no evento Connect() disponibilizou uma extensão oficial para desenvolver aplicações híbridas com Apache Cordova no Visual Studio. Neste artigo irei demonstrar como fazer a instalação desta extensão, como configurar, e os primeiros passos para fazer uma aplicação básica com AngularJS.

desenvolvimento mobile com apache cordova visual studio


 

Requisitos

  • Sistema Operacional Windows 7, Windows 8, Windows 8.1, ou Windows Server 2012 R2.
  • Visual Studio 2013 Update 4 (download)
    Para instalar a extensão Apache Cordova Tools para Visual Studio, você precisa da atualização 4 do Visual Studio 2013. Uma resalva para o Visual Studio 2015 BETA que não é necessário.

Instalação

  • Visual Studio Tools for Apache Cordova (download)
    Faça o download da extensão e execute o instalador. Será instalado em seu computador, todos os recursos necessários para utilização do Apache Cordova no Visual Studio. Quando solicitado, permitir o instalador instalar software de terceiros.

visual-studio-tools-for-apache-cordova

Após a instalação, reinicie o computador para garantir que todos os recursos foram instalados corretamente.

 

Criando sua primeira Aplicação com Apache Cordova no Visual Studio

Agora que o Visual Studio esta preparado, você esta apto a criar, debugar, testar e distribuir projetos desenvolvidos utilizando Apache Cordova no Visual Studio.

  • Abra o Visual Studio, na barra de menu selecione File > New Project
  • Na janela que abrir, em Templates, selecione JavaScript > Apache Cordova Apps > Blank App Template

Este template de projeto inclui 5 pastas:

  1. css - contêm estilos básicos do projeto em branco
  2. images - pasta sugerida para imagens da aplicação
  3. merge - é usado para inserir códigos específicos por plataforma. Por padrão, possui apenas códigos mais comuns para Android e Windows
  4. res - é usado para informar os ícones do aplicativo e imagens de tela (splash screen).
  5. scripts - é a localização padrão para todos os JavaScripts do projeto.
     

Compilando o Projeto

Como é o primeiro projeto iniciado após a instalação, vamos compilar para garantir que todos os recursos da instalação foram instalados corretamente. A instalação possui da extensão Visual Studio Tools for Apache Cordova, criará um emulador de Android, cujo este iremos utilizar para neste artigo.

  1. Abra o Android Virtual Device (AVD) Manager (Localização: C:Program Files (x86)Androidandroid-sdk)
    Caso a instalação tenha ocorrido corretamente, você terá um Emulador de Android criado e configurado. Você pode adicionar outros emuladores com as configurações que lhe convir clicando no botão Create.
  2. Selecione o Emulador na aba Android Virtual Devices e clique em Start > Launch.
    Se tudo ocorrer bem, o Emulador de Android será iniciado. Aguarde o carregamento completo.
    android-virtual-device

avd_galaxynexus_

Após o emulador ter iniciado, volte para o Visual Studio e vamos prepara-lo para compilar nossa aplicação de Teste no emulador.

  1. Em Solution Platforms, selecione Android
    solution-plataform
  2. Caso esta opção não esteja sendo exibida, selecione Solution Platforms em Add/Remove Buttons conforme a
    ilustração abaixo.
    solution-plataform-add
  3. Selecione Android Emulator conforme a ilustração abaixo.
    android-emulator-visual-studio
  4. Pressione F5 para compilar a aplicação no Emulador de Android anteriormente iniciado. A primeira compilação pode levar um tempo, pois o Visual Studio irá configurar o Apache Cordova e seus recursos. Você pode acompanhar o processo na aba Output.
    aplication-ready
     

Apache Cordova com AngularJS

Vou demonstrar agora uma forma básica de utilização do AngularJS em projetos Apache Cordova no Visual Studio. A ideia é apenas abrir caminho para estudo de ferramentas para desenvolvimento JavaScript, que é o que o Apache Cordova possibilita. Você pode usar outros frameworks, como Knockout, WinJS etc. Para mais tutoriais sobre AngularJS acesse a Documentação.

  1. index.html Adicione as Referencias para o AngularJS. Para este artigo, iremos utilizar as referencias AngularJS nativa e Route. Adicione as diretivas ng-app na tag html.
    Crie uma nova div e adicione a diretiva ng-view.
    Seu arquivo deverá ficar assim:

    <!DOCTYPE html>
    <html ng-app=”PrimeiroAppCordova”>
    <head>

    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;PrimeiroAppCordova&lt;/title&gt;
    
    &lt;!-- PrimeiroAppCordova references --&gt;
    &lt;link href="css/index.css" rel="stylesheet" /&gt;
    

    </head>
    <body>

    &lt;p&gt;Hello, your application is ready!&lt;/p&gt;
    
    &lt;!-- Cordova reference, this is added to your app when it's built. --&gt;
    &lt;script src="cordova.js"&gt;&lt;/script&gt;
    &lt;script src="scripts/platformOverrides.js"&gt;&lt;/script&gt;
    
    &lt;script src="scripts/index.js"&gt;&lt;/script&gt;
    
    &lt;!-- AngularJS references--&gt;
    &lt;script src="https://code.angularjs.org/1.2.27/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/1.2.27/angular-route.js"&gt;&lt;/script&gt;
    
    &lt;div class="view-layout" ng-view&gt;&lt;/div&gt;
    

    </body>
    </html>

    `

    A diretiva ng-app serve para identificar a raiz de uma aplicação AngularJS, e a diretiva ng-view identifica o local específico onde será renderizado as views (ex: Partial Views no ASP.NET MVC)

  2. Scripts/app.js Crie um arquivo na pasta Scripts com o nome app.js. Aqui ficaram as configurações globais de sua aplicação AngularJS, como modulos, rotas, etc.

    `var myApp = angular.module(‘PrimeiroAppCordova’, [
    ‘ngRoute’,
    ‘myAppControllers’
    ]);

    myApp.config([‘$routeProvider’,
    function ($routeProvider) {

    $routeProvider.
      when('/', {
          templateUrl: 'Views/View-Inicial.html',
          controller: 'ControllerInicial'
      }).
      when('/Sobre', {
          templateUrl: 'Views/View-Sobre.html',
          controller: 'ControllerSobre'
      }).
      otherwise({
          redirectTo: '/'
      });
    

    }]);
    `
    O código acima, definimos o modulo raiz da aplicação e os caminhos de rota. Isso é algo interessante que o AngularJS fornece, onde você pode definir para qual View o script devera apontar em determinada url e para qual Controller esta view pertence.

  3. Scripts/controllers.js Crie um arquivo na pasta Scripts com o nome controller.js. Aqui ficaram as definições dos Controllers da aplicação.

    `var myAppControllers = angular.module(‘myAppControllers’, []);

    myAppControllers.controller(‘ControllerInicial’, [‘$scope’, ‘$http’,
    function ($scope, $http) {

    $scope.subTitulo = "Esse é o sub-titulo";
    
    $scope.menuList = [
        { 'url': '#Login', 'text': 'Login' },
        { 'url': '#Sobre', 'text': 'Sobre' }
    ];
    

    }]);

    myAppControllers.controller(‘ControllerSobre’, [‘$scope’, ‘$routeParams’,

    function ($scope, $routeParams) {
    
    }]);
    

    `
     

    Os controllers tem a função de manipular as informações das Views através do elemento $scope, onde é possivel acessar todas as diretivas e manipula-las. No ControllerInicial, manipulamos dois elementos (subTitulo e menuList), ao ato de carregamento desta View, é possível acessar estes dados. Estamos enviando para o $scope a variavel subTitulo com uma string e a variavel menuList com um array de objeto.

     

  4. Views/View-Inicial.html Crie uma pasta Views, em seguida adicione um novo arquivo html com o nome View-Inicial.html.
    Esta view será carregada no inicio da aplicação apontando para o Controller ControllerInicial, conforme definido nas configurações de rotas.

    `<div>

    &lt;h2&gt;Principal&lt;/h2&gt;
    &lt;p&gt; {{ subTitulo }} &lt;/p&gt;
    &lt;div class="list-group" ng-repeat="menu in menuList"&gt;
        &lt;a class="list-group-item" href="{{ menu.url }}"&gt; {{ menu.text }} &lt;/a&gt;
    &lt;/div&gt;
    

    </div>

Vemos no código acima, a utilização da variavel _subTitulo, anteriormente definida no ControllerInicial. A lista de objetos menuList_, é utilizada junto a diretiva ng-repeat, que é uma espécie de foreach do c#. Basicamente o que ela faz é repetir a as instruções para cada elemento da lista, podendo acessar as propriedades de cada elemento individual.

Compile o projeto e já é possivel ver o resultado no Emulador.

projeto-resultado-final


Finalizo aqui este artigo, que teve como propósito explicar como instalar as ferramentas necessárias para desenvolver aplicações mobile no Visual Studio com o Apache Cordova, e uma breve descrição de utilização com o AngularJS. Cabe a você desenvolvedor explorar os inúmeros recursos que essas ferramentas em conjunto podem proporcionar.

Você pode fazer o download do projeto de exemplo neste artigo Clicando Aqui.
Preparei outro projeto mais elaborado com Bootstrap, jQuery, AngularJS e você pode fazer o download Clicando Aqui.
Conheça a biblioteca ngCordova, para facilitar a integração em aplicações Cordova com AngularJS

Qualquer dúvida, deixe um comentário que responderei quando possível.