簡單介紹Appcelerator Titanium這套跨平台行動應用框架，包含其運作原理、特色與開發工具。

1. Appcelerator Titanium簡介
李易修
旅⼈人⼀一番 UX Lead & Co-funder

2. 李易修
• 旅⼈人⼀一番 UX Lead & Co-funder
• 台灣使⽤用者經驗設計協會(UiGathering)
創會成員及理事
• http://www.lis186.com
• twitter: lis186

3. 智慧型⼿手機與平板已經是主流

4. 不同的平台，不同的開發⼯工具和程式語⾔言
vs

5. 要接觸90%的⽤用⼾戶，⾄至少得開發iOS和Android App
Others
10%
iOS
20%
Android
70%
strategy analytics (2012 Q4)

6. 多平台⽀支援代表⾼高昂的開發成本

7. Appcelerator Titanium跨平台⾏行動應⽤用框架

8. 只需要維護⼀一套程式碼，就能發佈到多個平台

9. Javascript是最常被使⽤用的程式語⾔言之⼀一

10. Titanium讓你也可以⽤用Javascript寫App

11. Titanium的運作原理
OS (iPhone/Android)
Application Runtime
Javascript Runtime
Application Code
Native Module
Titanium Module
Titanium Kernel
JS Module
Native Module

12. Titanium提供超過5000項API

13. 無需重造輪⼦子，直接使⽤用原⽣生UI
HTML5 Native UI

14. ⼤大部份的程式碼可共⽤用
var win = Ti.UI.createWindow({
title: 'New Fugitive',
backgroundColor: '#fff',
layout: 'vertical',
modal: true
});
var textField = Ti.UI.createTextField({
top: 10,
width: '90%',
value: 'Kevin Whinnery'
});
win.add(textField);
var button = Ti.UI.createButton({
top: 10,
title: 'Save'
});
win.add(button);
if(Ti.Platform.osname == 'iphone'){
win.rightNavButton = Ti.UI.createButton({title: 'Close'});
textField.borderStyle = Ti.UI.INPUT_BORDERSTYLE_ROUNDED;
}
win.open();
iPhone Android

15. 針對平台最佳化
var toolbar = Titanium.UI.iOS.createToolbar({
items:[refresh, check, star, filter, edit]
});
var actionBar = win.activity.actionBar({
logo: “logo.png”
});
iPhone ToolBar Android ActionBar

16. 完整的開發環境－Titanium Studio

17. 提供Titanium CLI－⽅方便與其他開發⼯工具整合

18. 易於維護的MVC框架－Titanium Alloy

19. 多樣化的擴充選擇－Open Market Place

20. 雲端環境Appcelerator Cloud Service (ACS)

21. 總結
• 使⽤用⽤用途廣泛的Javascript開發跨平台App
• 原⽣生使⽤用者界⾯面效能良好，且具備擴充性
• 完整的開發環境和雲端服務

22. 謝謝指教！
• 旅⼈人⼀一番 UX Lead & Co-funder
• 台灣使⽤用者經驗設計協會(UiGathering)
創會成員及理事
• http://www.lis186.com
• twitter: lis186
李易修