串接數據貓頭鷹資料API

 

開始前先檢查一下以下3項是不是都完成囉

製作APP前需要準備的 ➔ http://cmy.tw/006C91

了解串接資料概念 ➔ http://cmy.tw/006OCr

把要串接的商品加入「我的訂單」 ➔ http://cmy.tw/0066XD

 

完成圖示:


一、畫面內容

共需設定六個物件

1.取得Token按鈕

(1) 新增一個Button物件到頁面中

(2) 將物件名稱改為Button_Token

(3) 將物件顯示(Text)改為Get_Token

 

2.顯示Token文字框

(1) 新增一個TextBox物件到頁面中

(2) 將物件名稱改為TextBox_Token

(3) 將物件寬度(Width)設定為Fill parent

(4) 將允許多行(MultiLine)打勾

 

3.取得Token Web 物件

(1) 新增一個Web物件到頁面中

(2) 將物件名稱改為Web_Token

 

4.取得Data按鈕

(1) 新增一個Button物件到頁面中

(2) 將物件名稱改為Button_Data

(3) 將物件顯示(Text)改為Get_Data


5.顯示Data文字框

(1) 新增一個TextBox物件到頁面中

(2) 將物件名稱改為TextBox_Data

(3) 將物件寬度(Width)設定為Fill parent

(4) 將允許多行(MultiLine)打勾

 

6.取得Data Web 物件

(1) 新增一個Web物件到頁面中

(2) 將物件名稱改為Web_Data

 

 

二、流程

1.兩個按鈕動作

(1) 按下[取得Token按鈕],利用Appid與AppSecret呼叫[取得Token Web 物件]取回token,將token儲存並顯示於[Token文字框]

(2) 按下[取得data按鈕],利用token與商品代號呼叫[取得data Web 物件]取回token,將token儲存並顯示於[data文字框]

2.流程圖

 

 

三、取得Token

1.選擇Button_Token中click程序

代表當此按鈕按下時,會進行的動作可以置放於當中

 

2.設定連線網址為http://owl.cmoney.com.tw/OwlApi/auth

(1) 選擇Web_Token中set Url程序,設定取用資料API的網址

 

(2) 選擇Text-空白程序,並將網址輸入

 

3.設定取用資料API的連線Header參數

Content-Type 設定為 application/x-www-form-urlencoded

(1) 選擇Web中Request Headers程序

 

(2) 選擇Lists中make a list程序連續兩次

 

(3) 將第一個make a list程序改為一個輸入項目(選中項目移到旁邊即可移除項目)

*當程序中有顯示齒輪符號 時,代表此程序可進行項目或功能的調整*

**為什麼需要包兩層,因為呼叫時須要將資料呈現如下:
((Content-Type application/x-www-form-urlencoded)),一組括號就需要用一個 make a list 組成**

 

(4) 選擇兩個Text-空白程序,分別輸入Content-Type 與application/x-www-form-urlencoded

 

4.呼叫Web元件執行Post方法取回資料

(1) 選擇Web_Token中Post Text程序

 

(2) 選擇Web_Token中Build Request Data程序

 

(3) 選擇Lists中make a list程序3次

 

(4) 選擇4個Text-空白,分別輸入appId、您OWL帳號的appid;appSecret與您OWL帳號的appsecret



四、顯示並儲存Token

1.新增一個變數initialize globe to儲存Token,並預設為空

 

2.選擇Web_Token中Got Text程序,此動作代表當網站有回覆文字時,需要進行的動作可以置放於當中

回傳文字說明:

.url:呼叫時所使用的網址

.responseCode:呼叫後網站回覆的執行狀態,通常都是數字,用以辨識執行是否成功

.responseType:呼叫後網站回覆的執行狀態,通常都是文字,用以辨識執行是否成功

.responseContent:呼叫後網站回覆的資料內容

 

3.選擇Variable中initialize local to程序,用一個變數來儲存網站回覆的資料內容,並將名稱改為token_data

 

4.選擇Web_Token中的Json TextDecode程序,此程序可將取回資料由json格式轉為List

範例:

 

5.選擇Web_Token-Got Text中responseContent變數串接到.Json TextDecode程序後面,代表將回傳資料做為格式轉換的資料來源

 

6.選擇Variables中的set …to程序,放置到執行程序中,並將選擇為 token,此程序為指定要將數值儲存到token

**6~11的步驟代表將list變數token_data中key值為’token’的數值取出,放在token變數中,並同時顯示於TextBox_token中**

 

7.選擇Lists中的look up in pairs程序,串接到變數token後方

 

8.選擇Variables中的get…程序,串接於pairs的後方,並選擇變數為token_data

 

9.選擇Text-空白程序,串接於key後方,並填入token

 

10.選擇TextBox_Token中的set…to程序,放到執行程序中

 

11.選擇Variables中的get…程序,串接於set…to程序後方,並選擇變數為token

 

五、透過Token利用OWL API取得資料

1.選擇Button_Data中click程序

代表當此按鈕按下時,會進行的動作可以置放於當中

 

 

2.假設商品為每日收盤行情,商品編號為A2-12453b (免費商品專區可挑選:BCBC005-13780b)

設定連線網址為https://owl.cmoney.com.tw/OwlApi/api/v2/json/A2-12453b

(免費商品專區網址為https://owl.cmoney.com.tw/OwlApi/api/v2/json/BCBC005-13780b)

*商品網址呼叫請參考 『串接資料API格式』*

(1) 選擇Web_Data中Set Url程序,設定取用資料API的網址

 

(2) 選擇Text-空白程序,並將網址輸入https://owl.cmoney.com.tw/OwlApi/api/v2/json/A2-12453b

(免費商品專區網址為https://owl.cmoney.com.tw/OwlApi/api/v2/json/BCBC005-13780b)

 

3.設定取用資料API的連線Header參數

authorization 設定為 "Bearer "+token變數 (Bearer後方有一個空格)

(1) 選擇Web中Request Headers程序

 

(2) 選擇Lists中make a list程序連續兩次

 

(3) 將第一個make a list程序改為一個輸入項目

(4) 選擇Text中的join程序,放於make a list下方,再選擇兩個Text-空白程序,分別輸入authorization 與Bearer (Bearer後方有一個空格)

 

(5) 選擇Variables中的get…程序,串接於join的後方,並選擇變數為global token

 

4.選擇Web_Data-.Get程序,串接於動作最下方,執行Get程序取回資料

 

六、顯示取得資料

1.選擇Web_Data中的.Got Text程序,此動作代表收到網站回覆文字時,需要進行的動作可以置放於當中


2.將取回資料轉為list格式後顯示於TextBox_Data當中

(1) 選擇TextBox_Data中的set…Text程序,放於上述程序中

 

(2) 選擇Web_Data中的.Json TextDecode程序,串接於set…Text之後

 

(3) 選擇Variables中的get…程序,串接於.Json TextDecode的後方,並選擇變數為responseContent

 

七、完成程序圖

八、APP執行畫面

1.開啟畫面

2.取得Token後畫面

3.取得資料後畫面

 

耶~~恭喜大家都完成了!!

有任何意見/疑問歡迎到粉絲專業:數據貓頭鷹CMoney留言私訊小編唷