[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

40 %
60 %
Information about [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
Technology

Published on February 24, 2014

Author: loianeg

Source: slideshare.net

#1 Curso PhoneGap Introdução

“ Acesso Nativo ao Device usando apenas JavaScript. http://phonegap.com/

1 Pq Mobile? Pq Multiplataforma?

Android Java BlackBerry Java, C++, HTML 5 iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#

2 HTML 5

joApp Wink Toolkit

joApp Wink Toolkit

3 Entendendoo Mundo Mobile

App Nativa Lógica de negó Web Server tp:// ht Java/PHP/ Ruby/C# App Nativa Arquivos Imagens/ Documentos UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Banco de Dados Backend cio

Server Side Web Execut a UI e Lógica de negó cio Web Server tp:// ht Java/PHP/ Ruby/C# Web Browser Arquivos Imagens/ Documentos Dispositivo um nas dor Ape riza de ren Banco de Dados Backend

Client Side Web Web Browser JavaScript Arquivos Imagens/ Documentos Lógica de negó Web Server tp:// ht Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/PHP/ Ruby/C# Arquivos Imagens/ Documentos Banco de Dados Backend cio

App Híbrida App Nativa Código Nativo Lógica de negó Web Server p:// htt Interpretador Java/PHP/ Ruby/C# :// tp ht Ponte JavaScript UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Imagens/ Documentos Banco de Dados Backend cio

4 Web x Nativo

Acesso Device Nativo Sim Web Apps Parcial

Acesso Device Velocidade Nativo Sim Sim Web Apps Parcial ?

Acesso Device Velocidade Tempo Desenvolvimento Nativo Sim Sim Caro Web Apps Parcial ? Sussa

Acesso Device Nativo Web Apps Velocidade Tempo Desenvolvimento App Store Sim Sim Caro Sim Parcial ? Sussa Não

Acesso Device Nativo Web Apps Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Parcial ? Sussa Não Sim

App Híbrida?

5 Web x Nativo x Híbrido

Acesso Device Nativo Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Apps Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim

Acesso Device Nativo Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Apps Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* 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.”!

6 PhoneGap

•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 Desenvolva Teste Teste

Desenvolva Desenvolva Teste Teste Build Build

Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build

7 Trabalhando com Phonegap

UIWebView WebView HTML 5 CSS 3 JS Stores APIs JS

8 API

Acceleration 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);

Capturar Foto function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }

Capturar Foto com Edição function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }

Busca Foto do Dispositivo 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>

Compass/Bússula function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; ! function onError(error) { alert('CompassError: ' + error.code); }; ! navigator.compass.getCurrentHeading(onSuccess, onError);

Conexão 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();

Propriedades do Dispositivo 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 />'; }

In App Browser 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); });

Notification - Alert navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName );

Notification - Confirm function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); }

Notification - Beep // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Não funciona no iOS

Notification - Vibrar // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); }

Demo

9 UI Frameworks

jQT

Contatos 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!'); }

Touch

Workflow de Desenvolvimento

Store Mock Up Desenvolvimento Testes Dispositivo Simulação

M O C K U P

Resultado

Emuladores

R I P P L E

Ferramentas de Debug

iWebInspector

Weinre

10 Produção

XCode Eclipse build.phonegap.com

11 Plugins

Sussa*

SQLite nativo BarCode Scanner etc https://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGapSQLitePlugin-iOS

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

11 Quando não usar?

Threads

#FAIL

<div id="jogador">

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

12 Recomendações Antes de Começar

$99 anuais $25 $0 $19 - $99 anuais

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

Obrigada! http://loiane.com

Add a comment

Related presentations

Related pages

[Curso Phonegap / Cordova] Aula 01: Introdução ao ...

Mais infos: http://www.loiane.com/2014/02/curso-phonegap-cordova-aula-01-introducao-ao-phonegap/ Mais infos: ...
Read more

#1 Aula - Fazendo aplicativos com Jquery Mobile e Phonegap ...

#1 Aula - Fazendo aplicativos com Jquery Mobile e Phonegap ... [Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap - Duration: 1:02:30.
Read more

[Curso Phonegap / Cordova] Aula 01: Introdução ao ...

[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap. Olá pessoal, Vídeo/Screencast de hoje: primeira aula do curso de phonegap /cordova aqui do ...
Read more

#01 – Introdução | Loiane.training

Na aula de hoje vamos ver uma introdução e ver o que podemos e o que não podemos fazer com phonegap. ... Aula 01: Introdução ao Phonegap from Loiane ...
Read more

Curso de Introdução ao PhoneGap

Introdução ao PhoneGap Este curso faz parte da Série Programando para Mobile Sobre o curso Tire sua dúvida. ... Introdução ao WebSQL Assistir aula. 22
Read more

Download Curso Phonegap | AZ Cursos Download

... AULA 01: INTRODUçãO AO PHONEGAP. App download review and game - precio y descargar Mais infos: http://www.loiane.com/2014/02/curso-phonegap-cordova ...
Read more

[Curso Phonegap / Cordova] Aula 01: Introdução ao ...

Aula 01: Introdução ao Phonegap by Loiane Groner ... Deyvison on Dual Boot no Galaxy S3 Olá Admin, será que poderias me ajudar, JÁ ESTOU FICANDO ...
Read more

Curso Completo Phonegap | AZ Cursos Download

... AULA 01: INTRODUçãO AO PHONEGAP. App download review and game - precio y descargar Mais infos: http://www.loiane.com/2014/02/curso-phonegap-cordova ...
Read more

[Curso de Sencha Touch 2] Aula01: Introdução ao Sencha ...

... Sencha Touch, Phonegap, cursos online, desenvolvimento e ... Introdução ao Sencha Touch 2. ... aula 01 do novo curso online gratuito aqui do ...
Read more