mobiledevcamp2012 livraghi appcelerator 19 maggio 2012

User eX Designer & Software Engineer

Marco LivraghiUser eXperience Designer & Software Engineer...............................

. . . . .

Marco Livraghi|User eXperience Designer & Software Engineer2

mobiledevcamp | Lecce |19 Maggio 2012



Studi sul dispositivo



Prototipare...



Prototipare...Prototipare...



Prototipare...Prototipare...Prototipare...



Prototipare...Prototipare...Prototipare...

14:15PrototipazionePaolo Buono - IVU LabUniversità degli Studi di Bari Aldo Moro



:-(



Web Developers

Desktop

Netbooks

Tablets

Set-top Boxes

Mobile

Titanium

Users

40


Marco Livraghi|User eXperience Designer & Software Engineer

Mobile Desktop

Titanium

41



JavaScript Applica-on Code

Titanium JavaScript API

Android Modules

iOS Modules

Android SDK iOS SDK

Titanium

Framew

ork

JS Interpreter

Run-me

JS Interpreter

Run-me

42



JavaScript Applica-on Code

Titanium JavaScript API

Android Modules

iOS Modules

Android SDK iOS SDK

Titanium

Framew

ork

JS Interpreter

Run-me

JS Interpreter

Run-me

43



44



45



46



47



manifest

#appname: prima_app#publisher: marcolivraghi#url: http://www.livraghi.com#image: appicon.png#appid: com.livraghi.prima_app#desc: undefined#type: ipad#guid: 09dd7e67-f94f-42a8-8f8e-6ab512da3b06

48



tiapp.xml

<iphone> <orientations device=”iphone”> <orientation>Ti.UI.PORTRAIT</orientation> </orientations> <orientations device=”ipad”> <orientation>Ti.UI.PORTRAIT</orientation> <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation> <orientation>Ti.UI.LANDSCAPE_LEFT</orientation> <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation> </orientations> </iphone> <android xmlns:android= ”http://schemas.android.com/apk/res/android”/> <modules> <module platform=”commonjs” version=”2.0.1”> ti.cloud </module> </modules></ti:app>

<?xml version=”1.0” encoding=”UTF-8”?><ti:app xmlns:ti=”http://ti.appcelerator.org”> .... .... <deployment-targets> <target device=”iphone”>true</target> <target device=”ipad”>true</target> <target device=”android”>true</target> <target device=”blackberry”>false</target> </deployment-targets> <sdk-version>2.0.1.v20120405211737</sdk-version> <id>com.livraghi.prima_app</id> <name>prima_app</name> <version>1.0</version> <publisher>marcolivraghi</publisher> <url>http://www.livraghi.com</url> <description>not specified</description> <copyright>2012 by marcolivraghi</copyright> <icon>appicon.png</icon> <persistent-wifi>false</persistent-wifi> <prerendered-icon>false</prerendered-icon> <statusbar-style>default</statusbar-style> <statusbar-hidden>false</statusbar-hidden> <fullscreen>false</fullscreen> <navbar-hidden>false</navbar-hidden> <analytics>true</analytics> <guid>09dd7e67-f94f-42a8-8f8e-6ab512da3b06</guid> <property name=”ti.ui.defaultunit”>system</property>

49



tiapp.xml



50



tiapp.xml



51



tiapp.xml



52



Un primo esempio: App.js

53




54




55




56



var win = Titanium.UI.createWindow({ title:’Hello’, backgroundColor:’#fff’});var label1 = Titanium.UI.createLabel({ color:’#333’, text:’Hello World!’, textAlign: ‘center’, font: {fontSize: 30, fontWeight: ‘bold’}});win.add(label1);

var bt = Titanium.UI.createButton({ title: ‘Click me’, width: 100, height: 40, bottom: 40});bt.addEventListener(‘click’, function(e) { label1.text = ‘OK!’;});

win.add(bt);win.open();

Un secondo esempio: App.js

57



titanium studio

57



titanium studio

58

59



60



Appcelerator Titanium Docs 2.0

61




62




63




64




65




66



MEDIA API: CAMERA

67



MEDIA API: PHOTO GALLERY

68



GEOLOCATION API

69



ACCELEROMETER API

70



MAP API

71



FACEBOOK API

72



FACEBOOK API

73



ESTENDERE LE API: Perché?

74




- Per accedere a specifiche funzionalità del OS,

75





- Sfruttare liberie native pre-esistenti,

76






- Ottimizzare parti critiche dell’app,

77






- Ottimizzare parti critiche dell’app,

- Estendere e migliorare porzioni del framework Titanium Mobile

78



ESTENDERE LE API: Come?

- Creando un fork sul sorce code di Titanium Mobile su github

PRO + Modifiche sostanziali al core del framework. CONTRO - Mantenere aggiornato un fork separato è costoso e noioso.

79



ESTENDERE LE API: Come?

- Creando uno o pìù moduli nativi tramite l’SDK Titanium Module.

PRO + Grande flessibilità + Semplice da distribuire come modulo open source, package precompilato e ... Appcelerator Ti+Plus Marketplace

80



Moduli nativi - alcuni esempi

- Android scanner di codici a barre (wrapper Zxing) https://github.com/mwaylabs/titanium-barcode- iOS ZipFile (creare/decomprimere file zip) https://github.com/TermiT/ZipFile- iOS TiStoreKit (acquisti in app) https://github.com/masuidrive/TiStoreKit- iOS TiSMSDialog (invio di sms dall’app) https://github.com/omorandi/TiSMSDialog- Appcelerator Titanium modules (esempi di moduli) https://github.com/appcelerator/titanium_modules

81



Titanium JS Interface: Esempio

var bt = Titanium.UI.createButton({ title: ‘Click me’, width: 100, height: 40, bottom: 40});bt.addEventListener(‘click’, function(e) { label1.text = ‘OK!’;});

82



Titanium JS Interface: Esempio

- Module Titanium.UI- Object Titanium.UI.Button- Object Factory Titanium.UI.createButton()- Property getters/setters - methods Button.title Button.width Button.animate() ecc...- Event handling Button.addEventListener()

83



Struttura del Modulo

84



Open Mobile Market

85



Open Mobile Market

86



Open Mobile Market

87



Open Mobile Market

88



Open Mobile Market

89



Open Mobile Market

90



Open Mobile Market: ForgetUI

91



Open Mobile Market: ForgetUI

92



93



94



Framework javascript...

95



1 - User management 2 - Photos 3 - Photo collections4 - Places (rich location storage)5 - Social integration6 - Custom data objects7 - Push notifications8 - Check-ins

9 - Status updates10 - Chat 11 - Ratings and reviews12 - Discussion forums13 - Messaging and email templates14 - Client identification15 - Key values

96



...

97



98



Apps Open Sorce: NYSenate

99




Android per smartphone:

100




iPad:

101




iPad:

102




iPad:

103




iPhone:



appcelerator: website: http://www.appcelerator.com github: https://github.com/appcelerator kitchen sink: http://github.com/appcelerator/ KitchenSink last builds: http://builds.appcelerator.com.s3.amazonaws.com/index.html

docs: http://docs.appcelerator.com cloud: http://cloud.appcelerator.com blog: http://developer.appcelerator.com/blog thinkmobile.appcelerator.com/blog showcase: http://www.builtwithtitanium.com nysenate: http://github.com/nysenatemobile SDK iOS: http://developer.apple.com Android: http://developer.android.com

Riferimenti

User eXperience Designer & Software [email protected]

graphic [email protected]

Fabrizio Martina

[email protected]



Q?