Post on 18-Jan-2015
description
Introdução
Curso PhoneGap
#1
Pq Mobile? Pq Multiplataforma?
1
Android Java
BlackBerry Java, C++, HTML 5
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
HTML 5
2
joApp
Wink Toolkit
joApp
Wink Toolkit
Entendendoo Mundo Mobile
3
App Nativa
Dispositivo
App Nativa
Web Server
Java/PHP/Ruby/C#
Arquivos Imagens/
Documentos
Banco de Dados
Backend
http://
executa UI e
(alguma) lógica de
negócio
Lógica de negócio
Web Browser
Dispositivo
Server Side Web
Web Server
Java/PHP/Ruby/C#
Arquivos Imagens/
Documentos
Banco de Dados
Backend
http://
Apenas um
renderizador
Executa UI e Lógica de negócio
Web Browser
Dispositivo
Client Side Web
Web Server
Java/PHP/Ruby/C#
Arquivos Imagens/
Documentos
Banco de Dados
Backend
http://
executa UI e
(alguma) lógica de
negócio
Lógica de negócio
JavaScript
Arquivos Imagens/
Documentos
Banco de Dados caching
App Nativa
Dispositivo
App Híbrida
Web Server
Java/PHP/Ruby/C#
Arquivos Imagens/
Documentos
Banco de Dados
Backend
http://
executa UI e
(alguma) lógica de
negócio
Lógica de negócio
Código Nativo
Interpretador
JavaScript
Ponte
http://
Web x Nativo
4
Nativo
Web Apps
Acesso Device
Sim
Parcial
Nativo
Web Apps
Acesso Device
Velocidade
Sim Sim
?Parcial
Nativo
Web Apps
Acesso Device
Velocidade Tempo Desenvolvimento
Sim Sim
?
Caro
Parcial Sussa
Nativo
Web Apps
Acesso Device
Velocidade Tempo Desenvolvimento
App Store
Sim Sim
?
Caro
Parcial Sussa
Sim
Não
Nativo
Web Apps
Acesso Device
Velocidade Tempo Desenvolvimento
App Store
Cross Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Sim
Não
App Híbrida?
Web x Nativo x Híbrido
5
Nativo
Web Apps
Acesso Device
Velocidade Tempo Desenvolvimento
App Store
Cross Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Sim
Não
Híbrido Sim ? Sussa* Sim Sim
Nativo
Web Apps
Acesso Device
Velocidade Tempo Desenvolvimento
App Store
Cross Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Sim
Não
Híbrido Sim ? Sussa* Sim Sim
?
Sussa*
Já vamos discutir
Já vamos discutir
?
Our biggest mistake was betting too much
on HTML5
In your face!
“So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”!
PhoneGap
6
•2008: início
•2008:suporte a iPhone, Android e Blackberry 4
•2009: suporte a Symbian e webOS
•2011: suporte a Windows Phone 7
•2011: Projeto sob Apache - novo nome
A partir do Phonegap 1.5.0
Apache Cordova
•Cordova é o projeto Open Source
•PhoneGap é a implementação
•http://incubator.apache.org/cordova/
O que é Phonegap / Cordova?
•Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
Phonegap é WORA?
Write Once, Run Anywhere?
Write Once DEBUG Anywhere
Desenvolva Desenvolva
Desenvolva
Teste
Desenvolva
Teste
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build Build
{Híbrido
Trabalhando com Phonegap
7
HTML 5 CSS 3
JS
UIWebView WebView
APIs JS
Stores
API
8
function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); }; !function onError() { alert('onError!'); }; !navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Acceleration
function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }
Capturar Foto
function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }
Capturar Foto com Edição
function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); }
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button>
Busca Foto do Dispositivo
function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; !function onError(error) { alert('CompassError: ' + error.code); }; !navigator.compass.getCurrentHeading(onSuccess, onError);
Compass/Bússula
function checkConnection() { var networkState = navigator.connection.type; ! var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; ! alert('Connection type: ' + states[networkState]); } !checkConnection();
Conexão
function onDeviceReady() { var element = document.getElementById('deviceProperties'); ! element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Version: ' + device.version + '<br />'; }
Propriedades do Dispositivo
var ref = window.open('http://loiane.com', '_blank', 'location=yes'); ref.addEventListener('loadstart', function() { alert('start: ' + event.url); }); ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); }); ref.addEventListener('exit', function() { alert(event.type); });
In App Browser
navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName );
Notification - Alert
function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); }
Notification - Confirm
// Beepa 3 vezes function playBeep() { navigator.notification.beep(3); }
Notification - Beep
Não funciona no iOS
// Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); }
Notification - Vibrar
Demo
UI Frameworks
9
jQT
function onDeviceReady() { // acha todos os contatos com 'Loiane' em qualquer campo nome var options = new ContactFindOptions(); options.filter="Loiane"; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); } ! // onSuccess: loga o contato que foi achado function onSuccess(contacts) { for (var i=0; i<contacts.length; i++) { console.log("Display Name = " + contacts[i].displayName); } } ! // onError: Failed to get the contacts function onError(contactError) { alert('onError!'); }
Contatos
Touch
Workflow de Desenvolvimento
Mock Up
Desenvolvimento
Testes Simulação
Dispositivo
Store
M O C K U P
Resultado
Emuladores
R I P P L E
Ferramentas de Debug
iWebInspector
Weinre
Produção
10
XCode Eclipse
build.phonegap.com
Plugins
11
Sussa*
SQLite nativo BarCode Scanner
etc
https://github.com/phonegap/phonegap-plugins
https://github.com/brodyspark/PhoneGap-SQLitePlugin-iOS
Quando não usar?
11
Threads
#FAIL
<div id="jogador">
http://phonegap.com/app/fruit-salad/
Recomendações Antes de Começar
12
$99 anuais
$25
$0
$19 - $99 anuais
http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg