Develping iOS and Android apps using Appcelerator Titanium

6,419 views

Published on

Published in: Technology

Develping iOS and Android apps using Appcelerator Titanium

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

×