Embed Size (px)
DESCRIPTION
Citation preview
DEVELOPINGIOS & ANDROID APPS USINGTITANIUM
NHM TANVEER HOSSAIN KHANHASIN HAYDER
WHY TITANIUM?
• EASY TO JUMP START
• DEVICE INDEPENDENT
• COMMON TOOLS
• NATIVE
• EXTESIVE DOCUMENTATION
HOW TITANIUM FITS IN?
• SINGLE CODEBASE
• NATIVE UI
• LEARNING JQUERY FOR WEB
• FRIENDLY API
DID YOU SAY JAVASCRIPT?
• AVAILABLE JAVASCRIPT EXPERT
• EASY TO GRASP
• EXISTING WEB APP DEV 2 MOBILE APP DEV
DEVICE INDEPENDENT?
JS Code
Ti API
Native Bridge
Native!(Red Indian)
DEVICE INDEPENDENT?
• Code in JavaScript!
• Use titanium JavaScript library
• Titanium JavaScript interpreter interprets and Call native methods.
• Just like $(‘#someId’) Or Natively document.getElementById(‘someId’)
TITANIUM, THE GOOD, THE BAD & THE UGLY
EVERYTHING NATIVE JS/JSS DEVELOPMENT
EXTENSIBLE DEPLOYMENT IS FUN
BEAUTIFUL IDE
TITANIUM, THE GOOD, THE BAD & THE UGLY
UI DESIGN IS PAIN
640 Lines
of code
TITANIUM, THE GOOD, THE BAD & THE UGLY
NOT EVERYONE’s DOGFOOD
• GRAPHICS APPS
• GAMES
TITANIUM, DESIGNING A SAMPLE UI
Ti.UI.createWindow({ backgroundColor:"#FFF"});
TITANIUM, DESIGNING A SAMPLE UI
var win = Ti.UI.createWindow({ backgroundColor:"#FFF"});
win.open();
TITANIUM, ADD A CONTAINER
var view = Ti.UI.createView({top:10,left:10,height:300,width:300,backgroundColor:"#AAA",borderRadius:10
});win.add(view);
TITANIUM, ADD A CONTAINER
var view = Ti.UI.createView({top:10,left:10,height:300,width:300,backgroundColor:"#AAA",borderRadius:10
});win.add(view);
TITANIUM, ADD A BUTTON
var button = Ti.UI.createButton({
title:"Click Me",top:10, left:10,
height:40, width:280});
view.add(button);
TITANIUM, ADD A BUTTON
var button = Ti.UI.createButton({title:"Click Me",top:10, left:10,
height:40, width:280});
view.add(button);
TITANIUM, ADD A BUTTON
button.addEventListener("click", function(){ alert("Welcome to JSCon"); });
TITANIUM, ADD A BUTTON
button.addEventListener("click", function(){ alert("Welcome to JSCon 2011"); });
TITANIUM, OPEN A DIALOG
var dlg = Ti.UI.createOptionDialog({title:"Delete?",options:["Yes","No"],cancel:1
});dlg.addEventListener("click", function(e){
alert(e.index);});
dlg.show();
TITANIUM, ADD A BUTTON
var dlg = Ti.UI.createOptionDialog({title:"Delete?",options:["Yes","No"],cancel:1
});dlg.addEventListener("click", function(e){
alert(e.index);});
dlg.show();
TITANIUM, LOTS OF UI ELEMENTS
TITANIUM, ITS NOT ONLY ABOUT UI
• DATABASE
• WEB SERVICES
• MEDIA ELEMENTS
• NATIVE FEATUERS• ACCELEROMETER
• GEOLOCATION
• SOCIAL NETWORK
• MONETIZATION
TITANIUM, ACCELEROMETER
Ti.Accelerometer.addEventListener('update', function(e){ alert("accelerometer - x:"+e.x+ ",y:"+e.y+ ",z:"+e.z ); });
TITANIUM, GEOLOCATION
Ti.Geolocation.getCurrentPosition( function(e){ if (e.error) { alert(’Cant locate'); return; }});
TITANIUM, FIND THE LOCATION
Ti.Geolocation.getCurrentPositio( function(e){ if (e.error) { alert(’Cant locate'); return; }});
TITANIUM, FIND THE LOCATION
var longitude = e.coords.longitude; var latitude = e.coords.latitude; var altitude = e.coords.altitude; var heading = e.coords.heading; var accuracy = e.coords.accuracy; var speed = e.coords.speed;
TITANIUM, DRAW THE MAP
var mapview = Ti.Map.createView({ mapType: Ti.Map.STANDARD_TYPE, region: {latitude: "23.7230556", longitude: "90.4086111", },});
TITANIUM, HOW ABOUT AN APP?
?
TITANIUM, HOW ABOUT VEHICLE TRACKER?
TITANIUM, HOW ABOUT VEHICLE TRACKER?
TITANIUM, HOW ABOUT VEHICLE TRACKER?
TITANIUM, HOW ABOUT A GPS APP?
HOMEWORK
TITANIUM, EVERYTHING SQLITE
SQLite Manager
TITANIUM, INSTALL A DATABASE
Create or open an existing database - var db = Ti.Database.open(‘JSConf’)
Use database with your default data -var db = Ti.Database.install( ‘bundled/JSConf.db’, ‘JSConf’)
TITANIUM, CREATE TABLE
db.execute(‘ CREATE TABLE IF NOT EXISTS topics ( id INTEGER, title TEXT, speakers TEXT, duration INTEGER, PRIMARY KEY(id) )’);
TITANIUM, INSERT
var result = db.execute(‘ INSERT INTO topics (title, speakers, duration) VALUES (?, ?, ?, ?)‘, ‘Titanium’, ‘Hasin & Hasan’, 30);
TITANIUM, INSERT
• Successful execution ? if (result.getRowsAffected() > 0)
• Last row id ? result.getLastInsertRowId()
TITANIUM, UPDATE
var result = db.execute(‘ UPDATE topics SET title = ? WHERE id = ?‘, ‘Mobile app using titanium’, 1);
TITANIUM, UPDATE
Successful execution ? if (result.getRowsAffected() > 0)
TITANIUM, DELETE
var result = db.execute(‘ DELETE FROM topics WHERE id = ?‘, 1);
TITANIUM, DELETE
Successful execution ? if (result.getRowsAffected() > 0)
TITANIUM, RETRIEVE
var result = db.execute(‘ SELECT (id, title, speakers) FROM topics WHERE id = ?‘, 1);
TITANIUM, RETRIEVE
Iterate through rows -
while (result.isValidRow()) { var title = result.fieldByName(‘title’); result.next();}
TITANIUM, AJAX
var xhr = Ti.Network.createHTTPClient(); xhr.open('GET', 'url'); var params = {id:"1"}xhr.send(params); sendit.onload = function(){ var json = JSON.parse(this.responseText);
}
TITANIUM, AJAX
var xhr = Ti.Network.createHTTPClient(); xhr.open('GET', 'url'); var params = {id:"1"}xhr.send(params); sendit.onload = function(){
var json = JSON.parse(this.responseText); }
TITANIUM, MONETIZE USING iAD
adView = Ti.UI.iOS.createAdView({ width: 'auto', height: 'auto',});
TITANIUM, MEDIA API
AUDIO• PLAY
• STREAM
• RECORD
VIDEO• PLAY
• STREAM
• RECORD
IMAGE• CAPTURE
• DISPLAY
TITANIUM, WEB SERVICES AND SOCIAL NET
• YAHOO SERVICES
TITANIUM, PUSH NOTIFICATION
URBAN AIRSHIP• PUSH NOTIFICATION
• IN APP PURCHASE
• SUBSCRIPTIONS
TITANIUM, DEPLOY
• TEST DEVICES
• REAL CUSTOMERS
TITANIUM, GENERATING CERTIFICATE
TITANIUM, DEVICE TESTING
TITANIUM, DISTRIBUTE
TITANIUM, DESKTOP
• HTML/CSS
• DIFFERENT LANGUAGE• PHP
• PYTHON
• RUBY
• JAVASCRIPT
• CROSS PLATFORM
TITANIUM, WUNDERLIST
TITANIUM, PACKAGE DESKTOP
THANK YOU, QUESTIONS?
?
