Using Titanium for
multi-platform development
                     Arul Kumaran
       Twitter: @_Arul | http://blog.lurac...
Today’s Presentation
• What is Titanium?
• Why Titanium?
• API Overview
• Demos:
 – Your First Project
 – Mobile TwitPic C...
An Unlikely Hero
• For a decade, web technologies have
  become one of the world’s most popular
  client application techn...
If web apps are so great...
...why are we interested in building native
applications at all? Well:
– They feel responsive
...
But my dev shop has...
• An investment in the people, tools, skills,
  and technology to build web applications
• An appre...
If only you could...
• Build fully native apps using web
  technologies you know today
• Build cross platform apps from a ...
Enter Titanium

 Titanium is an open source framework for
    building native desktop and mobile
 applications using open ...
Platforms?
• Desktop: Win32, Mac OS X (Intel), Linux
• Mobile: iPhone OS, Android
• More to come




              @_Arul ...
License?
• Open Source under Apache 2.0
• Commercial training and support services
  available
• More value add services t...
Titanium “Sweet Spot”
• Data-driven web service clients (Enterprise
  applications)
• Web service mash-ups
• Social utilit...
More on Titanium
• Web: http://appcelerator.com
• Twitter: http://twitter.com/appcelerator
• Docs: http://www.codestrong.c...
Desktop Architecture and API
         Overview



        @_Arul | Arul Kumaran - BarCamp Singapore 4   12
Desktop Architecture




    @_Arul | Arul Kumaran - BarCamp Singapore 4   13
Desktop User Interface
• Tray and Dock icons
• System Notifications
• Application Menus
• More




              @_Arul | ...
Media
• Play bundled or remote sound files
• System notification (beep)




              @_Arul | Arul Kumaran - BarCamp ...
Networking
• HTTPClient (XHR style object)
• Socket level access
• Built-in IRC chat client




              @_Arul | Aru...
Database and Filesystem
• Write files to the
  local filesystem
• Read files from disk
• Read file via drag and
  drop
• U...
Workers
• Spin off worker threads
• Communicate asynchronously with the
  worker through a JavaScript API
• Offload long r...
Language Modules
• Language modules
  are optionally
  included
• Full DOM access
• Three currently
  supported modules:
 ...
More
• Manage/run processes and applications
• Take screenshots
• Update your application remotely
• Get runtime platform ...
Mobile Architecture and API
         Overview



       @_Arul | Arul Kumaran - BarCamp Singapore 4   21
Mobile Architecture




   @_Arul | Arul Kumaran - BarCamp Singapore 4   22
Media
Stream or package audio and video
content




                   @_Arul | Arul Kumaran - BarCamp Singapore 4   23
More Media...
Interact with the iPhone or Android
built-in cameras




                   @_Arul | Arul Kumaran - BarCamp ...
Geo-location
Use Geo-location to leverage your
user’s position in the world




                   @_Arul | Arul Kumaran -...
Accelerometer
Use advanced gestures and track
movement to create
groundbreaking user interfaces




                   @_A...
Database and File System
Access a SQLite Database (sync or
async) and the platform file system




                   @_Ar...
Network
XHR-style object for remote data
requests.




                   @_Arul | Arul Kumaran - BarCamp Singapore 4   28
Native UI Controls
Use native controls through a
JavaScript interface.




                    @_Arul | Arul Kumaran - Bar...
Integrated YQL Support
• YQL - A web service
  aggregator using
  open tables
• Built in to
  Titanium.Yahoo
  namespace

...
Facebook Connect
• Facebook Connect
  module (currently
  iPhone only)
• Currently support
  for FQL
• More on the way



...
Native iPhone UI
• Tab Bar
• Nav Bar
• Table View
• Alert / Options
• Group Views / Text
• Many More



              @_Ar...
Native Android UI
• Tab Bar
• Table View
• Alert / Options
• Activity Indicator
• Notifications
• Many More



           ...
Common APIs
iPhone Table View                                            Android Table View




                        Sa...
More APIs
• Platform / OS Data
• Application Properties
• Logging
• Scroll and Image Views
• Composite Views
• More always...
Still Want More?
• Kitchen Sink - Full API Demo
• Codestrong.com has Examples and Guides
• http://www.codestrong.com/timob...
Titanium Developer
•Developer is a Titanium Application
•Projects created/managed via Titanium
 Developer
•Titanium Develo...
Kicking The Tires
• Your first application
 – Desktop project layout
 – Mobile project layout
• Demos
 – Mobile TwitPic Cl...
Next Steps
• Download: appcelerator.com/download
• Hack
 – Docs/Samples: http://www.codestrong.com
 – Screencasts: http://...
Questions?




@_Arul | Arul Kumaran - BarCamp Singapore 4   40
Upcoming SlideShare
Loading in...5
×

Using Titanium for multi-platform development including iPhone and Android

4,640

Published on

Use your web development (HTML, CSS, and JavaScript) skills to build desktop and mobile applications using Titanium Developer platform.

Presented on Barcamp Singapore 4

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,640
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
194
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Using Titanium for multi-platform development including iPhone and Android

    1. 1. Using Titanium for multi-platform development Arul Kumaran Twitter: @_Arul | http://blog.luracast.com More Information: Twitter: @appcelerator | http://appcelerator.com BarCamp Singapore 4 1
    2. 2. Today’s Presentation • What is Titanium? • Why Titanium? • API Overview • Demos: – Your First Project – Mobile TwitPic Client – The mobile ‘kitchen sink’ •Q&A @_Arul | Arul Kumaran - BarCamp Singapore 4 2
    3. 3. An Unlikely Hero • For a decade, web technologies have become one of the world’s most popular client application technology solutions: – Easy to deploy and maintain – Cross platform – Open standards • Warts and all, it’s tough to find a developer who has ZERO experience with these tools @_Arul | Arul Kumaran - BarCamp Singapore 4 3
    4. 4. If web apps are so great... ...why are we interested in building native applications at all? Well: – They feel responsive – They leverage platform capabilities • Filesystem I/O • Local Database • Mobile: Camera or Accelerometer – They are or can be ‘always on’ – They can be used offline @_Arul | Arul Kumaran - BarCamp Singapore 4 4
    5. 5. But my dev shop has... • An investment in the people, tools, skills, and technology to build web applications • An appreciation for open source and open standards • A need to get market quickly • An aversion to maintaining a codebase per supported platform @_Arul | Arul Kumaran - BarCamp Singapore 4 5
    6. 6. If only you could... • Build fully native apps using web technologies you know today • Build cross platform apps from a shared codebase • Use open source software, based on open standards • Find lots of available development talent to build these apps @_Arul | Arul Kumaran - BarCamp Singapore 4 6
    7. 7. Enter Titanium Titanium is an open source framework for building native desktop and mobile applications using open web technologies (HTML, CSS, and JavaScript) • Website: http://appcelerator.com • Twitter: http://twitter.com/appcelerator • Source: http://github.com/appcelerator @_Arul | Arul Kumaran - BarCamp Singapore 4 7
    8. 8. Platforms? • Desktop: Win32, Mac OS X (Intel), Linux • Mobile: iPhone OS, Android • More to come @_Arul | Arul Kumaran - BarCamp Singapore 4 8
    9. 9. License? • Open Source under Apache 2.0 • Commercial training and support services available • More value add services to come (analytics) • Core SDK - always free and open source @_Arul | Arul Kumaran - BarCamp Singapore 4 9
    10. 10. Titanium “Sweet Spot” • Data-driven web service clients (Enterprise applications) • Web service mash-ups • Social utilities • Brand affinity • Casual games • Anything requiring cross-platform support @_Arul | Arul Kumaran - BarCamp Singapore 4 10
    11. 11. More on Titanium • Web: http://appcelerator.com • Twitter: http://twitter.com/appcelerator • Docs: http://www.codestrong.com • Videos: http://vimeo.com/appcelerator • Source: http://github.com/appcelerator @_Arul | Arul Kumaran - BarCamp Singapore 4 11
    12. 12. Desktop Architecture and API Overview @_Arul | Arul Kumaran - BarCamp Singapore 4 12
    13. 13. Desktop Architecture @_Arul | Arul Kumaran - BarCamp Singapore 4 13
    14. 14. Desktop User Interface • Tray and Dock icons • System Notifications • Application Menus • More @_Arul | Arul Kumaran - BarCamp Singapore 4 14
    15. 15. Media • Play bundled or remote sound files • System notification (beep) @_Arul | Arul Kumaran - BarCamp Singapore 4 15
    16. 16. Networking • HTTPClient (XHR style object) • Socket level access • Built-in IRC chat client @_Arul | Arul Kumaran - BarCamp Singapore 4 16
    17. 17. Database and Filesystem • Write files to the local filesystem • Read files from disk • Read file via drag and drop • Use a synchronous or async database API @_Arul | Arul Kumaran - BarCamp Singapore 4 17
    18. 18. Workers • Spin off worker threads • Communicate asynchronously with the worker through a JavaScript API • Offload long running tasks to keep your app responsive @_Arul | Arul Kumaran - BarCamp Singapore 4 18
    19. 19. Language Modules • Language modules are optionally included • Full DOM access • Three currently supported modules: – Ruby – Python – PHP @_Arul | Arul Kumaran - BarCamp Singapore 4 19
    20. 20. More • Manage/run processes and applications • Take screenshots • Update your application remotely • Get runtime platform data • More at http://codestrong.com/titanium @_Arul | Arul Kumaran - BarCamp Singapore 4 20
    21. 21. Mobile Architecture and API Overview @_Arul | Arul Kumaran - BarCamp Singapore 4 21
    22. 22. Mobile Architecture @_Arul | Arul Kumaran - BarCamp Singapore 4 22
    23. 23. Media Stream or package audio and video content @_Arul | Arul Kumaran - BarCamp Singapore 4 23
    24. 24. More Media... Interact with the iPhone or Android built-in cameras @_Arul | Arul Kumaran - BarCamp Singapore 4 24
    25. 25. Geo-location Use Geo-location to leverage your user’s position in the world @_Arul | Arul Kumaran - BarCamp Singapore 4 25
    26. 26. Accelerometer Use advanced gestures and track movement to create groundbreaking user interfaces @_Arul | Arul Kumaran - BarCamp Singapore 4 26
    27. 27. Database and File System Access a SQLite Database (sync or async) and the platform file system @_Arul | Arul Kumaran - BarCamp Singapore 4 27
    28. 28. Network XHR-style object for remote data requests. @_Arul | Arul Kumaran - BarCamp Singapore 4 28
    29. 29. Native UI Controls Use native controls through a JavaScript interface. @_Arul | Arul Kumaran - BarCamp Singapore 4 29
    30. 30. Integrated YQL Support • YQL - A web service aggregator using open tables • Built in to Titanium.Yahoo namespace @_Arul | Arul Kumaran - BarCamp Singapore 4 30
    31. 31. Facebook Connect • Facebook Connect module (currently iPhone only) • Currently support for FQL • More on the way @_Arul | Arul Kumaran - BarCamp Singapore 4 31
    32. 32. Native iPhone UI • Tab Bar • Nav Bar • Table View • Alert / Options • Group Views / Text • Many More @_Arul | Arul Kumaran - BarCamp Singapore 4 32
    33. 33. Native Android UI • Tab Bar • Table View • Alert / Options • Activity Indicator • Notifications • Many More @_Arul | Arul Kumaran - BarCamp Singapore 4 33
    34. 34. Common APIs iPhone Table View Android Table View Same Code Creates Both @_Arul | Arul Kumaran - BarCamp Singapore 4 34
    35. 35. More APIs • Platform / OS Data • Application Properties • Logging • Scroll and Image Views • Composite Views • More always coming @_Arul | Arul Kumaran - BarCamp Singapore 4 35
    36. 36. Still Want More? • Kitchen Sink - Full API Demo • Codestrong.com has Examples and Guides • http://www.codestrong.com/timobile/ samples/ @_Arul | Arul Kumaran - BarCamp Singapore 4 36
    37. 37. Titanium Developer •Developer is a Titanium Application •Projects created/managed via Titanium Developer •Titanium Developer deploys code to simulators •Developer also helps with testing and packaging for devices •Requires sign-up for Appcelerator Network (support, e-mail list, other services) @_Arul | Arul Kumaran - BarCamp Singapore 4 37
    38. 38. Kicking The Tires • Your first application – Desktop project layout – Mobile project layout • Demos – Mobile TwitPic Client – Mobile: Kitchen Sink @_Arul | Arul Kumaran - BarCamp Singapore 4 38
    39. 39. Next Steps • Download: appcelerator.com/download • Hack – Docs/Samples: http://www.codestrong.com – Screencasts: http://vimeo.com/appcelerator • Get Help – http://support.appcelerator.net – IRC Chat - irc.freenode.net / #titanium_app @_Arul | Arul Kumaran - BarCamp Singapore 4 39
    40. 40. Questions? @_Arul | Arul Kumaran - BarCamp Singapore 4 40
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×