iT邦幫忙

2025 iThome 鐵人賽

DAY 15
0
Mobile Development

Swift iOS 開發新手村:從入門到 AI 聊天室系列 第 15

Day 15|Xcode 正式啟程:從語法邁向實作,建立你的第一個 iOS App!

  • 分享至 

  • xImage
  •  

在過去的兩週,我們已經練就了一身 Swift 語法的硬底子功夫——從變數、運算子,到類別與協定。現在,是時候告別純粹的語法練習,正式踏上打造真實 App 的旅程了!

今天,我們將啟動 Apple 官方的開發神器 Xcode,親手建立你的第一個 iOS 專案。我們將一起探索這個強大工具的介面,為接下來的畫面開發打下穩固的基礎。這將是你從學習程式碼,邁向創造 App 的關鍵一步!

今日學習重點

  • 建立新專案:學習如何從 Xcode 範本開始,建立一個新的 iOS App 專案
  • 專案資訊設定:了解 Product Name、Organization Identifier 等欄位的意義
  • Xcode 介面導覽:初步認識專案導覽器、編輯區、工具區與除錯區四大區塊

啟動開發之旅:建立你的第一個 iOS App 專案

步驟 1:啟動 Xcode

打開 Xcode,點選首頁畫面中的 Create New Project
https://ithelp.ithome.com.tw/upload/images/20250929/201775427ybJiFVgxD.png

步驟 2:選擇專案模板

Xcode 會要求你選擇一個專案模板(Project Template),這次我們要從頭打造一個 iOS App,請依以下選擇:

  • 平台 (Platform):iOS
  • 應用程式類型:App(第一個選項)

點擊 Next 繼續:
https://ithelp.ithome.com.tw/upload/images/20250929/20177542puGoA6NNQf.png

步驟 3:設定專案資訊

接下來是設定專案的基本資料,這些資訊將用來生成 App 的識別與基本設定:

  • Product Name:App 的名稱,會出現在主畫面。
  • Team:Apple 開發者帳號(沒有可以選 None)。
  • Organization Identifier:組織識別碼,通常是反向網域,例如 com.yourname。
  • Bundle Identifier:Xcode 會自動產生(組織識別碼 + 產品名稱)。
  • Interface:選擇 Storyboard(明天會用到)。
  • Language:選擇 Swift。

其他欄位:TestingStorageHost in CloudKit 都先保持預設即可。
填寫完成後,點擊 Next
https://ithelp.ithome.com.tw/upload/images/20250929/201775427M6xW7LFlD.png

步驟 4:選擇儲存位置

選擇一個資料夾來儲存專案:
https://ithelp.ithome.com.tw/upload/images/20250929/201775426sfPHlPy81.png

步驟 5:進入主要編輯畫面

成功建立後,我們將進入 Xcode 的主要介面。這裡包含幾個重要區域:

  • Navigator(左側):專案檔案管理,例如 .swift.xib、資源等。
  • Editor Area(中央):程式碼編輯區,可以編輯 .swift 檔案或設計 UI。
  • Utilities(右側):顯示選取元件的屬性、事件與相關設定。
  • Debug Area(下方):包含兩個重要部分:
    • Console(主控台):顯示 print() 輸出、錯誤訊息與日誌。
    • Variables View(變數檢視):當中斷點觸發時,可以查看當前變數的狀態與值。

https://ithelp.ithome.com.tw/upload/images/20250929/2017754283Hth6qBVY.png

小結一下

恭喜,你已經成功跨出了成為 App 開發者的第一大步!

今天,我們完成了一個極其重要的里程碑:從無到有,親手建立了自己的第一個 iOS 專案,並像一位真正的開發者一樣,巡禮了 Xcode 這個強大的開發基地。

雖然我們還沒有開始撰寫功能,但請不要小看今天的工作。熟悉環境、建立專案,就像是蓋房子前打好地基、整理好工具。有了這個穩固的起點,我們明天才能開始真正打造 App 的內部結構!

🌟 明天預告

今天我們建立好了專案,但一個 App 是如何從點擊 icon 到顯示第一個畫面的?Xcode 幫我們自動產生的那些檔案,又各自扮演什麼角色?

明天,我們要化身為工程師,一起潛入 App 的「引擎室」,揭開專案背後的運作秘密!我們將探索 AppDelegate 和 SceneDelegate 這兩大「總管」的職責,並了解 App 的生命週期。

這是理解 App 運作原理的關鍵一課。打好這個「內功」基礎後,我們很快就能親手移除 Storyboard,真正從零開始打造客製化的 UI 介面!

敬請期待《Day 16|Xcode 架構解密:AppDelegate 與 SceneDelegate 完全導覽!》


上一篇
Day 14|Swift 協定導向程式設計:打造你的 Swift 程式規範!
下一篇
Day 16|Xcode 架構解密:AppDelegate 與 SceneDelegate 完全導覽!
系列文
Swift iOS 開發新手村:從入門到 AI 聊天室16
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言