Bizuário Geral: Instalando Phonegap + Cordova + Android Studio + onsenui (opcional)

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 Patrick Gidich")

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

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

Add a system variable JAVA_HOME and point it to the directory containing the contents of the JDK (example C:\Program Files\Java\jdk1.7.0_51)
Add ;%JAVA_HOME%\bin; to the Path system variable.
If you have a Proxy Server, note proxy server settings and:
1. Start --> Type Java Control Panel
2. General Tab --> Click Network Settings...
3. 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 Apache Ant and extract to a directory on your computer. (example C:\util\ant\)

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

From a command prompt enter the following
```
ant -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 Android Studio and Install using default settings.

If you have a Proxy Server, note proxy server settings and open Android Studio:
1. File --> Settings --> (IDE Settings Section) --> HTTP Proxy
2. Make the appropriate selection for your environment.
Add a system variable ANDROID_HOME 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 Path system variable:
1. ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

Download Node 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:
1. From a command prompt enter the following
```
node --version
```
2. You should see something like :
```
v0.10.26
```

Update Node & 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 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.

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 <body> portanto o projeto vai econtrar todos os css e js necessários para rodar tudo, angular, cordova e onsen.

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

<link rel="stylesheet" href="css/compose.css">

Obter o 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 <body> pois já é chamado no <body>, acima:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

Copiar o arquivo 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 <head> para "Seu APP":

<title>Meu APP</title>

Coloque a linha a seguir no lugar da original na seção <head> para permitir rodar scripts "inline":

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

Copie o código abaixo para a seção <head> para tratar do botão "back" do Android quando for sair do app:

<script type="text/javascript" charset="utf-8">
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 {

    }
}
</script>

Modifique o <body> conforme abaixo:

<body ng-app="app">

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

<link rel="stylesheet" type="text/css" href="css/index.css">

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

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 <body> final, copiar para o index.html do projeto (é um template de uma app de corrida em que trabalho no momento):

<body id="deviceready" ng-app="app">


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



            <ons-list style="font-size: 20px; margin-top: 10px;">

                <ons-list-item>

                    <ons-row>
                        <ons-col width="30%">
                            <img src="img/ic_launcher.png" id="popoverb1" class="thumbnail" >
                        </ons-col>

                        <ons-col width="70%">
                            <p class="mytextarea">
                                Meu APP Phonegap + Cordova + OnsenUI
                            </p>
                        </ons-col>
                    </ons-row>

                </ons-list-item >



                <ons-list-header><div style="font-size: 20px;">Lista de Links</div></ons-list-header>



                <ons-list-item  modifier="chevron">
                    <ons-icon icon="fa-caret-square-o-right" fixed-width="false"></ons-icon> Item 1
                </ons-list-item>

                <ons-list-item  modifier="chevron">
                    <ons-icon icon="fa-caret-square-o-right" fixed-width="false"></ons-icon> Item 2
                </ons-list-item>

                <ons-list-item  modifier="chevron">
                    <ons-icon icon="fa-caret-square-o-right" fixed-width="false"></ons-icon> Item 3
                </ons-list-item>



                <ons-list-item>

                </ons-list-item>


                <ons-list-item style="font-size: 18px" modifier="chevron">
                    <ons-icon icon="fa-question-circle" fixed-width="false"></ons-icon> Ajuda
                </ons-list-item>

                <ons-list-item style="font-size: 18px" modifier="chevron">
                    <ons-icon icon="fa-info-circle" fixed-width="false"></ons-icon> Sobre
                </ons-list-item>

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

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


            </ons-list>

        </ons-page>
    </ons-navigator>



</body>

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

Bizuário Geral

sábado, 30 de maio de 2015

Instalando Phonegap + Cordova + Android Studio + onsenui (opcional)

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!

Nenhum comentário:

Postar um comentário