MobileDevCamp2012 - Titanium Appcelerator

Mar co Livraghi
...............................
User eXperience Designer & Software Engineer
. . . . .

mobiledevcamp | Lecce |19 Maggio 2012

2 Marco Livraghi|User eXperience Designer & Software Engineer


Studi sul dispositivo



Prototipare...



Prototipare...
Prototipare...



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



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

14:15
Prototipazione
Paolo Buono - IVU Lab
Università degli Studi di Bari Aldo Moro


36
:-(
Marco Livraghi|User eXperience Designer & Software Engineer


Mobile

Desktop
Netbooks
Web Developers
Tablets
Titanium
Set-top Boxes
Users



Titanium

Mobile Desktop



JavaScript
Applica-on
Code

Titanium
Framework

Titanium
JavaScript
API

JS
JS

Interpreter
iOS

Interpreter
Android

Modules
Modules

Run-me
Run-me

iOS
SDK
Android
SDK



JavaScript
Applica-on
Code

Framework

Titanium
JavaScript
API

JS
JS

42 Interpreter
iOS

Interpreter

Marco Livraghi|User eXperience Designer & Software Engineer
Android


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



tiapp.xml

<?xml version=”1.0” encoding=”UTF-8”?>
<ti:app xmlns:ti=”http://ti.appcelerator.org”>
....
.... <iphone>
<deployment-targets> <orientations device=”iphone”>
<target device=”iphone”>true</target> <orientation>Ti.UI.PORTRAIT</orientation>
<target device=”ipad”>true</target> </orientations>
<target device=”android”>true</target> <orientations device=”ipad”>
<target device=”blackberry”>false</target> <orientation>Ti.UI.PORTRAIT</orientation>
</deployment-targets> <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
<sdk-version>2.0.1.v20120405211737</sdk-version> <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
<id>com.livraghi.prima_app</id> <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
<name>prima_app</name> </orientations>
<version>1.0</version> </iphone>
<publisher>marcolivraghi</publisher> <android xmlns:android=
<url>http://www.livraghi.com</url> ”http://schemas.android.com/apk/res/android”/>
<description>not specified</description> <modules>
<copyright>2012 by marcolivraghi</copyright> <module platform=”commonjs” version=”2.0.1”>
<icon>appicon.png</icon> ti.cloud
<persistent-wifi>false</persistent-wifi> </module>
<prerendered-icon>false</prerendered-icon> </modules>
<statusbar-style>default</statusbar-style> </ti:app>
<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>



tiapp.xml

....
.... <iphone>



Un primo esempio: App.js



Un secondo esempio: App.js

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



titanium studio



Appcelerator Titanium Docs 2.0



MEDIA API: CAMERA



MEDIA API: PHOTO GALLERY



GEOLOCATION API



ACCELEROMETER API



MAP API



FACEBOOK API



ESTENDERE LE API: Perché?




- Per accedere a specifiche funzionalità del OS,





- Sfruttare liberie native pre-esistenti,






- Ottimizzare parti critiche dell’app,






- Ottimizzare parti critiche dell’app,

- Estendere e migliorare porzioni del framework
Titanium Mobile


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.


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


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


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



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()


Struttura del Modulo



Open Mobile Market



Open Mobile Market: ForgetUI



Framework javascript...



1 - User management 9 -
Status updates
2 - Photos 10 -
Chat
3 - Photo collections 11 -
Ratings and reviews
4 - Places 12 -
Discussion forums
(rich location storage) 13 -
Messaging and email
5 - Social integration templates
6 - Custom data objects 14 - Client identification
7 - Push notifications 15 - Key values
8 - Check-ins


...


Apps Open Sorce: NYSenate




Android per smartphone:




iPad:




iPhone:


Riferimenti
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/nysenate
mobile SDK
iOS: http://developer.apple.com
Android: http://developer.android.com

User eXperience Designer & Software Engineer
marco@livraghi.com
www.livraghi.com

Fabrizio Martina
graphic designer
studiograficofm@mac.com

fotografo
massimo.cordella@alice.it


Q?


MobileDevCamp2012 - Titanium Appcelerator

Recomendados

Recomendados

Más contenido relacionado

Similar a MobileDevCamp2012 - Titanium Appcelerator

Similar a MobileDevCamp2012 - Titanium Appcelerator (20)

Último

Último (20)

MobileDevCamp2012 - Titanium Appcelerator