Instalando Phonegap + Cordova + Android Studio + onsenui (opcional)
Autor: Magno | Publicado: 2015-05-30T15:45:00-03:00



Sequencia para instalação e criação de um novo APP híbrido para android usando Phonega/Cordova em ambiente Android Studio com interface onseui!


Todos os comandos aqui descritos devem ser executados no prompt do windows:






Primeira parte ("tks to&nbsp;Patrick Gidich")&nbsp;

https://github.com/simnova/webdevdocs/wiki/Installing-PhoneGap-and-Android-Studio-on-Windows


Download&nbsp;JDK- Java SE Development Kit - Windows x64 - (latest edition) and Install using default options

Add a system variable&nbsp;JAVA_HOME&nbsp;and point it to the directory containing the contents of the JDK (example C:\Program Files\Java\jdk1.7.0_51)
Add&nbsp;;%JAVA_HOME%\bin;&nbsp;to the&nbsp;Path&nbsp;system variable.
If you have a Proxy Server, note proxy server settings and:
Start --&gt; Type&nbsp;Java Control Panel
General Tab --&gt; Click&nbsp;Network Settings...
Choose the appropriate settings, "use browser settings" may work for you.


Validate Java Install:


From a command prompt enter the following
java -version

You should see something like :java version "1.7.0_51"




Download&nbsp;Apache Ant&nbsp;and extract to a directory on your computer. (example C:\util\ant\)


Add a system variable&nbsp;ANT_HOME&nbsp;and point it to the directory containing the contents of the ANT directory
Add&nbsp;;%ANT_HOME%\bin;&nbsp;to the&nbsp;Path&nbsp;system variable.
Validate Ant Install:

From a command prompt enter the followingant -version

You should see something like :Apache Ant(TM) version 1.9.3 compiled on December 23 2013

Troubleshooting: Unable to locate tools.jar (check to see if JAVA_HOME is set properly)







Download&nbsp;Android Studio&nbsp;and Install using default settings.&nbsp;


If you have a Proxy Server, note proxy server settings and open Android Studio:
File --&gt; Settings --&gt; (IDE Settings Section) --&gt; HTTP Proxy
Make the appropriate selection for your environment.


Add a system variable&nbsp;ANDROID_HOME&nbsp;and point it to the directory containing the android sdk that's installed with Android Studio (example: C:\Users\jdoe\AppData\Local\Android\android-studio\sdk)
Add the following to your&nbsp;Path&nbsp;system variable:
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;









Download&nbsp;Node&nbsp;and Install (if you already have it installed, download and install again to update it)


Clear your NPM cache (this may save some headaches):npm cache clean

If behind a firewall, configure node to speak to the firewall by issuing the following commands:npm config set proxy http://domain%5Cusername:password@ipaddress:port
npm config set https-proxy http://domain%5Cusername:password@ipaddress:port

Validate Node Install:
From a command prompt enter the followingnode --version

You should see something like :v0.10.26









Update Node &amp; Global Packages

Update Node:npm update -g n

Update Global Packages:npm update -g



Install Cordova
npm install -g cordova
Install Plugman
npm install -g plugman



If behind a firewall, configure plugman to speak to the firewall by issuing the following commands:plugman config set proxy http://domain%5Cusername:password@ipaddress:port
plugman config set https-proxy http://domain%5Cusername:password@ipaddress:port








Segunda parte (retirado da documentação original Cordova &nbsp;mais algumas horas de tentativas e erros...)

http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide


Criar um projeto na pasta de aplicativos (vá para pasta via prompt)
cordova create meuapp com.jaca.meuapp meuapp








Ir para pasta de projeto
cd meuapp


Criar framework android para aplicativo
cordova platform add android


Gerar aplicativo e seus arquivos e bibliotecas correspondentes
cordova build



Lançar o Android Studio (AS)


Selecionar opção "Import[..]"




Selecionar pasta ..\meuapp\platforms\android









Pressionar OK. (Na primeira vez que testei o Gradle foi montado após ~5 min, na segunda houveram msgs pedindo para fazer um "wrapper", aceitar.&nbsp;

AS abriu o projeto!!




Conectar o celular via USB, toda a parte do Android ADB já deve estar funcionando e o celular deve ser reconhecido pelo AS.

Compilar/rodar!

Feito, o app básico cordova vai ser lançado no seu dispositivo móvel com a frase "DEVICE JACA IS READY", editei o arquivo index.html acrescentando a famosa marca "JACA"....

Terceira parte, instalando IHM onsenui no novo ambiente AS:

Baixar o template sliding menu http://onsen.io/download.html#download-templates e descompactar.

Criar a pasta onsen dentro da pasta www no projeto no AS.

Mover as pastas lib e styles que estao dentro da pasta \onsenui-sliding-menu\www nos arquivos descompactados acima para a pasta www no AS

Copiar o código abaixo no index.html dentro &lt;body&gt; portanto o projeto vai econtrar todos os css e js necessários para rodar tudo, angular, cordova e onsen.

&lt;link rel="stylesheet" href="onsen/lib/onsen/css/onsenui.css"&gt;
&lt;link rel="stylesheet" href="onsen/styles/onsen-css-components-blue-theme.css"&gt;
&lt;link rel="stylesheet" href="onsen/styles/app.css"/&gt;
&lt;script src="onsen/lib/onsen/js/angular/angular.js"&gt;&lt;/script&gt;
&lt;script src="js/angular-touch.js"&gt;&lt;/script&gt;
&lt;script src="onsen/lib/onsen/js/onsenui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/compose.css"&gt;







Obter o&nbsp;angular-touch.js na internet, este script dá maior velocidade de resposta ao "touch" para os elementos clicáveis da DOM. Mover para a pasta /js.



Copiar o aqruivo de estilo "compose.css" para a pasta de estilo do projeto, "/css". No final deste post esta o codigo para criar o compose.css. Para dar um embelezada no exemplo....



Deletar o codigo abaixo no &lt;body&gt; pois já é chamado no &lt;body&gt;, acima:


&lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;



Copiar o arquivo&nbsp;AASis78x31branco.png, pode ser qualquer outro mantendo o tamanho em pixel. Logo do desenvolvedor que será apresentado na toolbar do app. Copiar para a pasta C:\Users\alexandre.alves\Documents\MobileApps\meuapp\platforms\android\assets\www\img





Modifique a diretiva abaixo na seção &lt;head&gt; para "Seu APP":


&lt;title&gt;Meu APP&lt;/title&gt;


Coloque a linha a seguir no lugar da original na seção &lt;head&gt; para permitir rodar scripts "inline":

&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"&gt;


Copie o código abaixo para a seção &lt;head&gt; para tratar do botão "back" do Android quando for sair do app:



&lt;script type="text/javascript" charset="utf-8"&gt;
var module = angular.module('app', ['onsen','ngTouch']);

function backbuttonpage(){
 //var r = ons.notification.confirm("Deseja realmente sair do App?");
 var r = confirm("Deseja realmente sair do App?");
    if (r == true) {
        //navigator.notification.vibrate(500);
        navigator.app.exitApp();
    } else {

    }
}
&lt;/script&gt;

Modifique o &lt;body&gt; conforme abaixo:

&lt;body ng-app="app"&gt;


Delete a linha abaixo da seção &lt;head&gt; (o onsen tem seu próprio estilo, esta linha é do Cordova)


&lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;


Copiar um arquivo, usei o próprio ícone em 48x48 pixels, para a pasta img do projeto, usar o nome abaixo:
&nbsp;
ic_launcher.png


Opcional: Criar o ícone do meuapp nos vários tamanhos e distribuir pelos diretórios:












Comentar as linhas abaixo no arquivo index.js (o template cordova informa que o dispositivo está pronto via modificações em alguns elementos da DOM, desnecessário nesta aplicação com IHM onsen, deixei apenas uma msg de console que informa que está "ready");


//var listeningElement = parentElement.querySelector('.listening');//var receivedElement = parentElement.querySelector('.received');
//listeningElement.setAttribute('style', 'display:none;');//receivedElement.setAttribute('style', 'display:block;');





Abaixo a seção &lt;body&gt; final, copiar para o index.html do projeto (é um template de uma app de corrida em que trabalho no momento):


&lt;body id="deviceready" ng-app="app"&gt;


    &lt;ons-navigator animation="slide" var="indexnavi"&gt;
        &lt;ons-page&gt;
            &lt;ons-toolbar fixed-style&gt;
                &lt;div class="center"&gt;meuapp&lt;/div&gt;
                &lt;div class="right" style="padding: 7px;"&gt;
                    &lt;img src="img/AASis78x31branco.png" alt="AASis" &gt;
                &lt;/div&gt;
            &lt;/ons-toolbar&gt;



            &lt;ons-list style="font-size: 20px; margin-top: 10px;"&gt;

                &lt;ons-list-item&gt;

                    &lt;ons-row&gt;
                        &lt;ons-col width="30%"&gt;
                            &lt;img src="img/ic_launcher.png" id="popoverb1" class="thumbnail" &gt;
                        &lt;/ons-col&gt;

                        &lt;ons-col width="70%"&gt;
                            &lt;p class="mytextarea"&gt;
                                Meu APP Phonegap + Cordova + OnsenUI
                            &lt;/p&gt;
                        &lt;/ons-col&gt;
                    &lt;/ons-row&gt;

                &lt;/ons-list-item &gt;



                &lt;ons-list-header&gt;&lt;div style="font-size: 20px;"&gt;Lista de Links&lt;/div&gt;&lt;/ons-list-header&gt;



                &lt;ons-list-item  modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-caret-square-o-right" fixed-width="false"&gt;&lt;/ons-icon&gt; Item 1
                &lt;/ons-list-item&gt;

                &lt;ons-list-item  modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-caret-square-o-right" fixed-width="false"&gt;&lt;/ons-icon&gt; Item 2
                &lt;/ons-list-item&gt;

                &lt;ons-list-item  modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-caret-square-o-right" fixed-width="false"&gt;&lt;/ons-icon&gt; Item 3
                &lt;/ons-list-item&gt;



                &lt;ons-list-item&gt;

                &lt;/ons-list-item&gt;


                &lt;ons-list-item style="font-size: 18px" modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-question-circle" fixed-width="false"&gt;&lt;/ons-icon&gt; Ajuda
                &lt;/ons-list-item&gt;

                &lt;ons-list-item style="font-size: 18px" modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-info-circle" fixed-width="false"&gt;&lt;/ons-icon&gt; Sobre
                &lt;/ons-list-item&gt;

                &lt;ons-list-item onclick="backbuttonpage()"  style="font-size: 18px" modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-sign-out" fixed-width="false"&gt;&lt;/ons-icon&gt; Sair do APP
                &lt;/ons-list-item&gt;

                &lt;ons-list-item style="font-size: 18px" modifier="chevron"&gt;
                    &lt;ons-icon icon="fa-envelope-o" fixed-width="false" style="opacity:1"&gt;&lt;/ons-icon&gt;
                    &lt;a href="mailto:alexandremagnoalves@gmail.com"&gt;Alexandre Alves&lt;/a&gt;
                    &amp;nbsp;&amp;nbsp;Sugestões
                &lt;/ons-list-item&gt;


            &lt;/ons-list&gt;

        &lt;/ons-page&gt;
    &lt;/ons-navigator&gt;



&lt;/body&gt;





Compilar e testar!!!





=======================fim===========================





Arquivo "compose.css":


.thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  padding: 5px;
  vertical-align: middle;
  -webkit-border-radius: 4px;
}

.mytextarea {
  font: inherit;
  color: inherit;
  line-height: normal;
  font-weight: 400;
  font-size: 22px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ffffff;
  color: #1f1f21;
  vertical-align: middle;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 0;
  margin-right: 0;
}

.to-wrapper {
  line-height: 1;
  height: 62px;
  padding: 10px;
}

.to-image {
  width: 70px;
  height: 41px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

.to-name {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 4px;
}

.to-email {
  font-size: 17px;
  opacity: 0.7;
}

.text-input {
  margin-top: 4px;
}


 .page--menu-page__background {
      background-color: #000000;
    }
   
    .page--menu-page__content {
      color: white;
    }

    .menu-close,
    .menu-close &gt; .toolbar-button {
      color: #999;
    }

    .menu-list,
    .menu-item:first-child,
    .menu-item:last-child,
    .menu-item {
      background-color: transparent;
      background-image: none !important;
      border-color: transparent;
      color: #fff;
    }

    .menu-item {
      padding: 0 0 0 20px;
      line-height: 52px;
      height: 52px;
      text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
    }

    .menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .menu-notification {
      display: inline-block;
      margin-top: 12px;
      font-size: 14px;
      height: 16px;
      line-height: 16px;
      min-width: 16px;
      font-weight: 600;
    }

    .bottom-menu-list,
    .bottom-menu-item:first-child,
    .bottom-menu-item:last-child,
    .bottom-menu-item {
      border-color: #393939;
      background-color: transparent;
      background-image: none !important;
      color: #ccc;
    }

    .bottom-menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
   









Path Notebook, system:

C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Intel\iCLS Client\;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files\WIDCOMM\Bluetooth Software\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Common Files\Roxio Shared\DLLShared\;C:\Program Files\Common Files\Roxio Shared\10.0\DLLShared\;C:\Program Files\QuickTime\QTSystem\;C:\Program Files\Dell\Dell Data Protection\Drivers\TSS\bin\;C:\Users\alexandre.alves\AppData\Local\Android\sdk\platform-tools;C:\Program Files\nodejs\;C:\Program Files\Skype\Phone\;%ANT_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

Path Notebook, Alexandre Alves:


C:\Program Files\UltraEdit\;C:\Users\alexandre.alves\AppData\Roaming\npm;C:\Program Files\nodejs;C:\Program Files\apache-ant-1.9.4\bin;C:\Program Files\Java\jdk1.8.0_31\bin;C:\Users\alexandre.alves\AppData\Local\Android\sdk\platform-tools;C:\Users\alexandre.alves\AppData\Local\Android\sdk\tools