Dcard APP Demo｜ Part1：貼文總覽
Published in
8 min readOct 18, 2021
功能介紹：
1. 畫面佈置：
使用storyboard做畫面佈置，運用了StackView和AutoLayout將畫面做了編排呈現，並為會改變的部分元件拉IBOutlet。
2. 串接API：
主頁使用熱門文章的API網址，為主網址加上一些參數組成，參數部分可至參考網站部分觀看。
https://www.dcard.tw/service/api/v2/posts?popular=true&limit=30用Postman觀看回傳的Response，分析JSON資料。
[
{
"id": 237135680,
"title": "致那時候不被看好的你",
"excerpt": "遙想多年前，在離職前一天的外景，因緣際會下搭了主持人的便車，同是高雄人的我們很快就聊了開來，“覺得你很厲害耶，每天腳本才一張，你都能主持的那麼好”，“沒有啦⋯感覺這節目有沒有我，都沒差吧”，語畢他的神",
"anonymousSchool": false,
"anonymousDepartment": false,
"pinned": false,
"forumId": "ba0145a2-adff-4229-9a84-9b26ebd2f7f0",
"replyId": null,
"createdAt": "2021-10-03T04:56:41.243Z",
"updatedAt": "2021-10-03T04:58:20.226Z",
"commentCount": 59,
"likeCount": 3896,
"withNickname": true,
"tags": [],
"topics": [
"金鐘獎"
],
"meta": {
"layout": "classic"
},
"globalPinned": null,
"forumName": "戲劇綜藝",
"forumAlias": "tvepisode",
"nsfw": false,
"gender": "M",
"school": "南港大卡稱",
"department": "doragonbee",
"replyTitle": null,
"mediaMeta": [
{
"id": "5c46c0ba-422d-4cd3-8072-99b486e594e2",
"url": "https://i.imgur.com/IDOb7wOl.jpg",
"normalizedUrl": "https://i.imgur.com/IDOb7wOl.jpg",
"thumbnail": "https://i.imgur.com/IDOb7wOl.jpg",
"type": "image/thumbnail",
"tags": [
"ANNOTATED"
],
"createdAt": "2021-10-03T04:56:41.243Z",
"updatedAt": "2021-10-03T04:58:20.226Z",
"width": 644,
"height": 362
},
{
"id": "5c46c0ba-422d-4cd3-8072-99b486e594e2",
"url": "https://i.imgur.com/IDOb7wO.jpg",
"normalizedUrl": "https://imgur.com/IDOb7wO",
"thumbnail": "https://i.imgur.com/IDOb7wOl.jpg",
"type": "image/imgur",
"tags": [
"ANNOTATED"
],
"createdAt": "2021-10-03T04:56:41.243Z",
"updatedAt": "2021-10-03T04:58:20.226Z",
"width": 644,
"height": 362
}
],
"reactions": [
{
"id": "286f599c-f86a-4932-82f0-f5a06f1eca03",
"count": 3881
},
{
"id": "011ead16-9b83-4729-9fde-c588920c6c2d",
"count": 8
},
{
"id": "514c2569-fd53-4d9d-a415-bf0f88e7329f",
"count": 4
},
{
"id": "e8e6bc5d-41b0-4129-b134-97507523d7ff",
"count": 2
},
{
"id": "4b018f48-e184-445f-adf1-fc8e04ba09b9",
"count": 1
}
],
"hidden": false,
"customStyle": null,
"isSuspiciousAccount": false,
"isModerator": false,
"layout": "classic",
"spoilerAlert": false,
"enablePrivateMessage": false,
"totalCommentCount": 59,
"withImages": true,
"withVideos": false,
"media": [
{
"url": "https://i.imgur.com/IDOb7wO.jpg"
}
],
"reportReasonText": "",
"excerptComments": [],
"edited": false,
"postAvatar": "",
"activityAvatar": "",
"verifiedBadge": false,
"memberType": ""
}
]接著定義一些會用到的資料型別
名字跟資料型別都必須相對應，不然會導致抓不到資料。
自定義的回傳資料也都必須遵從Codable才可以進行解碼(Decodable)或編碼(Encodable)。
有些作者可能會隱藏學校，可以從回傳的Response中的”anonymousSchool” = false 此處可知上面的貼文並未隱藏，所以可以抓到school的值，但有些人可能會隱藏所以必須設為optional，同樣的有些貼文有圖有些沒圖所以mediaMeta也必須設為optional。
3. 串接API：
將抓取資料的的func整合在一個file裡，需要時再個別呼叫。
在viewDidLoad中執行即可獲得來自此url的response。
再將取得的response設置到cell中。
4. 定義下拉更新頁面的功能
在fetchPosts func中定義了.endRefreshing()讓其更新完頁面後停止。
DispatchQueue.main.async {
self.tableView.reloadData()
self.refreshControl?.endRefreshing()操作影片：
程式碼：
參考網站：
