雲端資源專題2

2016/07/05 謝碧景(c)編製更新

學習目標

學會『Google試算表』函式及其雲端資源之應用。
學會App Inventor 2 讀取 JSON 資料結構與【鍵:值】讀取之應用。
學會Connectivity通訊類別中【Web網路、ListPicker清單選擇器】元件的設計與應用。

◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)

◆專題2：台幣匯率換算。

先選擇外幣別，再輸入金額，即可開始試算外幣兌換台幣，亦可『幣別交換』或選擇其他幣別兌換。【重點：學會Google試算表之雲端資源及『Web網路、ListPicker清單選擇器』元件的設計與專題應用】。(專案名稱：ExchangeRate.aia、 ExchangeRate.apk) ＊參閱：『臺灣銀行牌告匯率』。

一、專題介紹

匯率的換算是旅遊出國時常需使用的功能，而Google試算表中提供函式功能可獲取國際匯率資料，並計算各幣值與台幣兌換結果。本專題將透過Google試算表匯出各幣別之匯率資料，以利程式分析、兌換應用。 Flag.png

二、專題發想

三、雲端資源應用

(一)以『Google試算表』製作匯率換算表

1.先進入Google『雲端硬碟 https://drive.google.com→新增→Google試算表』如下圖，各幣別名稱請參閱：臺灣銀行牌告匯率。

＊註：

(1)A欄分別輸入各幣別名稱(參閱：『臺灣銀行牌告匯率』)。

(2)B欄 t1 代表外幣換台幣之匯率。

(3)C欄 t2 代表台幣換外幣之匯率。

2.輸入函式：請在【B2】儲存格輸入台幣(TWD)換美元(USD)的匯率函式：

台幣(TWD) 換美金(USD)

=GOOGLEFINANCE("CURRENCY:TWDUSD")

本專題

B2 輸入 =GOOGLEFINANCE("CURRENCY:"&A2&$A$1) C2 輸入 =GOOGLEFINANCE("CURRENCY:"&$A$1&A2)

＊註1：& 是字串連接符號，$欄$列→代表絕對位置。

＊註2：該試算表下方提示：提供的報價非所有市場即時報價 (最長可能延遲20分鐘)，故僅供參考，不宜做為買賣依據。

3.複製函式後，即可獲得各幣別間之匯率，如下圖(連結本專案提供之試算表p2_ExchangeRate)。

(二)將『Google試算表』發佈到網路

4.如下左圖，選取【檔案→發佈到網路】，即如下中圖，按下【發佈】，接著如下右圖，合按【Ctrl+C】即可複製連結網址，測試顯示試算表資料。

＊註：發佈的網址。

https://docs.google.com/spreadsheets/d/1OhQOpQYkfiGVGSJ4JCu2r0pzH1vdUNWBZImnxVsTrIo/pubhtml

(三)將『Google試算表』發佈格式轉為JSON格式

5.因Google試算表發佈之資料，在App Inventor 2 無法直接讀取，故需轉為App Inventor 2可讀取之JSON (JavaScript Object Notation)格式。

以剛發佈的Google試算表為例，如下圖，在雲端硬碟右上方點選【清單檢視】，接著在試算表檔名上按右滑鼠→選取『取得檔案共用連結』→即可複製下圖 id=後面的編號。

6.轉為JSON格式，其網址格式如下：

https://spreadsheets.google.com/feeds/list/試算表ID編號/od6/public/values?alt=json

- 將試算表ID加入後如下：(紅色標記為試算表之ID編號)

https://spreadsheets.google.com/feeds/list/1OhQOpQYkfiGVGSJ4JCu2r0pzH1vdUNWBZImnxVsTrIo/od6/public/values?alt=json

在瀏覽器即可檢視『Google試算表』以 JSON格式之發佈。

(四)在App Inventor 2 讀取JSON 資料 (專案名稱：p3_json.aia)

7.透過 Code Beautify 線上工具可檢視資料結構：先進入 JSON Viewer→選取【Load Url→輸入『Google試算表』以JSON格式之發佈網址】，如下圖，右側視窗(Result : Tree Viewer)中呈現樹狀結構之資料，在資料結構中顯示位於【feed\entry】下每筆資料有3個欄位，分別為幣別(gsx$twd)、外幣換台幣匯率(gsx$t1)及台幣換外幣匯率(gsx$t2)。

＊註：尋找關鍵字『gsx$twd』→找到『幣別』代碼，但資料仍為清單，故需再以關鍵字『$t』找到『代碼』資料。

8.測試：以【Connectivity通訊】類別中【Web網路】元件讀取JSON(JavaScript Object Notation)格式資料。

9.測試題：程式設計：

如下圖，設定【Web網路】元件要讀取的網址，本例【Google試算表以JSON格式發佈的網址】來執行讀取請求。

( https://spreadsheets.google.com/feeds/list/1OhQOpQYkfiGVGSJ4JCu2r0pzH1vdUNWBZImnxVsTrIo/od6/public/values?alt=json )

將讀取的資料解碼JSON文字：

(1)讀取之文字透過【解碼JSON文字】將『回應內容』轉為清單，接著以關鍵字『feed』找到資料→再以關鍵字『entry』找到所有匯率資料，並儲存至清單內。

(2)接著在清單中循序讀取：分別如下：

尋找關鍵字『gsx$twd』→找到『幣別』代碼，但資料仍為清單，故再以關鍵字『$t』找到『代碼』資料。
尋找關鍵字『gsx$t1』→再尋找關鍵字『$t』→找到外幣換台幣『匯率』。
尋找關鍵字『gsx$t2』→再尋找關鍵字『$t』→找到台幣換外幣『匯率』。

10.執行結果：按下按鈕→即讀取出JSON格式之資料內容。

四、畫面編排(Designer)頁面

- 即介面配置，如下圖，Screen1屬性【畫面方向→設定『鎖定直式畫面』】，並核選『允許捲動』，以利編輯，待程式設計時再取消『捲動』。(專案名稱：ExchangeRate.aia)

(一)使用元件及其屬性設定：

(二)介面配置：

1.主畫面設計：

2.元件簡述：

- labExchange1、labExchange2：為標籤元件，顯示幣別代號。如下：

flag1、flag2：為圖片元件，顯示幣別『國旗』圖示，圖檔由【上傳文件→素材】 Flag.png。
由inputNum(文字方塊)輸入金額→換算各幣別後，由outputNum(標籤)顯示結果。
按鈕元件：
- btnClear(按鈕)：按下【CLEAR】按鈕，可清除inputNum(文字方塊)及outputNum(標籤)數值，
- btnCompute(按鈕)：在inputNum(文字方塊)輸入數值後，按下【開始試算】按鈕，即可開始計算結果。
- btnSelect(清單選擇器)：會顯示【清單選擇器】元件以利選擇要計算匯率之幣別。
- btnChange(按鈕)：可交換幣值。
- btnUpdate(按鈕)：按下會重新由網路更新匯率資料。

五、程式設計(Blocks)頁面

(一)定義全域變數：

(1) changelist 以清單儲存讀取之匯率資料。

(2) type 判斷幣值交換類型，1代表外幣兌換台幣，2代表台幣兌換外幣。

(3) ans 儲存兌換結果。

(4) money 以清單儲存所有可兌換的幣別代號，可供清單選擇器元素應用。

(5) cTWD 以清單儲存所有外幣兌換台幣之匯率。

(6) TWDc 以清單儲存台幣兌換所有外幣之匯率。

(二)以【Web網路】元件擷取網頁資料(讀取雲端資源)：

- 首先Screen1初始化→先取消『允許捲動』，再設定【Web網路】元件要讀取的網址，以【Google試算表發佈的網址】來執行讀取請求。

(三)將讀取的文字資料解碼JSON文字：

如下圖：當回應程式碼為200，則代表讀取成功，即可開始資料整理分類，以利後續使用。

(1) 讀取之文字透過【解碼JSON文字】將『回應內容』轉為清單：以關鍵字『feed』找到資料→再以關鍵字『entry』找到所有匯率資料，並儲存至changelist清單中。

(2) 接著在changelist清單中循序讀取：分別如下

- 以關鍵字『gsx$twd』→找到『幣別』代碼，但資料仍為清單，故再以關鍵字『$t』找到『代碼』幣別資料，並新增到money清單中。
- 以關鍵字『gsx$t1』→再以關鍵字『$t』→找到外幣換台幣『匯率』→新增到cTWD清單中。
- 以關鍵字『gsx$t2』→再以關鍵字『$t』→找到台幣換外幣『匯率』→新增到TWDc清單中。

(3) 將『money』清單內容→設定給『btnSelect』清單選擇器之元素內容。

(4) 若『labExchange1』沒有文字內容，即尚未選取幣別，則打開『btnSelect』清單選擇器選框，以供選取幣別資料。

(四)【選擇幣別】按鈕設定：