Swift程式設計[第3單元] 網路程式基礎

 let 檔案 = Bundle.main.url(forResource: 檔名, withExtension: "json") 

// 3-1a URL
// Created by Heman, 2021/09/04
import Foundation

let 網址 = "https://drive.google.com/file/d/13g2sCz-zXK4uCesWeY4pPflowb06qdus/view?usp=sharing"
let myURL = URL(string: 網址)!

print("myURL:", myURL, "\n----")
print("scheme:", myURL.scheme)
print("host:", myURL.host)
print("path:", myURL.path)
print("query:", myURL.query)

let myURL = URL(string: 網址)!

1. Host 英文的原意是主人（相對於客人Guest而言）或（病毒、寄生蟲的）宿主，若用在電腦或網路的術語，通常稱為「主機」。主機是一種角色的泛稱，凡在網路上提供某些資源或服務的電腦都可稱為主機。
   
2. 刺激-反應(Stimulus-Response)的行為模式不需要經過大腦，不僅在低等動物或植物看得到，在高等動物也保留這樣的本能反應，例如人類的反射動作。
   
3. 完整的URL有8個部分，另外4個部分為 username, password, port, fragment，都可省略。
   
4. 早期的URL經過Internet標準組織一般化並擴充之後，稱為 URI (Uniform Resource Identifier)，但在Swift語言中，URL與URI並未明顯區別。有關URI詳細說明可以參考維基百科 https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
   
5. 完整的3百多種網路資源類別(URI scheme)可參考官方文件 https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
   
6. 上述3-1a範例程式，如果網址出現中文或某些不允許的標點符號，URL() 將無法初始化，會傳回 nil 導致程式閃退。後面課程會有解決方法。

// 3-1b URLSession (NG)
// Created by Heman, 2021/09/04
import Foundation

let 網址 = "https://drive.google.com/file/d/13g2sCz-zXK4uCesWeY4pPflowb06qdus/view?usp=sharing"
let myURL = URL(string: 網址)!
URLSession.shared.dataTask(with: myURL) { data, response, error in
    print(data)
    print(response)
    print(error)
}.resume()

print("Done")

URLSession.shared.dataTask(with: myURL) { data, response, error in
    <匿名函式>
}.resume()

URLSession(configuration: .default).dataTask(with: myURL) { data, response, error in
    <匿名函式>
}.resume()

URLSession.shared.dataTask(with: myURL) { 匿名函式 }.resume()

print("Done")

1. Session 是從頭到尾完成一項任務的意思，任務中間可能分成若干工作或步驟，任務或工作不拘大小，可簡單可複雜。生活上，立法院的一個會期，或是學校的一學期課程，也可稱為一個 Session。
   
2. Task 是較短的工作或差事，一個 Session 通常可分解為一到多個 Task。
   
3. 因此URLSession 執行過程要先產出一個 URLSession() 任務實例，再產出一個或多個 dataTask()/downloadTask()/uploadTask() 工作實例。
   
4. URLSession.shared 是一個作業系統預先產出的任務實例，在任何App或程式任何地方使用 URLSession.shared，都指向同一個任務實例，所以稱為 shared (共享)。
   
5. resume 字面上是（暫停後）繼續、恢復、重新開始的意思，注意s發/z/音。當作名詞時（法文發音），是履歷、簡歷之意。
   
6. synchronous 字面意思是在同一時間出現或以相同速度前進，中文稱「同步的」，而asynchronous則是相反，稱為「非同步」，特別指時間上無法協調或預期的事件。舉例來說，兩個人用手機通話，或是看直播影片，對人來說，這是「同步」的，因為必須在同一時間發生；而用 LINE 或 e-mail 溝通則是非同步的，因為對方什麼時候會讀取或回覆是無法預期的。
   
7. 非同步事件(asynchronous event)是很重要的概念，可理解為「在某個無法預期的時間點會發生的事情」，對Client App來說，網路回應(Response)就是個非同步事件，而對Server來說，網路請求(Request)才是非同步事件。

// 3-1c URLSession (Good)
// Created by Heman, 2021/09/04
import Foundation

let 網址 = "https://drive.google.com/file/d/13g2sCz-zXK4uCesWeY4pPflowb06qdus/view?usp=sharing"
var 回傳資料: Data?
let 計時開始 = Date()
var 時間差 = Date().timeIntervalSince(計時開始)

if let myURL = URL(string: 網址) {
    print("送出訊息...")
    URLSession.shared.dataTask(with: myURL) { data, response, error in
        print("回傳資料:", data ?? "No data")
        print("回應代碼:", response ?? "No response")
        print("錯誤代碼:", error ?? "No error")
        回傳資料 = data
    }.resume()
}

while 回傳資料 == nil && 時間差 < 5.0 {
    時間差 = Date().timeIntervalSince(計時開始)
}

print("花費時間(秒):", 時間差)

while 回傳資料 == nil && 時間差 < 5.0 {
    時間差 = Date().timeIntervalSince(計時開始)
}

let myURL = URL(string: 網址)!

if let myURL = URL(string: 網址) {
    ....
}

    URLSession.shared.dataTask(with: myURL) { data, response, error in
        print("回傳資料:", data ?? "No data")
        print("回應代碼:", response ?? "No response")
        print("錯誤代碼:", error ?? "No error")
        回傳資料 = data
    }.resume()

data ?? "No data"

data == nil ? "No data" : data!

送出訊息...
回傳資料: 73631 bytes
回應代碼: <nshttpurlresponse: 0x7fd17b62e0b0=""> { URL: https://drive.google.com/file/d/13g2sCz-zXK4uCesWeY4pPflowb06qdus/view?usp=sharing } { Status Code: 200, Headers {
    "Alt-Svc" =     (
        "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-T051=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,quic=\":443\"; ma=2592000; v=\"46,43\""
    );
    "Cache-Control" =     (
        "no-cache, no-store, max-age=0, must-revalidate"
    );
    "Content-Encoding" =     (
        gzip
    );
    "Content-Type" =     (
        "text/html; charset=utf-8"
    );
    ....<省略>
 } }
錯誤代碼: No error
花費時間(秒): 0.8959380388259888

1. Data是一個通用資料類型，我們在第2單元2-7課傑森解碼器曾經用過，從本地檔案讀取或網路傳回的資料，不管是文字、文件、圖片、JSON格式....等，在解碼或分解結構之前，都可一律塞在 Data 裡面，其實就是一連串的0與1，所以又稱為原始資料(raw data)，英文 raw 是生的，沒有處理過的意思。

 https://picsum.photos/720/1280

// 3-2a 讀取網路圖片(URLSession)
// Created by Heman, 2021/09/02
import PlaygroundSupport
import SwiftUI

let 網址 = "https://picsum.photos/720/1280"

struct 抓圖: View {
    @State var 下載圖片: UIImage?
    var body: some View {
        if 下載圖片 == nil {
            ProgressView()
                .onAppear {
                    guard let myURL = URL(string: 網址) else { return }
                    URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
                        if let 圖檔 = UIImage(data: 回傳資料!) {
                            print(回應碼 ?? "No response")
                            下載圖片 = 圖檔
                        } else {
                            print(錯誤碼 ?? "No error")
                        }
                    }.resume()
                }
        } else {
            Image(uiImage: 下載圖片!)
                .resizable()
                .scaledToFit()
        }
    }
}

PlaygroundPage.current.setLiveView(抓圖())

URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
    if let 圖檔 = UIImage(data: 回傳資料!) {
        print(回應碼 ?? "No response")
        下載圖片 = 圖檔
    } else {
        print(錯誤碼 ?? "No error")
    }
}.resume()

    let 圖檔 = UIImage(data: 回傳資料!)

    if let 圖檔 = UIImage(data: 回傳資料!) {
        print(回應碼 ?? "No response")
        下載圖片 = 圖檔
    } else {
        print(錯誤碼 ?? "No error")
    }

    var body: some View {
        if 下載圖片 == nil {
            ProgressView()
                ....<省略>
        } else {
            Image(uiImage: 下載圖片!)
                .resizable()
                .scaledToFit()
        }
    }

ProgressView()
    .onAppear {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
        ....<省略>
        }.resume()
    }

1. 網路程式特別要注意的一點，就是連接的遠端網站是否穩定。本課範例程式依賴 https://picsum.photos/ 的網路服務，如果網站中斷或某一天關閉了，程式碼就必須修改，否則就沒用了。

// 3-2b ProgressView
// Created by Heman, 2021/09/13
import PlaygroundSupport
import SwiftUI

struct 等待: View {
    var body: some View {
        VStack {
            ProgressView()
            Spacer()
            ProgressView("下載中...")
                .scaleEffect(1.5)
            Spacer()
            ProgressView("等待中...")
                .scaleEffect(2.0)
            Spacer()
            ProgressView("10%...", value: 0.1)
                .padding()
            Spacer()
            ProgressView("200KB...", value: 200, total: 1000)
                .font(.title2)
                .padding()
        }
    }
}

PlaygroundPage.current.setLiveView(等待())

1. Progress 英文是進展、進度、進步的意思，如"Work-in-Progress (WIP)"是製造中、開發中或設計中的半成品。

// 3-2c 手勢讀取網路圖片(URLSession + TapGesture)
// Created by Heman, 2021/09/12
import PlaygroundSupport
import SwiftUI

let 網址 = "https://picsum.photos/720/1280"

struct 抓圖: View {
    @State var 下載圖片: UIImage?
    
    func 下載() {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
            if let 圖檔 = UIImage(data: 回傳資料!) {
                print(回應碼 ?? "No response")
                下載圖片 = 圖檔
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }
    
    var body: some View {
        if 下載圖片 == nil {
            ProgressView()
                .onAppear {
                    下載()
                }
        } else {
            ZStack(alignment: .top) {
                Image(uiImage: 下載圖片!)
                    .resizable()
                    .scaledToFit()
                    .onTapGesture {
                        下載圖片 = nil
                    }
                Text("Tap image to reload from: \n \(網址) ")
                    .multilineTextAlignment(.center)
                    .font(.title3)
                    .background(Color.gray)
                    .opacity(0.6)
                    .offset(y: 10)
            }
        }
    }
}

PlaygroundPage.current.setLiveView(抓圖())

let 網址 = "https://picsum.photos/720/1280"

struct 抓圖: View {
    @State var 下載圖片: UIImage?
    
    func 下載() {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
            if let 圖檔 = UIImage(data: 回傳資料!) {
                print(回應碼 ?? "No response")
                下載圖片 = 圖檔
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }
....<省略>
}

Image(uiImage: 下載圖片!)
    .resizable()
    .scaledToFit()
    .onTapGesture {
        下載圖片 = nil
    }

Text("Tap image to reload from: \n \(網址) ")
    .multilineTextAlignment(.center)
    .font(.title3)
    .background(Color.gray)
    .opacity(0.6)
    .offset(y: 10)

1. 為什麼可以將「下載圖片」重新指定為 nil 呢？之前提過，nil 是變數或物件未初始化的狀態，事實上，當我們將資料型態加上問號（問號之前不可有空白），例如 UIImage? ，這其實會包裝成另一個物件型態，名稱就稱為 Optional，也就是說 Optional 也是一種物件型態，只有兩個值（二選一），一個是 nil，代表原先的資料還未初始化，另一個是原來資料型態的值（代表已初始化）。
   
2. 所以 Int 和 Int? 是不同的資料型態，兩者的變數不可混合運算，例如：
   

   var x: Int = 5
   var y: Int? = 10
   let z = x + y    //Error!
   print(z)         //無法執行
   
   let z = x + y!    //OK
   print(z)          //可執行

   
   
3. 所以 Optional 類型的變數加上驚嘆號 ! ，其實就是剝掉 Optional 的外殼，還原回原來的資料型態，如果這時候真的沒有初始化，那事情就大條了，程式會閃退。
   
4. 注意 Optional 類型變數的指定句：
   

   var x: Int = 5
   var y: Int? = 10
   x = y         //Error!
   x = y!        //OK
   y = x         //OK

let 定時器 = Timer.publish(every: 5.0, on: .main, in: .common).autoconnect()

let 定時器 = Timer.publish(every: 5.0, on: .main, in: .common).autoconnect()

    Image(uiImage: 下載圖片!)
        .onReceive(定時器) { 時間 in
            下載圖片 = nil; 淡入 = false
        }

// 3-2d 定時反覆讀取網路圖片(URLSession + Timer)
// Created by Heman, 2021/09/12
import PlaygroundSupport
import SwiftUI

let 網址 = "https://picsum.photos/720/1280"

struct 抓圖: View {
    @State var 下載圖片: UIImage?
    @State var 淡入 = false
    let 定時器 = Timer.publish(every: 5.0, on: .main, in: .common).autoconnect()
    
    func 下載() {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回應碼, 錯誤碼 in
            if let 圖檔 = UIImage(data: 回傳資料!) {
                print(回應碼 ?? "No response")
                下載圖片 = 圖檔
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }
    
    var body: some View {
        if 下載圖片 == nil {
            ProgressView()
                .onAppear {
                    下載()
                }
        } else {
            Image(uiImage: 下載圖片!)
                .resizable()
                .scaledToFit()
                .opacity(淡入 ? 1.2 : 0.0)
                .animation(.easeInOut(duration: 5.0))
                .onAppear {
                    淡入 = true
                }
                .onReceive(定時器) { 時間 in
                    下載圖片 = nil; 淡入 = false
                }
        }
    }
}

PlaygroundPage.current.setLiveView(抓圖())

1. 注意圖片淡入的設定，透明度 .opacity(淡入 ? 1.2 : 0.0) 為什麼設為 1.2 而不是 1.0 呢？其實 opacity 正常最大值就是1.0 （100%完全不透明），大於1.0的效果跟1.0是一樣的。
   
2. 因為在 .animation(.easeInOut(duration: 5.0)) 動畫效果的設定，opacity 會在 5秒內按比例由 0.0 增加到 1.2，所以最大值設定為 1.2 是為了讓 opacity 停留在 ≥ 1.0 的時間多一點（約一秒鐘）。
   
3. 可以試著改成 .opacity(淡入 ? 1.0 : 0.0) ，看看效果有何不同。
   
4. 對App來說，.onAppear(), .onReceive(), .onTapGuesture() 其實都是非同步事件，所以用法都很類似。

struct 頁面結構 {
    let resultCount: Int
    let results: [單項]
}

// 3-3a JSON by URLSession
// Created by Heman, 2021/09/03
// Updated by Heman, 2023/10/03
// https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/iTuneSearchAPI/index.html
import PlaygroundSupport
import SwiftUI

let 網址 = "https://itunes.apple.com/search?term=Justin+Bieber&media=music"

struct 頁面結構: Codable {
    let resultCount: Int
    let results: [單項]
}
struct 單項: Codable, Hashable {
    let wrapperType: String    //track, collection, artist
    let kind: String     //book, album, coached-audio, feature-movie, 
      //interactive-booklet, music-video, pdf podcast, 
      //podcast-episode, software-package, 
      //song, tv-episode, artist
    let artistId: Int
    let collectionId: Int
    let trackId: Int
    let artistName: String
    let collectionName:String
    let trackName:String
    let collectionCensoredName: String
    let trackCensoredName: String
    let artistViewUrl: URL
    let collectionViewUrl: URL
    let trackViewUrl: URL
    let previewUrl: URL?
    let artworkUrl30: URL?
    let artworkUrl60: URL?
    let artworkUrl100: URL?
    let collectionPrice: Double?
    let trackPrice: Double?
    let releaseDate: String
    let collectionExplicitness: String
    let trackExplicitness: String
    let discCount: Int
    let discNumber: Int
    let trackCount: Int
    let trackNumber: Int
    let trackTimeMillis: Int?
    let country: String
    let currency: String
    let primaryGenreName: String
    let isStreamable: Bool?
}

struct 更新頁面: View {
    @State var 歌曲列表: [單項]?
    
    func 更新歌曲列表() {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回傳碼 , 錯誤碼 in
           if let 解碼資料 = 回傳資料 {
                do {
                    let 解碼結果 = try JSONDecoder().decode(頁面結構.self, from: 解碼資料)
                    print(回傳碼 ?? "No response")
                    歌曲列表 = 解碼結果.results
                } catch {
                    print("JSON解碼錯誤")
                }
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }
    
    var body: some View {
        if 歌曲列表 == nil {
            ProgressView()
                .onAppear {
                    更新歌曲列表()
                }
        } else {
            List(歌曲列表!, id: \.self) { 歌曲 in
                Label(歌曲.trackName, systemImage: "music.note")
                    .font(.title)
                    .lineLimit(1)
            }
        }
    }
}

PlaygroundPage.current.setLiveView(更新頁面())

//3-2c
@State var 下載圖片: UIImage?

//3-3a
@State var 歌曲列表: [單項]?

    func 更新歌曲列表() {
        guard let myURL = URL(string: 網址) else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回傳碼 , 錯誤碼 in
            if let 解碼資料 = 回傳資料 {
                do {
                    let 解碼結果 = try JSONDecoder().decode(頁面結構.self, from: 解碼資料)
                    print(回傳碼 ?? "No response")
                    歌曲列表 = 解碼結果.results
                } catch {
                    print("JSON解碼錯誤")
                }
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }

    var body: some View {
        if 歌曲列表 == nil {
            ProgressView()
                .onAppear {
                    更新歌曲列表()
                }
        } else {
            List(歌曲列表!, id: \.self) { 歌曲 in
                Label(歌曲.trackName, systemImage: "music.note")
                    .font(.title)
                    .lineLimit(1)
            }
        }
    }

1. iTunes 資料庫的31個欄位有些是可以省略的（設為Optional），每個欄位的涵義可參考Apple 原廠文件。
   
2. 根據上述原廠文件，搜尋字串的空格，需改為加號 + ，因此網址的寫法：
   https://itunes.apple.com/search?term=Justin+Bieber&media=music
   
3. 根據 JSONDecoder() 的需要，資料結構需符合 Codable 規範，而在 List() 使用上，需要符合 Hashable 規範，反映在資料結構的定義上：
   

   struct 頁面結構: Codable { }
   struct 單項: Codable, Hashable { }

TextField("歌手", text: $inputText) {
    歌手 = inputText
    歌曲列表 = nil
 }

ZStack {
    Rectangle()
        .foregroundColor(.orange)
        .frame(height: 60)
    HStack {
        Image(systemName: "magnifyingglass")
            .font(.title)
        TextField("歌手", text: $inputText) {
             歌手 = inputText
             歌曲列表 = nil
         }
        .font(.title)
        .background(Color.secondary)
    }
    .padding()
}

var myURLComponent = URLComponents()
myURLComponent.scheme = "https"
myURLComponent.host = "itunes.apple.com"
myURLComponent.path = "/search"
myURLComponent.query = "term=\(歌手)&media=music"
guard let myURL = myURLComponent.url else { return }

// 3-3b iTunes Search
// Created by Heman, 2021/09/05
// https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/
import PlaygroundSupport
import SwiftUI

struct 頁面結構: Codable {
    let resultCount: Int
    let results: [單項]
}
struct 單項: Codable, Hashable {
    let artistName: String
    let collectionName:String
    let trackName:String
    let artistViewUrl: URL
    let collectionViewUrl: URL
    let trackViewUrl: URL
    let previewUrl: URL?
    let artworkUrl30: URL?
    let artworkUrl60: URL?
    let artworkUrl100: URL?
}

struct 更新頁面: View {
    @State var inputText = ""
    @State var 歌手 = "Taylor Swift"
    @State var 歌曲列表: [單項]?
    
    func 更新歌曲列表() {
        // let 網址 = "https://itunes.apple.com/search?term=Justin+Bieber&media=music"
        // guard let myURL = URL(string: 網址) else { return }
        var myURLComponent = URLComponents()
        myURLComponent.scheme = "https"
        myURLComponent.host = "itunes.apple.com"
        myURLComponent.path = "/search"
        myURLComponent.query = "term=\(歌手)&media=music"
        guard let myURL = myURLComponent.url else { return }
        URLSession.shared.dataTask(with: myURL) { 回傳資料, 回傳碼 , 錯誤碼 in
            if let 解碼資料 = 回傳資料 {
                do {
                    let 解碼結果 = try JSONDecoder().decode(頁面結構.self, from: 解碼資料)
                    print(回傳碼 ?? "No response")
                    歌曲列表 = 解碼結果.results
                } catch {
                    print("JSON解碼錯誤")
                }
            } else {
                print(錯誤碼 ?? "No error")
            }
        }.resume()
    }
    
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .foregroundColor(.orange)
                    .frame(height: 60)
                HStack {
                    Image(systemName: "magnifyingglass")
                        .font(.title)
                    TextField("歌手", text: $inputText) {
                        歌手 = inputText
                        歌曲列表 = nil
                    }
                    .font(.title)
                    .background(Color.secondary)
                }
                .padding()
            }
            if 歌曲列表 == nil {
                ProgressView()
                    .onAppear {
                        更新歌曲列表()
                    }
            } else {
                List(歌曲列表!, id: \.self) { 歌曲 in
                    Label(歌曲.trackName, systemImage: "music.note")
                        .font(.title)
                        .lineLimit(1)
                }
            }
        }
    }
}

PlaygroundPage.current.setLiveView(更新頁面())

1. API 全名是 Application Programming Interface，中文可稱為「應用程式介面」，基本上就是程式與程式之間的溝通規格，例如作業系統與App之間或是Server程式與Client程式之間的溝通。目前大部分的API都已經物件化，物件內容透過JSON格式交換非常方便。
   
2. UTF-8編碼在此不多做說明，有興趣者可參考維基百科 https://zh.wikipedia.org/wiki/UTF-8
   
3. 本節範例程式有個小bug，如果輸入的歌手名稱搜尋不到任何資料，就會停留在 ProgressView，無法再搜尋。
   
4. 狀態變數在宣告時就必須提供初始值，或是設為Optional，這樣作業系統才能觀察其「狀態」(變數值)是否有變化。
   

   @State var inputText = ""
   @State var 歌手 = "Taylor Swift"
   @State var 歌曲列表: [單項]?