Einführung in die App Entwicklung mit Hilfe von Appcelerator Titanium.

1. Marcel Pociot | ORT Interactive GmbH
App Entwicklung mit Appcelerator Titanium

2. Über mich
Marcel Pociot
!
Web-Entwickler ORT Interactive GmbH
Aktives „Titan“ Community Mitglied
!
Twitter
@marcelpociot
E-Mail
m.pociot@gmail.com

3. Wir brauchen eine App!

6. iOS 6 AndroidiOS 7 BB 10

7. Was erwartet der User?

8. Spotify - Blackberry
http://www.geeky-gadgets.com/wp-content/uploads/2011/10/spotify-blackberry.jpg

9. Spotify - iOS
http://www.digitaltrends.com/wp-content/uploads/2012/06/Spotify-Radio-iOSl.jpg

10. Spotify - Android

11. Develop Native*

12. Meistere alle Sprachen
• Objective-C
• Java
• C#
http://pixabay.com/de/ninja-mann-cartoon-schwert-krieger-149287/

14. Appcelerator Titanium
• > 500.000 Entwickler weltweit
• > 205 mio Geräte mit Titanium Apps
• iOS,Android, Blackberry,Windows Phone
(Beta)

15. ImVergleich
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[myButton setTitle:@"Hallo!" forState:UIControlStateNormal];
Button myButton = new Button( this );
myButton.setText(“Hallo!“);
JAVA
var myButton = Ti.UI.createButton({
title: “Hallo!“
});
Javascript / Titanium API
Objective-C

16. Funktionsweise
JS Code
UI API Phone API Module
JS Bridge (V8 / JavascriptCore)
ObjC Java
App

17. IDE - Titanium Studio
• kostenlos
• Eclipse / Aptana basiert
• Integrierter Debugger

18. Eclipse?!?
• IDE / Editor frei wählbar
• Titanium CLI

19. Titanium API
Titanium.UI.createWindow()
Titanium.UI.createView()
Ti.Database.open(…)
Ti.App.Properties.setString
Ti.Calendar.getCalendarById
…
Angesprochen über das Objekt „Ti“ oder „Titanium“

20. Titanium API - Zugriff
•Lokalisierung
•Karten
•GPS
•Gyroskop
•SQLite Datenbank
•Dateisystem Zugriff
•Kamera
•Adressbuch
•…

21. Aufbau einer Titanium App

22. User Interface
var win = Ti.UI.createWindow({
backgroundColor: "white"
});
!
var button = Ti.UI.createButton({
title: "Hallo MTC 2014!"
});
button.addEventListener("click",function(e)
{
alert( L("Hallo“) );
});
win.add( button );
!
win.open();

23. User Interface
iOS 7 AndroidiOS 6 BB 10

24. http://www.flickr.com/photos/bitterjug/7670055210

25. User Interface
var detailWindow = Ti.UI.createWindow({
title: 'Informationen',
backgroundColor: '#EDEDED'
});
var detailView = Ti.UI.createScrollView({});
detailView.contentHeight = 0;
// icon
var icon = Ti.UI.createImageView({
image: appData.icon,
width: 57,
height: 57,
hires: true,
top: 5,
left: 5,
borderRadius: 5
});
detailView.add(icon);
5,
left: 10,
right: 10,
height: 'auto',
text: appData.description,
font: {fontSize: 15},
width:
(Ti.Platform.displayCaps.platformWidth-20)
});
detailView.add(description);
// title
var title = Ti.UI.createLabel({
text: appData.title,
top: 5,
left: 70,
height: 50,
width: 200,
font: {fontSize: 16, fontWeight: 'bold'}
});
detailView.add(title);
var publisher = Ti.UI.createLabel({
text: appData.publisher,
top: 40,
left: 70,
height: 20,
color: '#666',
font: {fontSize: 12, fontWeight: 'bold'}
});
detailView.add(publisher);
// Version
var version = Ti.UI.createLabel({
text: 'Version '+appData.version,
top: 55,
left: 70,
height: 20,
color: '#666',
font: {fontSize: 12, fontWeight: 'bold'}
});

26. •Aufteilung in wiederverwendbare Module
•Sauberer Code
•Integriertes Speichermanagement
CommonJS

27. CommonJS
exports.sayHello = function(name) {
Ti.API.info('Howdy '+name+'!');
};
var myModule = require('MyModule');
myModule.sayHello('Marcel');
//console output is "Howdy Marcel!"

28. MVC

29. Alloy MVC

30. Aufbau einer Alloy App
Plattform abhängige Assets
Applikations-Logik
CSS ähnliche Syntax
XMLViews

31. XMLViews
<Alloy>
<Window>
<Button platform="android" onClick="pressButton">Android Press me</Button>
<Button platform="ios" onClick="pressButton">iOS Press me</Button>
<Button platform="blackberry" onClick="pressButton">BB10 Press me</Button>
<View top="75%" backgroundColor="red">
<TextArea width="90%" height="90%" value="lorem ipsum"></TextArea>
</View>
</Window>
</Alloy>

32. User Interface
iOS 7 Android BB 10

33. Controller
function pressButton(e) {
if (OS_IOS)
{
alert( L("Hallo iOS") );
} else {
alert( L("Hallo") );
}
}
!
$.index.open();

34. Styles
".container": {
backgroundColor: "white"
},
"Label": {
color: "red"
},
"#customLabel": {
color: "black"
}

35. Styles - Flexibilität
".container[platform=android]": {
backgroundColor: "white"
},
".container[formfactor=handheld]": {
color: "red"
},
".container[formfactor=tablet]": {
color: Alloy.CFG.myValue
}

36. Models
var session = Alloy.createModel('session', {
title: 'App Entwicklung mit Titanium',
speaker: 'Marcel Pociot'
});
var title = session.get('title');
var speaker = session.get('speaker');
// Ausgabe in der View
$.label.text = title + ' von ' + speaker;

37. Was Alloy daraus macht
function pressButton() {
alert("Hallo!");
var newWindow = Alloy.createController("secondWindow", {}).getView();
newWindow.open();
}
require("alloy/controllers/BaseController").apply(this,
Array.prototype.slice.call(arguments));
this.__controllerPath = "index";
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({
backgroundColor: "white",
id: "index"
});
$.__views.index && $.addTopLevelView($.__views.index);
$.__views.__alloyId3 = Ti.UI.createButton({
title: "BB10 Press me",
id: "__alloyId3"
});
$.__views.index.add($.__views.__alloyId3);

38. Weitere Alloy Features
•Underscore-JS Integration
•„Widget“ Support

39. Und die Performance?
•Guter Javascript-Code
•Lasst den Global Scope in Ruhe
•Titanium kann kein Multithreading

40. Titanium erweitern

41. Marketplace
• Moderiert
• Kommerzielle
Module
• Open Source
Module
• Themes
• Widgets

42. gitt.io
• Community Projekt
• Ausschließlich Open
Source Module
• Suchmaschine für Github
• Commandline Tool zur
Installation

43. titaniumcontrols.com
• Community Projekt
• UI Elemente
• Handverlesene
Module
• cocoacontrols als
Inspiration

44. Titanium selber erweitern

45. Wozu?
•Zugriff auf nicht abgedeckte OS Features
•Bestehende Libraries in Titanium nutzen
•Kritische Bereiche der App anpassen
•Das Core Framework erweitern /
verbessern

46. Und wie?
•Titanium Framework von Github forken
•Unflexibel
•Kann sinnvoll sein für Core Änderungen
!
•Ein natives Modul durch das Titanium SDK
•Sehr flexibel
•Am besten zur Distribution

47. Beispiele für Ti-Module
•Barcode Scanner
•ZIP / UnZIP Modul
•Drawer Menüs
•Social Sharing

48. Appcelerator Cloud
Services
http://www.flickr.com/photos/nirak/644335254/

49. ACS Features
•Mobile Backend as a Service
•Viele fertige Schnittstellen
•User, Fotos, Push, …
•Speichern von eigenen Objekten
•Titanium Integration

50. ACS Limitierung
•250.000 API Calls am Tag
•5.000.000 API Calls im Monat
•20 GB Speicherplatz
!
•Perfekt für kleinere Anwendungen

51. Fazit
•Sehr schnelles Crossplatform Prototyping
•Gutes Ökosystem
•Super Einstieg für Leute mit Web-Hintergrund
!
•Anpassungen am Core sind aufwändig
•Performance kann ein Problem werden

52. Fragen?