![App Inventor 簡易爬取 TMDB 電影資訊 App Inventor 簡易爬取 TMDB 電影資訊](https://i0.wp.com/i.imgur.com/AoTEI2y.png?resize=1024%2C538&ssl=1)
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
![](https://i0.wp.com/i.imgur.com/rLwXE6o.png?w=960&ssl=1)
這個網站的爬取功能非常強大,今天只會示範一小部分而已。
有了自己的 API Key 後,到個人的後台 API 頁面,點文件底下的「developers.themoviedb.org」超連結,進到官方的說明頁面。
![](https://i0.wp.com/i.imgur.com/deMb6Wr.png?w=960&ssl=1)
於說明頁面的左方列表,點選「DISCOVER」。
![](https://i0.wp.com/i.imgur.com/42e77tt.png?w=960&ssl=1)
DISCOVER 是?
![](https://i0.wp.com/i.imgur.com/KrrpKTX.png?w=960&ssl=1)
研究強大的電影資料庫
頁面往下滑會看到「Try it out」,給它點下去。
![](https://i0.wp.com/i.imgur.com/MUjc3ba.png?w=960&ssl=1)
然後在 Varialbles 底下的 api_key 填入自己的 API Key
![](https://i0.wp.com/i.imgur.com/MmhSNkI.png?w=960&ssl=1)
再看到底下的 Query String,要來進行搜尋的設定。
將 language 的 en-US 改成 zh-TW
![](https://i0.wp.com/i.imgur.com/MRofWTT.png?w=960&ssl=1)
其它都先保持不動,目前排序預設是最受歡迎的,且 page 預設是第一頁。
![](https://i0.wp.com/i.imgur.com/ABRavA8.png?w=960&ssl=1)
然後頁面往下滑,會看到「SEND REQUEST」按鈕,先點下去再複製右邊的網址。
此網址就是等等要設定給網路元件的網址
![](https://i0.wp.com/i.imgur.com/6RRFmbp.png?w=960&ssl=1)
底下 Response 顯示 Error 沒關係,妳把網址複製拿去網址列搜尋就會看到資料了。
![](https://i0.wp.com/i.imgur.com/lOfBb6l.png?w=960&ssl=1)
老師,這堆資料密密麻麻的,我都看不懂啊!!
![](https://i0.wp.com/i.imgur.com/JAB3Zbs.png?w=960&ssl=1)
所以先到 Code Beautiful 網站的 JSON Viewer,按 Load Url 輸入網址後,就可以看到漂亮的格式囉!
Best JSON Viewer and JSON Beautifier Online (codebeautify.org)
![](https://i0.wp.com/i.imgur.com/IZLBvhd.png?w=960&ssl=1)
回到剛剛複製網址那兒
先將網址複製到記事本,再來要修改一下網址。
網址格式本來是這樣:
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
![](https://i0.wp.com/i.imgur.com/JQ9dpBy.png?w=960&ssl=1)
接著要開啟 App Inventor 來實作了!
2. 開啟 App Inventor 後新增一個專案「TMDB」
所需元件如下:
其實主要元件只有按鈕和網路元件
![](https://i0.wp.com/i.imgur.com/K1CJhFA.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/j00xmdh.png?w=960&ssl=1)
先新增以下變數:
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
![](https://i0.wp.com/i.imgur.com/UB3a3Hg.png?w=960&ssl=1)
老師,為什麼圖片的網址是那樣?
![](https://i0.wp.com/i.imgur.com/W52NkMz.png?w=960&ssl=1)
對著圖片按右鍵檢查,往上看兩個標籤,會看到一個 div 標籤的 class 是「image_content backdrop」的,把它點開就可以看到圖片的位置。
https://www.themoviedb.org/t/p/w300_and_h450_bestv2/mXMePP0xelSJ1s69YrN7EYrwiTS.jpg
![](https://i0.wp.com/i.imgur.com/ybGQNaw.png?w=960&ssl=1)
而後面的 檔名.jpg 在透過 API 爬資料時就會抓到
回到程式設計
新增讀取按鈕被點選方塊
「顯示電影資訊」為一個副程式,可先拉一個空的。
判斷如果已經爬過資料,就不要再執行 Get 請求了。
![](https://i0.wp.com/i.imgur.com/ms1sUKk.png?w=960&ssl=1)
增加當網路元件取得文字方塊
回應程式碼為兩百就是成功
回應內容為 JSON 格式,所以先用 JSON 解碼方塊,再給變數 datas。
將 datas 傳到可帶入參數的副程式方塊「解析資料」(可先拉一個空的)
![](https://i0.wp.com/i.imgur.com/jRfpjiV.png?w=960&ssl=1)
解析資料副程式
![](https://i0.wp.com/i.imgur.com/h7jA2WB.png?w=960&ssl=1)
從 JSON Viewer 可以看到,我們要的資料都在 results 底下。
![](https://i0.wp.com/i.imgur.com/Lgw2Fyu.png?w=960&ssl=1)
results 旁有個「[20]」,代表裡面有二十項資料,在讀取的時候必須用選擇索引值的方塊,先選到其中一項,再繼續讀取裡面的電影資料。
![](https://i0.wp.com/i.imgur.com/FO616JS.png?w=960&ssl=1)
我們等等要抓 overview、poster_path、release_date 和 title 的資料
![](https://i0.wp.com/i.imgur.com/LcrhiaU.png?w=960&ssl=1)
老師,我怎麼知道,什麼時候要用”索引值”或是”鍵值找關鍵字”的方塊?
其實妳全部用索引值的方塊也可以啦!但會做到發瘋 哈哈哈
![](https://i0.wp.com/i.imgur.com/32AG27W.png?w=960&ssl=1)
看到「{}」符號就用找關鍵字,看到這個「[]」就用索引值。
這對初學者來說應該是個比較容易理解的方法
回到程式設計
「顯示電影資訊」副程式
temp 是不固定的整數,用來當清單的索引值。
剩下的就是抓資料而已
![](https://i0.wp.com/i.imgur.com/o1Salq6.png?w=960&ssl=1)
OK 那麼 App 到此設計完成!趕緊來測試看看吧
App 完整程式方塊
![](https://i0.wp.com/i.imgur.com/uu2tUQJ.png?w=960&ssl=1)
aia 專案程式檔案下載
App 範例實作影片
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![App Inventor 模擬器推薦 App Inventor 模擬器推薦](https://i0.wp.com/i.imgur.com/88aLfb5.png?resize=75%2C75&ssl=1)
![【教學】備份 VCD 光碟片 【教學】備份 VCD 光碟片](https://i0.wp.com/i.imgur.com/FzKqIqk.png?resize=75%2C75&ssl=1)