Using Javascript to Build Native iOS Applications - Confoo 2012

Transcript

1. Using JavaScript to Build Native iOS Applications Andrew Lombardi Owner,

   Tech Evangelist Mystic Coders, LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java kinabalu @ twitter Saturday, March 3, 12

2. Saturday, March 3, 12

3. 12 Years in business Saturday, March 3, 12

4. Software Consultants 12 Years in business Saturday, March 3, 12

5. Software Consultants International Speaker 12 Years in business Saturday, March

   3, 12

6. Software Consultants International Speaker Training 12 Years in business Saturday,

   March 3, 12

7. Software Consultants International Speaker Training 12 Years in business Apache

   Wicket Contributor Saturday, March 3, 12

8. Software Consultants International Speaker Training 12 Years in business Apache

   Wicket Contributor iPhone Developer (Obj-C / JavaScript) Saturday, March 3, 12

9. To our success! Software Consultants International Speaker Training 12 Years

   in business Apache Wicket Contributor iPhone Developer (Obj-C / JavaScript) Saturday, March 3, 12

10. Saturday, March 3, 12

11. Appcelerator Titanium http://www.appcelerator.com/ Saturday, March 3, 12

12. Saturday, March 3, 12

13. Saturday, March 3, 12

14. “2011 OnMobile 100 Top Private Companies” Saturday, March 3, 12

15. “2011 OnMobile 100 Top Private Companies” “Best Developer Tool: Aptana

    Studio3’s PyDev” Saturday, March 3, 12

16. “#37 Most Innovative Companies in the Apple Ecosystem” “2011 OnMobile

    100 Top Private Companies” “Best Developer Tool: Aptana Studio3’s PyDev” Saturday, March 3, 12

17. “5 Platforms That Defined the Mobile Space in 2010” “#37

    Most Innovative Companies in the Apple Ecosystem” “2011 OnMobile 100 Top Private Companies” “Best Developer Tool: Aptana Studio3’s PyDev” Saturday, March 3, 12

18. “5 Platforms That Defined the Mobile Space in 2010” “#37

    Most Innovative Companies in the Apple Ecosystem” “2011 OnMobile 100 Top Private Companies” “Best Developer Tool: Aptana Studio3’s PyDev” “Cool Vendor of the Year for Enterprise Mobility” Saturday, March 3, 12

19. Titanium is an open source framework for building mobile and

    desktop applications using JavaScript is... Saturday, March 3, 12

20. What we’ll cover Saturday, March 3, 12

21. 1. The Setup What we’ll cover Saturday, March 3, 12

22. 1. The Setup 2. Platform Overview What we’ll cover Saturday,

    March 3, 12

23. 1. The Setup 2. Platform Overview 3. Simple Example What

    we’ll cover Saturday, March 3, 12

24. 1. The Setup 2. Platform Overview 3. Simple Example 4.

    Supported Modules What we’ll cover Saturday, March 3, 12

25. 1. The Setup 2. Platform Overview 3. Simple Example 4.

    Supported Modules 5. Demo What we’ll cover Saturday, March 3, 12

26. The Setup Saturday, March 3, 12

27. 1. Download iOS SDK - http://developer.apple.com Saturday, March 3, 12

28. Saturday, March 3, 12

29. Pay the Saturday, March 3, 12

30. Pay the Apple Saturday, March 3, 12

31. Pay the Apple Tax Saturday, March 3, 12

32. Pay the Apple Tax $99 USD Saturday, March 3, 12

33. 2. Download: http://www.appcelerator.com/products/download/ Saturday, March 3, 12

34. • Apache 2.0 Licensed • Commercial training and support services

    available • Core SDK - free and open source Saturday, March 3, 12

35. What is it good for? Saturday, March 3, 12

36. What is it good for? Data-driven web service clients Saturday,

    March 3, 12

37. What is it good for? Data-driven web service clients Web

    service mash-ups Saturday, March 3, 12

38. What is it good for? Data-driven web service clients Web

    service mash-ups Social utilities Saturday, March 3, 12

39. What is it good for? Data-driven web service clients Web

    service mash-ups Social utilities Casual games Saturday, March 3, 12

40. Hello, World! Saturday, March 3, 12

41. Mobile Architecture Saturday, March 3, 12

42. CFUB Saturday, March 3, 12

43. Universal Apps? if("Ti.Platform.osname === ”ipad”) { Ti.include(‘app_ipad.js’); } else {

    Ti.include(‘app_iphone.js’); } Saturday, March 3, 12

44. Memory Usage Ti.API.debug(Ti.Platform.availableMemory); Saturday, March 3, 12

45. Titanium Plus Saturday, March 3, 12

46. Titanium Plus • Commerce modules: Apple Storekit, Barcode reader, Magtek

    credit card reader, PayPal in-app purchase • Communication modules: Bump, SMS, Urban Airship • Media modules: Brightcove, TV Out • Analytics modules: Omniture, Titanium Analytics, Titanium Geo Saturday, March 3, 12

47. Titanium Studio Saturday, March 3, 12

48. Titanium Studio OFFLINE FAIL Saturday, March 3, 12

49. Titanium Studio • Find the TitaniumStudio.ini file Saturday, March 3,

    12

50. Titanium Studio • Find the TitaniumStudio.ini file • No Debug

    Saturday, March 3, 12

51. Titanium Studio • Find the TitaniumStudio.ini file • No Debug

    Saturday, March 3, 12

52. Titanium Studio Saturday, March 3, 12

53. • Manage and run Titanium applications • Package applications for

    distribution • Run on a device for testing • Develop in derivative Eclipse editor Aptana Titanium Studio Saturday, March 3, 12

54. Titanium Studio Saturday, March 3, 12

55. Titanium Studio Saturday, March 3, 12

56. Access to Media Interact with the iOS built-in cameras Ti.Media.showCamera({

    success: function(imageBlob) { }, cancel: function() { }, error: function(error) { }, allowImageEditing: true }); Saturday, March 3, 12

57. Network XHR-style object for remote data requests. var loader =

    Ti.Network.createHTTPClient(); loader.open("GET","http://www.google.com/api/something"); loader.onload = function() { } // Send the HTTP request loader.send(); Saturday, March 3, 12

58. Facebook Connect Titanium.Facebook.appid = '[YOUR APPID]'; Titanium.Facebook.permissions = ['publish_stream']; Titanium.Facebook.addEventListener('login',

    function(e) { if (e.success) { alert('Logged In'); } else if (e.error) { alert(e.error); } else if (e.cancelled) { alert("Cancelled"); } }); Titanium.Facebook.authorize(); Saturday, March 3, 12

59. Paypal Integration var ppButton = Ti.Paypal.createPaypalButton { width: 294, height:

    50, bottom: 50, appId: “APP-120391209312”, paypalEnvironment: Ti.Paypal.PAYPAL_ENV_SANDBOX feePaidByReceiver: false, transactionType: Ti.Paypal.PAYMENT_TYPE_DONATION enableShipping: false, payment: { amount: 50.0, tax: 0.0, shipping: 0.0, currency: “SEK”, recipient: “[email protected]”, itemDescription: “Donation”, merchantName: “Mystic” } }); Saturday, March 3, 12

60. Native User Experience Native performance + Native UI (tables, animations,

    gestures, etc). Location-based Services Augmented reality, geo-location, compass, native maps Social Sharing Authenticated access to Facebook, Twitter, Yahoo YQL. Native email/ address book. Data Access online / device data, embedded SQL database, filesystem, web services Multimedia Camera, video camera, streaming / device audio/video Analytics Camera, video camera, native image viewers, streaming or device audio/ video Extensibility Add any native Obj. C (iPhone) or Java (Android) module into Titanium Development Tools Create, test, and publish your app Full-Featured Development... Saturday, March 3, 12

61. Titanium Fundamentals Saturday, March 3, 12

62. Titanium Fundamentals A Titanium application is a JavaScript program that

    is interpreted at runtime on the device Saturday, March 3, 12

63. Titanium Fundamentals A Titanium application is a JavaScript program that

    is interpreted at runtime on the device app.js = root execution context of the app Saturday, March 3, 12

64. Titanium Fundamentals A Titanium application is a JavaScript program that

    is interpreted at runtime on the device app.js = root execution context of the app No browser involved Saturday, March 3, 12

65. Titanium Fundamentals A Titanium application is a JavaScript program that

    is interpreted at runtime on the device app.js = root execution context of the app No browser involved We use the WebKit KJS JavaScript engine (iOS) or Rhino (Android/BB) Saturday, March 3, 12

66. • Organized into logical namespaces • “Titanium” (or just “Ti”

    for short) is the root namespace for all Titanium functionality • A few other odds and ends in the global space – setTimeout/setInterval – alert – JSON Titanium Javascript API Saturday, March 3, 12

67. • A single window or stack of windows • Tab

    Group containing many windows • Windows contain views Titanium UI Composition Saturday, March 3, 12

68. DEMO! Saturday, March 3, 12

69. Titanium PhoneGap Platform iOS, Android, (soon RIM) iOS, Android, WebOS,

    RIM, Symbian Device HW Support GPS, Vibration, Accelerometer, Compass, Camera, Microphone GPS, Vibration, Accelerometer, Compass, Camera, Microphone Native UI Yes No Performance Not as fast as native, but “good enough” As fast as HTML / Javascript on device Comparison with PhoneGap Saturday, March 3, 12

70. More websites for Titanium knowledge RESOURCES Saturday, March 3, 12

71. Training http://developer.appcelerator.com/training Saturday, March 3, 12

72. General Homepage: http://www.appcelerator.com Twitter: @appcelerator IRC: #twitter_app Source: http://github.com/appcelerator Saturday,

    March 3, 12

73. Saturday, March 3, 12

74. Titanium Rocks!! Saturday, March 3, 12

75. Q&A Thanks for listening! Andrew Lombardi Owner, Tech Evangelist Mystic

    Coders, LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java Saturday, March 3, 12