Dank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das Besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse.

1. © 2013 Mayflower GmbH
Thomas Steur I 25. Juni 2013
Native Cross-Platform-Apps
mit Titanium Mobile und Alloy

2. © 2013 Mayflower GmbH
Titanium Mobile
Ablauf
‣ Was ist Titanium?
‣ Unterschied zu anderen Technologien
‣ Beispiel-Applikation
‣ Alloy-Framework
‣ Deployment
‣ Debugging
‣ Titanium API‘s
‣ Fragen

3. © 2013 Mayflower GmbH
Vorstellung
@tsteur
‣ Apple / Google / Mobile Fanboy
‣ Senior Developer bei Mayflower
‣ Piwik Mobile Developer
‣ Titanium Mobile Nutzer
seit 4 Jahren
‣ Autor „Titanium Mobile -
Multi Platform Apps mit JavaScript“

4. © 2013 Mayflower GmbH
eBook
Titanium Mobile
‣ Via Kindle, iTunes & Co
‣ Perfekt für den Einstieg

5. Wer kennt
Titanium Mobile?
© 2013 Mayflower GmbH
Oder hat sich schon einmal darüber informiert...

6. Wer verwendet
Titanium Mobile?
© 2013 Mayflower GmbH
Oder hat es schon einmal versucht...

7. Was ist
Titanium Mobile?
© 2013 Mayflower GmbH
Und warum könnte es überhaupt interessant sein?

8. © 2013 Mayflower GmbH
Apps mit JavaScript
Cross-Platform

9. © 2013 Mayflower GmbH
Geht doch schon lange...
Schon mal was von
Browser gehört?

10. © 2013 Mayflower GmbH
Nativ!
Der Unterschied... Titanium ist... - wait for it -

11. © 2013 Mayflower GmbH
Aber das ist doch...
PhoneGap
auch...

12. © 2013 Mayflower GmbH
Und was bringt es mir?
Was heisst Nativ?

13. Native
Performance
© 2013 Mayflower GmbH

14. Native
UI-Widgets
© 2013 Mayflower GmbH

15. © 2013 Mayflower GmbH
UI-Widgets
Ein nativer Dialog

16. © 2013 Mayflower GmbH
UI-Widgets
Weitere UI-Widgets

17. © 2013 Mayflower GmbH
UI-Widgets
Anpassbarkeit

18. © 2013 Mayflower GmbH
Themengruppe
So funktioniert‘s

19. © 2013 Mayflower GmbH
Apache License V2
Lizenz

20. Titanium im
Vergleich
© 2013 Mayflower GmbH

21. © 2013 Mayflower GmbH
Titanium im Vergleich
Native App-Entwicklung
Pro Titanium...
‣ Sie entwickeln Ihre Apps nicht für jede Plattform neu
‣ App läuft auf allen Plattformversionen
‣ Lediglich JavaScript-Kenntnisse nötig
‣ Schnellere Entwicklung
‣ Kann $$$ sparen

22. © 2013 Mayflower GmbH
Titanium im Vergleich
Native App-Entwicklung
Aber...
‣ "Write once, run anywhere" stimmt nur zu ca. 90%
‣ Viele, aber nicht alle nativen API‘s verwendbar
‣ Weniger Flexibilität
‣ Nicht die volle Kontrolle

23. © 2013 Mayflower GmbH
Titanium im Vergleich
Web-Applikationen
Pro Titanium...
‣ Native UI-Widgets
‣ Bessere User-Experience
‣ Mehr Hardwarefunktionalitäten
‣ Native Performance
‣ Source-Code Verschlüsselung

24. © 2013 Mayflower GmbH
Titanium im Vergleich
Web-Applikationen
Aber...
‣ Höhere Einarbeitung
‣ Build-Time ist einiges länger
‣ Release-Management

25. © 2013 Mayflower GmbH
Titanium kann nativ und Web! Warum nicht von allem profitieren?
Was nun?

26. © 2013 Mayflower GmbH
Veranstaltungen in Berlin
Beispiel

27. © 2013 Mayflower GmbH
var window = Ti.UI.createWindow({
title: "Veranstaltungen in Berlin"
});
window.open();
var table = Ti.UI.createTableView();
if ("iphone" == Ti.Platform.osname) {
table.style =
Ti.UI.iPhone.TableViewStyle.GROUPED;
}
window.add(table);

28. © 2013 Mayflower GmbH
var query = 'select * from upcoming.venue
where location="berlin"';
Ti.Yahoo.yql(query, displayVenues);
function displayVenues(result) {
result.venue.forEach(function (venue) {
table.appendRow({
title: venue.name,
hasChild: true,
venue: venue});
});
}

29. © 2013 Mayflower GmbH
table.addEventListener('click', select);
function select (event) {
var detailWin = require('eventdetail');
detailWin.open(event.row.venue);
}

30. © 2013 Mayflower GmbH
var win1 = Ti.UI.createWindow({title: venue.name});
var win2 = Ti.UI.createWindow({title: venue.name});
var tab1 = Ti.UI.createTab({
title: "Webseite",
icon: "web.png",
window: win1
});
var tab2 = Ti.UI.createTab({
title: "Karte",
icon: "karte.png",
window: win2
});
var tabGroup = Ti.UI.createTabGroup({
tabs: [tab1, tab2]
});
tabGroup.open();
Die Detailansicht

31. © 2013 Mayflower GmbH
var website = Ti.UI.createWebView({
url: venue.url
});
win1.add(website);
Die Webseitenansicht

32. © 2013 Mayflower GmbH
var mapview = Ti.Map.createView();
mapview.addAnnotation({
latitude: venue.latitude,
longitude: venue.longitude,
title: venue.name,
subtitle: venue.address
});
win2.add(mapview);
Die Kartenansicht

33. © 2013 Mayflower GmbH
MVC-Framework für Titanium
Alloy

34. © 2013 Mayflower GmbH
views/mywidget.xml
Alloy - View
<Alloy>
<Window id="foo">
<Label platform="ios,mobileweb" formFactor="tablet"
class="text">Label Text</Label>
<Button title="Hello World"
onClick="helloworld"/>
</Window>
</Alloy>

35. © 2013 Mayflower GmbH
controllers/mywidget.js
Alloy - Controller
function helloworld() {
alert('Hallo Welt');
}
// Öffne das Fenster
$.foo.open();

36. © 2013 Mayflower GmbH
styles/mywidget.tss
Alloy - Style
"#foo": {
title: L("Hello World"),
backgroundColor: "white"
}
".text": {
color: "red",
font: {fontSize: 24}
}
"Button[formFactor=tablet]": {
backgroundColor: "red"
}

37. © 2013 Mayflower GmbH
Oder was Alloy daraus macht
Ohne Alloy...
if (true && !
Alloy.isTablet) {
$.__views.__alloyId0 =
Ti.UI.createLabel({
color: "red",
font: {fontSize: 24},
text: "Label Text",
id: "__alloyId0"
});
$.__views.index.add($._
_views.__alloyId0);
}
$.__views.myButtonID =
Ti.UI.createButton({
backgroundColor:
"red",
id: "myButtonID",
title: "Hello World"
});
$.__views.index.add($._
_views.myButtonID);
function Controller() {
function helloworld() {
alert("Hello World");
}
require("alloy/controllers/
BaseController").apply(this,
Array.prototype.slice.call(argu
ments));
arguments[0] ? arguments[0]
["__parentSymbol"] : null;
arguments[0] ? arguments[0]
["$model"] : null;
arguments[0] ? arguments[0]
["__itemTemplate"] : null;
var $ = this;
var exports = {};
var __defers = {};
$.__views.index =
Ti.UI.createWindow({
title: "Hello World",
backgroundColor:
"white",
id: "index"
});
$.__views.index &&
$.addTopLevelView($.__views.ind
ex);
$.__views.myButtonID.addEven
tListener("click",
helloworld) :
__defers["$.__views.myButton
ID!click!helloworld"] =
true;
exports.destroy =
function() {};
_.extend($, $.__views);
exports.open = function() {
$.index.open();
};
__defers["$.__views.myButton
ID!click!helloworld"] &&
$.__views.myButtonID.addEven
tListener("click",
helloworld);
_.extend($, exports);
}
var Alloy =
require("alloy"), Backbone =
Alloy.Backbone, _ = Alloy._;
module.exports = Controller;

38. © 2013 Mayflower GmbH
models/user.js
Alloy - Model
exports.definition = {
configuration : {
columns: {
username:"string",
password:"string"
},
adapter: {
type: "sql",
collection_name: "user"
},
},
...
};

39. © 2013 Mayflower GmbH
Alloy
Widgets
<Require type="widget"
src="com.appcelerator.bouncylogo"
id="logo" />

40. © 2013 Mayflower GmbH
Test & Release
Deployment

41. © 2013 Mayflower GmbH
Deployment
Titanium Studio

42. © 2013 Mayflower GmbH
Deployment
Titanium Studio

43. © 2013 Mayflower GmbH
Deployment
Titanium Studio

44. © 2013 Mayflower GmbH
Deployment
Titanium Studio
Android iOS

45. © 2013 Mayflower GmbH
titanium build --platform ios --device-family ipad --target simulator
Titanium CLI

46. © 2013 Mayflower GmbH
Logaufrufe, Crash Logs und interaktives Debugging
Debugging

47. © 2013 Mayflower GmbH
Debugging
Interaktives Debugging

48. © 2013 Mayflower GmbH
Wenn es mal wieder etwas mehr sein darf
Titanium erweitern

49. © 2013 Mayflower GmbH
Daten speichern und abrufen
Arbeiten mit Daten

50. © 2013 Mayflower GmbH
Arbeiten mit Daten
Application Properties
var key = "sound_enabled";
if (!Ti.App.Properties.hasProperty(key)) {
Ti.App.Properties.setBool(key, true);
}
var soundEnabled = Ti.App.Properties.getBool(key)
Ein Key/Value-Store für App-bezogene Eigenschaften.

51. © 2013 Mayflower GmbH
Arbeiten mit Daten
SQLite
var db = Ti.Database.install("/user.db", "userDB");
var resultSet = db.execute("SELECT * FROM user");
Eine leichtgewichtige Datenbank.

52. © 2013 Mayflower GmbH
Arbeiten mit Daten
HTTP Requests
var xhr = Ti.Network.createHTTPClient({
onload: onSuccess,
onerror: onError,
timeout: 5000
});
xhr.open("GET", "https://api.github.com/events");
xhr.send();
Mit Webservices kommunizieren

53. © 2013 Mayflower GmbH
Kontextbewusstsein, das Erspüren der aktuellen Situation eines
Benutzers und die Reaktion darauf
Standortdienste

54. © 2013 Mayflower GmbH
Standortdienste
Geolocation
// Einmalige Abfrage der Position
Ti.Geolocation.getCurrentPosition(callback);
// Verfolgen der Position
Ti.Geolocation.addEventListener("location", callback);
function callback(event) {
// Genauigkeit in Meter, Höhe in Meter
// Breitengrad / Längengrad
// Aktuelle Geschwindigkeit und mehr
}

55. © 2013 Mayflower GmbH
Standortdienste
Kompass
// Einmalige Abfrage der Richtung
Ti.Geolocation.getCurrentHeading(callback);
// Verfolgen der Richtung
Ti.Geolocation.addEventListener("heading", callback);
function callback(event) {
// Genauigkeit in plattformspezifischer Einheit
// Deklination in Grad östlich vom
magnetischen und geografischen Norden
// Geomagnetische Daten (X / Y / Z) und mehr
}

56. © 2013 Mayflower GmbH
Standortdienste
Karten anzeigen
var mapView = Ti.Map.createView({
userLocation: true,
mapType: Ti.Map.STANDARD_TYPE,
region: {latitude: 49.417108,
longitude: 11.114382,
latitudeDelta: 0.35,
longitudeDelta: 0.80}
});
win.add(mapView);

57. © 2013 Mayflower GmbH
Standortdienste
Karten anzeigen
‣ Routen
‣ Annotationen
‣ Labels
‣ Hybridansicht
‣ Kartenansicht
‣ Luftbildansicht

58. © 2013 Mayflower GmbH
Bilder, Fotos, Videos & Co
Medien

59. © 2013 Mayflower GmbH
Medien
Bilder und Videos aufnehmen
Ti.Media.showCamera({
success: onSuccess,
cancel: onCancel,
error: onError,
saveToPhotoGallery: true,
allowEditing: true
});

60. © 2013 Mayflower GmbH
Medien
Ton aufnehmen
var recorder = Ti.Media.createAudioRecorder({
compression: Ti.Media.AUDIO_FORMAT_AAC,
format: Ti.Media.AUDIO_FILEFORMAT_MP3
});
recorder.start();
var file = recorder.stop();

61. © 2013 Mayflower GmbH
Medien
Video abspielen
var videoPlayer = Ti.Media.createVideoPlayer({
url: "bigBuckBunny.m4v"
});
videoPlayer.start();

62. © 2013 Mayflower GmbH
Medien
Audio abspielen
var audioStream = Ti.Media.createAudioPlayer({
url: "http://example.com/music.mp3"
});
audioStream.start();

63. © 2013 Mayflower GmbH
Das Nutzerverhalten messen, um Ihre App zu optimieren.
Analytics

64. © 2013 Mayflower GmbH
Analytics
Ein Beispiel
// Eine Navigation findet statt
Ti.Analytics.navEvent("Dashboard", "Accounts");
// Ein benutzerdefiniertes Event
Ti.Analytics.featureEvent(
"report.date.changed",
{period: "week"}
);

65. © 2013 Mayflower GmbH
Themengruppe
Weitere Funktionen
‣ Kontakte auslesen und schreiben
‣ Zugriff auf den Kalender (nur Android)
‣ Integration von Facebook Connect, Graph API und Dialoge
‣ Internationalisierung
‣ Accelerometer
‣ Gestures
‣ Animationen
‣ Accessibility-Hilfen
‣ Multitasking (Background Tasks)
‣ Viele Events, beispielsweise, wenn die App in den Hintergrund geht
‣ Auslesen von Systemdaten wie Batteriestatus, Gerätemodell und Betriebssystem
‣ Arbeiten mit XML, Streams und Binärdaten
‣ Androids Intents und Services
‣ Push Notifications und iAd (nur iOS)

66. © 2013 Mayflower GmbH
Ressourcen
Getting started
‣ KitchenSink
‣ API-Referenz und Dokumentation
‣ Forum

67. © 2013 Mayflower GmbH
Fragen?

68. © 2013 Mayflower GmbH
Kontakt
Vielen Dank für Ihr Interesse!
Mayflower GmbH
Gneisenaustraße 10/11
97074 Würzburg
thomas.steur@mayflower.de
Tel.: +49 931 359 65 11 55
Thomas Steur