#16 YouTube Data API

練習用API下載資料,這次抓了YouTube資料,並選了每天都會看的瑜伽頻道來練習,由於還沒學到儲存資料在手機中,這次只先練習了加入喜愛項目的功能(但重開App記錄就會消失哈)

作業練習項目
-用YouTube API取得影片資料
-利用decoder解碼JSON資料
-將傳回的資料顯示在TableViewController中
-加入喜愛影片按鈕功能
-使用SegmentedControl選擇顯示全部影片或只顯示喜愛影片
-點選cell連結至YouTube影片(用YouTube App或Safari開啟)

Demo動畫

YouTube API抓資料及JSON解碼

這次要抓的是指定頻道的所有影片清單,因此只需要知道頻道的ID即可抓取資料。程式碼如下,把channelId及apiKey替換後即可用這個網址得到JSON資料。

"https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails,status&playlistId=\(channelId)&key=\(apiKey)&maxResults=50"

YouTube API一次最多只能抓到50筆影片,可以利用得到的JSON資料中的下一頁token來繼續抓取下一頁資料直到全部抓完,但這次就沒有做了只抓了50筆。可以用下列程式碼來抓取下一頁資料(替換掉nextPageToken)

"https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails,status&playlistId=\(channelId)&key=\(apiKey)&maxResults=50&pageToken=\(nextPageToken)"

這邊寫了fetchData的function來抓資料,並將抓好的資料整理到videos中。

其中用到了兩個Struct。
第一個struct是SearchResponse,這邊是依照JSON資料的分層來寫。

第二個struct是用來整理所需要的影片資料,這邊只存了影片標題、縮圖網址、影片ID,最後加入isFavorite的變數來存取是否為喜愛的影片。

將抓取到的資料顯示在TableViewController

使用CustomCell,每個cell會顯示影片封面圖片、影片標題及愛心按鈕。

其中影片封面圖片為從API抓到的網址,這邊另外寫了getImageFromUrl()來將傳入的URL變數回傳成UIImage。

加入喜愛項目

點選cell的愛心按鈕可以將影片加入喜愛項目,

點選愛心按鈕加入喜愛項目

由於TableView的cell有重複利用的特性,因此在每個影片中有另外設定isFavorite變數來存取是否為喜愛項目,每次點選愛心按鈕後會自動切換true或false,並且用reloadRows來更新被點選的cell內容。

使用SegmentedControl切換顯示全部影片或喜愛項目

點選上方的segmentedControl可以切換顯示所有影片或喜愛項目。

這邊用兩個array來存放影片資料,videos存放API抓到的所有影片資料,favoriteVideos則存放isFavorite為true的資料,會在每次切換segmentedControl時更新。

連結至YouTube影片

這邊不用在Storyboard拉controller,直接用程式碼即可完成。目標是能直接開啟YouTube App顯示所選的影片,若是手機沒有安裝YouTube App的話則用Safari開啟網頁。

以Safari開啟YouTube網頁
以YouTube App開啟影片(模擬器沒有裝YouTube所以這是用實機測試的畫面)

直接用YouTube App開啟的連結網址為

"youtube://\(videoId)"

使用Safari或其他瀏覽器開啟的連結網址為

"https://www.youtube.com/watch?v=\(videoId)"

先用UIApplication.shared.canOpenURL(youtubeUrl)確認是否能開啟,可以的話代表有安裝YouTube App,直接使用第一個網址,若不行則使用第二個網址由瀏覽器開啟影片。

--

--