#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
  • 影片功能。

特別功能: 自訂 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
  • email
  • 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
  • email
  • 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 指定一頁幾筆資料。

作品集

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
彼得潘的 iOS App Neverland

彼得潘的 iOS App Neverland

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

More from Medium

iOS: How to upload photos and videos to Firebase Storage

Face ID & Touch ID — Customized cancel button title and fallback button title in Swift, iOS

UICollectionView and UICollectionViewDiffableDataSource