Titanium Mobile Intro
6 likes1,461 views
Titanium Mobile allows creating native iPhone and Android apps using web technologies like HTML5, CSS, and JavaScript. It provides APIs for common mobile features like media, geolocation, accelerometer, and native UI controls. The presentation covered Titanium's architecture, key APIs, and built a sample app called Snappost that allows taking a photo and posting it to Twitter via the TwitPic API. Attendees were encouraged to try it out and ask any other questions.
Titanium Mobile Intro
- 1. Titanium Mobile writing native iPhone and Android apps with web technologies.
- 2. About Me Marshall Culpepper Titanium Project Lead / Hacker Extraordinaire @marshall_law http://www.arcaner.com mculpepper@appcelerator.com http://github.com/marshall
- 3. Agenda • Titanium Mobile Intro • Mobile Architecture • API Overview • Guided Lab: Snappost
- 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
- 6. Media API
- 10. Database API Synchronous and Asynchronous (HTML5) APIs
- 11. Network API XHR-style object for remote data requests
- 12. Native UI Controls Use native controls with Javascript
- 13. Native iPhone UI • Tab Bar / Nav Bar • Table View / Group View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
- 14. Native Android UI • Tab Bar • Table View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
- 15. Common API iPhone Table View Android Table View Same code
- 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. Developer+Mobile • With Mobile projects, Developer deploys code to the simulator/ emulator • Can also deploy directly to device (requires some setup)
- 18. Hello World app • Prerequisites • iPhone and/or Android SDK • Titanium Developer + Mobile SDK
- 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. Step 1: Configuration • $ROOT/tiapp.xml • Configure tabs, and their properties
- 21. Step 2: HTML, CSS, JS • organize $ROOT/index.html • code up simplistic UI, use a native button
- 22. Step 3: Create the button • Use Titanium.UI.createButton to create a native button inside the web content
- 23. Step 4: Pick a photo • Use Titanium.UI.openPhotoGallery to prompt for a photo
- 24. Step 5: Post to TwitPic • Send image blob data directly using our Native XHR
- 25. Done!
- 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