作業#58 Apple Music Taiwan Top50

目的：練習解析JSON並自訂資料型別，串接API顯示資料

練習串接Apple Music的API得到台灣Top50的排行榜，用TableView顯示結果點擊Cell後顯示每首歌在Apple Music的畫面

取得API

先點擊下方連結

RSS Builder

點擊後會出現下方的畫面，從下面可以點擊想要取得API類型，有很多不同的可以選擇音樂、App、Podcasts…等，還可以選擇不同國家的榜單還能選擇資料數量最多50個，選擇完會有網址出現在上方

將URL複製後貼上Postman，他可以幫我們排版好比較好閱讀格式

解析JSON自訂資料型別

一層一層解析JSON找尋我們需要的資料

我們需要的資料都在results裡面，這個results是個Array，每首歌是一筆資料

artistName：歌手或團體名稱

name：歌曲名稱

releaseDate：歌曲發行日期

artworkUrl100：歌曲封面照100*100

url：這首歌在AppleMusic的網址

Storyboard

榜單

1. 尺寸100*100，Aspect Ratio 1:1的歌曲封面圖片
2. 用StackView把三個顯示資訊的Label用StackView包起來
3. 最右邊放一個UIImageView顯示system的image，用來顯示排名

Apple Music網頁

1. 用WebKit View顯示該首歌在Apple Music的網頁
2. 用UIActivityIndicator呈現loading動畫

抓資料、抓圖(URLSession)

1. 先聲明一個空陣列裝自訂的資料型別，要裝從API取得的資料
2. 把API的網址放進去URL用guard let取得，因為URL是optional
3. 用URLSession.shared.dataTask下載，會有(data response error)，data可以取得下載下來的資料，這邊我們先不考慮error假設網路什麼的都很順利
4. 用optionalBinding打開data，然後用JSONDecoder()進行解碼，我們這邊下載下來的data是Data型別而且是JSON格式，所以要解碼然後.decode要放入我們自訂的資料型別，解碼出來就會取得符合我們自訂型別的資料
5. 解碼後放入我們聲明的空陣列中，然後下載完成後在main thread去更新tableView，因為更新tableView是畫面的事情所以要在main thread去執行

1. 把資料抓下來後我們就有了每首歌圖片的URL
2. 參數帶入每首歌的URL用URLSession去下載，然後取得data後希望function結束後還能使用這個data所以加入@escaping

TableViewCell

自訂TableViewCell類別，將元件的@IBOutlet連結進去，然後在awakeFromNib去初始圖片ImageView圓角

TableViewController

viewDidLoad

畫面一讀完就開始抓資料

TableViewDataSource

numberOfRowsInSection： 因為dataSource在畫面一讀入就開始了所以這時資料還沒下載完，所以先檢查裝資料的Array有沒有資料，再決定顯示幾格

cellForRowAt：一樣先檢查資料是否下載好了，還沒下載好的話在唯一顯示的cell內顯示Loading…，然後allowsSelection等於false，資料如果還沒載好不能點擊cell，如果下載好了就顯示資料和下載圖片

傳遞Apple Music的網址到下一頁

1. 聲明一個optionalString裝傳遞的網址
2. 用shouldPerformSegue去判斷，使用者有沒有點擊，有點擊cell上面的變數才會有值，如果沒值不能切換頁面

用@IBSegueAction傳值

TableView更新動畫

1. 先重新讀入tableView
2. 取得每個顯示在畫面上的cell，然後用迴圈把每個顯示在畫面cell移動到畫面外
3. 接著再用迴圈以及UIViewPropertyAnimator把每個cell用動畫歸位

WebKit View

在要顯示網頁的ViewController聲明一個變數接收網址

1. 在viewDidLoad把接收的網址帶入URLRequest，然後再給WebKit View
2. 將WebKit View的navigationDelegate設定ViewController
3. 在類別後加上WKNavigationDelegate

class WebViewController: UIViewController,WKNavigationDelegate

網頁讀完就關掉ActivityIndicator的動畫

操作畫面

參考連結：

練習用 Postman，Development Assets & JSONDecoder 將 JSON 轉換成自訂型別

GitHub連結：

GitHub - PogaHuang/Homework58AppleMusicRanking50