Como criar um aplicativo no Visual Studio 2017 com Cordova e Framework 7

IMPORTANTE! Este material está desatualizado! A partir do Visual Studio 2019, a Microsoft removeu os recursos de criação de aplicativos, no entanto, você poderá criar o mesmo ambiente de desenvolvimento usando o Visual Studio Code. Este artigo será mantido no Blogson porque vários desenvolvedores ainda utilizam o Visual Studio 2017, no entanto, eu recomendo que leia a aula atualizada – Como criar um aplicativo com Visual Studio Code

Recentemente publiquei um artigo sobre como criar um aplicativo utilizando apenas o Brackets, um tutorial bem legal para quem está começando e para aqueles que gostam de desenvolver usando linhas de comando no prompt (leia-se Linux nas entrelinhas).

Hoje vamos usar o Visual Studio 2017 para criar aplicativos baseados em HTML 5, JavaScript e Cordova.

O Visual Studio 2017 atualmente a IDE perfeita para quem quer aprender a desenvolver para mobile. Não afirmo isso apenas pela facilidade de criar um projeto, mas também pelos recursos de depuração, pela facilidade de gerar APK e de fazer o teste do aplicativo direto no seu dispositivo usando um cabo USB.

O Visual Studio 2017 pode facilmente substituir o Intel XDK e o PhoneGap Desktop e Node.JS. Porém, a única ferramenta que não consegui abandonar foi o Brackets. Basicamente eu edito todo meu código no Brackets e deixo e emulador Android do VS 2017 aberto. Para mim, é o ambiente perfeito de desenvolvimento mobile para aplicativos híbridos.

Download e licença de uso do Visual Studio 2017

Se você não é um estudante da Etec, poderá obter a versão gratuita do VS 2017, denominada de Visual Studio Community 2017. O download está disponível em; https://www.visualstudio.com/free-developer-offers/

Mas se você é estudante da Etec, recomendo que faça o download da versão Professional, acesse https://www.visualstudio.com/downloads/ Você poderá validar a sua licença Professional usando o seu e-mail institucional da Etec.

Instalação do pacote de desenvolvimento Javascript e Cordova

Durante a instalação do VS você deverá se atentar em habilitar o pacote de Desenvolvimento mobile com JavaScript conforme mostra a imagem abaixo.

Note que devemos marcar também alguns componentes. Estes componentes são responsáveis pela máquina virtual do Android e pela depuração do aplicativo. Ao todo, a instalação total do VS com Cordova e emuladores dá 8 Gb de espaço em disco, portanto, vá a lavar a louça para a sua mãe enquanto a instalação termina, ela é bem demorada.

Mas se você já tem o VS 2017 instalado, você pode clicar no menu Ferramentas > Obter Ferramentas e Funcionalidades Externas que irá chegar na mesma tela mostrada acima.

Criando meu primeiro aplicativo híbrido com Cordova no Visual Studio 2017

  1. Inicie um novo projeto no Visual Studio. Menu Arquivo > Novo > Projeto…
  2. Selecione na tela de Novo Projeto a menu JavaScript > Aplicativos Móveis conforme imagem;
  3. É importante dar um nome para o seu projeto. Na parte inferior da tela defina um nome para ele. Neste exemplo irei chama-lo de MeuPrimeiroApp. Se atente também ao local no qual o projeto está sendo salvo, você em algum momento terá que acessar seus arquivos fora do Visual Studio.
  4. Clique no botão 0K, o VS pode demorar alguns segundos para iniciar o projeto.
  5.  Pronto! Agora vamos programar….

Gerenciador de pacotes Bower no Visual Studio 2017

O VS tem um manipulador de pacotes Bower também. Mas, para que ele funcione bem é importante antes que você execute o NPM no prompt de comando, isso irá garantir que o NPM está ativo em seu computador.

  1. Abra o prompt de comando do Windows.
  2. Digite o comando npm.
  3. O resultado deste comando deve ser este: 

Possíveis resultados

Caso o resultado do comando npm seja diferente do mostrado na imagem acima, temos então duas possibilidades

Se o prompt retornar que o comando não existe, ou não foi encontrado, você deverá fazer a instalação do Node.JS separadamente. Faça o download em https://nodejs.org/en/download/ Após a instalação do Node.JS você deverá fazer a instalação do Bower usando o comando npm install -g bower no seu prompt de comando.

O prompt também pode retornar que o seu NPM está desatualizado, neste caso, basta seguir as instruções na tela para atualizá-lo.

Instalando o Framework 7 via Bower no Visual Studio 2017 em uma aplicação Cordova

Usaremos o Framework7 para estilizar nosso aplicativo, sem dúvidas um dos frameworks mais simples de usar, muito prático, rápido, bonito e com muitas opções e componentes.

Agora que temos o NPM funcionando, podemos usar o Bower dentro do Visual Studio.

  1. Clique no menu Projeto > Gerenciador de pacotes do Bower
  2. Clique na aba Procurar
  3. Use o campo de pesquisar para encontrar o Framework7
  4. Recomendo que selecione a versão 1.5.4, evite as versões Betas.
  5. Clique em Instalar.
  6. Instale também os pacotes de ícones framework7-icons (veja a lista de ícones aqui)
  7. Você pode instalar outros pacotes de ícones também, por exemplo, o font-awesome. Basta localizá-lo no gerenciador de pacotes do Bower e fazer a instalação.
  8. Prontinho! Agora podemos estilizar nosso aplicativo com Framework7.

Instalando plugins Cordova no Visual Studio 2017

Agora vamos ver como funciona o gerenciamento de plugins no Visual Studio. Vamos fazer um app bem simples com usando a vibração do dispositivo e um splashscreen de carregamento do app.

  1. No gerenciado de Soluções, localize o arquivo config.xml
  2. Dê um duplo clique sobre ele para abrir as configurações do aplicativo.
  3. Localize o menu Plugins.
  4. em seguida, localize o plugin Vibration e clique em Adicionar
  5. Adicione também o plugin Splashscreen

Estilizando seu aplicativo no Visual Studio 2017 com framework7

Agora vamos programar.

  1. No Gerenciador de Soluções, localize a pasta www e depois o arquivo index.html
  2. Dê um duplo-clique no arquivo index.html para editá-lo.
  3. Assim como o Bootstrao, o Framework7 também tem um template de layout padrão. Substitua todo o conteúdo do arquivo index.html pelo conteúdo do layout padrão do Framework7. Este template padrão está disponível na documentação em https://framework7.io/get-started/
    <!DOCTYPE html>
    <html>
     <head>
     <!-- Required meta tags-->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <!-- Your app title -->
     <title>My App</title>
     <!-- Path to Framework7 iOS CSS theme styles-->
     <link rel="stylesheet" href="path/to/framework7.ios.min.css">
     <!-- Path to Framework7 iOS related color styles -->
     <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
     <!-- Path to your custom app styles-->
     <link rel="stylesheet" href="path/to/my-app.css">
     </head>
     <body>
     <!-- Status bar overlay for full screen mode (PhoneGap) -->
     <div class="statusbar-overlay"></div>
     <!-- Panels overlay-->
     <div class="panel-overlay"></div>
     <!-- Left panel with reveal effect-->
     <div class="panel panel-left panel-reveal">
     <div class="content-block">
     <p>Left panel content goes here</p>
     </div>
     </div>
     <!-- Views -->
     <div class="views">
     <!-- Your main view, should have "view-main" class -->
     <div class="view view-main">
     <!-- Top Navbar-->
     <div class="navbar">
     <div class="navbar-inner">
     <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
     <div class="center sliding">Awesome App</div>
     <div class="right">
     <!-- 
     Right link contains only icon - additional "icon-only" class
     Additional "open-panel" class tells app to open panel when we click on this link
     -->
     <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
     </div>
     </div>
     </div>
     <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
     <div class="pages navbar-through toolbar-through">
     <!-- Page, "data-page" contains page name -->
     <div data-page="index" class="page">
     <!-- Scrollable page content -->
     <div class="page-content">
     <p>Page content goes here</p>
     <!-- Link to another page -->
     <a href="about.html">About app</a>
     </div>
     </div>
     </div>
     <!-- Bottom Toolbar-->
     <div class="toolbar">
     <div class="toolbar-inner">
     <!-- Toolbar links -->
     <a href="#" class="link">Link 1</a>
     <a href="#" class="link">Link 2</a>
     </div>
     </div>
     </div>
     </div>
     <!-- Path to Framework7 Library JS-->
     <script type="text/javascript" src="path/to/framework7.min.js"></script>
     <!-- Path to your app js-->
     <script type="text/javascript" src="path/to/my-app.js"></script>
     </body>
    </html>        
    
  4. Agora temos que editar as linha 12 e 14 indicando corretamente o caminho do pacote do Framework7. O VS coloca todos os pacotes do Bower dentro da pasta bower_components na pasta raiz do projeto.

    A edição das linhas 12 e 14 ficará assim:
    <link rel="stylesheet" href="../bower_components/framework7/dist/css/framework7.material.min.css">
    <!-- Path to Framework7 iOS related color styles -->
    <link rel="stylesheet" href="../bower_components/framework7/dist/css/framework7.material.colors.min.css">
  5. Apague a linha 16, ao menos que você realmente tenha um arquivo .css que deseja incrementar no seu projeto.
  6. Acrescenta também a classe de estilos do Framework7-icons usando o seguinte código;
    <link rel="stylesheet" href="../bower_components/framework7-icons/css/framework7-icons.css">
  7. Edite também as linhas 70 e 72 acrescentando o caminho completo dos arquivos .JS do Framework7.
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="../bower_components/framework7/dist/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="../bower_components/framework7/dist/js/my-app.js"></script>
  8. Por fim, acrescente o cordova.js logo os arquivos .js do framework7;
    <script type="text/javascript" src="cordova.js"></script>

Framework, como definir o tema para IOS ou Android (Material)?

Por padrão, o Framework7 utiliza um layout padrão do iOS, mas você pode alterar isso facilmente trocando o nome dos arquivos da linha 12 e 14, de framework7.ios.min.css para framework7.material.min.css e framework7.material.colors.min.css

ficando…

 <!-- Path to Framework7 iOS CSS theme styles-->
 <link rel="stylesheet" href="../bower_components/framework7/dist/css/framework7.material.min.css">
 <!-- Path to Framework7 iOS related color styles -->
 <link rel="stylesheet" href="../bower_components/framework7/dist/css/framework7.material.colors.min.css">

Criando outras páginas para o aplicativo usando Framework7

Esta aula não tem o intuito de criar outras páginas, pois iremos programar apenas o arquivo index.html, mas é importante avançar seus estudos quando tiver um tempinho livre.

As páginas internas do aplicativo devem seguir o padrão mostrado na documentação do framewor7 descrita em https://framework7.io/get-started/ Na documentação é mostrado um exemplo de criação da página about.html.

Basicamente, todas as páginas internas do seu aplicativo devem ter a mesma estrutura padrão da página about.html mostrada na documentação.

Em um momento oportuno irei publicar uma aula exclusiva sobre como criar várias páginas em um aplicativo com framework7.

Editando o index.html e criando um botão de vibrate.

Apague o conteúdo que se encontra dentro do bloco <div class=”page-content”></div>, porém, não apague este bloco. O bloco page-content equivale ao container do BootStrap (caso você tenha familiaridade com BootStrap) e é dentro deste bloco que adicionamos o conteúdo da página.

Dentro deste bloco crie apenas um botão que, de acordo com a documentação de botões do Framework 7 o código ficará assim;

<a href="#" class="button button-big button-fill"> Vibrar</a>

Lidando com DOM7 e JavaScript no Framework7

Se você conhece JS, você pode estar acostumado a usar os eventos JS de acordo com as ações do usuário, por exemplo; onclick, onchange, onload, etc… mas quando estamos programando um dispositivo devemos entender que existem outros eventos que são do próprio dispositivo, como por exemplo; imagine que no meio do uso do aplicativo o telefone toque, isso ativa o evento pause do dispositivo, no qual o dispositivo pausa temporariamente todos os processos para que a ligação possa ser atendida.

Pensando na organização disso, o JS oferece a função nativa addEventListener()  que fica aguardando ações do dispositivo e também do usuário, então, ao invés de usarmos os eventos tradicionais do JS (onclick, onchange, onload, etc…) vamos utilizar o addEventListener() no lugar.

Outra vantagem do seu uso é que estaremos abstraindo ainda mais o JS do HTML, logo, o HTML não terá nenhum vestígio de códigos JS na página, teremos apenas os <script src=’…’></script> usado para carregar nossas funções externas.

Vamos para um exemplo prático; no passo anterior criarmos um botão de vibrate no arquivo index.html, mas ainda não programamos ele. Nós iremos programar este evento dentro do arquivo my-app.js do Framework7. Localize este arquivo conforme mostra a imagem;

Ao acessar o arquivo, podemos ver alguns exemplos de uso dele. Vamos apagar os exemplos que serão desnecessários, o seu arquivo my-app.js ficará assim, apenas com estes códigos;

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
 // Because we use fixed-through navbar we can enable dynamic navbar
 dynamicNavbar: true
});

Agora ao final do arquivo, vamos programar o clique do botão. Podemos programar usando o DOM do JS ou optar por algum framework JS. Caso opte por framework, o Framework7 trás consigo seu próprio framework JS denominado de DOM7.

O DOM7 é inspirado no jQuery, uma das poucas diferenças é que usamos dois cifrões para manipular os elementos HTML e CSS, diferente do jQuery que usamos apenas um.

Ao final do código do arquivo my-app.js acrescente o seguinte código;

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  console.log('estou vivo');
  $("#vibrar").click(function () {
    console.log('vibrar');
    navigator.vibrate(2000);
    });
}

Note que na linha $$(“#vibrar”).click estamos nos referindo ao evento click do elemento cujo id é igual a vibrar. Já na linha navigator.vibrate(2000); temos a chamada do plugin cordova que irá fazer a vibração por 2 segundos.

Testando e depurando o aplicativo no Visual Studio 2017

Vamos emular o aplicativo. Testes mais simples e rápidos podem ser feitos no próprio navegador de internet, porém, existe uma diferença no emulador do VS em relação aos outros emuladores como do PhoneGap ou Intel XDK, o emulador do VS consegue também emular quase todos os plugins Cordova e ainda permite criar cenários de testes como por exemplo; simular uma queda na conexão da internet, ou simular uma conexão ruim.

Para fazer a depuração (teste do aplicativo) basta manter as configurações do Start conforme imagem abaixo.

A primeira opção deve ser mantida como DEBUG (a outra opção seria RELEASE usada para finalizar o aplicativo), a segunda opção seria o Android (a outra opção seria o iOS que necessita de MAC remoto, ou um dispositivo iPhone/iPad) e por fim, mantenha selecionada uma das opções “Simular no Navegador” seguido de um dispositivo de sua preferência.

O resultado será este;

Depurando o aplicativo usando o cabo USB Visual Studio 2017

A parte mais legal do teste é pela depuração USB. Você deve verificar se seu dispositivo Android possui o modo desenvolver habilitado, cada versão do Android possui uma forma diferente de ativar este recurso.

Com o modo desenvolvedor ativado, basta plugar seu dispositivo em um cabo USB conectado ao seu computador, você deverá também aceitar a depuração por USB;

e mude as configurações do Start conforme imagem a seguir;

Prontinho! Basta dar um start na aplicação e aguardar alguns minutos. O Visual Studio está construir o APK e enviar para o seu dispositivo, que automaticamente irá iniciar a execução.

Gerando o APK de debug no Visual Studio 2017

Ao fazer a depuração pelo USB, o pacote de instalação é gerado durante a depuração. Para copiar o pacote acesse a pasta do seu projeto e procure pela pasta \bin\Android\Debug, você encontrará o aplicativo nesta pasta.

Utilize o arquivo android-debug.apk caso queira instalar em outros dispositivos.

Porém, é importante entender que este APK é uma versão para DEBUG, ou seja, não se trata de um APK final (Realease) que pode ser distribuído nas lojas de aplicativos.

Em outra aula ensinarei a criar um APK de RELEASE, ou seja, um APK devidamente assinado e com permissões para ser publicado, até lá!

aplicativos com Cordovaaplicativos com HTML 5Aplicativos com JavaScriptBowerComo criar aplicativos móveisFramework7NPMVisual Studio