Compartilhar via


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. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/cordova-246x300.png


  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. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/visual-studio-tools-for-apache-cordova.png 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

http://blog.dzfweb.com.br/wp-content/uploads/2014/12/novo-projeto-apache-cordova-visual-studio1.png 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)\Android\android-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.

http://blog.dzfweb.com.br/wp-content/uploads/2014/12/android-virtual-device.png http://blog.dzfweb.com.br/wp-content/uploads/2014/12/avd_galaxynexus_.png 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 http://blog.dzfweb.com.br/wp-content/uploads/2014/12/solution-plataform.png
  2. Caso esta opção não esteja sendo exibida, selecione Solution Platforms em Add/Remove Buttons conforme a ilustração abaixo. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/solution-plataform-add.png
  3. Selecione Android Emulator conforme a ilustração abaixo. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/android-emulator-visual-studio.png
  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. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/aplication-ready.png

  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. http://blog.dzfweb.com.br/wp-content/uploads/2014/12/projeto-resultado-final.png


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.