Appcelerator Titanium – An open, extensible development environment for creating beautiful native apps across different mobile devices and OSs including iOS, Android, and BlackBerry, as well as hybrid and HTML5.

1. MONSOON TECH
2014
Sep 15, 17, 22, 24, 25

2. BUILDING NATIVE APPS
WITH
Titanium Mobile
Sep 15, 17, 22, 24, 25
By Dharshana Jayamaha
Monsoon Tech - 2014

3. Who am I?
Dharshana Jayamaha
me@geewantha.com
http://geewantha.com
http://github.com/dharshana
http://www.slideshare.net/DharshanaJayamaha
Monsoon Tech - 2014

4. Who’s Developed iPhone apps?
Monsoon Tech - 2014

5. Who’s Developed Android apps?
Monsoon Tech - 2014

6. Who’s Done JavaScript?
Monsoon Tech - 2014

7. What if you could create Fully Native
mobile apps using JavaScript?
Monsoon Tech - 2014

8. Titanium Mobile
Monsoon Tech - 2014

9. Titanium Mobile
iPhone – iPad – Android - **
Monsoon Tech - 2014

10. Titanium Mobile
iPhone – Android – Win - **
One Code base (Javascript)
Monsoon Tech - 2014
Android SDK
TITANIUM SDK
iOS SDK Win 8 SDK

11. Titanium Mobile
Monsoon Tech - 2014

12. Apps in days not Months
Monsoon Tech - 2014

13. Titanium Mobile APIs
• Accelerameter
• Analytics
• App
• Calendar
• Cloud
• Contacts
• Database
• Facebook
• Filesystem
• Geolocation
• Map
• Media
• Network
• Platform
• IOStream
• UI
• XML
• ….
Monsoon Tech - 2014

14. $(“#nic”).click(function(){
// Some Code
);
VS
$(“#nic").on("click",function(){
// Some Code
});
Monsoon Tech - 2014

15. Media API : CAMERA
Ti.Media.showCamera({
success: function(event){
// Captured image is returned as event.media
},
cancel: function(){
// User canceled taking a photo
},
error:function(){
// Problem taking a photo
},
saveToPhotoGallery : true,
allowEditing : false,
autohide : false, //Important!
});
https://github.com/dharshana/Titanium-Sample-Camara-script
Monsoon Tech - 2014

16. GEOLOCATION API
Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;
Ti.Geolocation.getCurrentPosition( function(e){
if(e.error){
Ti.API.error("Problem retriving location");
} else {
var coords = e.coords;
Ti.API.info("Latitude: "+ coords.latitude);
Ti.API.info("Longitude: "+ coords.longitude);
}
},function(){
Ti.API.error("Location is not enable");
});
Monsoon Tech - 2014

17. MAPS API
var mapView = Ti.Map.createView({
mapType : Ti.Map.STANDARD_TYPE,
region : {latitude:33.65, longitude: 84.42,
latitudeDelta:0.2, longitudeDelta:0.2},
animate : false,
regionFit : true,
userLocation : true,
anotations:[
{
latitude : 33.64,
longitude: 84.42,
title: “ABC”,
pincolor:
}
],
top : 0,
left : 0,
});
Monsoon Tech - 2014

18. Titanium Studio
Monsoon Tech - 2014

19. Basic App Structure
• myFirstApp/
• manifest
• tiapp.xml
• Resources/
• app.js
• android/
• Images/
• iphone/
• Images/
Monsoon Tech - 2014

20. app.js
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:'Tab 1', backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1,
});
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(label1);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();
Monsoon Tech - 2014

21. Should know
• px, % , dp , dpi
• Protect the global scope
• Mix of OO and Module pattern
• Keep code DRY (Don’t Repeat Your self)
• SQLight
• Manifest file
• Behaviors of mobile platforms
• Application Global property
Monsoon Tech - 2014

22. SQLight
• Open source
• Simple CRUD
• Support SQL syntax
• Light weight – 250Kbyte at runtime
• Text, Integer, Real, Blob
• NO Foreign key
• No Data validation
Monsoon Tech - 2014

23. Practical Session focus
• Crete a new App
• tiapp.xml
• Run it on emulator
• Handle device specific features
• UI interaction
• To do App
https://github.com/dharshana/Titanium-Monsoon-Tech-sample
Monsoon Tech - 2014

24. Device Specific Features
• Cross-platform !== ‘Write once, Run Everywhere’
• iOS apps look different than Android Apps
• Users wants their apps as platform norms
• Android : back button, Hardware menu buttons
• iOS : table edit, routes in maps
if(Ti.Platform.osname == ‘android’){
win.backgroundColor : ‘Green’;
} else {
win.backgroundColor: ‘blue’;
}
Monsoon Tech - 2014

25. Beyond Basics
• MVC – Alloy
• Cloud service
• MBaaS
• Open & extensible (plugins for salesforce,
amazon)
• Analytics
• Automated functional testing
• Performance monitoring
Monsoon Tech - 2014

26. Thank You
Monsoon Tech - 2014