ardelean phone gap_wp4

39
PhoneGap/Cordova & Windows Phone Dan Ardelean [email protected]

Upload: dan-ardelean

Post on 06-May-2015

570 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Ardelean phone gap_wp4

PhoneGap/Cordova & Windows Phone

Dan [email protected]

Page 2: Ardelean phone gap_wp4

Sponsor

Page 3: Ardelean phone gap_wp4

Chi sono?

• Co-fondatore di Neologics –

sviluppo e consulting

• http://sviluppomobile.blogspot.it

/

• Twitter: @danardelean

Page 4: Ardelean phone gap_wp4

agenda

• Introduzione a PhoneGap/Cordova

• API per Windows Phone

• Plugins

• Tips and tricks Marketplace

Page 5: Ardelean phone gap_wp4

Perché usare PhoneGap

• Svilupare applicazioni cross-platform:

Windows Phone, iOS, Android, Bada

• Usare HTML5, Javascript e CSS3

Page 6: Ardelean phone gap_wp4

PhoneGap o Cordova?

• Cordova è il progetto Open Source

gestito da Apache Foundation

• PhoneGap è il «brand» comprato da

Adobe

• Cordova è per PhoneGap come WebKit è

per Chrome/Safari

Page 7: Ardelean phone gap_wp4

• Cordova non è una libreria per interfaccia utente

• Il livello di compatibilità HTML5/CSS3 varia da

piattaforma a piattaforma http://

www.mobilehtml5.org

• Cordova non è un compilatore – ogni piattaforma a

bisogno del suo compilatore

• Cordova non è un browser o un motore di rendering

Cordova non è:

Page 8: Ardelean phone gap_wp4

• Una piattaforma per creare applicazioni mobile native

usando tecnologie Web (HTML5, CSS 3)

• Una libreria Javascript

• Una libreria nativa per ogni piattaforma

• Compilation helpers

Cordova è:

Page 9: Ardelean phone gap_wp4

Cordova e Windows Phone

• JS ->Codice nativo• Javascript chiama

window.external.Notify(string)• Il codice C# ascolta per l’evento

ScriptNotify

• Codice nativo -> JS• this.WebBrowser.InvokeScript(scriptName,

string[] args);

Page 10: Ardelean phone gap_wp4

Applicazioni web nativeD

ata

Logic

Devic

eU

I

.web workers.touch events

.web storage.sql storage.indexeddb.web sockets

.file api

.contacts api

.canvas

.elements

.svg

.basic & adv

.transforms

.transitions

.animations

.notifications

.events

.geolocation

.motion

.multimedia

.accelerometer

.compass

.camera

.network info

.PhoneGap plugins

Page 11: Ardelean phone gap_wp4

Deploy

Page 12: Ardelean phone gap_wp4

• Windows Phone SDK

http://create.msdn.com

• PhoneGap/Cordova 1.6 .1

http://www.phonegap.com

• jQuery Mobile 1.1

http://www.jquerymobile.com

Iniziamo da zero

Page 13: Ardelean phone gap_wp4

demo

Hello Cordova

Page 14: Ardelean phone gap_wp4

Compatibilità

Page 15: Ardelean phone gap_wp4

• Metodi• accelerometer.getCurrentAcceleration• accelerometer.watchAcceleration• accelerometer.clearWatch

• Parametri• accelerometerSuccess• accelerometerError• accelerometerOptions

• Ogetti• acceleration : x, y, z, timestamp

Accelerometro

Page 16: Ardelean phone gap_wp4

demo

Accelerometro

Page 17: Ardelean phone gap_wp4

• Metodi• compass.getCurrentHeading• compass.watchHeading• compass.clearWatch

• Parametri• compassSuccess• compassError• compassOptions• compassHeading: magneticHeading,

trueHeading,headingAccuracy, timestamp

Compass

Page 18: Ardelean phone gap_wp4

• Metodi• geolocation.getCurrentPosition• geolocation.watchPosition• geolocation.clearWatch

• Parametri• geolocationSuccess• geolocationError• geolocationOptions

• Ogetti• Position• PositionError• Coordinates

Geolocalizzazione

Page 19: Ardelean phone gap_wp4

demo

Geolocalizzazione

Page 20: Ardelean phone gap_wp4

• Metodi• camera.getPicture• navigator.camera.getPicture(, [ cameraOptions ] );

• Parametri• cameraSuccess• cameraError• cameraOptions

• Oggetti• imageURI

Camera

Page 21: Ardelean phone gap_wp4

demo

Camera

Page 22: Ardelean phone gap_wp4

• Metodi• capture.captureAudio• capture.captureImage• capture.captureVideo• MediaFile.getFormatData

• Oggetti• Capture• CaptureAudioOptions• CaptureImageOptions• CaptureVideoOptions• CaptureCB• CaptureErrorCB• ConfigurationData• MediaFile• MediaFileData

Capture

Page 23: Ardelean phone gap_wp4

demo

Capture

Page 24: Ardelean phone gap_wp4

• Metodi• media.getCurrentPosition• media.getDuration• media.play• media.pause• media.release• media.seekTo• media.startRecord• media.stopRecord• media.stop

• Parametri• src -URI• mediaSuccess: (Optional) • mediaError: (Optional)• mediaStatus: (Optional)

Media

Page 25: Ardelean phone gap_wp4

demo

Media

Page 26: Ardelean phone gap_wp4

• Metodi• contacts.create• contacts.find

• Parametri• contactFields• contactSuccess• contactError• contactFindOptions

• Ogetti• Contact• ContactName• ContactField• ContactAddress• ContactOrganization• ContactFindOptions• ContactError

Contatti

Page 27: Ardelean phone gap_wp4

demo

Contatti

Page 28: Ardelean phone gap_wp4

• Proprietà• device.name• device.cordova• device.platform• device.uuid• device.version• connection.type

• Enum• Connection.UNKNOWN• Connection.ETHERNET• Connection.WIFI• Connection.CELL_2G• Connection.CELL_3G• Connection.CELL_4G• Connection.NONE

Device & Connection

Page 29: Ardelean phone gap_wp4

• deviceready

• pause

• resume

• online

• offline

• backbutton

• batterystatus – per Windows Phone solo isPlugged

Eventi

Page 30: Ardelean phone gap_wp4

• Metodi• notification.alert• notification.confirm• notification.beep• notification.vibrate

Notification

Page 31: Ardelean phone gap_wp4

demo

Notification

Page 32: Ardelean phone gap_wp4

Cordova Plugins

• Integrare altre funzionalità native• Live Tiles• Navigazione• Integrazione con Facebook tramite

ShareLinkTask and ShareLinkStatus• …

Page 33: Ardelean phone gap_wp4

demo

Live Tile Plugin

Page 34: Ardelean phone gap_wp4

• Per la pubblicazione sul

Marketplace partite dal

progetto custom di

PhoneGap togliendo le

funzionalità non usate

Tips and tricks Marketplace:

Page 35: Ardelean phone gap_wp4

• Se usate la geolocalizzazione

chiedete permesso al utente di usare

la sua posizione e spiegate come sarà

usata questa informazione.

• Inserire anche l’opzione per inibire

questa funzionalità

Tips and tricks Marketplace:

Page 36: Ardelean phone gap_wp4

• Fate attenzione al pulsante Back

Tips and tricks Marketplace:

Page 37: Ardelean phone gap_wp4

Anteprima v1.7 per Windows Phone

Page 38: Ardelean phone gap_wp4

Valutazione – Codice WP4

www.dotnetcampus.it/eval -> WP4

Page 39: Ardelean phone gap_wp4

• $(document).ready(function () { $

("#btnCall").click(function () { $.support.cors =

true; $.getJSON("http://baconipsum.com/api/?

type=meat-and-filler&callback=?", function

(data) { $.each(data, function (index, element) {

$("#result").append(element); }); }); }); });

Notification