#19 串接 API (原本要)仿作IU Instagram頁面— (3)將 JSON 資料轉換成自訂型別顯示

這篇本來是要解析 IU 的 instagram 然後做成一個美美的頁面的，
結果 code 剛寫好就發生一個不幸的消息，
串接 IG 的 JSON “https://www.instagram.com/公開帳號的id/?__a=1”
因為不是正式的 API，所以有時不能抓取，
而我也忘記存下原本的 JSON，
所以這篇只有 code，沒有成品……(哭倒)

先把紀錄 JSON 的重要步驟提供給同學們參考：

利用中斷點將 JSON Data 變成字串

也可以先把 JSON 存在 asset 裡面備份：

讀取專案裡的檔案測試 JSON 解碼

接著就來解析 IG 的 JSON 吧！因為實在是太複雜了看得頭昏腦脹，在網路上翻到 Marso Yu 學長整理的 IG JSON 簡表，非常實用！

於是照著這個原則，做了相關的 swift 檔案：

真的很複雜……😓

拉出各自需要的表格及連結的頁面後，
開始取出 JSON 內的資料：

func fetchItems(){
        let urlStr = "https://www.instagram.com/dlwlrma/?__a=1"
        if let url = URL(string: urlStr){
            URLSession.shared.dataTask(with: url) { data, response, error in
                let decoder = JSONDecoder()
                decoder.dateDecodingStrategy = .secondsSince1970
                
                if let data = data{
                    do {
                        let instagramResult = try decoder.decode(InstagramResult.self, from: data)
                        self.userInfo = instagramResult.graphql.user
                        self.posts = (self.userInfo?.edge_owner_to_timeline_media.edges)!
                        DispatchQueue.main.async {
                            self.collectionView.reloadData()
                        }
                    } catch  {
                        print(error)
                    }
                }
            }.resume()   //一直想到彼得潘上課叮嚀說這個resume()不能忘記...
        }
    }

注意在取出貼文的圖案的時候，需要再做一次 JSON decoding：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "\(PhotosCollectionViewCell.self)", for: indexPath) as? PhotosCollectionViewCell else {return UICollectionViewCell()}
        let post = posts[indexPath.item]
//fetch Images (PhotoWall)
        URLSession.shared.dataTask(with: post.node.display_url) { data, response, error in
            if let data = data{
                DispatchQueue.main.async {
                    cell.photoImageView.image = UIImage(data: data)
                }
            }
        }.resume()
        return cell   
}

IG 上方個人頁面也有一個頭像，這邊也要再取一次 JSON decoding：

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    
       guard let reusableView =
       collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "\(InstagramCollectionReusableView.self)", for: indexPath) as? InstagramCollectionReusableView else {return UICollectionReusableView()}
            
//fetch instagram pics  取頭像並做成圓形的圖案
       if let postImageurl = userInfo?.profile_pic_url{
       URLSession.shared.dataTask(with: postImageurl) { data, url, error in
          if let data = data{
          do {
            DispatchQueue.main.async {
                                reusableView.logoImageView.layer.cornerRadius =                                    reusableView.logoImageView.frame.size.width/2
            reusableView.logoImageView.image = UIImage(data: data)
              }
                 } catch 
            {print(error)}
                 }
              }.resume()
            }

最後就是傳資料到下一頁放大顯示：

@IBSegueAction func showDetail(_ coder: NSCoder) -> detailTableViewController? {
        guard let item = collectionView.indexPathsForSelectedItems?.first?.item 
        else {return nil}
        return detailTableViewController(coder: coder, index: item)
    }

附上 GitHub 在此：(tag 2.0)

Jean-You/hotelDelLuna

希望早點可以把程式順利跑起來啊嗚嗚～～