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