Congresso TI 2015: Introducao ao Phonegap (Cordova)

Introdução ao
PhoneGap/Cordova

• 9+ XPTI
• Java, Sencha, Phonegap
• http://loiane.com
• Livros:
Loiane Groner

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

Objective-C
Swift
Java
API Android
.NET
API WP

Android Java
BlackBerry Java, C++, HTML 5
iOS Objective-C / Swift
Windows Phone C#

• Framework JavaScript
• Funciona como um container (wrapper)
• Código web (HTML5/CSS/JS)
• Apps híbridas

Desenvolvimento Nativo
App Nativa
10101010101010101
01010101010101
10101010101010101
01010101010101
API nativa da
Plataforma

Desenvolvimento Web
Browser
<html>
<head>
<script src=” ...” /> </
head>
<body>
...

App Nativa
10101010101010101
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

WebView Nativa (Browser)
Seu Código

APIs Nativas
Seu Código

App Nativa: .apk, .ipa, etc
APIs Nativas
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 - ﬁnd and create new friends

•Device - device and OS version metadata
•Events - various app/hardware related events
•File - native ﬁle system access (+ upload)
•Geolocation - for when you're lost
•Globalization - date/number/currency formatting

•Media - related to audio playback (supports record
as well)
•Notiﬁcation - visual, audible, and tactile notiﬁcations
•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

Phonegap Build
apps open source: grátis (github)
apps código privado: pago

Exemplos
de Apps
http://phonegap.com/app/

http://phonegap.com/app/fruit-salad/

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

http://loiane.com
fb.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

Congresso TI 2015: Introducao ao Phonegap (Cordova)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Congresso TI 2015: Introducao ao Phonegap (Cordova)

Similar to Congresso TI 2015: Introducao ao Phonegap (Cordova) (20)

Congresso TI 2015: Introducao ao Phonegap (Cordova)