Aplicativo no Visual Studio 2017 com Cordova e Framework7

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

Inicie um novo projeto no Visual Studio. Menu Arquivo > Novo > Projeto…
Selecione na tela de Novo Projeto a menu JavaScript > Aplicativos Móveis conforme imagem;
É 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.
Clique no botão 0K, o VS pode demorar alguns segundos para iniciar o projeto.
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.

Abra o prompt de comando do Windows.
Digite o comando npm.
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.

Clique no menu Projeto > Gerenciador de pacotes do Bower
Clique na aba Procurar
Use o campo de pesquisar para encontrar o Framework7
Recomendo que selecione a versão 1.5.4, evite as versões Betas.
Clique em Instalar.
Instale também os pacotes de ícones framework7-icons (veja a lista de ícones aqui)
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.
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.

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

Estilizando seu aplicativo no Visual Studio 2017 com framework7

Agora vamos programar.

No Gerenciador de Soluções, localize a pasta www e depois o arquivo index.html
Dê um duplo-clique no arquivo index.html para editá-lo.

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>

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

Apague a linha 16, ao menos que você realmente tenha um arquivo .css que deseja incrementar no seu projeto.

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

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>

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

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