Your SlideShare is downloading. ×

Develping iOS and Android apps using Appcelerator Titanium

5,707

Published on

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,707
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
274
Comments
1
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DEVELOPINGIOS & ANDROIDAPPS USINGTITANIUM
    NHM TANVEER HOSSAIN KHAN
    HASIN HAYDER
  • 2. WHY TITANIUM?
    • EASY TO JUMP START
    • 3. DEVICE INDEPENDENT
    • 4. COMMON TOOLS
    • 5. NATIVE
    • 6. EXTESIVE DOCUMENTATION
  • HOW TITANIUM FITS IN?
    • SINGLE CODEBASE
    • 7. NATIVE UI
    • 8. LEARNING JQUERY FOR WEB
    • 9. FRIENDLY API
  • DID YOU SAY JAVASCRIPT?
    • AVAILABLE JAVASCRIPT EXPERT
    • 10. EASY TO GRASP
    • 11. EXISTING WEB APP DEV 2 MOBILE APP DEV
  • DEVICE Independent?
    JS Code
    Ti API
    Native Bridge
    Native!(Red Indian)
    Collected from - http://www.appcelerator.com/products/titanium-cross-platform-application-development/
  • 12. DEVICE Independent?
    • Code in JavaScript!
    • 13. Use titanium JavaScript library
    • 14. Titanium JavaScript interpreter interprets and Call native methods.
    • 15. Just like $(‘#someId’) Or Natively document.getElementById(‘someId’)
    Collected from - http://www.appcelerator.com/products/titanium-cross-platform-application-development/
  • 16. Titanium, THE GOOD, THE BAD & THE UGLY
    EVERYTHING NATIVE
    JS/JSS DEVELOPMENT
    EXTENSIBLE
    DEPLOYMENT IS FUN
    BEAUTIFUL IDE
  • 17. Titanium,THE GOOD, THE BAD & THE UGLY
    UI DESIGN IS PAIN
    640 Lines
    of code
  • 18. Titanium,THE GOOD, THE BAD & THE UGLY
    NOT EVERYONE’s DOGFOOD
  • Titanium, DESIGNING A SAMPLE UI
    Ti.UI.createWindow({
            backgroundColor:"#FFF"
    });
  • 20. Titanium, DESIGNING A SAMPLE UI
    var win = Ti.UI.createWindow({
            backgroundColor:"#FFF"
    });
    win.open();
  • 21. Titanium, ADD a container
    varview = Ti.UI.createView({
    top:10,
    left:10,
    height:300,
    width:300,
    backgroundColor:"#AAA",
    borderRadius:10
    });
    win.add(view);
  • 22. Titanium, add a container
    varview = Ti.UI.createView({
    top:10,left:10,
    height:300,width:300,
    backgroundColor:"#AAA",
    borderRadius:10
    });
    win.add(view);
  • 23. Titanium, add a button
    var button = Ti.UI.createButton({
    title:"ClickMe",
    top:10, left:10,
    height:40, width:280
    });
    view.add(button);
  • 24. Titanium, add a button
    var button = Ti.UI.createButton({
    title:"ClickMe",
    top:10, left:10,
    height:40, width:280
    });
    view.add(button);
  • 25. Titanium, add a button
    button.addEventListener("click",
    function(){
    alert("Welcome to JSCon");
    }
    );
  • 26. Titanium, add a button
    button.addEventListener("click",
    function(){
    alert("Welcome to JSCon 2011");
    }
    );
  • 27. Titanium, OPEN a DIALOG
    vardlg = Ti.UI.createOptionDialog({
    title:"Delete?",
    options:["Yes","No"],
    cancel:1
    });
    dlg.addEventListener("click",
    function(e){
    alert(e.index);
    });
    dlg.show();
  • 28. Titanium, add a button
    vardlg = Ti.UI.createOptionDialog({
    title:"Delete?",
    options:["Yes","No"],
    cancel:1
    });
    dlg.addEventListener("click",
    function(e){
    alert(e.index);
    });
    dlg.show();
  • 29. Titanium, LOTS OF UI ELEMENTS
  • 30. Titanium,ItS NOT ONLY ABOUT UI
  • Titanium, ACCELEROMETER
    Ti.Accelerometer.addEventListener('update',
    function(e){
    alert("accelerometer - x:"+e.x+
    ",y:"+e.y+
    ",z:"+e.z
    );
    }
    );
  • 38. Titanium, GEOLOCATION
    Ti.Geolocation.getCurrentPosition(
    function(e)
    {
    if (e.error)
    {
    alert(’Cant locate');
    return;
    }
    }
    );
  • 39. Titanium, Find the location
    Ti.Geolocation.getCurrentPositio(
    function(e)
    {
    if (e.error)
    {
    alert(’Cant locate'); return;
    }
    });
  • 40. 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;
  • 41. Titanium, DRAW THE MAP
    varmapview = Ti.Map.createView({
    mapType: Ti.Map.STANDARD_TYPE,
    region: {latitude: "23.7230556",
    longitude: "90.4086111",
    },
    });
  • 42. Titanium, HOW ABOUT AN APP?
    ?
  • 43. Titanium, HOW ABOUT VEHICLE TRACKER?
  • 44. Titanium, HOW ABOUT VEHICLE TRACKER?
  • 45. Titanium, HOW ABOUT VEHICLE TRACKER?
  • 46. Titanium, HOW ABOUT A GPS APP?
    HOMEWORK
  • 47. Titanium, EVERYTHING SQLITE
    SQLite Manager
  • 48. Titanium, INSTALL A DATABASE
    Create or open an existing database - vardb = Ti.Database.open(‘JSConf’)
    Use database with your default data -vardb = Ti.Database.install( ‘bundled/JSConf.db’, ‘JSConf’)
  • 49. Titanium,CREATE TABLE
    db.execute(‘CREATETABLE IF NOT EXISTS topics ( id INTEGER, title TEXT, speakers TEXT, duration INTEGER,PRIMARY KEY(id) )’);
  • 50. Titanium,INSERT
    varresult = db.execute(‘INSERT INTO topics (title, speakers, duration)VALUES (?, ?, ?, ?)‘, ‘Titanium’, ‘Hasin & Hasan’, 30);
  • 51. Titanium,INSERT
    • Successful execution ? if (result.getRowsAffected() > 0)
    • 52. Last row id ? result.getLastInsertRowId()
  • Titanium,UPDATE
    var result = db.execute(‘UPDATE topicsSET title = ?WHERE id = ?‘, ‘Mobile app using titanium’, 1);
  • 53. Titanium,UPDATE
    Successful execution ? if (result.getRowsAffected() > 0)
  • 54. Titanium,DELETE
    var result = db.execute(‘DELETE FROM topicsWHERE id = ?‘, 1);
  • 55. Titanium,DELETE
    Successful execution ? if (result.getRowsAffected() > 0)
  • 56. Titanium,RETRIEVE
    var result = db.execute(‘SELECT (id, title, speakers) FROM topicsWHERE id = ?‘, 1);
  • 57. Titanium,RETRIEVE
    Iterate through rows -
    while(result.isValidRow()) {var title = result.fieldByName(‘title’); result.next();}
  • 58. Titanium, AJAX
    varxhr = Ti.Network.createHTTPClient();
    xhr.open('GET', 'url');
    var params = {id:"1"}
    xhr.send(params);
    sendit.onload = function(){
    var json = JSON.parse(this.responseText);
    }
  • 59. Titanium, AJAX
    varxhr = Ti.Network.createHTTPClient();
    xhr.open('GET', 'url');
    var params = {id:"1"}
    xhr.send(params);
    sendit.onload = function(){
    var json = JSON.parse(this.responseText);
    }
  • 60. Titanium,MONEtize using iAd
    adView = Ti.UI.iOS.createAdView({
    width: 'auto',
    height: 'auto',
    }); 
  • 61. Titanium, MEDIA API
    AUDIO
    VIDEO
    IMAGE
  • Titanium, WEB SERVICES AND SOCIAL NEt
    • YAHOO SERVICES
    • 67. FACEBOOK
  • Titanium, PUSH NOTIFICATION
    URBAN AIRSHIP
    • PUSH NOTIFICATION
    • 68. IN APP PURCHASE
    • 69. SUBSCRIPTIONS
  • Titanium, DEPLOY
    • TEST DEVICES
    • 70. REAL CUSTOMERS
  • Titanium, GENERATING CERTIFICATE
  • 71. Titanium, DEVICE TESTING
  • 72. Titanium, DISTRIBUTE
  • 73. Titanium, DESKTOP
  • Titanium, WUNDERLIST
  • 80. Titanium, PACKAGE DESKTOP
  • 81. Thank you, QUESTIONS?
    ?

×