#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=10
search 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/60d0fe4f5311236168a109ca
follow 功能,搭配 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