• Save
MobileConf 2013: PhoneGap
Upcoming SlideShare
Loading in...5
×
 

MobileConf 2013: PhoneGap

on

  • 3,671 views

Slides da palestra sobre PhoneGap apresentada na MobileConf 2013 em Sao Paulo - 5/Abril/2013

Slides da palestra sobre PhoneGap apresentada na MobileConf 2013 em Sao Paulo - 5/Abril/2013

Statistics

Views

Total Views
3,671
Views on SlideShare
3,008
Embed Views
663

Actions

Likes
23
Downloads
0
Comments
1

5 Embeds 663

http://www.loiane.com 504
http://www.benjamim.net 132
https://twitter.com 24
http://smashingreader.com 2
http://feeds2.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Show... Pena nao ter acesso ao audio. Mas vendo os slides já deu uma noção que a palestra foi nota 10.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MobileConf 2013: PhoneGap MobileConf 2013: PhoneGap Presentation Transcript

    • PhoneGap:Desenvolvimento Mobile Multiplataforma Loiane Groner
    • Loiane GronerJava JUG LeaderSencha Community Leader 7+ XP TI Software ProjectManager @ Citibank http://loiane.com @loiane
    • Autora TécnicaInternacional
    • 1 Pq Mobile? PqMultiplataforma?
    • http://wearesocial.sg/blog/2013/04/social-brands-go-mobile-or-stand-still/
    • Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++Windows Phone C#
    • 2 HTML 5
    • 3 Web x Nativo
    • Acesso DeviceNativo SimWeb Parcial
    • Acesso Velocidade DeviceNativo Sim SimWeb Parcial ?
    • Acesso Tempo Velocidade Device DesenvolvimentoNativo Sim Sim CaroWeb Parcial ? Sussa
    • Acesso Tempo App Velocidade Device Desenvolvimento StoreNativo Sim Sim Caro SimWeb Parcial ? Sussa Não
    • Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim NãoWeb Parcial ? Sussa Não Sim
    • AppHíbrida?
    • 4 Web x Nativo x Híbrido
    • Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim
    • Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* Já vamos discutir
    • ?
    • Our biggest mistakewas betting too much on HTML5
    • In your face!
    • “So, when Mark Zuckerberg saidHTML5 wasnt ready, we took a littleoffense to the comment.”
    • 5 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 webkitbrowser•Plataforma mobileHTML 5 (wrapper)•Acesso Nativo
    • Phonegap é WORA?Write Once, Run Anywhere?
    • Write OnceDEBUG Anywhere
    • Desenvolva Desenvolva
    • Desenvolva Desenvolva Teste Teste
    • Desenvolva Desenvolva Teste Teste Build Build
    • {Desenvolva Desenvolva Desenvolva Híbrido Teste Teste Teste Build Build Build Build
    • 6Trabalhando com Phonegap
    • UIWebView WebViewHTML 5 CSS 3 Stores JS APIs JS
    • 7Gerando uma App
    • ./create ../../../AppNamecom.loiane.mobileConf AppName
    • 8 API
    • Accelerationfunction 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 Fotofunction capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }
    • Capturar Foto com Ediçãofunction capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,allowEdit: true, destinationType: destinationType.DATA_URL }); }
    • Busca Foto do Dispositivofunction 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ússulafunction onSuccess(heading) { alert(Heading: + heading.magneticHeading);};function onError(error) { alert(CompassError: + error.code);};navigator.compass.getCurrentHeading(onSuccess, onError);
    • Conexãofunction 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 Dispositivofunction 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 Browservar 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 - Alertnavigator.notification.alert( Alerta!, // message alertDismissed, // callback Titulo, // title Botão // buttonName);
    • Notification - Confirmfunction showConfirm() { navigator.notification.confirm( Confirmar?, // message onConfirm, // callback to invoke with index of button pressed Titulo, // title OK,Cancel // buttonLabels );}
    • Notification - Beep// Beepa 3 vezesfunction playBeep() { navigator.notification.beep(3);} Não funciona no iOS
    • Notification - Vibrar// Vibra por 2 segundosfunction vibrate() { navigator.notification.vibrate(2000);}
    • Demo
    • 9 UIFrameworks
    • jQT
    • Contatosfunction 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
    • Demo
    • Workflow deDesenvolvimento
    • Mock Up Store DispositivoDesenvolvimento Testes Simulação
    • MOCKUP
    • Resultado
    • Emuladores
    • RIPPLE
    • Ferramentas de Debug
    • iWebInspector
    • Weinre
    • 10 Produção
    • XCode Eclipsebuild.phonegap.com
    • 11 Plugins
    • Sussa*
    • SQLite nativo BarCode Scanner etchttps://github.com/phonegap/phonegap-plugins https://github.com/brodyspark/PhoneGap- SQLitePlugin-iOS
    • echo.jswindow.echo = function(str, callback) { cordova.exec(callback, function(err) { callback(Nothing to echo.); }, "Echo", "echo", [str]);};
    • config.xml<plugin name="Echo" value="org.apache.cordova.plugin.Echo" />
    • iOS
    • Diretório Plugins -Novo Arquivo Objective-C == Echo /********* Echo.h Cordova Plugin Header *******/ #import <Cordova/CDV.h> @interface Echo : CDVPlugin - (void)echo:(CDVInvokedUrlCommand*)command; @end
    • /********* Echo.m Cordova Plugin Implementation *******/#import "Echo.h"#import <Cordova/CDV.h>@implementation Echo- (void)echo:(CDVInvokedUrlCommand*)command{ CDVPluginResult* pluginResult = nil; NSString* echo = [command.arguments objectAtIndex:0]; if (echo != nil && [echo length] > 0) { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } else { pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR]; } [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];}@end
    • Android
    • src/org/apache/cordova/plugin/Echo.javapackage org.apache.cordova.plugin;import org.apache.cordova.api.CordovaPlugin;import org.apache.cordova.api.PluginResult;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;/** * This class echoes a string called from JavaScript. */public class Echo extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("echo")) { String message = args.getString(0); this.echo(message, callbackContext); return true; } return false; } private void echo(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } }}
    • Como Usarwindow.echo("echome", function(echoValue) { alert(echoValue == "echome"); // mostra alerta true.});
    • MelhoresPráticas
    • IssuesApp Store
    • Parece uma diferente App Aprenda a web desenvolver Parece para mobile, app iOS não web App Buttons, única Hyperlink iOS Human Interface Design Guidelines Eventos Touch, não WebAgregador de links Pinch, Zoom #fail App Intuitiva
    • Exemplos de Apps http://phonegap.com/app/
    • 8 Quando não usar?
    • Demo
    • https://github.com/loiane/ mobileConf2013http://slideshare.net/loianeg
    • http://loiane.com @loiane Obrig ada!