App Inventor學習記錄113-用網路元件,取得網頁上的資料

這個是我第一次用網路元件去抓網路上的資料,有點麻煩,但還挺好玩的。這次要抓的是合作金庫的外匯匯率。

記錄一下:
App Inventor學習記錄113-用網路元件,取得網頁上的資料


這次的完成品如下。

點擊取得當下匯率按鈕的時候,就會去合作金庫的網頁抓資料。
抓到資料後,連線情形就會從未取得資料,變成已取得資料。
再從下拉式選單中,選擇要顯示的匯率。
點擊顯示匯率後,在下方的標籤就會出現對應的匯率值。


畫面編排的部份如下。

最重要的元件,就是網路元件
這次主要就是用網路元件,去抓網頁中的資料,取得資料之後,再用文字方塊的組合,去找到要呈現的文字的位置之後,再把它顯示出來


全部的程式碼如下。


第 1部份的程式碼說明。

先建立三個變數清單。
變數_所有幣別,這個是要給下拉式選單用的。
變數_買入字串對應表變數_賣出字串對應表,這兩個是用來放特定的字串用的。
這裡的特定字串要從網頁的原始碼去找,比方說 ctl02_lbIPROMPT_EXCHANGE這一個,就是代表美元的買進匯率,在這兩個變數中的其它字串,通通都是從網頁的原始碼中去查找到的。


取得這些參數方法,就是在網頁上按滑鼠右鍵,點擊檢示網頁原始碼


然後,再按下 CTRL+F,用美元的買入價格 27.8300去搜尋,找到這個數字之後,看到這個數字前面的字串,ctl02_lbIPROMPT_EXCHANGE,這個就是我們要複製下來使用的字串。

只是這裡要注意一點,我們最好再用 ctl02_lbIPROMPT_EXCHANGE這個字串去搜尋一次,通常找到的值都會全部的原始碼中的是唯一一串字串,但還是確認一下比較好。

其它字串的部份的做法也是一樣的,同樣用畫面上的價格下去做搜尋,找到價格前面的字串,再確認一下找到的字串是不是唯一的一串之後,就可以把它加入到我們的變數之中。


第 2部份的程式碼說明。

變數_全部的資料,這是用來存放網路元件,從這個網頁上抓下來的全部資料用的。
變數_字串_買入幣別變數_字串_賣出幣別,這兩個變數會在用下拉式選單選擇幣別後,自動的代入該幣別所對應的字串是什麼。
變數_初始位置_買入變數_初始位置_賣出,這兩個變數在下面的程式碼中,會用文字方塊來查找對應字串的位置,是位於網頁原始碼中的第幾個字用的。
變數_字串的長度_買入變數_字串的長度_賣出,這兩個同樣是用文字方塊,用來確認對應字串本身的長度是多少,比如說 ctl02_lbIPROMPT_EXCHANGE這個字串的長度,就會是 24。


第 3部份的程式碼說明。

螢幕一開始的時候。
把下拉式選單 1.元素,設定成變數_所有幣別這個清單。
網路 1.網址,設定為 https://www.tcb-bank.com.tw/finance_info/Pages/foreign_spot_rate.aspx,也由於我們把網址設定成這裡,所以等一下在網路元件抓資料的時候,就會抓這個網址的資料。
顯示匯率按鈕的啟用,設定為假讓系統抓到資料之前,這個按鈕就不能被按


第 4部份的程式碼說明。

資料更新按鈕被點擊的時候。
呼叫網路 1.執行 GET請求。也就是讓網路元件去剛才設定網址中抓資料
把標籤_連線情形.文字,設定成,連線中請稍候。抓資料都是得花上一點時間的。


第 5部份的程式碼說明。

當網路 1.取得文字。也就是網路元件抓到資料之後
變數_全部的資料,設定為回應內容這裡的回應內容就會是我們設定那個網址的網頁原始碼
標籤 6.文字,設定成回應內容。這一個實際在用的時候可以刪掉,但在寫程式的時候,可以多拉幾個標籤出來顯示相關的訊息,這樣比較好做判斷。
標籤_連線情形.文字,設定成已取得資料。到這裡的時候,APP已經抓到網頁的資料,所以修改一下對應標籤的顯示內容,這樣會看的比較清楚。
按鈕_顯示匯率.啟用,設定為真。有資料之後,就把這個按鈕設定成可以被按下。


第 6部份的程式碼說明。

當下拉式選擇選擇完成之後。
我們就依照選擇項是那個,設定變數_字串_買入幣別以及變數_字串_賣出幣別這兩個字串。
其它就是把相對應標籤的文字,設定成應該要顯示的內容。


第 7部份的程式碼說明。

按鈕_顯示匯率被點擊的時候。
先判斷一下,下拉式選中 1.選中項,是不是美元、澳幣、英鎊中的其它一項。
如果是其中一項的話才進行下面的程式。

變數_初始位置_買入的值,用求字串在文字中的起始位置的文字方塊,來找出字串位於網頁原始碼中的第幾個字元
比方說我們在下拉式選單中,選擇了美金,那麼變數_字串_買入幣別的值就會是 ctl02_lbIPROMPT_EXCHANGE
再來就是用求字串在文字中的起始位置這個文字方塊,去找 ctl02_lbIPROMPT_EXCHANGE位於變數_全部的資料,也就是全部的網頁原始碼中的第幾個字元。這裡會得到一個數字,比方說是 56545,

接著把變數_字串的長度_買入的值,用求長度的文字方塊,去求 ctl02_lbIPROMPT_EXCHANGE這個字串有多長,這裡同樣會得到一個數字 24,也就是這個字串的長度。

得到這兩個數字之後,接下來就好處理了。
標籤_買入標籤.文字,設定成我們要的值就可以了。
說明一下這個文字方法的用法。

從文字這裡,我們放上變數_全部的資料。也就是我們用網路元件抓到的該網頁的網頁原始碼。

第這裡,我們放上數學加法的方塊,把變數_字串_初始位置_買入的值,也就是 56545,加上變數_字串_買入幣別的值,也就是 24,再加上 2之後,就會是美元買入匯率的初始位置。
加 2的原因,是因為在網頁原始碼中 ctl02_lbIPROMPT_EXCHANGE的後面,還有 “>這兩個符號,這個是固定的,所以這裡直接加 2就可以了。

提取長度放 7,這是因為美元匯率 27.8300的長度是 7。


這樣就完成了。
這還是我第一次直接從網頁上抓資料來用,類似的應用還挺多的,後續我應該會把這個範例延伸一下,看看我還能做那些應用,到時候再拿出來跟大家做分享。
這次的 aia檔的下載連結如下:
點我下載NO_113_Get_data_from_url.aia

我在 line上有建立一個「APP INVENTOR 交流」的社群,如果有問題的話,大家也可以在這裡討論。人多力量大,大家可以互相的交流學習。
而且 line也很方便,有什麼問題截個圖看一下,會比文字說明來的清楚些,這也是比在網頁下方或是 youtube影片下方留言討論更方便的地方。

有興趣的朋友可以點擊連結加入,也可以掃描 QR code加入。
您已被邀請加入「APP INVENTOR 交流」!請點選以下連結加入社群!
https://line.me/ti/g2/Loxwrcc2iNRS5-Qd4SFXxQ?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響