使用 Titanium 開發 iOS 噗浪 App

為什麼選 Titanium?

很可怕,不要問。

一定要買 Mac 嘛?

是的,因為會用到 iOS 模擬器,所以還是要買 Mac。

Titanium 官方 IDE,Titanium Studio

推薦使用官方開發的 IDE (好吧,又是 eclipse/aptana 類的),從 http://www.appcelerator.com/products/download/ 下載

(打開網址就發現要註冊?註冊一下啦,你不註冊也沒辦法下載啦!就乖乖奉獻/出賣 email 給他們吧!)

曾經的官方首推工具,Titanium Developer

不想用 IDE,只想用 Vim/Textmate 或任何你愛用的碼農工具寫 code (什麼,我說了 碼農 是嘛?)

你可以使用 Titanium Developer (不過這個工具從 2011/06/13 已經沒有再更新過了,2011/06/13 只是更新 README 而已)

$ git clone https://github.com/appcelerator/titanium_developer.git

ㄟ,然後怎麼用?下載後發現沒有 .app 可以打開?

方法一:

去下載官方 IDE 然後 import 那個下載回來的 titanium_developer 目錄,然後按下按鈕自己 build 一個
(講半天還是要去註冊下載 IDE)

方法二:

使用舊版的 Titanium Developer 去 import titanium_developer 目錄,然後按下按鈕自己 build 一個
(沒有舊的 Titanium Developer 怎辦?一樣去下載 IDE 使用方法一自己 build 一個)

然後你以為使用 Titanium Developer 就不用註冊嘛?不好意思,你需要有註冊的開發者帳號密碼才能登入並正常使用 Titanium Developer。

(覺得這軟體有 bug 要幫它修到不用輸入東西也可以開發的人不在此限)

Hello, world

什麼?今天主題不是噗浪 App 嘛?怎麼是 Hello, world?

因為作者外出取材(銀魂看太多,大誤)

是因為我用的東西又包了很多別的東西,所以必須先看官方版的 code,以免被大家誤會一開始就要用什麼模式去寫 code。

官方的 code,就是 new 一個 project 然後看到該 Project 目錄下的 Resources/app.js:

/**
  *  這是個有 tab 的程式
  *  1. 設背景
  *  2. 建 tab group
  *  3. 建 window1, window2
  *  4. 把 window1, window2 加到 tab group
  *  5. open tab group
  */

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
        color:'#999',
        text:'I am Window 1',
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center',
        width:'auto'
});

win1.add(label1);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
var label2 = Titanium.UI.createLabel({
        color:'#999',
        text:'I am Window 2',
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center',
        width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);


// open tab group
tabGroup.open();

什麼都不必改,或是你要更簡易的 app.js:

var win1 = Titanium.UI.createWindow({
    title:'hello',
    backgroundColor: '#fff'
});


var label1 = Titanium.UI.createLabel({
    text: 'Hello, world!',
    color: '#000',
    textAlign: 'center'
});

win1.add(label1);

win1.open();

總之按下綠色按鈕 build 就對了。

建立噗浪 App (未完成版)

使用 pct 亂組的 MVC 架構,首先,Resources 目錄結構長這樣:

.
├── app.js
├── controller
│   ├── home.js
│   └── login.js
├── img
├── iphone
├── key.js
├── lib
│   ├── Adamantium.js
│   ├── date_format.js
│   ├── jsOAuth.js
│   ├── plurk_api.js
│   ├── plurk_oauth.js
│   ├── sounds.js
│   ├── underscore.js
│   └── utils.js
├── model
├── sound
│   ├── Morse.wav
│   └── Pop.wav
└── view
    ├── home.js
    └── login.js

Libraries

架構 | Adamantium.js: http://adamrenklint.com/projects/adamantium-js

OAuth | jsOAuth.js: http://bytespider.github.com/jsOAuth

Date | date_format.js: http://blog.stevenlevithan.com/archives/date-time-format

Utils | underscore.js: http://documentcloud.github.com/underscore/

API | plurk_api.js: 自己寫的

Utils | plurk_oauth.js: 自己寫的

Utils | sound.js: 自己寫的

Utils | utils.js: 自己寫的

其他請現場看 code 及 demo

有夠欠打,這篇寫完還是 Titanium 的 Hello, world 而已。

現場會: 1. 切 PSD 檔案 2. 組 View 3. bind handler 4. 一些邏輯 5. demo 畫面,以及來不及解的 bug

為何還沒開發完?一切都是為了先餬口再說,因為家裡沒錢,我不能擁有米蟲人生;又缺乏口才能力,所以沒去募資金。