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

• 學會『Google試算表』函式及其雲端資源之應用。

• 學會App Inventor 2 讀取 JSON 資料結構與【鍵:值】讀取之應用。

• 學會Connectivity通訊類別中【Web網路、ListPicker清單選擇器】元件的設計與應用。

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

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

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

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

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

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

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

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

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

(三)將『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)。

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格式之資料內容。

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

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

(二)介面配置：

1.主畫面設計：

2.元件簡述：

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

• flag1、flag2：為圖片元件，顯示幣別『國旗』圖示，圖檔由【上傳文件→素材】 Flag.png。

• 由inputNum(文字方塊)輸入金額→換算各幣別後，由outputNum(標籤)顯示結果。

• 按鈕元件：

  • btnClear(按鈕)：按下【CLEAR】按鈕，可清除inputNum(文字方塊)及outputNum(標籤)數值，

  • btnCompute(按鈕)：在inputNum(文字方塊)輸入數值後，按下【開始試算】按鈕，即可開始計算結果。

  • btnSelect(清單選擇器)：會顯示【清單選擇器】元件以利選擇要計算匯率之幣別。

  • btnChange(按鈕)：可交換幣值。

  • btnUpdate(按鈕)：按下會重新由網路更新匯率資料。

(一)定義全域變數：

(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』清單選擇器選框，以供選取幣別資料。

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

• • 當選取幣別後，依其選擇之幣別顯示幣別文字及國旗圖示。

(六)【CLEAR】按鈕設定：

• • btnClear【CLEAR】(按鈕)：被按下，則 ans變數歸0、清空inputNum(文字方塊)及outputNum(標籤)內容。

(七)【幣別交換】按鈕設定：

• • btnChange【幣別交換】按鈕：為清單選擇器，被按下，可交換幣值。

(八)【即時更新】按鈕設定：

• • btnUpdate【即時更新】按鈕：被按下，會重新執行【Web網路】元件讀取網址之動作，即重新載入資料。

• 先以QR碼掃瞄器掃描二維條碼，接著下載*.apk檔，安裝至手機執行結果：選取功能列【打包apk→打包apk並顯示二維條碼】(註：此二維條碼僅維持2小時)。

• • ActivePresenter：Screen Recording & Interactive ELearning Authoring Software.

  • 作品展示：專題執行成果影片(模擬器/或手機)

→(1)上傳影片至YouTube：進入 YouTube網站→上傳→選取要上傳的檔案→設定：標題、隱私權設定(公開、非公開、私人)、影片類別、說明等 教學影片。

→(2)插入連結： 個人學習歷程檔網頁(ePo)→貼上您 YouTube 影片的網址、設定影片顯示大小、勾選包含標題→儲存 教學影片。

• • 延伸思考：呈上，不同幣別之兌換。(檔名：CurrencyExchange.aia)

＊註：台灣匯率通：http://www.waccliu.tw/