congresso ti 2015: introducao ao phonegap (cordova)
TRANSCRIPT
Introdução ao PhoneGap/Cordova
ROADMAP• Motivo pra usar Phonegap• O que é Phonegap?• Phonegap x Cordova• Como funciona• API• Plugins• Enviando pra App Store• Exemplos• O que preciso aprender e instalar
Motivação
Preciso de uma APP
Objective-CSwift
JavaAPI Android
.NETAPI WP
Android Java
BlackBerry Java, C++, HTML 5
iOS Objective-C / Swift
Windows Phone C#
O que é
• Framework JavaScript• Funciona como um container (wrapper)• Código web (HTML5/CSS/JS)• Apps híbridas
Desenvolvimento Nativo
App Nativa10101010101010101
01010101010101 10101010101010101
01010101010101
API nativa da Plataforma
Desenvolvimento Web
Browser
<html><head><script src=” ...” /> </head><body>...
App Híbrida
App Nativa10101010101010101
01010101010101 10101010101010101
01010101010101
API nativa da Plataforma
Browser
<html><head><script src=” ...” /> </head><body>...
Wrapper Nativo
<html><head><script src=” ...” /> </head><body>...
API nativa da Plataforma
Nativo Browser Híbrido
• Nitobi cria Phonegap• Adobe compra Nitobi• Código Fonte - Apache (Cordova)• Phonegap continua como produto da Adobe
• Código Fonte• Comunidade
Distribuição do Cordova+ serviços
• Phonegap Build• Phonegap developer app• Phonegap Enterprise
Como funciona
Seu Código
Web View Nativa (Browser)Seu Código
APIs Nativas
Web View Nativa (Browser)Seu Código
App Nativa: .apk, .ipa, etcAPIs Nativas
Web View Nativa (Browser)Seu Código
•Accelerometer - when the device moves
•Camera - pictures of your cat
•Capture - audio, video, stills of your cat
•Compass - for when you're lost
•Connection - type of connection
•Contacts - find and create new friends
•Device - device and OS version metadata
•Events - various app/hardware related events
•File - native file system access (+ upload)
•Geolocation - for when you're lost
•Globalization - date/number/currency formatting
•Media - related to audio playback (supports record as well)
•Notification - visual, audible, and tactile notifications
•Splashscreen - for your splash screen needs
•Storage - Mini database
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 capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }
Capturar Foto com Ediçã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
Componentes Visuais
Plugins
Performance
https://vimeo.com/55486684
Enviando pra App Store
Phonegap Build
apps open source: grátis (github)apps código privado: pago
Threads
#FAIL
<div id="jogador">
http://phonegap.com/app/fruit-salad/
Objective-CSwift
JavaAPI Android
.NETAPI WP
Ferramentas de Debug
iWebInspector
Weinre
Testes
R I P P L E
Phonegap não converte em código nativo
Phonegap não tem componente, não se integra com server (php, java)
Phonegap não gera projeto web, gera projeto nativo que faz uso da API do phonegap
Processo de build e processo de enviar para apps store é nativo
Não serve para qualquer app
Ambiente de desenvolvimento
Objective-CSwift
JavaAPI Android
.NETAPI WP
Laboratório
Phonegap/Cordova
http://loiane.com
fb.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!