#04 VB Helper_Part 1

(1)成果展示

(2)GitHub 連結

GitHub - shauangel/SwiftUI_FinalProject

(3) appetize.io 連結

https://appetize.io/app/t4h2vnd96yw9rtcz82zwe9vwk8?device=iphone12&osVersion=15.0&scale=75

(3)作業要求

• 串接後台的 API 抓取 JSON 資料後以 List 顯示，點選 row 可到下一頁顯示 detail，至少使用到兩個 API。

1. 全國運動場館資訊網iPlay-運動場館API (Doc)
2. Meme API (Doc)

本專案應用了以上兩個API，應用方法如下：(1) 以縣市名稱抓取多個排球場資料，並且抓取單個場館詳細資料。(2) 一個小小的封面彩蛋，長按旋轉排球會有驚喜～～～

using Api

• 使用到 StateObject & ObservableObject

利用ObservableObject class (GymListViewModel, 左圖)抓取“全國運動場館資訊網iPlay-運動場館API”的資料，並設定Published property變數。於運動場館搜尋頁面 (GymListView, 右圖)的View中設定StateObject，抓取回應的資料，並即時更新畫面。

• 定義遵從 ObservableObject 的 class 串接網路 API 抓資料，利用 Published property 觸發畫面更新。

MVVM架構 & ObservableObject class

• 使用 ProgressView 顯示資料下載中
• 資料抓取失敗，比方沒有網路時，顯示 alert

以上兩項功能以SupriseView為例，當 Meme API未能成功獲取迷因時，會發出警告並詢問是否再試一次。當API還在搜尋中時，圖片處會顯示Progress View以及“Loading…”文字。

struct SupriseView: View {
    @State private var triggerAlert = false
    @Binding var completedLongPress: Bool
    @StateObject var funViewModel = FunViewModel()
var body: some View {
    VStack {
        Spacer().frame(height: 50)
        HStack {
            Image(systemName: "hand.thumbsup")
                .resizable()
                .scaledToFit()
                .frame(width: 10)
            Text(String(funViewModel.funMeme.ups))
        }
        .foregroundColor(.gray)
        AsyncImage(url: URL(string: funViewModel.funMeme.url)) { image in
            image
                .resizable()
                .scaledToFit()
        } placeholder: {  ProgressView("Loading...")  }
        Text(funViewModel.funMeme.title)
            .font(.title2)
            .fontWeight(.bold)
        Spacer()
        Button(action: {
            completedLongPress.toggle()
        }, label: {
            HStack {
                Image(systemName: "arrowshape.turn.up.left.fill")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 30)
                Text("BACK")
                    .font(.title3)
            }
            .foregroundColor(.black)
        })
    }
    .onAppear {
        triggerAlert = funViewModel.fetchMeme()
    }
    .alert(isPresented: $triggerAlert) {
        Alert(
            title: Text("Unable to Get Api Response"),
            message: Text("The connection to the server was lost."),
            primaryButton: .default(
                Text("Try Again"),
                action:{ triggerAlert = funViewModel.fetchMeme() }),
            secondaryButton: .destructive(
                Text("Cancel"),
                action: { triggerAlert.toggle() })
        )
    }
}}

• 使用 SPM 加入第三方套件。(不包含上課範例提到的 Kingfisher)
• 下拉更新功能。