Cross-platform App Development with Titanium

Slides for my talk at Elance on May 28 2013

Transcript

1. #sv-tug #appcelerator #titanium #tialloy Cross-platform Mobile App Development with Titanium Ricardo Alcocer - Lead Developer Evangelist @ Appcelerator Twitter: @ricardoalcocer
2. About Titanium Not a language, but a high-level Javascript SDK Allows you to build Native Apps for iOS (iPhone, iPod Touch, iPad) Android (Phone and Tablet) Mobile Web Tizen Blackberry 10 (beta) Soon for Windows 8 Free and Open Source! It’s Native, NOT web app or hybird
3. Download Titanium Studio
4. Alloy MVC Framework
5. http://blog.planetargon.com/entries/2010/3/1/designer-vs-developer
6. Alloy App Folder Structure
7. Create more controllers via Menu Options
8. Sample Two-tab App
9. UI DEFINITION: INDEX.XML < a l l o y > < t a b g r o u p i d = " w i n " > < t a b t i t l e = " T a b 1 " i c o n = " K S _ n a v _ u i . p n g " > < w i n d o w t i t l e = " T a b 1 " > < l a b e l > I a m W i n d o w 1 < / l a b e l > < / w i n d o w > < / t a b > < t a b t i t l e = " T a b 2 " i c o n = " K S _ n a v _ v i e w s . p n g " > < w i n d o w t i t l e = " T a b 2 " > < l a b e l > I a m W i n d o w 2 < / l a b e l > < / w i n d o w > < / t a b > < / t a b g r o u p > < / a l l o y >
10. UI STYLING: INDEX.TSS " W i n d o w " : { b a c k g r o u n d C o l o r : " # f f f " } , " L a b e l " : { w i d t h : T i . U I . S I Z E , h e i g h t : T i . U I . S I Z E , c o l o r : " # 0 0 0 " , f o n t : { f o n t S i z e : 2 0 , f o n t F a m i l y : ' H e l v e t i c a N e u e ' } , t e x t A l i g n : ' c e n t e r ' }
11. Running on iOS
12. Running on Android 2.x
13. Running on Android ICS - Holo Dark
14. Running on Android ICS - Holo Light
15. Running on MobileWeb
16. Cross-platform is much more that being available accross platforms
17. Native UI elements, same code- base
18. INDEX.XML
19. INDEX.JS
20. http://developer.android.com/guide/practices/ui_guidelines/index.html https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Intro User Interface Guidelines
21. http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/ http://www.teehanlax.com/blog/android-2-3-4-gui-psd-high-density/ Native iOS and Android UI Elements
22. The vocabulary is well documented http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window
23. View the Source https://github.com/appcelerator/KitchenSink/tree/master/Resources
24. Alloy provides advanced ways of interacting with XML from Javascript
25. User Interface Definition
26. User Interface Definition
27. User Interface Definition
28. User Interface Definition
29. Open and Close the menu using Javascript : index.js
30. Enabling your App for Cloud Services
31. Built-in Services Chats Checkins Collections Events Data Files Friends Key-Values Messages Custom Objects Photos Places Posts Reviews Statuses Users Appcelerator Cloud Services
32. ACS Services are accesible through RESTAPI Titanium SDK iOS SDK Android SDK
33. Extensive documentation
34. View the source! https://github.com/appcelerator-modules/ti.cloud/tree/master/commonjs/example
35. With Titanium you can use what you know and love CommonJS Backbone Models Underscore.js Any Pure Javascript library that does not require DOM access
36. Marketplace
37. Huge community on Github
38. User stats Over 450,000 developers worldwide Over 50,000 apps Over 136,000,000 devices 1 in every 10 mobile devices run a Titanium-powered App
39. Some Apps built with Titanium
40. Visit our App Showcase http://www.appcelerator.com/customers/app-showcase/
41. Much more Command-line interface Modules, Widgets, Sync Adapters Gaming via Lanica.co Enterprise-ready!
42. Important links Slides https://speakerdeck.com/ricardoalcocer Appcelerator Q&A https://developer.appcelerator.com/questions/newest Twitter https://twitter.com/appcelerator
43. Questions? Thank you ralcocer@appcelerator.com Twitter: @ricardoalcocer Github: http://github.com/ricardoalcocer