SwiftUI 入門第一步|開發動機與工具環境一次整理

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

[SwiftUI 專案筆記] 家庭日用品庫存 App 開發動機

身為一個 iOS Developer,我一直都是使用 UIKit 進行 iOS App 的開發,一直沒有正式學過 SwiftUI。雖然曾經偷偷打開過 Apple 官方文件,但總是在看到 @StateViewBuilder 等關鍵字時立刻頭暈關掉 😵‍💫

直到最近,一位朋友邀我一起參加 iThome 鐵人賽,我終於有藉口能硬著頭皮下班學習!也決定把整個學習過程紀錄下來,當成自己的 SwiftUI 成長日記~

既然都參加鐵人賽了,單純寫用法筆記太可惜,我想透過一個實際專案邊做邊學,這樣學得更快也更有趣。

那專案主題是什麼呢?靈感來自我生活裡一個常見的問題:

  • 以為家裡沒沙茶醬結果買了三罐
  • 覺得衛生紙還有一堆,結果回家才發現一張都沒了

這種情況超級常發生!😅
這樣的混亂真的是我生活裡的日常(苦笑)

所以我決定開發一個屬於自己的「家庭日用品庫存管理 App」,既能練習 SwiftUI,也能救救我這沒記性的腦袋。

SwiftUI 開發前準備-工具與環境介紹

  • IDE: XCode
  • 平台: iOS
  • 語言: Swift、SwiftUI

🔍 小記:雖然剛開始寫 SwiftUI 還不太習慣,但光是能邊寫邊看到畫面預覽,就讓人覺得超有效率!

SwiftUI 是什麼?初學者快速理解這個 UI 框架

SwiftUI 是 Apple 在 2019 年 WWDC 推出的 UI 框架,用來開發 iOS、macOS、watchOS、tvOS 的 App。

它主打「宣告式語法」,和以前 UIKit 的「命令式流程」大不相同。

我們不用再手動設定一堆 addSubview() 或 constraint,而是透過描述你想要畫面呈現什麼,系統就會幫忙處理 UI 結構。對初學者來說,可能一開始會有點不適應,但一旦上手真的會愛上。

宣告式語法示意
宣告式語法示意

SwiftUI 開發環境安裝指南:3 種方式取得 Xcode

Xcode 是蘋果公司向開發人員提供的整合開發環境,用於開發 macOS、iOS、iPadOS、watchOS、tvOS和 visionOS 的應用程式。

以下是我個人整理出三種安裝 Xcode 的方式,每種都有優缺點,可以依照自己需求選擇:

方式一 App Store(最穩定)

直接在 macOS App Store 搜尋 Xcode,點下載就好。以前我一直都是用這種方式安裝 Xcode。

這方式最省事、最不容易出錯,但只能安裝最新版的正式版本,無法同時保留多版本或使用 beta 版。不過後面介紹另外兩種方式可以解決掉這些問題。

下載XCode

方式二 Apple Developer 官網下載

想要安裝 beta 版本的 Xcode?那就要去 developer.apple.com 下載安裝檔,登入後選擇所需版本下載。
這邊以 Xcode 16 beta 示範。

網頁版選擇beta版

點擊下載後,會跳轉到登入 Apple Developer 的頁面。

登入 Apple Developer

登入後,找到 Xcode 16 beta ,並點擊下方的 View Details。

尋找Xcode 16 beta,並點選下方的 View Details

最後點擊 Xcode 16 beta.xip 就可以開始下載啦!

最後點選 Xcode 16 beta.xip 就開始下載

要注意 beta 版本會比較不穩定,而且 XCode 版本需要自己控制

方式三 使用 Xcodes 工具(我最推薦)

我目前都是用開源工具 Xcodes 來管理 Xcode 版本,它就像 JetBrains 系列 IDE 的管理器一樣好用。

Xcodes介面
Xcodes介面

安裝方法可以參考 Xcodes 的 GitHub

1. Homebrew

可以直接用 Homebrew 安裝,如果還沒安裝 Homebrew 的話,可以參考這裡

brew install --cask xcodes
2. 手動下載

可以在這裡直接下載最新版本 zip 檔案。

將解壓縮後的檔案移到 Xcodes.app 你的 /Applications 目錄下就可以囉!

裝好後,可以一鍵安裝指定版本的 Xcode,還能同時存在多個版本,對需要切版本開發的人來說超方便!

SwiftUI 專案設計目標:我要打造的家庭庫存 App

這 30 天的挑戰,我給自己的任務是:開發一款能實際幫助我生活的 App,並期望能完成以下功能:

  • 掃描發票 QR Code 自動新增物品:不用手動輸入,省時省力
  • 即時查看庫存量與補貨提醒
  • 紀錄家用品花費,幫助簡單記帳與控管預算
  • 打造簡單直覺的 UI,能讓家人也能輕鬆上手使用

這些功能看似簡單,但背後牽涉到資料結構、掃碼、UI 設計等多項整合,應該蠻適合用來當學習 SwiftUI 的練習題。

邁出 SwiftUI 開發第一步

今天是挑戰的第一天,也是我人生中第一篇公開的 SwiftUI 技術筆記。未來會持續分享開發過程中的每一步,包括卡關、解法、以及一路上踩過的坑,希望能留下自己的學習歷程,也幫助其他 SwiftUI 初學者少繞點遠路。

繼續看第二天 👉 SwiftUI 專案起手式|建立 App 專案與開啟預覽畫面

分享這篇文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *