Native Cross-Platform-Apps mit Titanium Mobile und Alloy

© 2013 Mayflower GmbH

Thomas Steur I 25. Juni 2013

Native Cross-Platform-Appsmit Titanium Mobile und Alloy


Titanium MobileAblauf

‣ 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 Mayflower

‣ Piwik Mobile Developer

‣ Titanium Mobile Nutzer seit 4 Jahren

‣ Autor „Titanium Mobile - Multi Platform Apps mit JavaScript“


eBookTitanium 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...

PhoneGapauch...


Und was bringt es mir?

Was heisst Nativ?

Native Performance


Native UI-Widgets



UI-WidgetsEin nativer Dialog


UI-WidgetsWeitere UI-Widgets


UI-WidgetsAnpassbarkeit


ThemengruppeSo funktioniert‘s


Apache License V2

Lizenz

Titanium imVergleich



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


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


Titanium im VergleichWeb-Applikationen

Pro Titanium...

‣ Native UI-Widgets

‣ Bessere User-Experience

‣ Mehr Hardwarefunktionalitäten

‣ Native Performance

‣ Source-Code Verschlüsselung


Titanium im VergleichWeb-Applikationen

Aber...

‣ Höhere Einarbeitung

‣ Build-Time ist einiges länger

‣ Release-Management


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

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.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>


controllers/mywidget.jsAlloy - Controller

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

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


styles/mywidget.tssAlloy - Style

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

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

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


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;


models/user.jsAlloy - Model

exports.definition = { configuration : {

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

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

}, ...};


AlloyWidgets

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


Test & Release

Deployment


DeploymentTitanium Studio


DeploymentTitanium Studio

Android iOS


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

Titanium CLI


Logaufrufe, Crash Logs und interaktives Debugging

Debugging


DebuggingInteraktives Debugging


Wenn es mal wieder etwas mehr sein darf

Titanium erweitern


Daten speichern und abrufen

Arbeiten mit Daten


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.


Arbeiten mit DatenSQLite

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

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

Eine leichtgewichtige Datenbank.


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

https://api.github.com/events

https://api.github.com/events


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

Standortdienste


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}


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}


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


StandortdiensteKarten anzeigen

‣ Routen

‣ Annotationen

‣ Labels

‣ Hybridansicht

‣ Kartenansicht

‣ Luftbildansicht


Bilder, Fotos, Videos & Co

Medien


MedienBilder und Videos aufnehmen

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


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


MedienVideo abspielen

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

videoPlayer.start();


MedienAudio abspielen

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

audioStream.start();

http://example.com/music.mp3

http://example.com/music.mp3


Das Nutzerverhalten messen, um Ihre App zu optimieren.

Analytics


AnalyticsEin Beispiel

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

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


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)


RessourcenGetting started

‣ KitchenSink

‣ API-Referenz und Dokumentation

‣ Forum

https://github.com/appcelerator/KitchenSink

https://github.com/appcelerator/KitchenSink

http://docs.appcelerator.com/

http://docs.appcelerator.com/

http://developer.appcelerator.com/question/

http://developer.appcelerator.com/question/


Fragen?


Kontakt

Vielen Dank für Ihr Interesse!

Mayflower GmbH

Gneisenaustraße 10/1197074 Würzburg

[email protected].: +49 931 359 65 11 55

Thomas Steur

mailto:[email protected]

mailto:[email protected]

Native Cross-Platform-Apps mit Titanium Mobile und Alloy

Technology

Transcript of Native Cross-Platform-Apps mit Titanium Mobile und Alloy