© 2013 Mayflower GmbH

Thomas Steur I 25. Juni 2013

Native Cross-Platform-Appsmit Titanium Mobile und Alloy

© 2013 Mayflower GmbH

Titanium MobileAblauf

‣ Was ist Titanium?

‣ Unterschied zu anderen Technologien

‣ Beispiel-Applikation

‣ Alloy-Framework

‣ Deployment

‣ Debugging

‣ Titanium API‘s

‣ Fragen

© 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“

© 2013 Mayflower GmbH

eBookTitanium Mobile

‣ Via Kindle, iTunes & Co

‣ Perfekt für den Einstieg

Wer kennt Titanium Mobile?

© 2013 Mayflower GmbH

Oder hat sich schon einmal darüber informiert...

Wer verwendet Titanium Mobile?

© 2013 Mayflower GmbH

Oder hat es schon einmal versucht...

Was ist Titanium Mobile?

© 2013 Mayflower GmbH

Und warum könnte es überhaupt interessant sein?

© 2013 Mayflower GmbH

Apps mit JavaScript

Cross-Platform

© 2013 Mayflower GmbH

Geht doch schon lange...

Schon mal was von Browser gehört?

© 2013 Mayflower GmbH

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

© 2013 Mayflower GmbH

Aber das ist doch...

PhoneGapauch...

© 2013 Mayflower GmbH

Und was bringt es mir?

Was heisst Nativ?

Native Performance

© 2013 Mayflower GmbH

Native UI-Widgets

© 2013 Mayflower GmbH

© 2013 Mayflower GmbH

UI-WidgetsEin nativer Dialog

© 2013 Mayflower GmbH

UI-WidgetsWeitere UI-Widgets

© 2013 Mayflower GmbH

UI-WidgetsAnpassbarkeit

© 2013 Mayflower GmbH

ThemengruppeSo funktioniert‘s

© 2013 Mayflower GmbH

Apache License V2

Lizenz

Titanium imVergleich

© 2013 Mayflower GmbH

© 2013 Mayflower GmbH

Titanium im VergleichNative 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

© 2013 Mayflower GmbH

Titanium im VergleichNative 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

© 2013 Mayflower GmbH

Titanium im VergleichWeb-Applikationen

Pro Titanium...

‣ Native UI-Widgets

‣ Bessere User-Experience

‣ Mehr Hardwarefunktionalitäten

‣ Native Performance

‣ Source-Code Verschlüsselung

© 2013 Mayflower GmbH

Titanium im VergleichWeb-Applikationen

Aber...

‣ Höhere Einarbeitung

‣ Build-Time ist einiges länger

‣ Release-Management

© 2013 Mayflower GmbH

Titanium kann nativ und Web! Warum nicht von allem profitieren?

Was nun?

© 2013 Mayflower GmbH

Veranstaltungen in Berlin

Beispiel

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

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

© 2013 Mayflower GmbH

table.addEventListener('click', select);

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

© 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

© 2013 Mayflower GmbH

var website = Ti.UI.createWebView({ url: venue.url});

win1.add(website);

Die Webseitenansicht

© 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

© 2013 Mayflower GmbH

MVC-Framework für Titanium

Alloy

© 2013 Mayflower GmbH

views/mywidget.xmlAlloy - View

<Alloy> <Window id="foo">

<Label platform="ios,mobileweb" formFactor="tablet" class="text">Label Text</Label>

<Button title="Hello World" onClick="helloworld"/>

</Window></Alloy>

© 2013 Mayflower GmbH

controllers/mywidget.jsAlloy - Controller

function helloworld() { alert('Hallo Welt');}

// Öffne das Fenster$.foo.open();

© 2013 Mayflower GmbH

styles/mywidget.tssAlloy - Style

"#foo": { title: L("Hello World"), backgroundColor: "white"}

".text": { color: "red", font: {fontSize: 24}}

"Button[formFactor=tablet]": { backgroundColor: "red"}

© 2013 Mayflower GmbH

Oder was Alloy daraus machtOhne 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(arguments)); 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.index);

$.__views.myButtonID.addEventListener("click", helloworld) : __defers["$.__views.myButtonID!click!helloworld"] = true; exports.destroy = function() {};

_.extend($, $.__views); exports.open = function() { $.index.open(); }; __defers["$.__views.myButtonID!click!helloworld"] && $.__views.myButtonID.addEventListener("click", helloworld); _.extend($, exports);}

var Alloy = require("alloy"), Backbone = Alloy.Backbone, _ = Alloy._;

module.exports = Controller;

© 2013 Mayflower GmbH

models/user.jsAlloy - Model

exports.definition = { configuration : {

columns: { username:"string", password:"string" },

adapter: { type: "sql", collection_name: "user" },

}, ...};

© 2013 Mayflower GmbH

AlloyWidgets

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

© 2013 Mayflower GmbH

Test & Release

Deployment

© 2013 Mayflower GmbH

DeploymentTitanium Studio

© 2013 Mayflower GmbH

DeploymentTitanium Studio

© 2013 Mayflower GmbH

DeploymentTitanium Studio

© 2013 Mayflower GmbH

DeploymentTitanium Studio

Android iOS

© 2013 Mayflower GmbH

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

Titanium CLI

© 2013 Mayflower GmbH

Logaufrufe, Crash Logs und interaktives Debugging

Debugging

© 2013 Mayflower GmbH

DebuggingInteraktives Debugging

© 2013 Mayflower GmbH

Wenn es mal wieder etwas mehr sein darf

Titanium erweitern

© 2013 Mayflower GmbH

Daten speichern und abrufen

Arbeiten mit Daten

© 2013 Mayflower GmbH

Arbeiten mit DatenApplication 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.

© 2013 Mayflower GmbH

Arbeiten mit DatenSQLite

var db = Ti.Database.install("/user.db", "userDB");

var resultSet = db.execute("SELECT * FROM user");

Eine leichtgewichtige Datenbank.

© 2013 Mayflower GmbH

Arbeiten mit DatenHTTP 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

© 2013 Mayflower GmbH

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

Standortdienste

© 2013 Mayflower GmbH

StandortdiensteGeolocation

// Einmalige Abfrage der PositionTi.Geolocation.getCurrentPosition(callback);

// Verfolgen der PositionTi.Geolocation.addEventListener("location", callback);

function callback(event) { // Genauigkeit in Meter, Höhe in Meter // Breitengrad / Längengrad // Aktuelle Geschwindigkeit und mehr}

© 2013 Mayflower GmbH

StandortdiensteKompass

// Einmalige Abfrage der RichtungTi.Geolocation.getCurrentHeading(callback);

// Verfolgen der RichtungTi.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}

© 2013 Mayflower GmbH

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

© 2013 Mayflower GmbH

StandortdiensteKarten anzeigen

‣ Routen

‣ Annotationen

‣ Labels

‣ Hybridansicht

‣ Kartenansicht

‣ Luftbildansicht

© 2013 Mayflower GmbH

Bilder, Fotos, Videos & Co

Medien

© 2013 Mayflower GmbH

MedienBilder und Videos aufnehmen

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

© 2013 Mayflower GmbH

MedienTon aufnehmen

var recorder = Ti.Media.createAudioRecorder({ compression: Ti.Media.AUDIO_FORMAT_AAC, format: Ti.Media.AUDIO_FILEFORMAT_MP3});

recorder.start();

var file = recorder.stop();

© 2013 Mayflower GmbH

MedienVideo abspielen

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

videoPlayer.start();

© 2013 Mayflower GmbH

MedienAudio abspielen

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

audioStream.start();

© 2013 Mayflower GmbH

Das Nutzerverhalten messen, um Ihre App zu optimieren.

Analytics

© 2013 Mayflower GmbH

AnalyticsEin Beispiel

// Eine Navigation findet stattTi.Analytics.navEvent("Dashboard", "Accounts");

// Ein benutzerdefiniertes EventTi.Analytics.featureEvent( "report.date.changed", {period: "week"});

© 2013 Mayflower GmbH

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

© 2013 Mayflower GmbH

RessourcenGetting started

‣ KitchenSink

‣ API-Referenz und Dokumentation

‣ Forum

© 2013 Mayflower GmbH

Fragen?

© 2013 Mayflower GmbH

Kontakt

Vielen Dank für Ihr Interesse!

Mayflower GmbH

Gneisenaustraße 10/1197074 Würzburg

thomas.steur@mayflower.deTel.: +49 931 359 65 11 55

Thomas Steur