Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Titanium Mobile Intro

9,171 views

Published on

A 1 hour introduction to Titanium Mobile based on Kevin Whinnery's excellent material

Published in: Technology, Business
  • Be the first to comment

Titanium Mobile Intro

  1. 1. Titanium Mobile writing native iPhone and Android apps with web technologies.
  2. 2. About Me Marshall Culpepper Titanium Project Lead / Hacker Extraordinaire @marshall_law http://www.arcaner.com mculpepper@appcelerator.com http://github.com/marshall
  3. 3. Agenda • Titanium Mobile Intro • Mobile Architecture • API Overview • Guided Lab: Snappost
  4. 4. Titanium Mobile • UI with HTML5, CSS, Canvas. The best of the open web. • iPhone 2.2.1 -> 3.x support, Android 1.5 support • Native widgets, views with Javascript APIs - fast! • No need to learn multiple languages (Objective-C, Java) to be productive • Resources get compiled into a native executable - non editable by mere mortals
  5. 5. Mobile Architecture
  6. 6. Media API
  7. 7. More Media API
  8. 8. Geolocation API
  9. 9. Accelerometer API
  10. 10. Database API Synchronous and Asynchronous (HTML5) APIs
  11. 11. Network API XHR-style object for remote data requests
  12. 12. Native UI Controls Use native controls with Javascript
  13. 13. Native iPhone UI • Tab Bar / Nav Bar • Table View / Group View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
  14. 14. Native Android UI • Tab Bar • Table View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
  15. 15. Common API iPhone Table View Android Table View Same code
  16. 16. Useful Resources • KitchenSink : Full API demo • Full API Reference, Platform Guides, Docs: • http://codestrong.com • #titanium_app on irc.freenode.net • Support: http://support.appcelerator.net
  17. 17. Developer+Mobile • With Mobile projects, Developer deploys code to the simulator/ emulator • Can also deploy directly to device (requires some setup)
  18. 18. Hello World app • Prerequisites • iPhone and/or Android SDK • Titanium Developer + Mobile SDK
  19. 19. Snappost: Our first app • An app that can post a photo and a message to Twitter via TwitPic • Use TwitPic REST API, Titanium, jQuery • Basic TwitPic spec: • POST to REST API @ https://twitpic.com/api/uploadAndPost • message: update message • username: twitter username • password: twitter password • media: image binary data
  20. 20. Step 1: Configuration • $ROOT/tiapp.xml • Configure tabs, and their properties
  21. 21. Step 2: HTML, CSS, JS • organize $ROOT/index.html • code up simplistic UI, use a native button
  22. 22. Step 3: Create the button • Use Titanium.UI.createButton to create a native button inside the web content
  23. 23. Step 4: Pick a photo • Use Titanium.UI.openPhotoGallery to prompt for a photo
  24. 24. Step 5: Post to TwitPic • Send image blob data directly using our Native XHR
  25. 25. Done!
  26. 26. Final Thoughts • Titanium: Native desktop and mobile apps made simple with web technologies • In the future we hope to support Blackberry, Windows Mobile, Symbian • See Roadmap for Desktop and Mobile on Codestrong
  27. 27. Q/A, Titanium hackathon

×