#167 畢業的轉職作品 — 利用 Dummy & Imgur API 製作 IG 社群 App — 包含動態牆，新增 post，註冊帳號，留言，tag & like
有許多朋友問彼得潘，想轉職成為 Swift iOS App 工程師，最好準備什麼樣的 App 作品呢 ?
有興趣的朋友不妨考慮利用 Dummy & Imgur API，模仿製作類似 IG 的社群 App。它將包含動態牆，新增 post，註冊帳號，留言，tag & like 等功能，使用到許多新手 iOS App 工程師需具備的技術，滿適合新手練功跟當轉職的作品。
Dummy API
Dummy API 提供社群 App 常見的資料，方便我們實現 post，user，留言，tag 等功能。
功能清單
- 動態牆，顯示大家的 posts
- 點選 post 的 more，顯示文章的完整內容跟 tag
- 動態牆包含分頁功能，比方先顯示前 10 筆資料，滑到底再抓下 10 筆資料
- 動態牆的下拉更新
- 顯示 post 的留言
- 在個人頁面顯示作者的相關資訊
- 在個人頁面顯示作者的 post 清單
- search tag 或點選 tag，顯示包含 tag 的 post 清單
- 註冊帳號和設定個人資訊，將自己的 user id 存在 App 裡
- 選擇照片，新增 post，搭配 Imgur API 上傳圖片
- 新增留言
- like post
- 顯示自己的個人頁面
- 修改自己的個人資訊
- 其它: 修改 post，刪除 post，刪除留言，取得使用者的留言清單，取得使用者清單，刪除使用者，取得 tag 清單
- follow 功能，搭配 Airtable API
- 影片功能。
- 串接 Google Maps Places API 實現打卡功能。
特別功能: 自訂 tag 製作某個主題的專題 App
有許多朋友製作專題 App 時會想結合自己的興趣，製作某個主題的 App。這樣的功能其實可搭配自訂特別的 tag 實現。
比方想做個展示世界上可愛寵物的 App，可在上傳 post 時包含 tag cutestpet，之後只要搜尋 tag cutestpet 的相關 post 即可顯示大家上傳的可愛寵物。
動態牆，顯示大家的 posts
包含以下內容
- 照片。
- 文字內容。
- 作者的名字。
- 作者的大頭照。
- 時間，以相對於現在時間的格式顯示。
- 幾個 like。
相關 API
https://dummyapi.io/data/v1/post?page=0&limit=10點選 post 的 more，顯示文章的完整內容跟 tag
動態牆包含分頁功能，比方先顯示前 10 筆資料，滑到底再抓下 10 筆資料
透過參數 page & limit 控制，參數 page 指定第幾頁(從 0 開始)，limit 指定一頁幾筆資料。
https://dummyapi.io/data/v1/post?page=0&limit=10動態牆的下拉更新
顯示 post 的留言
點選 View all 16 comments 跳到下一頁顯示留言列表。
留言包含以下內容
- 訊息內容。
- 作者的名字。
- 作者的大頭照。
- 留言的時間。
相關 API
假設 post 的 id 是 60d21b8667d0d8992e610d3f。
https://dummyapi.io/data/v1/post/60d21b8667d0d8992e610d3f/comment?page=0&limit=10在個人頁面顯示作者的相關資訊
點選 post 的大頭照，跳到下一頁顯示作者的相關資訊。
作者的個人資訊可包含以下欄位
- title
- firstName
- lastName
- gender
- dateOfBirth
- registerDate
- phone
- picture
- location
相關 API
假設 user 的 id 是 60d0fe4f5311236168a109ca。
https://dummyapi.io/data/v1/user/60d0fe4f5311236168a109ca在個人頁面顯示作者的 post 清單
原本是照片牆顯示清單，點選照片後會變成列表。
相關 API
假設 user 的 id 是 60d0fe4f5311236168a109ca。
https://dummyapi.io/data/v1/user/60d0fe4f5311236168a109ca/post?page=0&limit=10search tag 或點選 tag，顯示包含 tag 的 post 清單
- search tag
search cat，顯示包含 tag cat 的 post 清單。
- 點選 tag
點選 tag bunny，顯示包含 tag bunny 的 post 清單。
相關 API
取得 tag cat 的 post 清單。
https://dummyapi.io/data/v1/tag/cat/post?page=0&limit=10註冊帳號和設定個人資訊，將自己的 user id 存在 App 裡
相關 API
https://dummyapi.io/data/v1/user/create可包含以下欄位
- email (必要欄位)
- firstName (必要欄位)
- lastName (必要欄位)
- title
- gender
- dateOfBirth
- phone
- picture
- location
由於 Dummy API 沒有提供登入的功能，因此建立帳號後請將 user id 存在 App 裡，之後即可利用此 id po 文和留言。
選擇照片，新增 post，搭配 Imgur API 上傳圖片
可拍照或從相簿選照片，選照片之後也可搭配 CIFilter 製作濾鏡效果。
使用 Imgur API 上傳圖片，取得圖片網址後再建立 post。
相關 API
https://dummyapi.io/data/v1/post/create上傳的 post 可包含以下欄位，owner 是必要欄位，text & image 至少要包含其中一種。
- owner (user id)
- text
- image (圖片網址)
- likes
- tags (字串的 array)
- link
新增留言
點選 post 的留言按鈕，跳到下一頁新增留言。
相關 API
https://dummyapi.io/data/v1/comment/create上傳的 JSON 包含以下欄位
- message
- owner (User Id)
- post (Post Id)
like post
點選 post 的愛心可增加 like 數字。
Dummy API 無法判斷使用者是否有 like，因此改成點選愛心時將 like 加 1，而且可以重覆點選，比方你超愛上圖的貓咪，按了 5 次愛心會加 5。
相關 API
使用 http method put 修改 post，假設 post 的 id 是 627ce45cf1f12221a37f34b5。
https://dummyapi.io/data/v1/post/627ce45cf1f12221a37f34b5修改的欄位: likes。
顯示自己的個人頁面
在自己的個人頁面顯示相關資訊和 post 清單。
修改自己的個人資訊
比方修改照片和性別，從男生變成女生。(email 不能修改)
相關 API
使用 http method put 修改 user，假設 user 的 id 是 60d0fe4f5311236168a109ca。
https://dummyapi.io/data/v1/user/60d0fe4f5311236168a109cafollow 功能，搭配 Airtable API
Dummy API 不支援 follow 使用者的功能，若想實現 follow 功能，可考慮利用 Airtable API 儲存 follow 資訊。
影片功能
post 也可以播放影片，只要將影片上傳到 imgur，然後再將影片連結存在 post 的 image 欄位。
串接 Dummy API 的注意事項
- 須申請 App ID，然後在 http header 設定 app-id。
- Dummy API 提供分頁功能，網址裡可透過參數 page 指定第幾頁(從 0 開始)，limit 指定一頁幾筆資料。
作品集
- SwiftUI
- UIKit
