讀取 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 帳號註冊