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 帳號註冊
你也可能喜歡
TQC+ 創意 App 程式設計認證指南 第二類：App Inventor 人機互動功能
TQC+ 創意 App 程式設計認證指南 104 點餐系統