本文要介紹如何使用 App Inventor 的 Web 元件來取得網路上的比特幣價格走勢，並以 Google Chart折線圖來呈現。相關的應用我們已經寫過很多種，藉此您可知道 json 格式算是相當普遍的應用。
| 作者/攝影 | 曾吉弘 |
| 時間 | 3小時 |
| 成本 | 0 |
| 難度 | * * * |
| 材料表 |
|
比特幣這款虛擬貨幣誕生於2009年，從一開始就受到矚目，價格也節節攀升。世界上許多企業與人們開始接受比特幣作為付款方式之一。有些實體店家也收/販售比特幣，例如台灣全家超商。當然，比特幣也可以匯兌方式交易，因此有以美金與其他主要貨幣計價的價格。2017年2月份查詢結果為1:1031。
線上比特幣服務
開始寫程式之前，我們得先知道如何取得比特幣的目前價格 （美金為單位）。
在網路上提供比特幣的目前價格或是歷史價格走勢的網站很多，例如Coindesk：
http://www.coindesk.com/price/
您可以在網站上取得比特幣的目前價格，還有相當漂亮的圖表來顯示比特幣的歷史價格走勢：
但這只能在網站上操作，我們需要一個介面或格式讓App Inventor可以擷取。因此在此我們採用另一個 coindesk 所提供的 API，這樣就能透過App Inventor的Web元件來處理它了：
http://api.coindesk.com/v1/bpi/currentprice.json
您可以直接從網路瀏覽器開啟，可看到這樣的文字網頁，只是格式是我們喜歡的json：
或是可用 JSONEditorOnline 這類型的網頁幫助您了解這份 json 的架構：
App Inventor程式說明
本範例所使用的元件不多，Button用來觸發網路爬資料等作業、Web元件負責擷取並解析json格式資料後轉成list。Clock元件是用來控制每20秒要求Web元件去取得資料，累積到10筆資料的話就要求WebViewer元件以Google Chart 折線圖的方式來呈現比特幣價格走勢。
Designer頁面
請依照下圖來完成本範例的元件配置，不需要一模一樣，差不多就可以了。
請記得把 Web (不是 WebViewer喔！) 元件的 Url 欄位填入資料來源：”http://api.coindesk.com/v1/bpi/currentprice.json”
Blocks頁面
STEP1 按鈕啟動Clock取得最新價格的json資料
按下 Button_update 會把相關的變數、list 清空，並啟動 Clock.Timer 來更新資料。
STEP2 每20秒取得一次資料
Clock.Timer每20秒會啟動一次(TimerInterval = 20000)，首先呼叫 web.get 方法去取得網頁內容。接著檢查 temp list 的長叫度，如果 >= 10 (這是我們自行決定的資料長度，您可以自行修改) 就呼叫 updateGraph 更新畫面並關閉 Clock.Timer。反之如果筆數不到10，則把 parseJson (就是該次呼的比特幣美金計價資料) 丟到 temp list 中。
STEP3 取得資料後進行解析
Web.GotText事件會在取得資料後自動啟動，在此我們把取得的網頁資料(純文字網頁，只是格式剛好是 json，因此您也可以這樣建立網頁，超簡單) 使用 Web.JsonTextDecode指令轉成 list 之後放入 json 變數中，並設定為 ListPicker 的內容。
STEP4 parseJson 副程式
這就是圖形化介面比較麻煩的地方了，為了取得比特幣的美金價格，要使用 select list item指令依序拆解，因此為了不要讓畫面被這一堆指令塞滿，還是用副程式包起來比較好。
STEP5 updateGraph 副程式
本副程式中，首先使用 for 迴圈重複10來組合每次取得的比特幣價格，搭配”,”分隔之後再組合下一筆價格。
最後呼叫 WebViewer 開啟 Google Chart API 網頁即可看到走勢折線圖。由於我們只需要修改 chd=t: 後面的資料內容，所以前面的網址都以字串方式寫在程式當中。相關Google Chart API 請參閱官方網站。
操作
安裝好程式之後請點選[Update bitcoin price]按鈕，就會在狀態列看到目前已取得的資料筆數，一旦累積到10筆資料就可以看到折線圖了。比特幣一直在漲啊…
如果不耐煩的話，您可以把Clock.Timer的 TimerInterval改快一點，例如1000代表每秒更新一次，但這樣一來由於時間太密集，比特幣價格變化不會太大(當然還是有可能暴漲暴跌)，所呈現的走勢圖應該就會是一條直線了。
相關文章：