Native Cross-Platform-Apps mit Titanium Mobile und Alloy
-
Upload
mayflower-gmbh -
Category
Technology
-
view
1.632 -
download
0
description
Transcript of 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
© 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
[email protected].: +49 931 359 65 11 55
Thomas Steur