基於模型開發iPhone twitter客戶端
阿新 • • 發佈：2019-02-14
本文介紹使用基於模型的開發方式來快速開發移動web應用程式。
我們將開發一個Twitter客戶端的iPhone應用程式。
看到iPhone應用程式，您可能會猶豫。難道我要為此去購買一個Mac機，我是不是還要先申請加入蘋果開發人員計劃，是不是還要買個iPhone？幸運的是，這裡介紹的開發方式，你只要有PC機和瀏覽器即可，大部分工作都由模擬器來完成。
如果您有過iPhone開發經驗，那麼應該知道使用XCode構建一個顯示Twitter最新訊息的客戶端，基本上需要做如下幾件事情：
*）設計介面
*）連線元素
*）建立HTTP連線
*）傳送請求、讀取資源
*）解析JSON資料
*）新增使用者圖示
*）更新介面資料
根據您對XCode工具、iPhone SDK以及Objective C語言的掌握程度，可能會花費幾天或幾個小時不等的時間來完成這個任務。
那麼讓我們試試下面基於模型的方法是不是給我們帶來一些Amazing Magic。
首先您得下載必要的開發工具Tersus Studio windows版本：http://www.tersus.com/#Id=240。
這是一個基於Eclipse的開源開發平臺。
[b]第一步：基礎設定[/b]
--------------------------------------------------------------------------------
1. 建立一個新Tersus project:
o 選擇File -> New -> Tersus Project.
o 輸入Project name: Twitter
o 選擇Template: iPhone Application
o 點選Finish 按鈕
2. 在模型編輯器（即中間的主視窗）中，雙擊放大到 <iPhone View>/Body.
3. 右鍵點選Body --> Add Element: Scroll Pane. 名字修改為: Top Trends Screen.
4. 放大到 Top Trends Screen.
5. 右鍵點選Top Trends Screen -->Add Element: List.
這樣我們就建立了一個包含一個列表控制元件的帶滾動條的<iPhone View>。注意該工程Outline視窗中有兩個檢視，分別是<Desktop View>和<iPhone View>，這裡因為我們建立的是iPhone應用，因此我們僅關注<iPhone View>，展開它可以看到剛才新增的元素。儲存工程並執行它（焦點需要在模型編輯器中）。瀏覽器將會自動啟動。預設情況為開啟https://localhost:8080/twitter，我們在後面加上/iphone.html。也就是https://localhost:8080/twitter/iphone.html。這樣將會出現如下iPhone空白介面：
[img]http://dl.iteye.com/upload/attachment/246444/dfbe22d7-c34a-3def-b59b-ba49f3c95c4f.png[/img]
[b]第二步：讀取Twitter資料[/b]
--------------------------------------------------------------------------------
在模型編輯器中，放大到<iPhone View>/Body/Top Trends Screen/List.
從左邊palette視窗的Basic部分拖動一個Action到Top Trends Screen. 取名為Init.
建模Top Trends Init 動作:
放大到Init.
從palette視窗的Basic部分拖拉一個Service. 取名Get Top Trends.
新增一個exit（灰色小箭頭）到Get Top Trends.
從Display Actions 部分拖拉一個Alert.
從Get Top Trends的exit到Alert trigger（綠色小箭頭）建立一個flow. Init模型看起來如下:
[img]http://dl.iteye.com/upload/attachment/246446/6875b5cd-3737-3cba-a80d-b126ec584b18.png[/img]
建模Get Top Trends服務:
從Constants部分拖拉一個Text常量。數值為'http://search.twitter.com/trends.json'。名字改為Trends URL.
從Basic部分拖拉一個Action，取名Download URL. 給這個action新增一個trigger和一個exit。
從Trends URL constant 到Download URL的trigger建立一個flow。
從Download URL的exit到Get Top Trends的exit建立一個flow。這個服務現在看起來應該像下面這樣：
[img]http://dl.iteye.com/upload/attachment/246458/26efbd4d-f6a4-3f4d-bcc3-588e629d474f.png[/img]
建模Download URL 動作:
從Miscellaneous部分拖拉一個Read Resource.
從Text部分拖拉一個Binary to Text， 從中刪除<Encoding> trigger。
從Download URL 的trigger到Read Resource 的<URL> trigger建立一個flow。
從Read Resource的<Content> exit到Binary to Text的<Binary> trigger建立一個flow。
從Binary to Text的exit到Download URL的exit建立一個flow。Download URL 看起來如下:
[img]http://dl.iteye.com/upload/attachment/246462/7af91761-5aa0-35fd-9410-0730430bf8d0.png[/img]
儲存工程
切換回瀏覽器視窗。應該會自動更新。
你將會看到一個Alert視窗，顯示從Twitter獲取到的JSON格式資料。
注：如果您在國內，那麼因為社會和諧的原因，你將得到無法訪問https://search.twitter.com/trends.json URL的錯誤。不過不要擔心，稍後會給出解決方法。你可以暫時把Twitter search的URL改為Google map的URL來體驗上述過程。
第三步：以iPhone的風格顯示資料
--------------------------------------------------------------------------------
在模型編輯器中，放大到<iPhone View>/Body/Top Trends Screen/List.
右鍵點選List --> Add Element: Content Item.
建模Init 動作:
放大到Init Action.
給Get Top Trends新增一個exit. 命名為Parsed Data。設定其Reptetive屬性。（選中exit物件，點選右鍵）
右鍵點選Init --> Add Ancestor Reference: 選擇Top Trends Screen.
從Get Top Trends的repetitive exit（重疊的灰色小箭頭）到Content Item (Scrollable Pane/List/Content Item)元素的exit建立一個flow。
刪除到Alert的flow。
到目前為止Init 動作應該看起來如下:
[img]http://dl.iteye.com/upload/attachment/246464/1a781755-c6ca-39dd-9975-471155c7d3b2.png[/img]
刪除Alert 元素。
建模Get Top Trends:
從Miscellaneous部分拖拉一個Parse JSON.
從Download URL 的exit到Parse JSON的<JSON Text> trigger建立一個flow。
從Data Types部分拖拉一個Data Structre。取名: Top Trends DS.
從同樣的部分拖拉下面這些元素到Top Trends DS 並如下命名:
as_of: 型別: Text.
trends: 型別: Data Dtructure; Reptetive.
name: 型別: Text.
url: 型別: Text.
從Parse JSON 的<Value> exit 到Top Trends DS 建立一個flow。
從Basic部分拖拉一個Action。取名Convert to Content Item.
為這個動作新增一個trigger 和一個exit。設定動作為repetitive
從Top Trends DS/trends 到Convert to Content Item 的trigger建立一個flow。
從Convert to Content Item 的exit 到Get Top Trends 的repetitive exit (Prased Data) 建立一個flow.
Get Top Trends 服務模型看起來應該如下：
[img]http://dl.iteye.com/upload/attachment/246460/55b32706-26cc-3d9f-a9c5-9bf45fe9ee3d.png[/img]
建模'Convert to Content Item':
右鍵點選Convert to Content Item 的trigger並選擇Show in Repository Explorer. 從Repository Explorer 中拖拉trends 資料結構到模型編輯器中的Convert to Content Item 動作中。
從Convert to Content Item 的 trigger 到trends 建立一個flow。
同樣的: 右鍵點選Convert to Content Item 的exit 並選擇 Show in Repository Explorer. 從Repository Explorer 拖拉Content Item到Convert to Content 動作裡. 從Content Item 到Convert to Content Item 的exit 建立一個flow。
從Constants部分拖拉一個Text 常量，設定數值為: Twitter48.png.
從"Twitter48.png" constant 到 Content Item/Icon/<Path>建立一個flow。
從trend/name 到Content Item/Content Holder/Title Text/<Value>建立一個flow。
從trend/url 到Content Item/Content Holder/Content Text/<Value>建立一個flow。
Convert to Content Item 看起來應該如下:
[img]http://dl.iteye.com/upload/attachment/246466/b23ecf0f-8b22-316e-b223-cd6c806b1fbd.png[/img]
新增影象:
切換到Navigator view (Window -> Show View -> Navigator)
下載圖片: http://downloads.tersus.com/Twitter48.png 並儲存到 [Tersus Workspace]/Twitter/web.
儲存工程.
切換回瀏覽器，應該會自動重新整理。
如果您的所在地能夠訪問twitter網站，您將看到如下頁面：
[img]http://dl.iteye.com/upload/attachment/246468/98f87d43-7e1e-3f1e-83a6-f54e2b960ab9.png[/img]
如果您有幸在和諧的國度裡享受純淨的生活，還想見到如上嘰嘰喳喳的訊息介面，那麼您將需要付出一些額外的努力：
1、 安裝freegate軟體。請Google之。
2、 設定Tersus Studio http代理：Windows->Preference->General->Network Connections
[img]http://dl.iteye.com/upload/attachment/246474/0fe622c3-77fa-3129-8161-3fc71e38baad.png[/img]
到此為此，您沒有寫一行程式碼！您的工作臺上只有如下的模型圖：
[img]http://dl.iteye.com/upload/attachment/246476/65ebb76e-4ac9-3ba9-bffe-133037917790.png[/img]
好吧，我們用滑鼠拖來拖去完成了這個神奇的魔術。如果熟練的話，畫出這個模型圖也許半個小時都不到。您或許還想把這個模型應用到Android、Blackbery、Symbian、Windows Phone、J2ME上去。這也正是平臺開發者所正在努力的方向。毫無疑問，這代表著一種先進的軟體生產方式。我們可以在模型產生的程式碼框架基礎上繼續開發。
最後還需要補充一點，雖然我們完成的是一個移動web程式，但如果您希望和以前那樣通過蘋果App Store的方式來運作，也完全沒有問題。藉助Tersus Studio，您可以把這個工程匯出為一個iPhone本地應用程式即XCode工程。這樣您可以在一個迅速搭建的應用程式框架的基礎上對工程進行再加工。比如新增本地資源訪問（相機、通訊錄、加速度、位置資訊、指南針、短訊息、郵件等）或者更為豐富的使用者介面方面的支援。
我們將開發一個Twitter客戶端的iPhone應用程式。
看到iPhone應用程式，您可能會猶豫。難道我要為此去購買一個Mac機，我是不是還要先申請加入蘋果開發人員計劃，是不是還要買個iPhone？幸運的是，這裡介紹的開發方式，你只要有PC機和瀏覽器即可，大部分工作都由模擬器來完成。
如果您有過iPhone開發經驗，那麼應該知道使用XCode構建一個顯示Twitter最新訊息的客戶端，基本上需要做如下幾件事情：
*）設計介面
*）連線元素
*）建立HTTP連線
*）傳送請求、讀取資源
*）解析JSON資料
*）新增使用者圖示
*）更新介面資料
根據您對XCode工具、iPhone SDK以及Objective C語言的掌握程度，可能會花費幾天或幾個小時不等的時間來完成這個任務。
那麼讓我們試試下面基於模型的方法是不是給我們帶來一些Amazing Magic。
首先您得下載必要的開發工具Tersus Studio windows版本：http://www.tersus.com/#Id=240。
這是一個基於Eclipse的開源開發平臺。
[b]第一步：基礎設定[/b]
--------------------------------------------------------------------------------
1. 建立一個新Tersus project:
o 選擇File -> New -> Tersus Project.
o 輸入Project name: Twitter
o 選擇Template: iPhone Application
o 點選Finish 按鈕
2. 在模型編輯器（即中間的主視窗）中，雙擊放大到 <iPhone View>/Body.
3. 右鍵點選Body --> Add Element: Scroll Pane. 名字修改為: Top Trends Screen.
4. 放大到 Top Trends Screen.
5. 右鍵點選Top Trends Screen -->Add Element: List.
這樣我們就建立了一個包含一個列表控制元件的帶滾動條的<iPhone View>。注意該工程Outline視窗中有兩個檢視，分別是<Desktop View>和<iPhone View>，這裡因為我們建立的是iPhone應用，因此我們僅關注<iPhone View>，展開它可以看到剛才新增的元素。儲存工程並執行它（焦點需要在模型編輯器中）。瀏覽器將會自動啟動。預設情況為開啟https://localhost:8080/twitter，我們在後面加上/iphone.html。也就是https://localhost:8080/twitter/iphone.html。這樣將會出現如下iPhone空白介面：
[img]http://dl.iteye.com/upload/attachment/246444/dfbe22d7-c34a-3def-b59b-ba49f3c95c4f.png[/img]
[b]第二步：讀取Twitter資料[/b]
--------------------------------------------------------------------------------
在模型編輯器中，放大到<iPhone View>/Body/Top Trends Screen/List.
從左邊palette視窗的Basic部分拖動一個Action到Top Trends Screen. 取名為Init.
建模Top Trends Init 動作:
放大到Init.
從palette視窗的Basic部分拖拉一個Service. 取名Get Top Trends.
新增一個exit（灰色小箭頭）到Get Top Trends.
從Display Actions 部分拖拉一個Alert.
從Get Top Trends的exit到Alert trigger（綠色小箭頭）建立一個flow. Init模型看起來如下:
[img]http://dl.iteye.com/upload/attachment/246446/6875b5cd-3737-3cba-a80d-b126ec584b18.png[/img]
建模Get Top Trends服務:
從Constants部分拖拉一個Text常量。數值為'http://search.twitter.com/trends.json'。名字改為Trends URL.
從Basic部分拖拉一個Action，取名Download URL. 給這個action新增一個trigger和一個exit。
從Trends URL constant 到Download URL的trigger建立一個flow。
從Download URL的exit到Get Top Trends的exit建立一個flow。這個服務現在看起來應該像下面這樣：
[img]http://dl.iteye.com/upload/attachment/246458/26efbd4d-f6a4-3f4d-bcc3-588e629d474f.png[/img]
建模Download URL 動作:
從Miscellaneous部分拖拉一個Read Resource.
從Text部分拖拉一個Binary to Text， 從中刪除<Encoding> trigger。
從Download URL 的trigger到Read Resource 的<URL> trigger建立一個flow。
從Read Resource的<Content> exit到Binary to Text的<Binary> trigger建立一個flow。
從Binary to Text的exit到Download URL的exit建立一個flow。Download URL 看起來如下:
[img]http://dl.iteye.com/upload/attachment/246462/7af91761-5aa0-35fd-9410-0730430bf8d0.png[/img]
儲存工程
切換回瀏覽器視窗。應該會自動更新。
你將會看到一個Alert視窗，顯示從Twitter獲取到的JSON格式資料。
注：如果您在國內，那麼因為社會和諧的原因，你將得到無法訪問https://search.twitter.com/trends.json URL的錯誤。不過不要擔心，稍後會給出解決方法。你可以暫時把Twitter search的URL改為Google map的URL來體驗上述過程。
第三步：以iPhone的風格顯示資料
--------------------------------------------------------------------------------
在模型編輯器中，放大到<iPhone View>/Body/Top Trends Screen/List.
右鍵點選List --> Add Element: Content Item.
建模Init 動作:
放大到Init Action.
給Get Top Trends新增一個exit. 命名為Parsed Data。設定其Reptetive屬性。（選中exit物件，點選右鍵）
右鍵點選Init --> Add Ancestor Reference: 選擇Top Trends Screen.
從Get Top Trends的repetitive exit（重疊的灰色小箭頭）到Content Item (Scrollable Pane/List/Content Item)元素的exit建立一個flow。
刪除到Alert的flow。
到目前為止Init 動作應該看起來如下:
[img]http://dl.iteye.com/upload/attachment/246464/1a781755-c6ca-39dd-9975-471155c7d3b2.png[/img]
刪除Alert 元素。
建模Get Top Trends:
從Miscellaneous部分拖拉一個Parse JSON.
從Download URL 的exit到Parse JSON的<JSON Text> trigger建立一個flow。
從Data Types部分拖拉一個Data Structre。取名: Top Trends DS.
從同樣的部分拖拉下面這些元素到Top Trends DS 並如下命名:
as_of: 型別: Text.
trends: 型別: Data Dtructure; Reptetive.
name: 型別: Text.
url: 型別: Text.
從Parse JSON 的<Value> exit 到Top Trends DS 建立一個flow。
從Basic部分拖拉一個Action。取名Convert to Content Item.
為這個動作新增一個trigger 和一個exit。設定動作為repetitive
從Top Trends DS/trends 到Convert to Content Item 的trigger建立一個flow。
從Convert to Content Item 的exit 到Get Top Trends 的repetitive exit (Prased Data) 建立一個flow.
Get Top Trends 服務模型看起來應該如下：
[img]http://dl.iteye.com/upload/attachment/246460/55b32706-26cc-3d9f-a9c5-9bf45fe9ee3d.png[/img]
建模'Convert to Content Item':
右鍵點選Convert to Content Item 的trigger並選擇Show in Repository Explorer. 從Repository Explorer 中拖拉trends 資料結構到模型編輯器中的Convert to Content Item 動作中。
從Convert to Content Item 的 trigger 到trends 建立一個flow。
同樣的: 右鍵點選Convert to Content Item 的exit 並選擇 Show in Repository Explorer. 從Repository Explorer 拖拉Content Item到Convert to Content 動作裡. 從Content Item 到Convert to Content Item 的exit 建立一個flow。
從Constants部分拖拉一個Text 常量，設定數值為: Twitter48.png.
從"Twitter48.png" constant 到 Content Item/Icon/<Path>建立一個flow。
從trend/name 到Content Item/Content Holder/Title Text/<Value>建立一個flow。
從trend/url 到Content Item/Content Holder/Content Text/<Value>建立一個flow。
Convert to Content Item 看起來應該如下:
[img]http://dl.iteye.com/upload/attachment/246466/b23ecf0f-8b22-316e-b223-cd6c806b1fbd.png[/img]
新增影象:
切換到Navigator view (Window -> Show View -> Navigator)
下載圖片: http://downloads.tersus.com/Twitter48.png 並儲存到 [Tersus Workspace]/Twitter/web.
儲存工程.
切換回瀏覽器，應該會自動重新整理。
如果您的所在地能夠訪問twitter網站，您將看到如下頁面：
[img]http://dl.iteye.com/upload/attachment/246468/98f87d43-7e1e-3f1e-83a6-f54e2b960ab9.png[/img]
如果您有幸在和諧的國度裡享受純淨的生活，還想見到如上嘰嘰喳喳的訊息介面，那麼您將需要付出一些額外的努力：
1、 安裝freegate軟體。請Google之。
2、 設定Tersus Studio http代理：Windows->Preference->General->Network Connections
[img]http://dl.iteye.com/upload/attachment/246474/0fe622c3-77fa-3129-8161-3fc71e38baad.png[/img]
到此為此，您沒有寫一行程式碼！您的工作臺上只有如下的模型圖：
[img]http://dl.iteye.com/upload/attachment/246476/65ebb76e-4ac9-3ba9-bffe-133037917790.png[/img]
好吧，我們用滑鼠拖來拖去完成了這個神奇的魔術。如果熟練的話，畫出這個模型圖也許半個小時都不到。您或許還想把這個模型應用到Android、Blackbery、Symbian、Windows Phone、J2ME上去。這也正是平臺開發者所正在努力的方向。毫無疑問，這代表著一種先進的軟體生產方式。我們可以在模型產生的程式碼框架基礎上繼續開發。
最後還需要補充一點，雖然我們完成的是一個移動web程式，但如果您希望和以前那樣通過蘋果App Store的方式來運作，也完全沒有問題。藉助Tersus Studio，您可以把這個工程匯出為一個iPhone本地應用程式即XCode工程。這樣您可以在一個迅速搭建的應用程式框架的基礎上對工程進行再加工。比如新增本地資源訪問（相機、通訊錄、加速度、位置資訊、指南針、短訊息、郵件等）或者更為豐富的使用者介面方面的支援。