![Page 1: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/1.jpg)
黃崇傑 Kevin Huang2013/5/19
Titanium 入門實戰 30 分鐘教你寫出 Youtube App + 會員系
統
![Page 2: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/2.jpg)
自我介紹Kevin Huang
VideOhya
Titanium 2 年開發經驗
開發近 40 支 iOS/Android App
累計近 190 萬下載
https://github.com/kevinbubu
![Page 3: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/3.jpg)
在開始之前
你必須要知道 你會看到很多很多的 Code
但是都是基本的 JavaScript
你不會看到任何跟架構有關的東西
(因為只有 30 分鐘阿!)
![Page 4: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/4.jpg)
Agenda
YouTube API + TableView
Titanium 簡介
基本 UI 建置 及 Event 控制
使用 ACS 快速建立會員系統
![Page 5: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/5.jpg)
![Page 6: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/6.jpg)
Titanium
![Page 7: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/7.jpg)
Titanium 簡介
![Page 8: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/8.jpg)
Titanium 簡介 Open Source
支援平台 : iOS, Android, BlackBerry, Mobile Web
可在 Mac OSX, Windows, Linux 進行開發
開發工具 Titanium Studio (Eclipse-based)
SDK Titanium Mobile SDK 3.1
![Page 9: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/9.jpg)
Titanium 優點
真正的 Native App
社交網路 &LBS 應用
硬體高度整合
最重要的是…使用的語言是…
開發速度極快
JavaScript!!
![Page 10: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/10.jpg)
Titanium 缺點 沒有真正的跨平台
無法精準控制記憶體使用量
整合第三方 SDK 較為困難
Bug 更新速度慢
官方 Q&A 論壇很難使用
![Page 11: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/11.jpg)
專案架構
![Page 12: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/12.jpg)
建立你的第一支專案
Tab Group
Tab Group
Window
Window
https://gist.github.com/kevinbubu/5603035
![Page 13: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/13.jpg)
基本 UI 建置 及 Event 控制
![Page 14: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/14.jpg)
API Docu
mention
http://docs.appcelerator.com/titanium/2.1/#!/api
![Page 15: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/15.jpg)
Hello W
orld!
https://gist.github.com/kevinbubu/5599643
![Page 16: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/16.jpg)
Event & Contro
ll
https://gist.github.com/kevinbubu/5603065
![Page 17: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/17.jpg)
打包網頁
https://gist.github.com/kevinbubu/5603190
![Page 18: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/18.jpg)
使用 HTML+CSS
https://gist.github.com/kevinbubu/5603208
![Page 19: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/19.jpg)
基本 Table V
iew
https://gist.github.com/kevinbubu/5603757
![Page 20: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/20.jpg)
進階 Table V
iew
https://gist.github.com/kevinbubu/5603768
Table View
Table View Row
View
Label 1
Label 2
![Page 21: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/21.jpg)
YouTube API + TableView
![Page 22: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/22.jpg)
Youtube Search
API
http://gdata.youtube.com/feeds/api/videos?q= << KEYWORD>> &alt=json&max-results=20
![Page 23: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/23.jpg)
API & HTTP Request
var xhr = Ti.Network.createHTTPClient({timeout : 10000
});xhr.onload = function(e) {
var parsedData = JSON.parse(this.responseText);
Ti.API.info(parsedData);}xhr.onerror = function(e) {
Ti.API.info('Error: ' + e.message);}xhr.open('GET', url);xhr.send();
![Page 24: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/24.jpg)
App 實作
https://gist.github.com/kevinbubu/5604886
Search Bar
Table ViewClick Event
![Page 25: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/25.jpg)
使用 ACS 建立會員系統
![Page 26: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/26.jpg)
ACS 簡介Appcelerator Cloud Services
![Page 27: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/27.jpg)
ACS 官方文件http://docs.appcelerator.com/titanium/2.0/#!/api/Titanium.Cloud
![Page 28: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/28.jpg)
ACS 後台
![Page 29: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/29.jpg)
直接使用 ACS 後台建會員
![Page 30: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/30.jpg)
登入頁面
https://gist.github.com/kevinbubu/5605170
![Page 31: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/31.jpg)
註冊會員
https://gist.github.com/kevinbubu/5605209
![Page 32: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/32.jpg)
登出會員
https://gist.github.com/kevinbubu/5605228
![Page 33: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/33.jpg)
登入會員及秀出資訊
https://gist.github.com/kevinbubu/5605228
![Page 34: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/34.jpg)
The End ?
![Page 35: 2013/05/19 - Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 @jsdc2013](https://reader036.vdocuments.net/reader036/viewer/2022081413/549543a1b4795976588b47d2/html5/thumbnails/35.jpg)
簡單也可以很浪漫
讓我們一起帶著 Titanium 浪漫的逃亡
寫 App 可以很簡單
請上 App Store 搜尋
One More
Thing…