© 2013 Mayflower GmbHThomas Steur I 25. Juni 2013Native Cross-Platform-Appsmit Titanium Mobile und Alloy
© 2013 Mayflower GmbHTitanium MobileAblauf‣ Was ist Titanium?‣ Unterschied zu anderen Technologien‣ Beispiel-Applikation‣ A...
© 2013 Mayflower GmbHVorstellung@tsteur‣ Apple / Google / Mobile Fanboy‣ Senior Developer bei Mayflower‣ Piwik Mobile Develo...
© 2013 Mayflower GmbHeBookTitanium Mobile‣ Via Kindle, iTunes & Co‣ Perfekt für den Einstieg
Wer kenntTitanium Mobile?© 2013 Mayflower GmbHOder hat sich schon einmal darüber informiert...
Wer verwendetTitanium Mobile?© 2013 Mayflower GmbHOder hat es schon einmal versucht...
Was istTitanium Mobile?© 2013 Mayflower GmbHUnd warum könnte es überhaupt interessant sein?
© 2013 Mayflower GmbHApps mit JavaScriptCross-Platform
© 2013 Mayflower GmbHGeht doch schon lange...Schon mal was vonBrowser gehört?
© 2013 Mayflower GmbHNativ!Der Unterschied... Titanium ist... - wait for it -
© 2013 Mayflower GmbHAber das ist doch...PhoneGapauch...
© 2013 Mayflower GmbHUnd was bringt es mir?Was heisst Nativ?
NativePerformance© 2013 Mayflower GmbH
NativeUI-Widgets© 2013 Mayflower GmbH
© 2013 Mayflower GmbHUI-WidgetsEin nativer Dialog
© 2013 Mayflower GmbHUI-WidgetsWeitere UI-Widgets
© 2013 Mayflower GmbHUI-WidgetsAnpassbarkeit
© 2013 Mayflower GmbHThemengruppeSo funktioniert‘s
© 2013 Mayflower GmbHApache License V2Lizenz
Titanium imVergleich© 2013 Mayflower GmbH
© 2013 Mayflower GmbHTitanium im VergleichNative App-EntwicklungPro Titanium...‣ Sie entwickeln Ihre Apps nicht für jede Pl...
© 2013 Mayflower GmbHTitanium im VergleichNative App-EntwicklungAber...‣ "Write once, run anywhere" stimmt nur zu ca. 90%‣ ...
© 2013 Mayflower GmbHTitanium im VergleichWeb-ApplikationenPro Titanium...‣ Native UI-Widgets‣ Bessere User-Experience‣ Meh...
© 2013 Mayflower GmbHTitanium im VergleichWeb-ApplikationenAber...‣ Höhere Einarbeitung‣ Build-Time ist einiges länger‣ Rel...
© 2013 Mayflower GmbHTitanium kann nativ und Web! Warum nicht von allem profitieren?Was nun?
© 2013 Mayflower GmbHVeranstaltungen in BerlinBeispiel
© 2013 Mayflower GmbHvar window = Ti.UI.createWindow({  title: "Veranstaltungen in Berlin"});window.open();var table = Ti.U...
© 2013 Mayflower GmbHvar query = select * from upcoming.venuewhere location="berlin";Ti.Yahoo.yql(query, displayVenues);fun...
© 2013 Mayflower GmbHtable.addEventListener(click, select);function select (event) {var detailWin = require(eventdetail);de...
© 2013 Mayflower GmbHvar win1 = Ti.UI.createWindow({title: venue.name});var win2 = Ti.UI.createWindow({title: venue.name});...
© 2013 Mayflower GmbHvar website = Ti.UI.createWebView({url: venue.url});win1.add(website);Die Webseitenansicht
© 2013 Mayflower GmbHvar mapview = Ti.Map.createView();mapview.addAnnotation({latitude: venue.latitude,longitude: venue.lon...
© 2013 Mayflower GmbHMVC-Framework für TitaniumAlloy
© 2013 Mayflower GmbHviews/mywidget.xmlAlloy - View<Alloy><Window id="foo"><Label platform="ios,mobileweb" formFactor="tabl...
© 2013 Mayflower GmbHcontrollers/mywidget.jsAlloy - Controllerfunction helloworld() {alert(Hallo Welt);}// Öffne das Fenste...
© 2013 Mayflower GmbHstyles/mywidget.tssAlloy - Style"#foo": {title: L("Hello World"),backgroundColor: "white"}".text": {co...
© 2013 Mayflower GmbHOder was Alloy daraus machtOhne Alloy...if (true && !Alloy.isTablet) {$.__views.__alloyId0 =Ti.UI.crea...
© 2013 Mayflower GmbHmodels/user.jsAlloy - Modelexports.definition = {configuration : {columns: {username:"string",password...
© 2013 Mayflower GmbHAlloyWidgets<Require type="widget"src="com.appcelerator.bouncylogo"id="logo" />
© 2013 Mayflower GmbHTest & ReleaseDeployment
© 2013 Mayflower GmbHDeploymentTitanium Studio
© 2013 Mayflower GmbHDeploymentTitanium Studio
© 2013 Mayflower GmbHDeploymentTitanium Studio
© 2013 Mayflower GmbHDeploymentTitanium StudioAndroid iOS
© 2013 Mayflower GmbHtitanium build --platform ios --device-family ipad --target simulatorTitanium CLI
© 2013 Mayflower GmbHLogaufrufe, Crash Logs und interaktives DebuggingDebugging
© 2013 Mayflower GmbHDebuggingInteraktives Debugging
© 2013 Mayflower GmbHWenn es mal wieder etwas mehr sein darfTitanium erweitern
© 2013 Mayflower GmbHDaten speichern und abrufenArbeiten mit Daten
© 2013 Mayflower GmbHArbeiten mit DatenApplication Propertiesvar key = "sound_enabled";if (!Ti.App.Properties.hasProperty(k...
© 2013 Mayflower GmbHArbeiten mit DatenSQLitevar db = Ti.Database.install("/user.db", "userDB");var resultSet = db.execute(...
© 2013 Mayflower GmbHArbeiten mit DatenHTTP Requestsvar xhr = Ti.Network.createHTTPClient({onload: onSuccess,onerror: onErr...
© 2013 Mayflower GmbHKontextbewusstsein, das Erspüren der aktuellen Situation einesBenutzers und die Reaktion daraufStandor...
© 2013 Mayflower GmbHStandortdiensteGeolocation// Einmalige Abfrage der PositionTi.Geolocation.getCurrentPosition(callback)...
© 2013 Mayflower GmbHStandortdiensteKompass// Einmalige Abfrage der RichtungTi.Geolocation.getCurrentHeading(callback);// V...
© 2013 Mayflower GmbHStandortdiensteKarten anzeigenvar mapView = Ti.Map.createView({userLocation: true,mapType: Ti.Map.STAN...
© 2013 Mayflower GmbHStandortdiensteKarten anzeigen‣ Routen‣ Annotationen‣ Labels‣ Hybridansicht‣ Kartenansicht‣ Luftbildan...
© 2013 Mayflower GmbHBilder, Fotos, Videos & CoMedien
© 2013 Mayflower GmbHMedienBilder und Videos aufnehmenTi.Media.showCamera({success: onSuccess,cancel: onCancel,error: onErr...
© 2013 Mayflower GmbHMedienTon aufnehmenvar recorder = Ti.Media.createAudioRecorder({compression: Ti.Media.AUDIO_FORMAT_AAC...
© 2013 Mayflower GmbHMedienVideo abspielenvar videoPlayer = Ti.Media.createVideoPlayer({url: "bigBuckBunny.m4v"});videoPlay...
© 2013 Mayflower GmbHMedienAudio abspielenvar audioStream = Ti.Media.createAudioPlayer({url: "http://example.com/music.mp3"...
© 2013 Mayflower GmbHDas Nutzerverhalten messen, um Ihre App zu optimieren.Analytics
© 2013 Mayflower GmbHAnalyticsEin Beispiel// Eine Navigation findet stattTi.Analytics.navEvent("Dashboard", "Accounts");// ...
© 2013 Mayflower GmbHThemengruppeWeitere Funktionen‣ Kontakte auslesen und schreiben‣ Zugriff auf den Kalender (nur Android...
© 2013 Mayflower GmbHRessourcenGetting started‣ KitchenSink‣ API-Referenz und Dokumentation‣ Forum
© 2013 Mayflower GmbHFragen?
© 2013 Mayflower GmbHKontaktVielen Dank für Ihr Interesse!Mayflower GmbHGneisenaustraße 10/1197074 Würzburgthomas.steur@mayfl...
of 68

Native Cross-Platform-Apps mit Titanium Mobile und Alloy

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.
Published on: Mar 3, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Native Cross-Platform-Apps mit Titanium Mobile und Alloy

  • 1. © 2013 Mayflower GmbHThomas Steur I 25. Juni 2013Native Cross-Platform-Appsmit Titanium Mobile und Alloy
  • 2. © 2013 Mayflower GmbHTitanium MobileAblauf‣ Was ist Titanium?‣ Unterschied zu anderen Technologien‣ Beispiel-Applikation‣ Alloy-Framework‣ Deployment‣ Debugging‣ Titanium API‘s‣ Fragen
  • 3. © 2013 Mayflower GmbHVorstellung@tsteur‣ Apple / Google / Mobile Fanboy‣ Senior Developer bei Mayflower‣ Piwik Mobile Developer‣ Titanium Mobile Nutzerseit 4 Jahren‣ Autor „Titanium Mobile -Multi Platform Apps mit JavaScript“
  • 4. © 2013 Mayflower GmbHeBookTitanium Mobile‣ Via Kindle, iTunes & Co‣ Perfekt für den Einstieg
  • 5. Wer kenntTitanium Mobile?© 2013 Mayflower GmbHOder hat sich schon einmal darüber informiert...
  • 6. Wer verwendetTitanium Mobile?© 2013 Mayflower GmbHOder hat es schon einmal versucht...
  • 7. Was istTitanium Mobile?© 2013 Mayflower GmbHUnd warum könnte es überhaupt interessant sein?
  • 8. © 2013 Mayflower GmbHApps mit JavaScriptCross-Platform
  • 9. © 2013 Mayflower GmbHGeht doch schon lange...Schon mal was vonBrowser gehört?
  • 10. © 2013 Mayflower GmbHNativ!Der Unterschied... Titanium ist... - wait for it -
  • 11. © 2013 Mayflower GmbHAber das ist doch...PhoneGapauch...
  • 12. © 2013 Mayflower GmbHUnd was bringt es mir?Was heisst Nativ?
  • 13. NativePerformance© 2013 Mayflower GmbH
  • 14. NativeUI-Widgets© 2013 Mayflower GmbH
  • 15. © 2013 Mayflower GmbHUI-WidgetsEin nativer Dialog
  • 16. © 2013 Mayflower GmbHUI-WidgetsWeitere UI-Widgets
  • 17. © 2013 Mayflower GmbHUI-WidgetsAnpassbarkeit
  • 18. © 2013 Mayflower GmbHThemengruppeSo funktioniert‘s
  • 19. © 2013 Mayflower GmbHApache License V2Lizenz
  • 20. Titanium imVergleich© 2013 Mayflower GmbH
  • 21. © 2013 Mayflower GmbHTitanium im VergleichNative App-EntwicklungPro 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 GmbHTitanium im VergleichNative App-EntwicklungAber...‣ "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 GmbHTitanium im VergleichWeb-ApplikationenPro Titanium...‣ Native UI-Widgets‣ Bessere User-Experience‣ Mehr Hardwarefunktionalitäten‣ Native Performance‣ Source-Code Verschlüsselung
  • 24. © 2013 Mayflower GmbHTitanium im VergleichWeb-ApplikationenAber...‣ Höhere Einarbeitung‣ Build-Time ist einiges länger‣ Release-Management
  • 25. © 2013 Mayflower GmbHTitanium kann nativ und Web! Warum nicht von allem profitieren?Was nun?
  • 26. © 2013 Mayflower GmbHVeranstaltungen in BerlinBeispiel
  • 27. © 2013 Mayflower GmbHvar 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 GmbHvar query = select * from upcoming.venuewhere 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 GmbHtable.addEventListener(click, select);function select (event) {var detailWin = require(eventdetail);detailWin.open(event.row.venue);}
  • 30. © 2013 Mayflower GmbHvar 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 GmbHvar website = Ti.UI.createWebView({url: venue.url});win1.add(website);Die Webseitenansicht
  • 32. © 2013 Mayflower GmbHvar 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 GmbHMVC-Framework für TitaniumAlloy
  • 34. © 2013 Mayflower GmbHviews/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>
  • 35. © 2013 Mayflower GmbHcontrollers/mywidget.jsAlloy - Controllerfunction helloworld() {alert(Hallo Welt);}// Öffne das Fenster$.foo.open();
  • 36. © 2013 Mayflower GmbHstyles/mywidget.tssAlloy - Style"#foo": {title: L("Hello World"),backgroundColor: "white"}".text": {color: "red",font: {fontSize: 24}}"Button[formFactor=tablet]": {backgroundColor: "red"}
  • 37. © 2013 Mayflower GmbHOder 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;
  • 38. © 2013 Mayflower GmbHmodels/user.jsAlloy - Modelexports.definition = {configuration : {columns: {username:"string",password:"string"},adapter: {type: "sql",collection_name: "user"},},...};
  • 39. © 2013 Mayflower GmbHAlloyWidgets<Require type="widget"src="com.appcelerator.bouncylogo"id="logo" />
  • 40. © 2013 Mayflower GmbHTest & ReleaseDeployment
  • 41. © 2013 Mayflower GmbHDeploymentTitanium Studio
  • 42. © 2013 Mayflower GmbHDeploymentTitanium Studio
  • 43. © 2013 Mayflower GmbHDeploymentTitanium Studio
  • 44. © 2013 Mayflower GmbHDeploymentTitanium StudioAndroid iOS
  • 45. © 2013 Mayflower GmbHtitanium build --platform ios --device-family ipad --target simulatorTitanium CLI
  • 46. © 2013 Mayflower GmbHLogaufrufe, Crash Logs und interaktives DebuggingDebugging
  • 47. © 2013 Mayflower GmbHDebuggingInteraktives Debugging
  • 48. © 2013 Mayflower GmbHWenn es mal wieder etwas mehr sein darfTitanium erweitern
  • 49. © 2013 Mayflower GmbHDaten speichern und abrufenArbeiten mit Daten
  • 50. © 2013 Mayflower GmbHArbeiten mit DatenApplication Propertiesvar 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 GmbHArbeiten mit DatenSQLitevar db = Ti.Database.install("/user.db", "userDB");var resultSet = db.execute("SELECT * FROM user");Eine leichtgewichtige Datenbank.
  • 52. © 2013 Mayflower GmbHArbeiten mit DatenHTTP Requestsvar 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 GmbHKontextbewusstsein, das Erspüren der aktuellen Situation einesBenutzers und die Reaktion daraufStandortdienste
  • 54. © 2013 Mayflower GmbHStandortdiensteGeolocation// 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}
  • 55. © 2013 Mayflower GmbHStandortdiensteKompass// 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 vommagnetischen und geografischen Norden// Geomagnetische Daten (X / Y / Z) und mehr}
  • 56. © 2013 Mayflower GmbHStandortdiensteKarten anzeigenvar 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 GmbHStandortdiensteKarten anzeigen‣ Routen‣ Annotationen‣ Labels‣ Hybridansicht‣ Kartenansicht‣ Luftbildansicht
  • 58. © 2013 Mayflower GmbHBilder, Fotos, Videos & CoMedien
  • 59. © 2013 Mayflower GmbHMedienBilder und Videos aufnehmenTi.Media.showCamera({success: onSuccess,cancel: onCancel,error: onError,saveToPhotoGallery: true,allowEditing: true});
  • 60. © 2013 Mayflower GmbHMedienTon aufnehmenvar 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 GmbHMedienVideo abspielenvar videoPlayer = Ti.Media.createVideoPlayer({url: "bigBuckBunny.m4v"});videoPlayer.start();
  • 62. © 2013 Mayflower GmbHMedienAudio abspielenvar audioStream = Ti.Media.createAudioPlayer({url: "http://example.com/music.mp3"});audioStream.start();
  • 63. © 2013 Mayflower GmbHDas Nutzerverhalten messen, um Ihre App zu optimieren.Analytics
  • 64. © 2013 Mayflower GmbHAnalyticsEin Beispiel// Eine Navigation findet stattTi.Analytics.navEvent("Dashboard", "Accounts");// Ein benutzerdefiniertes EventTi.Analytics.featureEvent("report.date.changed",{period: "week"});
  • 65. © 2013 Mayflower GmbHThemengruppeWeitere 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 GmbHRessourcenGetting started‣ KitchenSink‣ API-Referenz und Dokumentation‣ Forum
  • 67. © 2013 Mayflower GmbHFragen?
  • 68. © 2013 Mayflower GmbHKontaktVielen Dank für Ihr Interesse!Mayflower GmbHGneisenaustraße 10/1197074 Würzburgthomas.steur@mayflower.deTel.: +49 931 359 65 11 55Thomas Steur

Related Documents