讀取 Google 搜尋問答資料
App Inventor,  Google

讀取 Google 搜尋問答資料

當我們在瀏覽器搜尋資料時,網頁右方常常會出現,我們搜尋的資料的簡介,例如:妳在 Google 搜尋「什麼是鋼彈」,在右方便會出現一個小格,裡面就是放鋼彈的簡介資料。


然後看到網址列會發現,網址格式是:
https://www.google.com.tw/search?q=什麼是鋼彈


那麼今天要來教如何透過 App Inventor 的網路元件,來抓取框框裡的簡介資料,並顯示在 App 上。





1. 請開啟 App Inventor,新增一個專案,所需元件如下:

文字輸入框、按鈕、標籤、網路、文字轉語音 元件



好了之後切換到程式設計

2. 新增三個變數如下:


變數 URL 存放網址前段部份

變數 Response 存放網路元件取得文字的回應內容


變數 分隔符號 存放我們需要的資料簡介的前面標籤資料
(這裡看不太懂沒關係,後面還會講解。)



3. 增加當按鈕被點選的方塊如下:


先判斷文字輸入空是否為空,有輸入資料再繼續執行下去。

設定網路元件的網址,因為輸入的是中文,所以要先呼叫網路元件,進行 URI 編碼。

設定好標籤後,呼叫網路元件執行 GET 請求。


拖拉當取得文字的方塊如下:


首先先判斷回應程式碼是否為 200,200 就是讀取成功的意思。

將回應內容使用解碼方塊後,設定給變數 Response。

這裡先設定結果標籤的文字為 Response,看一下取得的結果。(等等這個方塊要刪掉)


開啟模擬器執行看看


可以看到顯示出來的是一大串 HTML 資料

而我們需要的簡介資料,就在這裡面的某個地方。

想要知道簡介資料在哪?就要先找到,我們要的 簡介資料 的位置,簡介資料 的前面會有一些標籤資料,我們要把它當成分隔的符號,將資料做拆解後再讀取。


接下來可能對初學者有一點複雜,如果看不太懂,可留言詢問。



找到我們要的簡介資料,在 Response 中的哪個位置!

4. 在 Google 搜尋引擎輸入「什麼是鋼彈」並搜尋


將右邊小格裡的資料,複製一點到記事本。


我複製的資料前面還有「《鋼彈系列》」,這裡盡量不要複製到,因為到 Inventor 讀取時,可能會變成「《<b>鋼彈系列</b>》」,會多 b 標籤 (我在這裡卡很久),如果資料不一致的話,就沒法找到正確位置了!

回到 Inventor


將標籤文字改成如下:


擷取文字長度的方塊,主要是要看簡介資料的前後,有什麼字串可以拿來當分隔符號的。

範圍當然就是從 資料簡介的位置 的前面當起始點。(數字 86 是我隨便填的,填多一點,看到的資料才多)

數字 356 那裡,可自己改成適當的,因為這裡主要是要找簡介資料的前後而已,這整個方塊等等會刪掉。


執行看看:


可以看到資料簡介的前面是「rcuQ6b:npT2md”><span>」(只要隨意取一小段就好,且別的資料前面,不能有相同重複的。例如妳不要只取 <span>,因為其他內容的前面,也有一個 <span>,這樣會沒法分割到我們要的資料。)
其實還是能分割,只是還要找我們要的資料在哪個位置,會很麻煩!

後面是「</span>


接著來分解文字
把標籤文字修改如下:(剛剛的可先不要刪,先拉到旁邊就好。)


當我們用文字分解方塊後,它會變成清單,假如:我們有一個字串資料「“AB123CD”」,對它使用了分解方塊,且符號用「123」,那麼分解後就會變成清單 [“AB”, “CD”]

同理,我們對抓取到的資料 (Response) 用分解方塊,用完後我們要的資料會在清單的第二項,所以用選擇清單項的方塊選擇。

選好後,因為我們需要的資料後面,還跟著很多我們不要的 (</span> 那些),所以再用一次分解方塊。

最後清單項的第一筆資料就是我們要的!


那麼這次的 App 到此………

還沒設計完成!!!


雖然我們搜尋鋼彈,可以正確的顯示結果了,但是如果妳搜尋「鋼彈0083」或「鋼彈F91」的話,程式會執行錯誤!

這是因為它們兩個的資料簡介前面,都是不同的,所以只用「rcuQ6b:npT2md”><span>」當分隔符號是不行的。

可以多試幾筆資料,運用剛剛教的,擷取文字長度的方塊,找到資料簡介前後的字串。

不過這裡我都已經幫妳找好了,因為剛好鋼彈0083鋼彈F91,都是不同的,找到了三個可以當符號的字串,後面都一樣是 </span>

目前可用的分隔符號如下:

rcuQ6b:npT2md"><span>

<span class="hgKElc">

</h3><span>


新增、修改程式方塊

5. 拖拉一個可回傳資料的程序方塊,帶入參數為變數 Response

方塊如下:


程式看似複雜,但其實很簡單,我們判斷 response 裡有沒有這些字串,有的話就將字串給變數 分隔符號,都沒有的話,就設定變數為空值。

最後如果分隔符號有資料就會傳 True,如果沒有資料就傳回 False

這樣如果搜尋到沒有的資料,後續就不會執行,也不會出錯!


回到取得文字方塊,將整個標籤文字方塊刪掉,改成如下:

別被嚇到囉!這其實沒什麼

這次我們先呼叫剛剛定義的程序方塊,如果變數 分隔符號 有資料,就回傳 True 繼續執行。

底下分解符號那,其實跟剛剛教的內容一模一樣,只是還記得我前面有講過,「《》」這個符號到 Inventor 可能會變「《<b></b>》」,所以用「replace all mappings」方塊,把最終結果裡,有 <b> 和 </b> 的部份都刪掉。

最後再設定給標籤文字


好了!整個 App 到此就真的設計完成了
教學過程有講得比較快、不懂的地方,都歡迎留言提問!我有空就會回復





App 完整程式方塊





App 專案 aia 檔案下載





App 執行範例影片




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

2 則留言

發表迴響