建立第一個 SwiftUI App:Day 1 – 建立 Xcode 專案

Photo by Nafinia Putra on Unsplash
Photo by Nafinia Putra on Unsplash
本章我們會手把手教你如何建立一個 Xcode 專案。初次接觸 Xcode 時,必須要理解許多專有名詞。我們會介紹初學者需要了解的專有名詞和設定選項。務必確認你全部理解,才繼續下個章節。

本章我們會手把手教你如何建立一個 Xcode 專案。初次接觸 Xcode 時,必須要理解許多專有名詞。我們會介紹初學者需要了解的專有名詞和設定選項。務必確認你全部理解,才繼續下個章節。

Coffee Shop 的完整程式碼可以在 下載。

建立 Xcode 專案

首先,先確認你已經安裝 Xcode。建議直接安裝最新的版本。目前在寫這篇文章時是 Xcode 11.5,所以請安裝 Xcode 11.5 以上(含)的版本。

執行 Xcode,你可以看到這個畫面。點選 Create a new Xcode project 來建立新專案。

Xcode 啟動畫面
Xcode 啟動畫面

再來是選擇專案的範本。範本會幫你產生好一些程式碼,好讓你快速進入開發。我們選擇最基本的範本 Single View App。

選擇新專案範本
選擇新專案範本

這個畫面有一些專案設定要填,所有的選項請用英文填入。說明如下:

  • Product Name:專案名稱。
  • Team:這個是 Apple 開發者帳號。程式要跑在實體裝置上,就必須要設定 Team。目前我們只跑在模擬器上,所以選 None 即可。
  • Organization Name:組織名稱。這欄位是可以隨便填寫。如果這是公司的專案,就填寫公司的名稱。如果是你個人的,你可以填寫你的名字。
  • Organization Identifier:這是組織的唯一識別碼。當你要將 App 上到 App Store 的時候,這個唯一識別碼會代表公司或你。一般來說,格式會是網址反過來寫。這只是格式,所以這網址存不存在不要緊。
  • Bundle Identifier:這是 App 的唯一識別碼。他會由 Organization Identifier 加上 Product Name。當你要將 App 上到 App Store 的時候,這個唯一識別碼是代表這個 App。
  • Language:選擇 Swift。Objective-C 也是用來開發 iOS App。Swift 是用來取代 Objective-C 的新語言。
  • User Interface:選擇 SwiftUI。Storyboard 就是用 UIKit。SwiftUI 是用來取來 UIKit 的新使用者介面套件。
  • Use Core Data:要勾選。Core Data 套件是用來在裝置上儲存資料。我們之後會使用到。
設定新專案
設定新專案

儲存專案檔案。專案建立完成。

儲存 Xcode 專案
儲存 Xcode 專案

執行 Xcode 專案

專案建立好後,Xcode 會直接開啟專案。我們先直接跑一下專案。方法如下:

  1. 選擇模擬器。我們這邊選擇 iPhone 11 模擬器。
  2. 執行專案。
執行 Xcode 專案
執行 Xcode 專案

你可以看到我們的 CoffeeShop App 在模擬器上跑起來,顯示 Hello, World!。

Hello World
Hello World

現在你已經成功地完成你第一個 iOS App 了。雖然它現在只顯示 Hello, World!,沒有其他的功能,之後我們會一步一步地為它加上。

Xcode 專案設定詳情

在進入下一章之前,我們來了解一下 Xcode 的專案設定。依據步驟 1、2 打開專案設定頁:

  1. Display Name:顯示在 iPhone 中 App 圖示下方的名稱。
  2. Bundle Identifier:App 在 App Store 中的唯一識別碼。上面已經有說明。
  3. Version:App 的版本號。
  4. Target | Device:設定 App 可以安裝在哪些裝置上,而且裝置的 iOS 版本要多少以上才可以安裝。
  5. Device Orientation:支援的裝置方向。Portrait 是直立; Landscape 是橫躺。
Xcode 專案設定
Xcode 專案設定
Device Landscape
Device Landscape

結語

恭喜你剛剛將 Coffee Shop App 建立起來了!雖然還沒有功能,但它無庸置疑地是個可以執行的 App。本章節有不少專有名詞和設定,多花點時間去理解它們吧!

發佈留言

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

You May Also Like
Photo by Alex Alvarez on Unsplash
Read More

Dispatch Queue 教學

GCD 提供有效率的並行處理,讓我們不需要直接管理多執行緒。它的 Dispatch Queues 可以循序地(serially)或是並行地(concurrently)執行任務。我們只需要將要並行的程式當作任務提交到 dispatch queues 就可以了。
Read More
Photo by Florinel Gorgan on Unsplash
Read More

如何製作一個 XCFramework

XCFramework 讓你可以將 iPhone、iPhone 模擬器等多的不同平台的二進位碼打包到一個可發佈的 .xcframework 檔。你只需要為你的 Framework 產生出一個 .xcframework 檔,就可以支援多種平台。
Read More
Photo by Fabian Gieske on Unsplash
Read More

SwiftUI @State & @Binding 教學

SwiftUI 推出了兩個 Property Wrapper – @State and @Binding。利用它們可以達到變數的 Two-way Binding 功能。也就是當變數的值改變時,它會重新被顯示。本章藉由製作一個 Custom View 來展示如何使用 @State 和 @Binding。
Read More
Photo by Svitlana on Unsplash
Read More

iOS:禁止螢幕截圖

基於一些理由,我們可能會想要禁止使用者對我們的 app 做螢幕截圖。然而,iOS 並沒有提供這樣的功能。所幸,我們可以利用 UITextField 來達到此效果。
Read More