#14 模仿 Dcard APP | 串接 Dcard API part1：文章總覽
Published in
5 min readMay 4, 2021
使用功能介紹
1 . 畫面排版使用 storyboard ，層層的stackview 搭配 autolayout，並將各個 Label 與 imageView 拉出 Outlet
@IBOutlet weak var genderImageView: UIImageView!@IBOutlet weak var forumNameLabel: UILabel!@IBOutlet weak var schoolLabel: UILabel!@IBOutlet weak var titleLabel: UILabel!@IBOutlet weak var excerptLabel: UILabel!@IBOutlet weak var likeCountLabel: UILabel!@IBOutlet weak var commonCountLabel: UILabel!@IBOutlet weak var articleImageView: UIImageView!
2 . 主頁使用全部文章的 API 網址
https://www.dcard.tw/service/api/v2/posts使用 postman 分析 JSON 資料，例如主頁一篇文章資料
定義需要用到的資料型別
型別遵從 Codable，代表可解碼或編碼，由於 JSON 資料中不是每筆都有 school 的資料，因此設為 optional
3 . 定義讀取 API 資料的 func loadData，將 API 資料儲存在自定義的 Post 中，在 viewDidLoad 中執行
預覽文章的圖片也需要從 JSON 抓圖片，不是每筆資料都有 mediaMeta，因此如果有此資料才會開始抓圖片，如沒有此資料則隱藏 imageView
4 . 定義下拉更新功能，在 viewDidLoad 中執行，下拉時會讀取新的資料，並更新 TableView 中的資料
在 loadData func 中的 DispatchQueue.main.async 裡停止 refreshControl
DispatchQueue.main.async {
self.tableView.reloadData()
self.refreshControl?.endRefreshing()
}5 . Part 1 完成，未完待續
參考
