PhoneGap - RibaFS Portal

PhoneGap - Exemplos

2017-07-12T10:22:18-03:00

PhoheGap - Exemplo Simples

Adaptado das vídeo aulas do Youtube - Cadastro de Clientes com PhoneGap
https://www.youtube.com/watch?v=pxAAIbU3X9c

Simplifiquei e criei apenas uma agenda com id e nome

Criar app

phonegap create agenda org.ribafs.agenda Agenda

O Phonegap criará uma aplicação básica, tipo Hello World, que precisamos modificar para nos atender.

cd agenda
Editar o www/index.html

Remover tudo entre <body> e </body>

<head>
<link rel="stylesheet" href="http://backup/portal/js/jquery.mobile-1.4.5.min.css" />
</head>
<body>
<form id="formCliente">
ID <input type="text" name="id"><br>
Nome <input type="text" name="nome"><br>
<button onClick="salvar();" type="submit">Enviar</button>
</form>

<script src="http://backup/portal/js/jquery-1.11.1.min.js"></script>
<script src="http://backup/portal/js/jquery.mobile-1.4.5.min.js"></script>

</body>

Efetuar deploy para o build na nuvem
cd app
phonegap remote run android
Ao final ele gera um QRCode e exibe na tela.

Criar banco
Criar o banco agenda com uma tabela contatos e os campos id e nome apenas.

Editar o www/index.html e adicionar ao final:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://backup/portal/css/jquery.mobile-1.4.5.min.css" />
<style>
.margem{
margin: 10px;
}
</style>
</head>
<body>

<div data-role="page">
<div data-role="header">
<h1>Agenda de Contatos</h1>
</div><!-- /header -->

<form id="formContatos">
&nbsp;ID<span> <input type="text" name="id">
&nbsp;Nome <input type="text" name="nome">
<button onClick="salvar();" type="submit">Enviar</button>
</form>

<script src="http://backup/portal/js/jquery-1.11.1.min.js"></script>
<script src="http://backup/portal/js/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript" src="http://backup/portal/cordova.js"></script>
<script type="text/javascript" src="http://backup/portal/js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</div>

AJAX para pegar informações do servidor externo

<script>
function salvar(){
var formula = $('formContatos').serialize(); // Trazer todos os campos do form para a variável formula
$.ajax({
type: 'POST',
data: formula,
url: 'http://localhost/agenda/cadastro.php', // Mudar depois para a URL do app externo
success: function(data){
if(data == '' || data == 0){
alert('Ocorreu erro no banco!');
window.location = ""; // para refresh
}
if(data == 1){
alert('Registro salvo com sucesso!');
window.location = "";
}
}
});
}
</script>

</body>
</html>

Por padrão um app do Phonegap não funciona em servidor externno, apenas localmente.
Para que funcione em servidor externo precisamos configurar no config.xml.

Criando a aplicação externa em PHP com MySQL

Criar os arquivos:

conexao.php
cadastro.php
tabela.php

conexao.php

<?php
$dsn = 'mysql:host=localhost;dbname=agenda';
$user = 'root';
$pass = 'mysql';

$conexao = new PDO($dsn, $user, $pass);

$stml = $conexao->query("SELECT * from contatos ORDER BY id DESC");
?>

cadastro.php

<?php
include_once('./conexao.php');

$nome = mysql_real_escape_string($_REQUEST['nome']);

$sql = "INSERT INTO contatos (nome) VALUES ('$nome')";
$res = mysql_query($sql);

if($res == TRUE){
$cadastro = 1;
}else{
$cadastro = 0;
}

echo (json_encode($cadastro));

tabela.php
<?php
include_once('./conexao.php');
?>
<table align="center" border="1">
<thead>
<tr>
<th>ID</th><th>Nome</th>
</th>
</thead>

<tbody>
<?php foreach($stml as $valor){ ?>
<tr>
<td><?=$valor['id']?></td><td><?=$valor['nome']?></td>
</tr>
<?php } ?>
</tbody>
</table>

Aplicação acessando aplicativo PHP+MySQL externo

Mudar a url do ajax na index.html
Criar banco e arquivos no servidor externo (conexao, cadastro e tabela).
Mudar os dados do banco de dados, de acordo com o server exteerno.

Mudar no config.xml:

<preference name="permissions" value="true"/>

<access origin="http://URLservidorexterno.org"/>

Jogo Breakout com Phaser

Fontes - breakout_phonegap.zip

Android - Breakout-release.apk

Nova versão - phonegap.apk

PhoneGap - Referências

2017-07-12T10:22:18-03:00

PhoheGap - Referências

Bom Tutorial sobre o PhoneGap - http://www.tutorialspoint.com/phonegap/

Criando seu primeiro app - https://www.youtube.com/watch?v=mKm_J2Y0UF8

Developing a PhoneGap Application - http://coenraets.org/blog/phonegap-tutorial/

A Complete Phonegap Tutorial - https://codesundar.com/phonegap-tutorial/

PhoneGap Tutorial - http://www.w3ii.com/pt/phonegap/default.html

PhoneGap From Scratch - https://code.tutsplus.com/tutorials/phonegap-from-scratch-introduction--mobile-9171

Advanced PhoneGap Tutorial - https://hollyschinsky.github.io/ConferenceTracker/install-ionic.html

Emulador para Chrome - http://emulate.phonegap.com/
https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

Framework PhoneGap

2017-07-11T12:32:02-03:00

PhoneGap

O PhoneGap é uma distribuição do Apache Cordova. O Cordova foi originalmente criado pela Nitobi, que foi então adquirida pela Adobe em 2011. O projeto foi doado para a Apache Software Foundation (ASF) ainda no mesmo ano para manter uma transparente e aberta governança e prover um mecanismo para que outras grandes organizações contribuissem. Apache Cordova é o motor que torna poderoso o Adobe PhoneGap. O PgoneGap adicionou serviços e funcionalidades que o Cordova não tem, como PhoneGap Developer App, the PhoneGap Desktop App, PhoneGap Build e PhoneGap Enterprise..

O Phonegap traz um bom conjunto de ferrametnas para a construção de aplicativos mobile híbridos, com suporte a Android, iOS, Blackberry e Windows Phone.
É um projeto open source, baseado no Cordova e nos oferece um framework, com interface de linha de comando (Linux, Windows e Mac) contendo todos os seus principais recursos, um aplicativo desktop para Windows e Mac, que cria e executa aplicativos.

Com o PhoneGap a instalação e configuração do Android fica apenas no seu servidor nas nuvens, que realiza o build para nós. Assim a criação de apps fica muito simplificada.

Com apenas um único código de app podemos criar aplicativos para as várias plataformas. Podemos pegar sites ou aplicativos web existentes e adaptar para que funcionem em dispositivos móveis.

A exigência para criar aplicativos no Phonegap é conhecer HTML, CSS e JavaScript.

Através dos plugins do Phonegap podemos acessar os recursos do hardware dos dispositivos móveis como: Accelerometer, camera, compass, contacts, geolocation, notification (alert / sound / vibration, storage, media e network), etc. Nem todos disponíveis para todas as plataformas, para isso precisamos consultar a documentação do plugin no site do Phonegap:
http://docs.phonegap.com/references/plugin-apis/

Algumas seções do Site

http://phonegap.com
http://build.phonegap.com
http://docs.phonegap.com/
http://docs.phonegap.com/references/phonegap-cli/
http://docs.phonegap.com/references/phonegap-cli/install/
http://docs.phonegap.com/phonegap-build/
https://phonegap.com/app/
http://docs.phonegap.com/references/developer-app/
http://configap.com/

Requisitos:
nodejs - https://nodejs.org/en/

Requisitos de conhecimento
Precisamos conhecer apenas HTML, CSS e Javascript e os comandos do PhoneGap.

Roteiro Resumido para a criação completa de uma app
Nno Linux e no Windows

Instalar o PhoneGap no Linux (Debian e derivadas)
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm install -g cordova phonegap

Instalar o PhoneGap no Windows

Download - https://nodejs.org

Instale e execute no prompt

npm install -g cordova phonegap

Criação do app (semelhante para ambos os SOs)

cd /var/www/html

phonegap create aplicativo1 org.ribafs.aplicativo1 Aplicativo1

cd aplicativo1 (este é um helloworld do Phonegap)

Edite o aplicativo gerado, na pasta aplicativo1/www e abra no navegador:

http://localhost/aplicativo1

Acessar o site http://build.phonegap.com e criar uma conta

Edite o arquivo aplicativo1/config.xml e faça os devidos ajustes. Depois precisa substituir os ícones e splash screens, nas pastas
aplicativo1/www/res/icon e aplicativo1/www/res/screen. Veja:
http://docs.phonegap.com/en/4.0.0/config_ref_images.md.html
https://ionicframework.com/docs/cli/cordova/resources/

Após concluir o aplicativo e estiver do jeito que deseja, vamos fazer o build

phonegap login

phonegap remote build android

Gerar a chave
keytool -genkey -v -keystore Aplicativo1.keystore -alias aplicativo1 -keyalg RSA -keysize 2048 -validity 10000

Agora já podemos acessar o site do build, associar o app à chave gerada, desbloquear e baixar o APK e o APPX.

Detalhes sobre o PhoneGap

Instalação do PhoneGap Desktop App

Phonegap Desktop App
https://github.com/phonegap/phonegap-app-desktop/releases

Windows 7 e 8.1 usar a versão 0.3.5
Windows 10 suporta a última versão, que é a 0.4.4

O phonegap cria aplicativos localmente e gera o build na nuvel (build.phonegap.com), sem necessidade de instalar o Android localmente.
Este site é um serviço nas nuvens que armazena os build que criamos dos aplicativos.
Isso torna a criação de aplicativos mobile muito mais simples, sem necessidade da trabalheira de instalar e configurar o android localmente.

O Phonegap tem uma interface para a linha de comando para Linux, Windows e Mac e uma IDE somente para Windows e Mac mas apenas com recursos de criação e execução no navegador e diversos outros recursos em seu site.

Instalar o Phonegap
npm install -g phonegap

Criar um aplicativo (requer conexão à internet, pois baixa o esqueleto do servidor)
phonegap create agenda org.ribafs.agenda Agenda

Outras variações
phonegap create path/to/myApp
phonegap create path/to/myApp "com.example.app" "My App"
phonegap create path/to/myApp --id "com.example.app" --name "My App"
phonegap create path/to/myApp --template hello-world
phonegap create path/to/myApp --copy-from ../myOtherApp
phonegap create path/to/myApp -src ../myOtherApp
phonegap create path/to/myApp --id "com.example.app" --name "My App" --copy-from ~/myOtherApp
phonegap create path/to/myApp --link-to ../myOtherApp

phonegap create pasta pacote NomeApp
phonegap create hello org.ribafs.hello HelloWorld

phonegap create agenda org.ribafs.agenda Agenda

Estrutura de diretórios

hooks - scripts adicionais
platforms - código do build de plataformas
plugins - código dos plugins usados
www - código fonte da app
config.xml -

Cadastrar-se em
https://build.phonegap.com/

Emulador para Chrome
http://emulate.phonegap.com
Acesse e instale no chrome (somente).

Instalar servidor web (para criar aplicativo com PhoneGap com PHP e MySQL)

http://localhost/app1

Build remoto
https://build.phonegap.com/apps

cd app1
phonegap remote login

phonegap remote build android

Emulando com Celular
ou (com celular conectado via cabo USB e usando a app do PhoneGap)
Também devemos habilitar o modo de debug no celular Android
phonegap run android --verbose

phonegap remote run android

phonegap run android --device=<codigo>

Ver os códigos dos dispositivos conectados ao computador
adb devices

Após o deploy podemos instalar o aplicativo nos dispositivos reais.
Basta acessar o site build, baixar o apk e instalar manualmente no aparelho.
Podemos baixá-la via QRCode (mais prático).

Também podemos compactar toda a pasta do app e fazer o upload no site build.
Em Private - Upload a zip file.

Para excluir um app clicar no ícone - Settings e ao final Delete.
Após excluir requer Refresh no navegador para permitir upload de nova app.

Download do apk
No site build clique sobre o ícone da aplicação
Abaixo aparece um ícone azul para download do APK
Talbém aparece um botão Install abaixo do QRcode onde podemos baixar o APK

No site build podemos efetuar alterações nas configurações e depois clicar no botão Build para atualizar

Gerando uma keystore
keytool -genkey -v -keystore [keystore_name].keystore -alias [alias_name] -keyalg RSA -keysize 2048 -validity 10000

Exemplo
keytool -genkey -v -keystore Agenda.keystore -alias agenda -keyalg RSA -keysize 2048 -validity 10000

Emulando no celular, via app

Para que funcione precisamos instalar um acelerador gráfico via sdkmanager
android-studio/bin/studio.sh
Configurações/SDK
Sdk/Extras, o último da lista
Intel x86 Emulator Accelerator

phonegap emulate android

phonegap remote logout

Existe um app emulador
http://docs.phonegap.com/references/developer-app/ ou buscando phonegap pelo celular

Testar aplicativos em emulador
phonegap serve [options] (no windows desabilitar o firewall ou permitir este)

--port, -p <n> port for web server (default: 3000)
--autoreload enable app refresh on file changes (default: true)
--no-autoreload disable app refresh on file changes
--browser enable desktop browser support (default: true)
--no-browser disable desktop browser support
--localtunnel enable a local tunnel for public access (default: false)

Após abrir o aplicativo apenas execute:
cd pastaapp
phonegap serve

As alterações fetias no código fonte no computador são percebidas automaticamente no app do celular

Ambos, celular e computador devem estar na mesma rede

Neste caso o app aparece no celular.

Vídeo aulas sobre Cadastro de Clientes
https://www.youtube.com/watch?v=CgidH4qFxiM&index=1&list=PLTmK6lyvWo8g3v40gJADMdUUTt8p2t5G3

Listar plataformas disponíveis

phonegap platform

Adicionar suporte para a plataforma android

phonegap platform add android
Com isso ele cria uma pasta com o projeto na nossa pasta platform. Este projeto criado pode ser importado pelo Android Studio.

App Controle de Estoque
https://www.youtube.com/watch?v=XHOh0F9HLKo&index=15&list=PLTmK6lyvWo8g3v40gJADMdUUTt8p2t5G3

Emulador do Blackberry no navegador - Ripple
sudo npm install -g ripple-emulator
https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

ripple emulate

Para que funcione requer adição do android como plataforma
phonegap platform add android

Debugando com Gapdebug (Win e Mac)
http://genuitec.com/products/gapdebug

Debugar no navegador de aplicativo no celular

Plugin Bateria

Instalar Phonegap
Criar o app
Instalar plugin
phonegap create bateria org.ribafs.bateria StatusBateria

Ver documentação no site do cordova
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html

Atualizar o cordova
sudo npm install -g cordova

Instalar o plugin
cordova plugin add cordova-plugin-battery-status

Ao instalar ele cria uma pasta com os fontes para cada uma das plataformas suportadas.

Mudar o início da tag <body> em www/index.html para:

<body>
<div class="app">
<h1>Exemplo Plugin Bateria</h1>
<div id="deviceready" class="blink">
<p>Porcentagem Bateria<span id="level">%</span></p>
<p>Dispositivo plugado<span id="isPluged"></span></p>
</div>
</div>

Em js/index.js

Mudar este evento:

receivedEvent: function(id) {
window.addEventListener("batterystatus", onBatteryStatus, false);

function onBatteryStatus(status) {
console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);
}
}

Testando este app. O teste só irá funcionar bem em aparelhos reais de celular ou tablet.

Lembrando: este evento somente é disparado quando o estado da bateria muda ou quando o isPlugged muda, portanto a melhor alternativa é o ripple.

Lembrando que para que o ripple funcione requer que o android seja adicionado ao app.

phonegap platform add android

Também precisa estar no diretório web.

Plugin Device

Acessar informações sobre o aparelho: SO, versão, versão do cordova, marca, etc.
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html

App
phonegap create device org.ribafs.device DevicePlugin

Instalação
cordova plugin add cordova-plugin-device

O objeto do plugin device tem escopo global e pode ser chamado de qualquer parte do app.

Plugin Dialogs
Recomendado para todas as aplicações.
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/index.html

App
phonegap create dialogos org.ribafs.dialogos PluginDialogs

Instalar
cordova plugin add cordova-plugin-dialogs

Obs.: estes exemplos com plugins não funcionam no navegador, nem no emulador ripple, somente no dispositivo real.

jQuery Mobile para a camada view

Podemos criar um app ou um site e fornecer a URL para o cliente.

Templates do Phonegap

phonegap template list

phonegap create dialogos org.ribafs.dialogos PluginDialogs --template nometemplate

Criar app usando template jquerymobile

phonegap create my-app --template URL

phonegap create my-app --template https://github.com/loiane/jquerymobile-phonegap-template (para isso requer git instalado na máquina)

Publicar uma app do Android no build para o Google Play

Criar a app
Criar a chave com:
cd appname
Efetuar o build pela linha de comando
keytool -genkey -v -keystore Agenda.keystore -alias agenda -keyalg RSA -keysize 2048 -validity 10000
Gerará o arquivo Agenda.keystore no raiz do aplicativo

Dica: use a mesma senha no começo e no final para facilitar.

Ir até o site do build - https://build.phonegap.com
- Clicar no ícone do app
- Clicar em No key selected à direita do ícone do android abaixo
- Clicar em add a key...
Entrar com um nome para o aplicativo: DNOCS - Agenda
Entrar com o alias usado na criação da chave. Precisa ser o mesmo da chave: agenda
Indicar o arquivo da chave, que é Agenda.keystore, na pasta do app agenda
Clicar no pequeno cadeado amarelo (indica que está bloqueado)
Clicar no botão Rebuild e aguarde que reconstrua com a chave
Agora está pronto para publicar no Google Play - https://play.google.com/apps/publish

Ao efetuar o build de uma app ele aparece no site do build.phonegap.com como de debug.
Mesmo assim este APK pode ser instalado manualmente sem problema. Não dá é para publicar no Google Play. Para isso precisa da chave.

Dica: esta chave/arquivo pode ser usado para outros aplicativos.

Bom Curso Gratuito com Certificado sobre Phonegap
http://loiane.training/curso/phonegap-apache-cordova/