Native Cross-Platform-Apps mit Titanium Mobile und Alloy

© 2013 Mayﬂower GmbH
Thomas Steur I 25. Juni 2013
Native Cross-Platform-Apps
mit Titanium Mobile und Alloy

Titanium Mobile
Ablauf
‣ Was ist Titanium?
‣ Unterschied zu anderen Technologien
‣ Beispiel-Applikation
‣ Alloy-Framework
‣ Deployment
‣ Debugging
‣ Titanium API‘s
‣ Fragen

Vorstellung
@tsteur
‣ Apple / Google / Mobile Fanboy
‣ Senior Developer bei Mayﬂower
‣ Piwik Mobile Developer
‣ Titanium Mobile Nutzer
seit 4 Jahren
‣ Autor „Titanium Mobile -
Multi Platform Apps mit JavaScript“

eBook
Titanium Mobile
‣ Via Kindle, iTunes & Co
‣ Perfekt für den Einstieg

Wer kennt
Titanium Mobile?
Oder hat sich schon einmal darüber informiert...

Wer verwendet
Titanium Mobile?
Oder hat es schon einmal versucht...

Was ist
Titanium Mobile?
Und warum könnte es überhaupt interessant sein?

Apps mit JavaScript
Cross-Platform

Geht doch schon lange...
Schon mal was von
Browser gehört?

Nativ!
Der Unterschied... Titanium ist... - wait for it -

Aber das ist doch...
PhoneGap
auch...

Und was bringt es mir?
Was heisst Nativ?

Native
Performance

Native
UI-Widgets

UI-Widgets
Ein nativer Dialog

UI-Widgets
Weitere UI-Widgets

UI-Widgets
Anpassbarkeit

Themengruppe
So funktioniert‘s

Apache License V2
Lizenz

Titanium im
Vergleich

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

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

Web-Applikationen
Pro Titanium...
‣ Native UI-Widgets
‣ Bessere User-Experience
‣ Mehr Hardwarefunktionalitäten
‣ Native Performance
‣ Source-Code Verschlüsselung

Web-Applikationen
Aber...
‣ Höhere Einarbeitung
‣ Build-Time ist einiges länger
‣ Release-Management

Titanium kann nativ und Web! Warum nicht von allem proﬁtieren?
Was nun?

Veranstaltungen in Berlin
Beispiel

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

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

var website = Ti.UI.createWebView({
url: venue.url
});
win1.add(website);
Die Webseitenansicht

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

MVC-Framework für Titanium
Alloy

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>

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

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

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;
["$model"] : null;
["__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;

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

Alloy
Widgets
<Require type="widget"
src="com.appcelerator.bouncylogo"
id="logo" />

Test & Release
Deployment

Deployment
Titanium Studio

Deployment
Titanium Studio
Android iOS

titanium build --platform ios --device-family ipad --target simulator
Titanium CLI

Logaufrufe, Crash Logs und interaktives Debugging
Debugging

Debugging
Interaktives Debugging

Wenn es mal wieder etwas mehr sein darf
Titanium erweitern

Daten speichern und abrufen
Arbeiten mit Daten

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.

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

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

Kontextbewusstsein, das Erspüren der aktuellen Situation eines
Benutzers und die Reaktion darauf
Standortdienste

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
}

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
}

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

Standortdienste
Karten anzeigen
‣ Routen
‣ Annotationen
‣ Labels
‣ Hybridansicht
‣ Kartenansicht
‣ Luftbildansicht

Bilder, Fotos, Videos & Co
Medien

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

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

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

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

Das Nutzerverhalten messen, um Ihre App zu optimieren.
Analytics

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

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 Notiﬁcations und iAd (nur iOS)

Ressourcen
Getting started
‣ KitchenSink
‣ API-Referenz und Dokumentation
‣ Forum

Fragen?

Kontakt
Vielen Dank für Ihr Interesse!
Mayﬂower GmbH
Gneisenaustraße 10/11
97074 Würzburg
thomas.steur@mayﬂower.de
Tel.: +49 931 359 65 11 55
Thomas Steur

Native Cross-Platform-Apps mit Titanium Mobile und Alloy

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie Native Cross-Platform-Apps mit Titanium Mobile und Alloy

Mehr von Mayflower GmbH

Native Cross-Platform-Apps mit Titanium Mobile und Alloy