#4 swiftui final project — Disney+

page

這次的專案是延續#2的主題做出更進階的功能,主要目的是串接後方的API,分析JSON,curl檔後,搭配swiftui將資料顯示出來。之前在做專案#2的時候,因為會東西不多,很多想做的功能都無法實現,這次終於可以更近一步拉!!!!

一、成果MP4

youtube.mp4

二、Github link

三、iPhone、iPad截圖

letf: iPad pro; right:i Phone 14 pro

四、icon

icon

五、串接的API

  1. 登入系統 — 註冊:FavQs
register gif

https://favqs.com/api/users

這次的創建和驗證都是使用FavQs所提供的資料庫

Create User:

主要有3個驗證

a.user name有沒有被用過

b.email是不是有效的

c.密碼有沒有超過5位數

create user

當創建成功時,回傳:

register success

當創建失敗時,回傳:

register failed

2.登入系統 — 驗證:FavQs

假設之前已經註冊過了,可以直接進到登入頁面

login gif

https://favqs.com/api/session

login:

login

3.iTunes API

這次抓取Disney歌曲的API都是用iTunes的30秒試聽去抓,因為其他的都有版權,所以先用公開的API。抓取目標API也是一門學問,可能會有其他名字相關,但不是Disney個歌曲,我會先輸入關鍵字找到其中一首歌曲後,再去看專輯的連結和關鍵字,去篩出想要的歌曲。

a.COCO:

https://itunes.apple.com/search?term=Coco (Original Motion Picture Soundtrack) [Deluxe Edition]&media=music

b.The Little Mermaid

https://itunes.apple.com/search?term=The Little Mermaid&media=music

c.Frozen

https://itunes.apple.com/search?term=Frozen (Original Motion Picture Soundtrack) [Deluxe Edition]&media=music

d.Beauty and the Beast

https://itunes.apple.com/search?term=beauty-and-the-beast&media=music

e.The Lion King (Original Motion Picture Soundtrack)

https://itunes.apple.com/search?term=The Lion King (Original Motion Picture Soundtrack)&media=music

4.AirTable API — 商品資訊

這次的專案還有一個亮點就是訂購系統,因為沒有公開的商品API,所以我自己建了一個後端的資料庫,存放商品的資訊

https://api.airtable.com/v0/apprf08CIUMwRfaSW/disney_dolls

table pages
import Foundation

struct Dollsdata:Codable{
let records:[Record]

struct Record:Codable{
let id:String
let fields:Fields
}

struct Fields:Codable{
let name:String
let size:Double
let price:Double
let picture:[Images]
let type:[String]
let star:Int
}

struct Images:Codable{
let url:URL
}

}

5.AirTable API — 訂購的新增、刪除、修改

建立一個新的buy table去儲存訂單資訊

https://api.airtable.com/v0/apprf08CIUMwRfaSW/buy

新增:

Airtable insert
insert gif

刪除:

最底下計算總金額的地放也會跟著修改

Airtable delete
delete gif

六、功能

  1. 搜尋search
search gif

2.下拉更新refresh

refresh gif

3.分享

share gif

4.抓取資料失敗時顯示altert

alert

5.定義遵從 ObservableObject 的 class 串接網路 API 抓資料,利用 Published property 觸發畫面更新,使用到 EnvironmentObject

計算訂單總金額用的是EnvironmentOdject,因為他在新增和刪除等多個頁面都會被修改

import Foundation
class Order:ObservableObject{
@Published var total = 0.00
}

七、QRcode

這ˋ次還有一個比較特別的功能就是QRcode,掃描這個QRcode之後你就可以寫信給創作者拉~~

QRcode gif

八、結論與心得:

學了這麼久,終於告一個段落拉!!!我也從一開始不熟悉ios系統,連怎麼切換中英文的那個新手小白,到現在可以創作出很多有趣功能的App。每次回顧自己之前做的App,都覺得很有成就感。真的很感謝Peter帶我Swift這個世界,這次的期末專案不是終點,而是深入研究更多新功能的開始!

其實這次的專案還有很多功能想做,像是指紋辨識,語音識別,FaceID等等,只是時間真的有限,期待之後寒假的更新!!

--

--