2013 年 09 月 的封存

使用XE5開發REST客戶端App!

在上星期發表XE5時,我展示了一個範例說明如何使用XE5的REST Client元件來開發一個可執行在Android和iOS手機中的查詢台北市微笑單車的App,在回台北之後許多朋友詢問我是否可提供這個範例,由於我展示的是一個非常簡單,快速的範例,實在沒什麼太多的東西,因此我想不如再把這個範例修改一下, 加入一些有趣的內容讓大有興趣的朋友共享並學習之。

REST Client元件組是XE5新提供的功能之一,它們非常的實用,可以幫助Delphi程式師快速的開發REST客戶端App以呼叫任何的RESTful服務。在XE5中共有8個元件,讀者可以在XE5的元件盤中輸入REST來搜尋這些元件,它們在REST Client分類中,在本文中我們將使用前4個元件來開發微笑單車App:

Image1

 

除了REST Client元件組之外,XE5也提供了一個非常有用的工具程式,RESTDebugger.exe。RESTDebugger在XE5的bin子目錄中,例如在筆者的筆電中是在c:\Program Files (x86)\Embarcadero\RAD Studio\12.0\bin\目錄下。RESTDebugger可以讓我們使用REST呼叫任何的RESTful服務,並且觀察呼叫參數,呼叫結果等重要的資訊。當然如果讀者開發了REST伺服器或是REST服務也可以直接使用RESTDebugger來呼叫測試,非常的方便。

例如在前幾個Delphi版本開發的DataSnap伺服器就是RESTful伺服器,在以前和XE5中我們需要撰寫DataSnap REST客戶端來呼叫DataSnap伺服器提供的服務。但現在我們也可以直接使用RESTDebugger來呼叫。例如下面的圖形是筆者使用瀏覽器呼叫範例DataSnap伺服器中的EchoString方法的結果畫面:

Image3

 

而下圖則是筆者使用RESTDebugger呼叫範例DataSnap伺服器中的EchoString方法的結果畫面,我們可以看到使用RESTDebugger一樣能夠呼叫範例DataSnap伺服器中的RESTful服務:

Image2

 

呼叫REST服務原理非常的簡單,客戶端使用HTTP/HTTP協定,遵循RESTful呼叫規則向遠端RESTful伺服器提出呼叫請求,RESTful伺服器收到呼叫請求後執行客戶端的請求,再把執行結果以JSON的規範封裝再傳遞回客戶端,整個過程可用下面的圖形簡單的說明:

Image22

 

OK,有了這些簡單的概念之後就可以來解決我們的問題了:開發微笑單車App。台北市政府提供了微笑單車的相關資訊,並未允許您使用下面的URL存取這些資訊(本文的目的只是說明如何使用XE5開發RESTful App,如果您真的需要存取微笑單車資訊,請參考台北市政府相關的說明規定):

如果您使用瀏覽器存取上面的URL您可以得到如下的結果:

Image4

 

當然您也可以使用RESTDebugger取得更易瞭解的資訊,例如下圖就是筆者使用RESTDebugger的結果(RESTDebugger真好用,筆者愈來愈喜歡它了):

Image16

 

如果我們仔細查看RESTDebugger取回的結果,我們可以瞭解台北市政府的微笑單車服務是回傳一個JSON物件(由{}封裝),其中又包含了一個JSON陣列(由[]封裝),每一個JSON陣列元素又是一個JSON物件,而這每一個JSON陣列元素就是一個微笑單車場站的資訊:

{

“retCode":"1″,

“retVal":

[

{

“iid":"58″,

“sv":"1″,

“sd":"20120911102245″,

“vtyp":"1″,

“sno":"0000″,

“sna":"捷運市政府站(3號出口)-1″,

“sip":"10.250.1.0″,

“tot":"92″,

“sbi":"15″,

“sarea":"信義區",

“mday":"20130917101443″,

“lat":"25.04067″,

“lng":"121.56828 “,

“ar":"忠孝東路/松仁路(東南側)",

“sareaen":"Xinyi Dist.",

“snaen":"MRT Taipei City Hall Stataion(Exit 3)-1″,

“aren":" “,

“nbcnt":"0″,

“bemp":"77″

}

我們也可以在台北市政府的公共資訊網站查詢到上面每一個JSON陣列元素物件封裝的資訊的意義:

Image5

 

好了,我們幾乎可以開始使用XE5來開發了,但為了讓我們的微笑單車App看起來更專業一點,再讓我們先安裝XE5提供的客製化ListView外觀。

當您安裝了XE5後,在下面的目錄中有2個Delphi封包可以讓您的TListView元件顯示更多的客製化資訊:

c:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile\ListView\

因此請讀者在Delphi IDE中開始下面的2個Delphi封包:

SampleListViewMultiDetailAppearancePackage.dpk

SampleListViewRatingsAppearancePackage.dpk

並且如下圖在專案管理員中安裝這2個Delphi封包:

Image15

 

接著在XE5中建立一個FireMonkey Mobile專案,並且在主表單中加入如下的元件:

Image17

 

在主表單的”微笑單車UBike站”頁面中筆者使用了一個TListVire元件以顯示所有的微笑單車場站資訊,由於在前面我們安裝了SampleListViewMultiDetailAppearancePackage.dpk封包,因此我們可以在物件檢視器中的ItemAppearance子特性ItemAppearance中選擇”MultiDetailItem”選項,”MultiDetailItem”選項可以讓我們在每一個TListView的ListItem中顯示多個資訊。

Image8

 

一旦選擇了”MultiDetailItem”選項之後在ItemObjects特性中就可以看到每一個ListItem有3個MultiDetail子特性,我們可以在物件檢視器中設定每一個MultiDetail子特性的相關特性值:

Image9

 

點選主表單中的RESTClient1,在物件檢視器中進行如下的設定:

 

特性

特性值

BaseURL http://its.taipei.gov.tw/atis_index/data/youbike/youbike.json

點選主表單中的RESTResponseDataSetAdapter1,在物件檢視器中進行如下的設定:

特性

特性值

Response RESTResponse1
DataSet cdsUBikes
RootElement retVal

TRESTResponseDataSetAdapter元件能夠把RESTful服務回傳的JSON資料轉換成Delphi使用的DataSet,因此上面的設定可以把微笑單車回傳的JSON資料轉換到cdsUBikes這個TClientDataSet元件中。但為什麼要設定RESTResponseDataSetAdapter1元件的RootElement特性值為"retVal"?請回頭看看前面RESTDebugger取得的結果,微笑單車場站的資訊是封裝在回傳的JSON物件的retVal元素之中,因此我們設定RESTResponseDataSetAdapter1元件的RootElement為"retVal"代表我們到存取包含微笑單車場站資訊的JSON陣列,把每一個JSON陣列元素轉成一筆DataSet的記錄(JSON物件轉為DataSet記錄):

Image19

 

設定好之後回到主表單,右擊RESTRequest1元件從選單中選擇Execute…項目就可以直接呼叫微笑單車的RESTful服務了,回傳的結果就在cdsUBikes元件中:

Image18

 

資料有了如何顯示出來呢?當然是用LiveBinding了,點選IDE中的View|Live Bindings Designer啟動LiveBinding設計家,如下圖把資料顯示在ListView元件中:

Image10

 

雖然藉由LiveBinding可以很快速的顯示微笑單車場站的資訊,但仔細看看下面的結果,每一個微笑單車場站提供的總停車格和目前的車輛數資料沒有說明文字,那麼要如何解決這個問題呢?

Image20

很簡單,使用Live Bindings的客製化功能即可。請雙擊主表單中的TBindingsList元件,再點選LinkFillControlToField1物件,於物件檢視器中設定它的FillExpressions子特性如下所示:

Image11

之後回到主表單就可以看到如下的結果:

Image12

所有的資訊都很漂亮的顯示出來了:

Image21

最後加上XE5的TLocationSensor元件功能就可以輕易完成這個Android App了,例如下面的圖形就是這個Android App在筆者手機上執行的結果畫面:

UBike1UBike2UBike3

 

 

 

 

 

藉由XE5新的REST功能,類似RESTful服務的App可以瞬間完成,生產力太高了,最後也祝福各位用XE5玩的開心,開發App的速度又屢屢破記錄!

 

廣告

8 則迴響