SwiftUI 專案起手式｜建立 App 專案與開啟預覽畫面

💬 這篇文章是我參加 2024 iThome 鐵人賽 時寫的，現在整理過後，重新放上部落格啦！

SwiftUI 新手開發挑戰第二天，我們正式開始動手做啦！
今天的任務是建立一個全新的 SwiftUI 專案，並用內建的預覽功能（Preview）快速確認畫面效果。這個專案就是我這次要完成的主題 App：HandyInventory —— 家庭日用品庫存管理工具。

開始動手啦！建立我的第一個 SwiftUI 專案

建立 SwiftUI 專案的流程不複雜，我們一步步開始動手做吧～

Step 1：打開 Xcode，建立新專案

開啟 Xcode 後，點選「Create New Project…」。

第二步：選擇專案類型

選擇「App」，然後點選「Next」。

Step 3：設定專案基本資料

這邊是關鍵設定的地方，我的填法如下：

這邊就讓我來稍稍介紹一下：

Product Name：我輸入 HandyInventory，希望能打造一款實用的庫存管理工具

Team：可以先不設定

Organization Identifier：像是 org.swift，可自行命名

Bundle Identifier：Xcode 會自動產生，為 App 送審時需使用的唯一識別碼。

Interface：當然選 SwiftUI 啦！這次鐵人賽的主角就是它

Language：選 Swift

Storage：雖然我喜歡用 Realm，但這次為了練習，決定使用 Core Data

Include Tests：我這次挑戰時間緊迫就先不打勾了

第四步：是否使用 Git 管理

可以選擇是否初始化版本控制，建議勾選，後續管理比較方便～

最後一步：Create！

按下「Create」之後，恭喜你，SwiftUI 專案就建立好了！

Core Data 範例畫面初體驗

因為我剛剛選了使用 Core Data，專案會自帶一個基本範例畫面。預設會出現一個列表介面，向左滑可以刪除、點擊可以查看詳細時間，雖然很簡單，但能幫助我們快速了解 SwiftUI 的畫面切換邏輯。

如果沒勾 Core Data，就會看到傳說中的 Hello, world! 畫面～

SwiftUI Preview 預覽功能介紹

新專案建立後，可以看到 SwiftUI 的基本結構。左邊區域用來撰寫程式碼，右邊的預覽區域可以即時查看畫面效果。

SwiftUI 的預覽功能是我目前最愛的地方之一。可以在右側即時看到 UI 畫面，不用每次都跑模擬器，非常省時！

可以在右邊看到預覽畫面，這時會看到一個列表。
把其中一格往左滑可以刪除那一格的資料，像這樣：

如果點選其中一列的話，會切換到新的頁面。
不過現在只有簡單的顯示這格列表所顯示的時間～

預覽畫面從哪裡來？

#Preview {
    ContentView().environment(\.managedObjectContext,     
        PersistenceController.preview.container.viewContext)
}

#Preview {
    ContentView().environment(\.managedObjectContext,     
        PersistenceController.preview.container.viewContext)
}

預覽畫面開關方法

開啟預覽：點選右上角「Canvas」圖示

關閉預覽：取消 Canvas 勾選，或點選「Show Editor Only」

快速鍵切換：Option + Command + Enter，一秒開關！

這功能真的大大提升開發效率，尤其像我這種畫面還在瘋狂調整的階段，根本離不開它。

SwiftUI 專案正式上線！

今天我們已經完成 SwiftUI 專案的建立，也初步了解了 Core Data 範例畫面和預覽功能的基本操作。這一小步，是我們打造家用品庫存 App 的第一大步！

明天，我將開始分析 SwiftUI 專案的結構，看看畫面是從哪裡進來的、資料又是怎麼串起來的。一起繼續挑戰吧！

繼續看第三天 👉 SwiftUI 專案怎麼開？實作教你設定畫面與啟用預覽