WebDevMobile.com Hybrid Web Application Appcelerator Titanium

1. Hybrid Web Application Platform
Appcelerator Titanium

2. Web Evolution
• .
• .
• 3.0 4.0
.

3. Why Hybrid Web App?
• Hand-held Device(smart phone, tablet pc)
• Web OS(Chrome OS, Palm Web OS)
• Home Device(Apple TV, Google TV)
• Browser(Chrome, Safari, Firefox extension)
• Social Network & Real Time

4. Web

5. Desktop
TV
Home Device
Notebook Web Smart Phone
Display Screen
Tablet
ATM, Kiosk

6. Printer Fax
set-top box
Door lock
Desktop
TV Display ui
Light
Home Device
Ice box iPhone
Chrome OS
Notebook Web Smart Phone
Game
Andorid
iPad Display Screen
Tablet
Advertisement
ATM, Kiosk
Galaxy Tab
Sub train
Display ui
Gov2.0

7. Index
• Introduce
• Development
• Demo
• Appendix

8. Introduction

9. Architecture Desktop
Your Application
(html, css, javascript,php,python,ruby)
UI API Desktop API Optional Modules
Bridge to OS - JavaScript,Ruby,Python,PHP, C, C#
OS - Window, Mac, Linux

10. Architecture Mobile
Your Application
(html, css, javascript)
UI API Phone API Optional Modules
Bridge - JavaScript - Java, Objective-C
OS - Android, iOS

11. resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic

12. Tablet
Desktop Mobile
resource : http://www.deshow.net/animal/2008/rabbit_small_animals.html#pic

14. HTML

15. JavaScript
HTML

16. JavaScript
CSS
HTML

17. JavaScript
CSS
Webkit
HTML

18. JavaScript
CSS
Webkit
HTML
Kroll

19. JavaScript
CSS
Webkit
HTML
Kroll

21. Bridge = Kroll

23. Kroll Process is
a pyrometallurgical industrial process
used to produce metallic titanium

24. Titanium APIs

25. ui API

26. Carrier 12:34 PM
Optional instructions for this pane go here
Web Page Title
Cancel Button
Back
Back Pane Label
rhio.kim
WebDevMobile Button
Save
http://host.domain.tld
Item One
Tab 1
First Name Example Text here
ON
Tab Two Tab Three
HTML text field
Item 2 as a form label Text here
Last Name
Example
Example OFF
HTML <select>
Phone3 Confirmation Message
Item Number Example Text here
Optional Status
ui API
ItemOptional explanation of (off) is the
1 ON
HTML radio button what
Item 4 system is Optional Statushigh
asking
low 320 x 480
Item 2 Verticalradio button (on) OFF
HTML Resolution
Secondary Primary
1Item 3 3 HTML 5 6Optional8 9 ICN0
ICN 2 4 checkbox (off) Status
7
- Option HTML checkbox (on) & @ ”
/ : 1 ( ) $ Status
; Optional Status
Optional Titanium.UI.*
HTML Button
#+= Option 2,
. ? ! ’
Optional Status
Optional Status
Lorem ipsum dolor sit amet, consectetuer
ABC
adipiscing elit. space consectetuer.
Aenean return

27. Carrier 12:34 PM
Optional instructions for this pane go here
Web Page Title
Cancel Button
Back
Back Pane Label
rhio.kim
WebDevMobile Button
Save
http://host.domain.tld
Item One
Tab 1
First Name Example Text here
ON
Tab Two Tab Three
HTML text field
Item 2 as a form label Text here
Last Name
Example
Example OFF
HTML <select>
Phone3 Confirmation Message
Item Number Example Text here
Optional Status
ui API
ItemOptional explanation of (off) is the
1 ON
HTML radio button what
Item 4 system is Optional Statushigh
asking
low 320 x 480
Item 2 Verticalradio button (on) OFF
HTML Resolution
Secondary Primary
1Item 3 3 HTML 5 6Optional8 9 ICN0
ICN 2 4 checkbox (off) Status
7
- Option HTML checkbox (on) & @ ”
/ : 1 ( ) $ Status
; Optional Status
Optional Titanium.UI.*
HTML Button
#+= Option 2,
. ? ! ’
Optional Status
Optional Status
Lorem ipsum dolor sit amet, consectetuer
ABC
adipiscing elit. space consectetuer.
Aenean return

28. Desktop API, Phone API

29. Desktop API, Phone API
Titanium.Codec
Titanium.Desktop
Titanium.JSON
Titanium.Notification
Titanium.Process
Titanium.Worker
Titanium.UpdaterManager

30. Desktop API, Phone API
Titanium.Platform
Titanium.Codec
Titanium.FileSystem
Titanium.Desktop
Titanium.Geolocation
Titanium.JSON
Titanium.Gesture
Titanium.Notification
Titanium.Contact
Titanium.Process
Titanium.Accelerometer
Titanium.Worker
Titanium.Media
Titanium.UpdaterManager
Titanium.Network

31. Optional Modules

32. Optional Modules
Titanium.Analytics
Titanium.Map
Titanium.Yahoo
Titanium.Facebook

33. So what’s Titanium?
• Titanium is a rapid application development
platform(HTML, CSS and JavaScript)
• The framework also has support for Python, Ruby
and PHP
• Seamlessly create desktop web applications(your
favorites back-end and front-end web technologies)
• One source Multi platform(Window,MAC,Linux,iOS,Android)

34. Adobe Air Junior?
• free/open source Apache license, for ultimate
compatibility with your workflow, and infinite
extensibility
• Support Python, Ruby, and without needing to
learn Flash or ActionScript
• Cloud publishing features to compile and publish
your application for multiple platforms.
• And much more!!

35. How it all works
• Full filesystem access
• Internal SQLite database access
• AJAX is still avaiable, Network API allows to
interface with HTTP at a much lower level, open
socket connections to other service
• Wrapping Desktop features such as notifications,
tray icons, window menu
• HTML5, CSS3, Web APIs

36. Development

37. System Spec

38. Desktop
• Window 7, XP and Vista
• Mac OS X 10.6.4 (Snow Leopard)
• Ubuntu 9.10 (Karmic Koala)

39. Mobile
• iPhone
Lastest iPhone SDK 3.2 for iPhone/iPad
• Android
Android SDK - http://developer.android.com/sdk/index.html
SDK platform Android 1.6 API 4(recommand)
Google APIs package for KitchenSink
Java Development Kit 6(java 1.6)

40. Install & Setting

41. • Download
http://www.appcelerator.com/products/download/
• Source Install
git clone http://github.com/appcelerator/
titanium_developer.git

42. Introduce Interface

49. Usage

50. New Project

51. Edit Project

52. Launch & Testing

53. Run Emulator

54. Run Emulator

55. Package

56. Distribution

57. Distribution

58. See more
• Desktop
http://developer.appcelerator.com/doc/desktop/
guides
• Mobile
http://developer.appcelerator.com/doc/mobile/
guides

59. Online platform

64. Show Case

65. resource : http://www.appcelerator.com/showcase/applications-showcase/

66. Demo

67. • Usage Demo
• Desktop uTube Deck Demo
• Twitter Client Demo with Ext JS
• iPhone/iPad KitchenSink Demo

68. Titanium 2.0
• Localization Framework
• Advertising, Commerce
• Buletooth networking
• Third-party accessories
• Application Database Sync
• encrypted databases

69. Titanium 2.0
• RIM Blackberry
• Nokia

70. Appendix

71. PhoneGap
• http://www.phonegap.com/

72. Corona
• http://www.anscamobile.com/

73. QuickConnect
• http://quickconnect.pbworks.com/

74. Reference
• Appcelerator Titanium
http://www.appcelerator.com
• Wikipedia
http://en.wikipedia.org/wiki/Appcelerator_Titanium
• Titanium tutorial
http://www.sergemeunier.com/blog/tutorials/titanium-tutorials/
• Compare with others
http://stackoverflow.com/questions/1482586/comparison-between-corona-
phonegap-titanium

75. QA

76. ending
Author : rhio.kim
@rhiokim
http://rhio.tistory.com
rhio.kim@gmail.com
FRENDS
JavaScript Ninija
NHN

77. ending
Author : rhio.kim
@rhiokim
http://rhio.tistory.com
rhio.kim@gmail.com
FRENDS
NHN
JavaScript Ninija

78. Thanks

79. Thanks ; )