Desenvolvimento Mobile com Apache Cordova no Visual Studio e AngularJS

É 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>
    <meta charset="utf-8" />
    <title>PrimeiroAppCordova</title>

    <!-- PrimeiroAppCordova references -->
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <p>Hello, your application is ready!</p>

    <!-- 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>

    <!-- AngularJS references-->
    <script src="https://code.angularjs.org/1.2.27/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.27/angular-route.js"></script>

    <div class="view-layout" ng-view></div>

</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)

  1. 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.

  1. 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.

 

  1. 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>
    <h2>Principal</h2>
    <p> {{ subTitulo }} </p>
    <div class="list-group" ng-repeat="menu in menuList">
        <a class="list-group-item" href="{{ menu.url }}"> {{ menu.text }} </a>
    </div>
</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.

 

  • Carlos

    Oi tudo bem?
    Minha dúvida é como faço para disponibilizar o app nas lojas? Me refiro a mais de uma de loja exemplo: Android, Apple e windows phone.

  • Carlos, para publicar seu aplicativo nas lojas, selecione a opção “Deploy” em “Configuration Manager” no menu “Build”. Compile para a plataforma desejada (android, windows phone, ios, etc). Na pasta bin do projeto você encontrara o arquivo de distribuição, no caso do android por exemplo é um arquivo com a extensão *.apk. Envie para o Google Play com sua conta de desenvolvedor e pronto.

    Para windows é o mesmo procedimento, no caso da Apple é um pouco mais trabalhoso, pois precisa-se de uma maquina Mac para compilar (pode ser remotamente).

    Irei disponibilizar um tutorial explicando assim que possível.

    • Edilson

      Tenho questão no Angular qual a melhor pratica, criar um arquivo js que contem todos os controllers ou um controller para cada view.

      Ou varios modulos com os seus respectivos controllers?

  • marcelo

    como o cara coloca no google play ou em algum dispositivo android o proejto la com apache cordova no c# ja pesquisei muito sobre isso e n tenho a solução