Native Cross-Platform-Apps mit Titanium Mobile und Alloy

2,034 views

Published on

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 in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,034
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Native Cross-Platform-Apps mit Titanium Mobile und Alloy

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

×