SlideShare ist ein Scribd-Unternehmen logo
Marcel Pociot | ORT Interactive GmbH
App Entwicklung mit Appcelerator Titanium
Über mich
Marcel Pociot
!
Web-Entwickler ORT Interactive GmbH	

Aktives „Titan“ Community Mitglied	

!
Twitter 	

	

 @marcelpociot	

E-Mail 	

	

 m.pociot@gmail.com
Wir brauchen eine App!
iOS 6 AndroidiOS 7 BB 10
Was erwartet der User?
Spotify - Blackberry
http://www.geeky-gadgets.com/wp-content/uploads/2011/10/spotify-blackberry.jpg
Spotify - iOS
http://www.digitaltrends.com/wp-content/uploads/2012/06/Spotify-Radio-iOSl.jpg
Spotify - Android
Develop Native*
Meistere alle Sprachen
• Objective-C	

• Java	

• C#
http://pixabay.com/de/ninja-mann-cartoon-schwert-krieger-149287/
Appcelerator Titanium
• > 500.000 Entwickler weltweit	

• > 205 mio Geräte mit Titanium Apps	

• iOS,Android, Blackberry,Windows Phone
(Beta)
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
Funktionsweise
JS Code
UI API Phone API Module
JS Bridge (V8 / JavascriptCore)
ObjC Java
App
IDE - Titanium Studio
• kostenlos	

• Eclipse / Aptana basiert	

• Integrierter Debugger
Eclipse?!?
• IDE / Editor frei wählbar	

• Titanium CLI
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“
Titanium API - Zugriff
•Lokalisierung
•Karten
•GPS
•Gyroskop
•SQLite Datenbank
•Dateisystem Zugriff
•Kamera
•Adressbuch
•…
Aufbau einer Titanium App
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();
User Interface
iOS 7 AndroidiOS 6 BB 10
http://www.flickr.com/photos/bitterjug/7670055210
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'}
});
•Aufteilung in wiederverwendbare Module	

•Sauberer Code	

•Integriertes Speichermanagement
CommonJS
CommonJS
exports.sayHello = function(name) {
Ti.API.info('Howdy '+name+'!');
};
var myModule = require('MyModule');
myModule.sayHello('Marcel');
//console output is "Howdy Marcel!"
MVC
Alloy MVC
Aufbau einer Alloy App
Plattform abhängige Assets
Applikations-Logik
CSS ähnliche Syntax
XMLViews
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>
User Interface
iOS 7 Android BB 10
Controller
function pressButton(e) {	
	 	 if (OS_IOS)	
	 	 {	
	 	 	 alert( L("Hallo iOS") );	
	 	 } else {	
	 	 	 alert( L("Hallo") );	
	 	 }	
}	
!
$.index.open();
Styles
".container": {	
	 backgroundColor: "white"	
},	
"Label": {	
	 color: "red"	
},	
"#customLabel": { 	
color: "black"	
}
Styles - Flexibilität
".container[platform=android]": {	
	 backgroundColor: "white"	
},	
".container[formfactor=handheld]": {	
	 color: "red"	
},	
".container[formfactor=tablet]": {	
	 color: Alloy.CFG.myValue	
}
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;
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);
Weitere Alloy Features
•Underscore-JS Integration	

•„Widget“ Support
Und die Performance?
•Guter Javascript-Code	

•Lasst den Global Scope in Ruhe	

•Titanium kann kein Multithreading
Titanium erweitern
Marketplace
• Moderiert	

• Kommerzielle
Module	

• Open Source
Module	

• Themes	

• Widgets
gitt.io
• Community Projekt	

• Ausschließlich Open
Source Module	

• Suchmaschine für Github	

• Commandline Tool zur
Installation
titaniumcontrols.com
• Community Projekt	

• UI Elemente	

• Handverlesene
Module	

• cocoacontrols als
Inspiration
Titanium selber erweitern
Wozu?
•Zugriff auf nicht abgedeckte OS Features	

•Bestehende Libraries in Titanium nutzen	

•Kritische Bereiche der App anpassen	

•Das Core Framework erweitern /
verbessern
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
Beispiele für Ti-Module
•Barcode Scanner	

•ZIP / UnZIP Modul	

•Drawer Menüs	

•Social Sharing
Appcelerator Cloud
Services
http://www.flickr.com/photos/nirak/644335254/
ACS Features
•Mobile Backend as a Service	

•Viele fertige Schnittstellen	

•User, Fotos, Push, …	

•Speichern von eigenen Objekten	

•Titanium Integration
ACS Limitierung
•250.000 API Calls am Tag	

•5.000.000 API Calls im Monat	

•20 GB Speicherplatz	

!
•Perfekt für kleinere Anwendungen
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
Fragen?

Weitere ähnliche Inhalte

Andere mochten auch

Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
Eduardo Rodriguez
 
Growing your Business in a Down Economy
Growing your Business in a Down EconomyGrowing your Business in a Down Economy
Growing your Business in a Down Economy
Damon Henrichs
 
EBM ppt
EBM pptEBM ppt
EBM ppt
Yara Awad
 
Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
Eduardo Rodriguez
 
Module 7
Module 7Module 7
Module 7
Kunal Sheth
 
Profotech LLC
Profotech LLCProfotech LLC
Profotech LLC
PROFOTECH
 
Entamoeba histolytica
Entamoeba  histolyticaEntamoeba  histolytica
Entamoeba histolytica
Yara Awad
 
Peds ortho-anatomy
Peds ortho-anatomyPeds ortho-anatomy
Peds ortho-anatomy
Maralaa E
 
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOSESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
VERONICAVILLALOVOSGUALLI
 
Recession in India 2008
Recession in India 2008Recession in India 2008
Recession in India 2008
Saket Choudhary
 
Cemex case study
Cemex case studyCemex case study
Cemex case study
Peeyush Patil
 
Individual behavior-in-organization
Individual behavior-in-organizationIndividual behavior-in-organization
Individual behavior-in-organization
Kunal Sheth
 
Office Management
Office ManagementOffice Management
Office Management
Saket Choudhary
 

Andere mochten auch (13)

Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
 
Growing your Business in a Down Economy
Growing your Business in a Down EconomyGrowing your Business in a Down Economy
Growing your Business in a Down Economy
 
EBM ppt
EBM pptEBM ppt
EBM ppt
 
Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
 
Module 7
Module 7Module 7
Module 7
 
Profotech LLC
Profotech LLCProfotech LLC
Profotech LLC
 
Entamoeba histolytica
Entamoeba  histolyticaEntamoeba  histolytica
Entamoeba histolytica
 
Peds ortho-anatomy
Peds ortho-anatomyPeds ortho-anatomy
Peds ortho-anatomy
 
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOSESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
ESCUELA DE COMERCIO Y ADMINISTRACIÓN POR VERÓNICA VILLALOVOS
 
Recession in India 2008
Recession in India 2008Recession in India 2008
Recession in India 2008
 
Cemex case study
Cemex case studyCemex case study
Cemex case study
 
Individual behavior-in-organization
Individual behavior-in-organizationIndividual behavior-in-organization
Individual behavior-in-organization
 
Office Management
Office ManagementOffice Management
Office Management
 

Ähnlich wie App Entwicklung mit Appcelerator Titanium - MTC 2014

Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
Hands-on: Coding for Data-Journalism
Hands-on: Coding for Data-JournalismHands-on: Coding for Data-Journalism
Hands-on: Coding for Data-Journalism
Open Data Network
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Dokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte AkzeptanztestsDokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte Akzeptanztests
Sebastian Sanitz
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
Björn Wibben
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Peter Hecker
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Mayflower GmbH
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
Reto Zahner
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 

Ähnlich wie App Entwicklung mit Appcelerator Titanium - MTC 2014 (20)

Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
Hands-on: Coding for Data-Journalism
Hands-on: Coding for Data-JournalismHands-on: Coding for Data-Journalism
Hands-on: Coding for Data-Journalism
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Dokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte AkzeptanztestsDokumentation durch automatisierte Akzeptanztests
Dokumentation durch automatisierte Akzeptanztests
 
Mit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & AndroidMit jQTouch auf's iPhone & Android
Mit jQTouch auf's iPhone & Android
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Android Development
Android DevelopmentAndroid Development
Android Development
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und AlloyNative Cross-Platform-Apps mit Titanium Mobile und Alloy
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 

App Entwicklung mit Appcelerator Titanium - MTC 2014