App Inventor 簡易爬取 TMDB 電影資訊

最近想做一個電影資訊 App，在網路上看到這篇寫得很好的教學文章「[Python網路爬蟲]YAHOO電影-電影院,放映類型,放映時間(使用Yahoo API) | by 行銷科技與資料科學研究室-Foresight Martech&Data Science Studio | Medium」，想說看看能不能用 Inventor 做出類似的功能，但是光是一開始的執行 GET 請求就一直失敗，就算加入 Request Header 也沒用，所以就想說算了！
不過我後來又想到，可以用那篇文章教的方法加上 Flask 或 Django，實際做一個我專屬的 API 查詢網站，然後再用 Inventor 直接抓我 API 網站的資訊，像這樣 Python 結合 App Inventor 的教學，感覺也非常有趣！！！
P.S. 哪天等我成功了再放上來給各位同學欣賞

後來我又找到了另一篇「The Movie DB. 研究強大的電影資料庫 | by Julia Wang | 彼得潘的 Swift iOS App 開發教室 | Medium」文章，原來這個 TMDB 網站有 API 可以使用，所以這次的教學先做爬取這個網站的電影資訊，回傳的資料結構超簡單，非常好爬喔～～

---

1. 請先到以下的教學文章，實作到取得自己的 API Key。

The Movie DB. 研究強大的電影資料庫 | by Julia Wang | 彼得潘的 Swift iOS App 開發教室 | Medium

這個網站的爬取功能非常強大，今天只會示範一小部分而已。

有了自己的 API Key 後，到個人的後台 API 頁面，點文件底下的「developers.themoviedb.org」超連結，進到官方的說明頁面。

於說明頁面的左方列表，點選「DISCOVER」。

---

DISCOVER 是？

---

頁面往下滑會看到「Try it out」，給它點下去。

然後在 Varialbles 底下的 api_key 填入自己的 API Key

再看到底下的 Query String，要來進行搜尋的設定。

將 language 的 en-US 改成 zh-TW

其它都先保持不動，目前排序預設是最受歡迎的，且 page 預設是第一頁。

然後頁面往下滑，會看到「SEND REQUEST」按鈕，先點下去再複製右邊的網址。

此網址就是等等要設定給網路元件的網址

底下 Response 顯示 Error 沒關係，妳把網址複製拿去網址列搜尋就會看到資料了。

---

老師，這堆資料密密麻麻的，我都看不懂啊！！

所以先到 Code Beautiful 網站的 JSON Viewer，按 Load Url 輸入網址後，就可以看到漂亮的格式囉！

Best JSON Viewer and JSON Beautifier Online (codebeautify.org)

---

回到剛剛複製網址那兒

先將網址複製到記事本，再來要修改一下網址。

網址格式本來是這樣：

https://api.themoviedb.org/3/discover/movie?api_key=eb74ce94febc33af53529bf04d1c8811&language=zh-TW&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_watch_monetization_types=flatrate

找到其中的「&page=1」，把它剪下貼到網址的最後面。

https://api.themoviedb.org/3/discover/movie?api_key=eb74ce94febc33af53529bf04d1c8811&language=zh-TW&sort_by=popularity.desc&include_adult=false&include_video=false&with_watch_monetization_types=flatrate&page=1

接著要開啟 App Inventor 來實作了！

2. 開啟 App Inventor 後新增一個專案「TMDB」

所需元件如下：

其實主要元件只有按鈕和網路元件

先新增以下變數：

webUrl 為：(到 page= 就好)

https://api.themoviedb.org/3/discover/movie?api_key=eb74ce94febc33af53529bf04d1c8811&language=zh-TW&sort_by=popularity.desc&include_adult=false&include_video=false&with_watch_monetization_types=flatrate&page=

imageUrl 為：

https://www.themoviedb.org/t/p/w300_and_h450_bestv2

---

老師，為什麼圖片的網址是那樣？

對著圖片按右鍵檢查，往上看兩個標籤，會看到一個 div 標籤的 class 是「image_content backdrop」的，把它點開就可以看到圖片的位置。

https://www.themoviedb.org/t/p/w300_and_h450_bestv2/mXMePP0xelSJ1s69YrN7EYrwiTS.jpg

而後面的 檔名.jpg 在透過 API 爬資料時就會抓到

---

回到程式設計

新增讀取按鈕被點選方塊

「顯示電影資訊」為一個副程式，可先拉一個空的。

判斷如果已經爬過資料，就不要再執行 Get 請求了。

增加當網路元件取得文字方塊

回應程式碼為兩百就是成功

回應內容為 JSON 格式，所以先用 JSON 解碼方塊，再給變數 datas。

將 datas 傳到可帶入參數的副程式方塊「解析資料」(可先拉一個空的)

解析資料副程式

---

從 JSON Viewer 可以看到，我們要的資料都在 results 底下。

results 旁有個「[20]」，代表裡面有二十項資料，在讀取的時候必須用選擇索引值的方塊，先選到其中一項，再繼續讀取裡面的電影資料。

我們等等要抓 overview、poster_path、release_date 和 title 的資料

老師，我怎麼知道，什麼時候要用”索引值”或是”鍵值找關鍵字”的方塊？

其實妳全部用索引值的方塊也可以啦！但會做到發瘋 哈哈哈

看到「{}」符號就用找關鍵字，看到這個「[]」就用索引值。

這對初學者來說應該是個比較容易理解的方法

---

回到程式設計

「顯示電影資訊」副程式

temp 是不固定的整數，用來當清單的索引值。

剩下的就是抓資料而已

OK 那麼 App 到此設計完成！趕緊來測試看看吧

---

App 完整程式方塊

---

aia 專案程式檔案下載

點我下載

---

App 範例實作影片

---

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

可以多點幾次喔~~

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