Xcode 26 終於可以使用 AI 啦~~雖然去年的發表了，我因為公司在趕專案累到爆，回家就不想開電腦，前一陣子才開始使用，覺得很好玩(?)

不過，相信很多人應該都有用 Claude code 這位神奇的夥伴，和在 Xcode 裡直接使用體驗不太一樣。

這篇簡單寫一下要怎麼使用，最後加上我個人的小心得

前置作業

• 需要有 Xcode 26
• macOS 需要升到Tahoe
• ChatGPT 帳號或 Claude 的付費帳號
  

Xcode 26

設定 AI Tool 的方式，先點開 Xcode 的 Setting

在左側選單上可以看到 Intelligence 的選項，Xcode 內建 ChatGPT 與 Claude ，只要點下去登入就可以了，ChatGPT 免費帳號就可以使用，但 Claude 必須要是付費帳號才可以使用 。

使用方式

首先，要切到 AI 功能，可以由圖示中的 (1) 的按鈕作切換

(2) 的按鈕可以選擇想要使用的AI 模型是哪一種

(3) 可以選擇對話串

(4) 是歷史記錄，不過，不知道是不是因為我使用的是免費帳號，只要重開Xcode 後，歷史記錄就會消失了

(5) 就是下Prompt 的地方

Coding

在範例圖中，我下了「在頂部加上搜尋列」，它就會自動幫我修改程式，會先告訴你會怎麼調整，然後就會直接調整了。

AI 調整的部分會用彩色Highlight 標示，一般有使用 Git 的話，也會用單一顏色來表示調整過的地方，說不定Apple 就是為了特別區別自己調整的與 AI 調整的才用彩色Highlight。

手機使用 AI 的時候也會有彩色Highlight出現，Apple 就是這一點我覺得做得很不錯，統一提示，只要在Apple 的產品看到彩色Highlight就會知道是AI 的東西

心得

在 Xcode 使用 AI 就是這麼簡單，我個人覺得比 Claude code 的入門簡單一點，不過，Claude code 能做的事情很多，多學一點完全沒有問題。

在上面的範例中，下完指令之後它就會自動修改程式，實際上，若使用在即有專案它遇到問題的時候也是會先詢問，例如「這會影響到某個檔案是否需要一起調整」、「這需要看某個檔案是否可以檢視它」之類的。

若是請它調整即有的程式，我會先要求提出調整計畫，確認它會修改什麼、怎麼修改，才讓它執行，不會一下子就讓它調整。

當把AI 做為小幫手的時候，比較需要學習的是Prompt 要怎麼下，它寫出來的東西也要Review 。 我個人這陣子的使用心得是覺得很有趣，當然也會有覺得害怕的部分，但有趣佔大多數，它會寫出一些我從來沒有想過的方式，也可以學習，就是和過去一樣「把好的東西學起來」。

最後祝大家 Coding 愉快

記得還在寫 UIKit 的時候，其實很不喜歡寫 AttributedString 就覺得很麻煩，因為通常會有這樣的需求都是因為想要做超連結(Hyperlink)，記得那時候要做到這樣是很麻煩的，除了要使用 AttributedString外，還要做點擊開網頁…通常……都會想盡辨法打消設計師們的念頭。

最近因為工作上的需要，所以就來去找找SwiftUI 要怎麼做超連結(Hyperlink)的方式，發現比起過去簡單很多，無論是在設定URL 或是 Handle Action 都很簡單，好用很多。

Text

若是想要在一串文字中間加上不同的字體或顏色，最常想到的就是 AttributedString ，不過，若不是想要做超連結的話，SwiftUI 的 Text 就可以做到了，像這樣:

 Text("Hello, world! ")
 +
 Text("Go google ")
   .foregroundColor(.orange)
 +
 Text("website")

印出來的結果會是這樣。

不過，如果想要加上 .onTapGesture 的話就沒有辨法了，用 + 串連的Text已經不是單純的 Text ，無法使用.onTapGesture 所以，想要做超連結的話，還是用AttributedString比較好。

AttributedString

AttributedString 是可以讓一串文字裡加入不同樣式的一種方式，這次特別寫出超連結的做法，它的做法是計算出特定字串的 Range ，再依據這個 Range 中的字是需要什麼樣式和顏色，只要能讓它知道需要不一樣的字是什麼，基本上就沒什麼問題。

AttributedString中的 AttributeScopes.FoundationAttributes 裡有提供 Link 參數，就是用來做為超連結使用的。

以下是實作方式

private func getLinkText(_ text: String, linkText: String, linkURL: String) -> AttributedString {
    var attributedString = AttributedString(text)
    attributedString.font = .systemFont(ofSize: 14, weight: .regular)
    attributedString.foregroundColor = Color.gray
        
    if let range = attributedString.range(of: linkText) {
        attributedString[range].font = .systemFont(ofSize: 14, weight: .medium)
        attributedString[range].foregroundColor = Color.orange
        attributedString[range].link = URL(string: linkURL)
    }
        
    return attributedString
}

解析一下程式碼

• var attributedString = AttributedString(text) ，這裡的 text 需要是全部的句子
• attributedString.range(of: linkText)，linkText 就是想要做成超連結的文字段
• attributedString[range].link，這裡寫入想要開啟的網站

font 與 foregroundColor 可以自行設定，應該有人有發現，像 View 的 foregroundColor 已經Deprecated 了，現在都使用 foregroundStyle ，但這裡的 foregroundColor 是 AttributeScopes裡的，不是 View 的喔。

Handle link

已經組好有中間有超連結的字串了，再來就直接用 Text 就可以了，最後的範例是要怎麼Handle link 行為

Text(getLinkText("Hello, world! Go google", linkText: "google", linkURL: "https://www.google.com.tw"))
                .environment(\.openURL, OpenURLAction { _ in
                    return .systemAction
                })

重要的就是使用 OpenURLAction ，與 environment(\.openURL) 一起使用，就可以Handle Link Text 點擊的行為，範例上寫的 .systemAction 的行為，就是指外開至Safari ，以下簡單說明 OpenURLAction 的回傳值。

• handled : 就是自行處理，例如，想要直接用 .sheet 開啟網頁，這時候就需要 return handled。
• discarded : 就是不做任何處理。
• systemAction : 就是直接外開至Safari ，由Safari 幫你開網頁
• systemAction(_:) : 是用 Safari 開，但是還可以帶別的 URL 或是需要加工URL (這個URL 是指Swift 裡的 URL 物件喔)

最後

只要記得上述這些東西，就可以比較簡單地寫出超連結的文字了，畢竟是手機，建議二組超連結的文字不要太近，不然很容易會點錯喔…

最後，祝大家 Coding 愉快!!

但是在某些情況下就是無法顯示出來，會讓人覺得很煩燥，有一種解決方式是把 Perviews simulator 刪除，讓它自動重新再產生。

有不少人覺得Preview 不好用，主要有幾個理由：如果不是 M系列 CPU 根本很難出現、電腦會變慢、三步五十就壞掉…等等。我自己剛開始在用的時候，也常常不知道為什麼它會跑不出來或是壞掉，簡單去研究一下才知道一些事情，也大概知道為什麼會這樣。

如果你的 Xcode 也常常Preview 上一秒還可以用下一秒就跑不出來的話，接下來要說的方法，說不定可以解決你的煩惱!

認識一下 Xcode Preview

在使用 SwiftUI 時，Xcode 畫面右邊這區就是 Preview畫面出現的地方，在 Xcode 裡是叫 Canvas，它是用來呈現寫在 #Preview 裡的程式碼，雖然不知道是不是大家都這樣，但我習慣叫它Preview 而不是 Canvas。實際上它也是把模擬器跑起來，所以若不是使用Apple 的 M 系列核心，會很難跑起來…

Preview的一些問題

Preview 算是可以即時顯示出程式碼修改後的結果，是真的很方便，但是有時候也是會跑不出來，當然語法寫錯或是有些資料沒有給它(Preview 使用到得資料需要寫在 #Preview 裡，它是獨立的)，就無法顯示出來。這樣的問題可以檢查一下基本上就可以解決了，但有時候就是明明沒什麼問題，但一直轉半天畫面都沒有出現。

在個人經驗裡有二個情況比較容易發生

• 在二、三個專案中切換
• 在不同的Git branch 中切換

實作過程中難免會需要在不同的專案或不同的 Branch 中切換，就可能會遇到上一秒還顯示出現，下一秒就顯示不出來情況。

解決方式

如果是在同一個專案發生這個情況可以先試試 Clear Build + Delete DerivedData ，也許就可以解決這個問題，但如果怎麼樣都無法解決的話，可以試試下面方式。

順便提一下，想刪除 DerivedData 可以從下圖開啟資料夾，再把資料夾裡的東西全丟到垃圾筒即可

剛剛有說到，其實Preview 也是跑模擬器，所以直接全部刪除讓它們重新產生，就和Delete DerivedData 的作法差不多，因為不確定到底是什麼問題就直接全刪，和「重開機治百病」一樣的感覺

首先，開啟Terminal，不需要移動到其他位置，然後輸入以下指令

xcrun simctl --set previews delete unavailable

會需要跑一點點時間，跑完之後會出現以下文字

Using Previews Device Set: '/Users/userName/Library/Developer/Xcode/UserData/Previews/Simulator Devices'

這樣當你重新開啟 Xcode 之後，Preview 的模擬器就會再重新Create，這樣也許可以解決 Preview 轉半天沒有出現的情況。

希望這個方式能有幫助~

最後，祝大家 Coding 愉快!!

說到 Codable 已經推出很久了，也用了好幾年了，但是對它還是不算是很了解，該怎麼說呢，因為Codable 最常運用在解析 API Response，基本上寫完之後，除非API 回傳值要改變，大概到離職的那一刻都不會再去修改它了，所以即使它推出了很多年了，實際上接觸的時間意外地少。

最近正好有機會再次寫不少 Codable 的部分，發現了一些過去不知道的東西，把它們記錄在這裡。

CodingKey

最常使用在API 回傳值的Key 風格 不是 Swift 習慣的風格，做為對應解析之用

enum CodingKeys: String, CodingKey {
    case id = "product_id"
    case name
    case description
    case expiryDate = "expiry_date"
}

在API 回傳值裡的 product_id 就會被放到 id裡，這是非常好用的地方。

另一個好用的地方在於也可以讓decoder只解析寫在 CodingKeys 裡的那些參數，舉個例

struct SubItem: Decodable,Identifiable {
   var id = UUID().string
   var name: String
   var description: String
   var isActive: Bool
}

SubItem conform Identifiable protocol ，因此有一個參數是id 且還是直接使用UUID，並不希望它被拿來當解析用的參數時，就可以使用 CodingKey來避開 id ，就不需要再寫 init(from decoder: any Decoder)

struct SubItem: Decodable,Identifiable {
   var id = UUID().string
   var name: String
   var description: String
   var isActive: Bool

   enum CodingKeys: String, CodingKey {
    case name
    case description
    case isActive 
  }
}

Try? & decodeIfPresent()

基於因為不知道API 會回傳什麼，是否真的會依照文件回傳，為了讓App 不會因為回傳值問題需導至 Crash，一般而言，除非100%保証一定會有值的情況下，大多數參數都會被設定為 Optional，在解析的時候就會用上 decodeIfPresent ，當回傳值完全沒有這個參數，或是參數是nil(null)的時候，它會回傳 nil。

一般情況下，這樣就幾乎不會有什麼問題，但是，就是這個但是，當回傳值是有值的時候，但偏偏回傳的資料型態是錯誤的，這樣的寫法就還是會解析失敗，導致整個物件都會是nil。

如果你是覺得「為什麼會回傳資料型態不同的資料來啊? 這不合理啊」，沒錯，理解上不應該出現回傳值的資料有誤的情況，多數情況下都會要求修正。因為App 端對於資料型態相對來說是嚴格的，解析失敗最後就可能造成 Crash ，所以最好是大家都遵守好訂好的資料型態，不應該回傳不正確的型態。

在有點歷史的產品裡或是一開始就沒有 App 端產品就可能會發生，回傳值會變成不預期的資料型態問題，且可能也不是馬上可以修正的情況，這種時候就需要先確認有問題的資料是不是需要用的，若是需要用的就必須要再另外處理，若是不需要用的資料，就是try? 出馬的時候了!

try? 本來就是在解析失敗的時候會回傳nil ，本來比較常會和 decode() 一起使用，如果和 decodeIfPresent 一起使用，所有可以會造成問題的情況都會包含到，這樣就比較不用怕因為資料型態解析失敗問題，當然，前提是有問題的資料並不是會使用到的資料

以下就是合體技的寫法

init(from decoder: any Decoder) throws {
   let container = try decoder.container(keyedBy: CodingKeys.self)
   id = try? container.decodeIfPresent(String.self, forKey: .id)
   name = try? container.decodeIfPresent(String.self, forKey: .name)
}

假如運氣特好遇到…

萬一真的運氣特好遇到同一支API 回傳值在不同情況下某一個參數會回傳完全不同的型態，偏偏你又必須要使用這些參數，那只好自定義解析方式了，方法上網Google 一下就會找得到了，不然也可以詢問 Claude AI.

其方式是 extenstion KeyedDecodingContainer 這個Struct ，寫一個通用的 decode，之後就可以利用這個 decode 為它加上一些自定義的解析方式

func decodeAny<T>(_: T.Type, forKey key: K, transform: ((Any) -> T?)? = nil) throws -> T? {
        guard contains(key) else { return nil }
        
        //預設轉換邏輯
        let defaultTransform: (Any) -> T? = { value in
            if let typedValue = value as? T {
                return typedValue
            }
            
            if let stringConvertible = T.self as? LosslessStringConvertible.Type {
                let stringValue = String(describing: value)
                return stringConvertible.init(stringValue) as? T
            }
            
            return nil
        }
        
        let transformer = transform ?? defaultTransform
        
        //不同型別的解法
        let attempts: [(Any.Type, (K) throws -> Any)] = [
            (String.self, {try decode(String.self, forKey: $0) as Any}),
            (Int.self, {try decode(Int.self, forKey: $0) as Any}),
            (Double.self, {try decode(Double.self, forKey: $0) as Any}),
            (Bool.self, {try decode(Bool.self, forKey: $0) as Any})
        ]
        
        // value: 取得API 資料的型態,transformed: 利用transformer 解析成需要的型態
        for(_, decoder) in attempts {
            if let value = try? decoder(key),
               let transformed = transformer(value) {
                return transformed
            }
        }
    
        return nil
    }

例如 Bool 是最常遇到擁有各種不同型態的表示法的，就可以為它來寫一個方便的解析方式

func decodeBool(forKey key: K) throws -> Bool? {
        try decodeAny(Bool.self, forKey: key) { value in
            switch value {
            case let boolValue as Bool:
                return boolValue
            case let intValue as Int:
                return intValue != 0
            case let doubleValue as Double:
                return doubleValue != 0
            case let stringValue as String:
                let lowercased = stringValue.lowercased()
                if ["true", "t", "yes", "1"].contains(lowercased) { return true }
                if ["false", "f", "no", "0"].contains(lowercased) { return false }
                return nil
            default nil
            }
        }
    }

說真的，最好是不要遇到需要這樣寫的情況，為什麼呢? 主要的原因是萬一真的是 API 的錯誤，但因為App 端有自定義解析的方式，所以就解析成功了，那麼就可能完全不會有人知道可能真的是資料錯誤的問題，當這樣資料數量多了之後，也許就會造成後續資料分析有誤，或有些神奇的情況。

最後，祝大家 Coding 愉快!!

在iOS12之前想要偵測網路狀態的話，大家都會使用 Reachability 這套官方工具，且有 Demo Code 可以直接使用，所以只要說到偵測網路第一時間一定會想到使用 Reachability。

在 iOS 12之後官方推出了 Network Kit 其中有很多與網路相關的服務，期中一個就可以用來偵測網路狀態，程式碼比過去少又比較清楚，配合現在官方主推的 SwiftUI 也很好用。

Monitor

Create Publisher

像這樣的Monitor 是建議獨立建立一個 Class 來處理，不要放在其他的Class 裡面

import Network

class NetworkMonitor: ObservableObject {
    
    @Published private(set) var isConnected: Bool = false
    @Published private(set) var networkType: NWInterface.InterfaceType? = .other
}

首先，記得要 import Network，為了能讓SwiftUI 使用記得要Conform ObservableObject

isConnected 就是在確認是否為連線狀態，networkType 就是屬於那一種連線類型，官方有分為 wifi、cellular…等等，詳細分類可以參考 NWInterface.InterfaceType 的說明。

Create Monitor

let networkMonitor = NWPathMonitor()
let workQueue = DispatchQueue(label: "NetworkMonitor")

接著往下建立 Monitor ，在Network Kit 裡有一個Class 是 NWPathMonitor ，它就是用來偵測網路狀態的，上述這樣的寫法表示要偵測所有型態的網路，有需要的話也可以指定想要偵測的網路型態。

一般來說偵測網路的動作一定不可以影響到主線程的運行，因此我們需要新增一條負責偵測網路用的 DispatchQueue，名稱可以自訂，這裡是稱它為 NetworkMonitor。

Create Path update handler

networkMonitor.pathUpdateHandler = { [weak self] path in
    self?.isConnected = path.status == .satisfied
    self?.networkType = path.availableInterfaces.first?.type
}

當網路狀態改變的時候，可以在 pathUpdateHandler 這個 Closure 取得資訊，會回傳 NWPath 這個物件，它有網路狀態的相關資訊。

Start

networkMonitor.start(queue: workQueue)

最後再開始偵測，記得指定先前設定好的Queue

完整的程式如下

class NetworkMonitor: ObservableObject {
    
    @Published private(set) var isConnected: Bool = false
    @Published private(set) var networkType: NWInterface.InterfaceType? = .other
    
    let networkMonitor = NWPathMonitor()
    let workQueue = DispatchQueue(label: "NetworkMonitor")
    
    init() {
        
        networkMonitor.pathUpdateHandler = { [weak self] path in
            self?.isConnected = path.status == .satisfied
            self?.networkType = path.availableInterfaces.first?.type
        }
        
        networkMonitor.start(queue: workQueue)
    }
}

View

接著就可以將這個NetworkMonitor 放到View 上使用，以下是一個簡單的範例

struct ContentView: View {
    
    @StateObject var networkMonitor = NetworkMonitor()
    
    var body: some View {
        VStack {
            Label {
                Text(networkMonitor.isConnected ? "Connected" : "Disconnected")
            } icon: {
                Image(systemName: networkMonitor.isConnected ? "network" : "network.slash")
                    .foregroundStyle(networkMonitor.isConnected ? .green : .red)
            }

        }
        .padding()
    }
}

當然，App 應該只會有一個 Network Monitor ，這個時候可以使用 EnvironmentObject 的方式來傳遞 Network Monitor，寫法可以參考以下方式，當然要從哪裡開始建立 Network Monitor 都可以依照個人需求，理論上應該是App 開啟時就需要做偵測啦，記得使用 .environmentObject()來讓其他畫面可以使用 EnvironmentObject 方式讀取到 Network Monitor。

@main
struct NetworkDemoApp: App {
    
    @StateObject var networkMonitor = NetworkMonitor()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(networkMonitor)
        }
    }
}

struct ContentView: View {
    
    @EnvironmentObject var networkMonitor: NetworkMonitor
    
    var body: some View {
        VStack {
            Label {
                Text(networkMonitor.isConnected ? "Connected" : "Disconnected")
            } icon: {
                Image(systemName: networkMonitor.isConnected ? "network" : "network.slash")
                    .foregroundStyle(networkMonitor.isConnected ? .green : .red)
            }

        }
        .padding()
    }
}

最後，祝大家 Coding 愉快!!

最近因為工作需要花了一些時間在研究Drop & Drag 應該要怎麼寫，需要實作的是一般的拖拉元件改變它的順序，並不需要讓它能拖到另一個裝置上，寫作上就會比較簡單一點。

參考以下文件與官方網站來練習

Swift Practice # 177 SwiftUI 拖曳 Drop & Drag 改變陣列Array位置

Drag and Drop List in SwiftUI

Apple Documentation – Drag and Drop

Start

一開始當然要先做一個要進行拖曳的List，建立一個顯示各種茶的List

建立List 的 Item View

struct TeaItemView: View {
    
    var title: String
    
    var body: some View {
        HStack {
            Text(title)
                .font(.system(size: 26))
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, 30)
        .background(.green)
        .clipShape(RoundedRectangle(cornerRadius: 20))
        
    }
}

再建立一個用 ForEach 做的 List

import SwiftUI

struct ContentView: View {
    
    @State private var draggedItem: String?
    @State private var fruitItems = ["🫖 Tea", " ☕ Coffee", " 🧃 Juice", "🧋Pearl milk tea", "🥛 Milk", "🍹 Fruit tea", "🧉 Mate tea", "🍵 Matcha tea"]
    
    var body: some View {
        
        ScrollView(showsIndicators: false) {
            VStack(spacing: 10) {
                ForEach(fruitItems, id: \.self) { fruit in
                    TeaItemView(title: fruit)
                }
            }
            .padding(.horizontal, 20)
        }
        .background(.black)
    }
}

draggedItem 是負責記錄要被拖曳的元件，再來Run 一下程式，會出現下面畫面

DrogDelegate

如果要讓List 的元件可以被拖曳，必須實作 DropDelegate 這個Protocol，新增一個 DropDragDelegate 來實作它

import SwiftUI

struct DropDrapDelegate: DropDelegate {
    
    let destinationItem: String
    
    @Binding var fruits: [String]
    @Binding var draggedItem: String?
    
    func dropUpdated(info: DropInfo) -> DropProposal? {
        return DropProposal(operation: .move)
    }
    
    func performDrop(info: DropInfo) -> Bool {
        draggedItem = nil
        return true
    }
    
    func dropEntered(info: DropInfo) {
        if let draggedItem {
            let fromIndex = fruits.firstIndex(of: draggedItem)
            if let fromIndex {
                let toIndex = fruits.firstIndex(of: destinationItem)
                if let toIndex, fromIndex != toIndex {
                    withAnimation {
                        self.fruits.move(fromOffsets: IndexSet(integer: fromIndex), toOffset: (toIndex > fromIndex ? (toIndex + 1) : toIndex))
                    }
                }
            }
        }
    }
}

在這個 Delegate 中有幾個需要實作的 function

func dropUpdated(info: DropInfo) -> DropProposal?

宣告這個拖曳是要什麼動作，以範例來說只是要做移動，所以是 .move，可以去官方文件查看 DropProposal 可以知道更多設定值，預設值會是 nil。

func performDrop(info: DropInfo) -> Bool

拖曳完成的時候會呼叫到它，回傳 true 表示 Drop was successful

func dropEntered(info: DropInfo)

在這個拖曳要做些什麼? 這是我對這個function 的理解，這個範例主要是要交換順序，所以裡面寫的就是交換的方式

View

再回到 View ，將 OnDrop 與 OnDrag 加到剛剛寫好的 List 中

ScrollView(showsIndicators: false) {
    VStack(spacing: 10) {
        ForEach(fruitItems, id: \.self) { fruit in
            TeaItemView(title: fruit)
                .onDrag({
                    draggedItem = fruit
                    return NSItemProvider()
                })
                .onDrop(of: [.text], delegate: DropDrapDelegate(destinationItem: fruit, fruits: $fruitItems, draggedItem: $draggedItem))
            
        }
    }
    .padding(.horizontal, 20)
}
.background(.black)

onDrag

這個的重點在於 NSItemProvider ，NSItemProvider 它是為了在進行 Drag-and-drop 或是 Copy-and-paste 時傳送資料或檔案用的，設定方式我自己是不太理解，常見的設定是 URL，這個範例用不到，就直接建立一個空的ItemProvider，若有需要傳送資料到不同裝置上的話應該需要留意一下。

onDrop(of:delegate:)

設定Type與Delegate ，Delegate 就是先前建立的 DropDrapDelegate，直接代需要的參考就好。

Type的設定有二種方式，第一種是給它 The uniform type identifiers ，這是需要可以辨識要傳送的資料，查了一下，應該是可以自定這個 Identifier。第二種是設定 UTType ，在範例中的 [.text] 就是 UTType 裡的 Text，在官方文件中可以看到很多種類型，那UTType是什麼? 它其實就是指要進行load, send, or receive的資料類型。

加上 onDrag 與 onDrop 之後就可以進行拖曳了

可以在 Github 上下載這個範例程式

最後祝大家 Coding 愉快!!

SwiftUI 本身的Image 並沒有支援 Gif 檔案，若是想要放動畫的除了用程式去寫外，現在有 Lottie 可以使用，SwiftUI 其實也是可以使用 Gif Image ，不過畢需要透過WKWebView 來實現

先找一個gif 圖，本次使用的是這個櫻花的圖示

這個檔案需要放在專案裡面，不需要放在 Assets 因為它並不是單純的圖片

WKWebView 是UIView 現在屬於WebKit 底下，UIView 是屬於 UIKit 底下，而UIKit元件要使用在 SwiftUI 上需要用UIViewRepresentable 做處理，官方有一個教學，有興趣的可以看一看，最主要就是需要實作二個function

func makeUIView(context: Context) -> UIView { }
func updateUIView(_ uiView: UIView, context: Context) { }

在有Delegate 的情況就是要實作 class Coordinator，詳細可以看教學或是上網找一下相關教學

實作

這次主要使用的是 WKWebView 因此上述 UIView 的部分都需要改成 WKWebView

func makeUIView(context: Context) -> WKWebView {
    let webView = WKWebView()
    let url = Bundle.main.url(forResource: imageName, withExtension: "gif")!
    let data = try! Data(contentsOf: url)
        
    webView.load(data, mimeType: "image/gif", characterEncodingName: "UTF-8", baseURL: url.deletingLastPathComponent())
        
    return webView
}

func updateUIView(_ uiView: WKWebView, context: Context) {
    uiView.reload()
}

剛剛有說過 WKWebView 是屬於 WebKit 底下，所以要記得 import WebKit，簡單說明一下程式碼

• 建立一個 WKWebView 做為回傳值
• url 參數取得gif 位置，forResource 是代入圖片名稱，因為希望能任意填入名稱，所以使用一個參數代表 image name，Bundle.main.url() 的回傳值是 Optional ，由於Gif 圖示一定要放在檔案裡，基本上不會有nil 的情況，所以就直接最後加上 !
• data 參數將圖片轉成 data，回傳值也是Optional的，如上述所說，這裡也直接使用 try! 來處理
• 最後讓webView 去取讀這個檔案
  • mimeType 就是指 Internet media type，寫web 的朋友們應該都很清楚，這是用來表示這是什麼樣的檔案，在此當然是 “image/gif”，有興趣可以看一下維基百科的說明
  • characterEncodingName，使用 UTF-8 來做解碼方式
• updateUIView() 只需要做一件事，就是 reload() 就好了

這樣就完成啦~ 很簡單對吧~

最後的結果就像這樣，加上 .frame 就可以調整大小，使用上非常方便

VStack {
   GifImageView(imageName: "cherry-blossoms")
       .frame(width: 60, height: 60)
   Text("Hello, world!")
}
.padding()

不知道未來 SwiftUI 會不會發展出自己的 WebView ，或是 Image 之後也可以支援 Gif 檔案，在那之前就用 WKWebView 來呈現Gif 圖示吧

最後祝大家 Coding 愉快!!

可以在這裡取得此Demo 檔案喔~

前些日子突然和同事聊起了 SDK、Framework 和 Library 差別在哪裡?

就我所知 SDK 包含了一堆東西，UI、function …等等，就範圍來說是最大的，Framework 和 Library 很像，都是有一些funcation 可以讓開發人員呼叫。

嗯…感覺好像不是很清楚，還記得以前有找過資料，但是後來都忘記了，想說正好有個機會重新再把這三個東西了解更多一點

SDK

SDK(Software Development Kit) 軟體開發套件，感覺只要有帶 Kit 這個字的總是有一群東西…

A software development kit (SDK) is a collection of software development tools in one installable package. They facilitate the creation of applications by having a compiler, debugger and sometimes a software framework. They are normally specific to a hardware platform and operating system combination. To create applications with advanced functionalities such as advertisements, push notifications,etc; most application software developers use specific software development kits.

Wikipedia

SDK 除了包含 Framework 外還有compiler、 debugger。

舉例的話，對開發者來說，我們常常在工作時說的 iOS 就是一個 SDK，iOS SDK 提供 iOS App 的開發環境，當然要透過 Xcode 這個IDE (integrated development environment)工具來開發，同理也有 Android SDK。

這和使用者常常指的iOS 不一樣，iPhone 的iOS 是 Operating Systems 是負責管理App的系統，不要搞錯了喔~

Framework

Framework 就如其名，是一個框架，一個package

Software framework is an abstraction in which software, providing generic functionality, can be selectively changed by additional user-written code, thus providing application-specific software. It provides a standard way to build and deploy applications and is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate the development of software applications, products and solutions.

Wikipedia

Framework 基本上提供了許多可以幫助你完成應用程式的一些元件。

舉例來說，SwiftUI & UIKit 它們都是Framework ，它們提供了很多 UI 相關框架(元件)讓開發者只需要加上一些程式碼就可以完成畫面，至於像是 Text 是怎麼處理多語系與字型、List 是怎麼讓畫面可以下拉更新，這些都不需要開發者處理。

Library

Library 就是一堆函式的集合，最早在學習 C++ 的時候就知道的名詞

Library is a collection of non-volatile resources used by computer programs, often for software development. These may include configuration data, documentation, help data, message templates, pre-written code and subroutines, classes, values or type specifications.

Wikipedia

Library … 嗯…看來就是一堆可以提供你呼叫用的function、class、 data ，這個就有點難舉例了…

Library vs Framework

說起來其實 Library 和 Framework 很像，上網找了一下多數說二者之間的差別在於 Inversion of Control

Library 的話，開發者可以呼叫 Library 裡的 function 做一些處理，最後會得到結果，然後再由開發者決定要做些什麼處理，控制權是在開發者手上的

You own the control

Framework提供了框架並擁有內建行為，開發者可以依照Framework 提供的框架，填入一些程式碼，讓 Framework 來幫你處理後面的事情，你只需要在框架指定的地方寫上程式碼就行了，控制權反而是在 Framework 手上，這種情況就稱為 Inversion of Control

The framework calls you

總結

SDK : 包含 Libraries、Frameworks、Tools、Documentation ，所表示的概念比較大範圍

Framework: 提供框架(包含現成可用的程式)，呼叫時通常只需要再寫上一些程式碼即可，控制權是屬於 Framework的

Library: 提供可讓開發者呼叫的 function、data、class…等，控制權是屬於開發者的

最後照慣例祝大家 Coding 愉快!!

WWDC23 中發表了一個新的Framework – SwiftData，它是本機端資料儲存方式之一，過去若想用DB方式將資料存在本機端最常用的就二種，一是iOS本家的Core Data，另一個就是第三方工具的SQLite，Core Data 雖然很好用，但是前置作業非常麻煩，設定完之後一定不會記得，所以SQLite看起來比較多人喜歡。

然而SwiftData 簡化了非常多Core Data 需要做的事情，讓資料儲存變得非常簡單，當然也完全支援SwiftUI，這樣的東西怎麼可以不學起來呢?

本篇主要會使用Apple 與 AppCoda 的教學來學習

想要使用SwiftData 需要使用 Xcode15 & iOS 17 才行

本篇的參考教學文章在此

Apple

• WWDC23 Build an app with SwiftData
• Sample code Building a document-based app using SwiftData

AppCoda

• Getting Started with SwiftData for SwiftUI Development

本文章的程式碼多數來自於Apple的 Sample code

SwiftData 是和Core Data 一樣可以讓你將資料儲存在本機端中，它特別的地方在於可以直接將寫好的DataModel 變成是儲存的物件且寫法非常簡單，首先需要寫好一個DataModel，請注意必需要使用Class 才行

建立Model

若是下載原本的Sample code 的話配合WWDC23的影片一起學習會比較好喔，我是直接抓重點來說，借用在 Building a document-based app using SwiftData 的範例中的 Card DataModel

final class Card {
    var front: String
    var back: String
    var creationDate: Date

    init(front: String, back: String, creationDate: Date = .now) {
        self.front = front
        self.back = back
        self.creationDate = creationDate
    }
}

若要把這個Card 變成 SwiftData 的 Model的話，只要做二個步驟

第一是 import SwiftData

第二是在 Class 加上 @Model

好，完工

import SwiftData

@Model
final class Card {
    var front: String
    var back: String
    var creationDate: Date

    init(front: String, back: String, creationDate: Date = .now) {
        self.front = front
        self.back = back
        self.creationDate = creationDate
    }
}

沒錯，就是這麼簡單! 如果想要設定 Unique Key 例如像是 ID 之類的，當然可以設定，只要在參數前面加上 @Attribute(.unique) 就行了

@Model
final class Card {
    @Attribute(.unique) var cardId: String
    ...
}

還有一個比較特別的寫法是，如果哪天想要為這個參數變更名字，又不想要讓這個參數變成是一個新的參數，可以使用 @Attribute(originalName:)，這樣它就會自動對應到過去的名稱

@Model
final class Card {
    @Attribute(originalName: "creationDate") var creation_Date: Date
    ...
}

在SwiftUI 上使用

接著說明怎麼串接到 SwiftUI 的畫面裡，先找到有 @main 的檔案，在 ContentView() 下加上

.modelContainer(for: Card.self)，modelContainer 記得先前在使用Core Data 的時候也有類似的設定，這裡是把想要做為SwiftData 的model 在 for: 後面，當然可以寫很多個用Array 形式來寫

import SwiftUI
import SwiftData

@main
struct SwiftDataFlashCardSample: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .modelContainer(for: Card.self)
        }
    }
}

接著在需要使用SwiftData 的View 上宣告 modelContext ，這就是用來做新增與刪除，再來就是要做Query ，只要宣告要使用的參數，這裡是 var cards: [Card]，在最前面的地方寫上 @Query 就完成了，

import SwiftData
struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var cards: [Card]
    ...
}

也可以在Query 的時候加上 Sort 或 Filter

@Query(sort: \.creationData) private var cards: [Card]
@Query(filter: #Predicate<Person> { Person in $0.name == "John" }) private var persons: [Person]

加上 @Query 的參數就會自動追蹤變化，在參數有變更的時候自動更新畫面，所以並不需要特別做什麼處理。

資料操作

接著來說操作，資料操作主要的就是三個動作，新增(insert)、修改(update)與刪除(Delete)

Insert

Insert 的時候要使用到先前宣告過的 modelContext，呼叫 insert 的 function 即可

let newCard = Card(front: "Sample Front", back: "Sample Back")
modelContext.insert(newCard)

Update

其實寫上 @Model 的 Data Object，SwiftData 就會自動追蹤參數變化，只要是已經有新增過的 Item 不需要特別寫些什麼，SwiftData 就會自動去更新它的參數內容

Delete

Delete 的時候和 Insert 一樣，可以告訴它想刪除的item 是那一個，也可以寫條件刪除

let card = Cards[0]
modelContext.delete(card)

目前感覺SwiftData 比起Core Data 來說簡單很多，不過畢竟 SwiftData 才剛推出，功能就沒有 Core Data強大，就如同SwiftUI 剛推出的時候一樣，有很多UIKit 很容易做到的事情，SwiftUI 還沒有支援，相信之後SwiftData 功能會慢慢變多，就等它未來發展啦

最後祝大家 Coding 愉快!!

可以在這裡下載我依照 AppCoda 教學做出的Sample code

當好不容易把Watch OS App 寫好之後，開開心心按下 Run 然後就發現怎麼跑起來和我想像的不一樣? 就算是用實機也無法順利執行App，如果你也有這個煩惱(?) 這篇把我在開發過程中遇到的問題紀錄下來，也許可以幫助到你

Pair Watch with simulator

實機的話就比較不會有配對問題，若想要用Simulator 來跑的話，要怎麼樣才能配對Watch ?

首先，請記得下載 Watch Simulator，沒下載就什麼都不用說了

打開Xcode 之後請到 Window -> Devices and Simulators，選擇想要使用的Simulator在畫面上可以看到 Paired watches 這區，按下 +

接著就可以選取想要配對的Watch，要記得自己配對的機種，之後在跑程式的時候記得要跑有配對的Simulator 才行喔

明明沒有出現 Error 訊息，資料卻沒有互相傳遞?

這時候需要檢查二個地方

First

iOS App Target 中的 General -> Frameworks, Libraries and Embedded Content，是否有把 Watch OS App 給加進去

Second

Watch OS Target 中的 Info 裡 WKCompanionAppBundleIdentifier ，這個參數後面要帶上 iOS App 的Bundle id，Watch OS App 是用這個參數在找要連接的 iOS App 所以可不要寫錯了

打包失敗

在好不容易跑起來且測試沒有問題時，要打包卻發現打包失敗!?

這時候請檢查 iOS App 與 Watch OS App 的 Version & Build number 是否有一致，若沒有一致的話，會打包失敗的

以上皆是我自己遇到的問題，若有誤歡迎告知

最後祝大家 Coding 愉快!!