AWS 入門

建置 iOS 應用程式

使用 AWS Amplify 建立簡單的 iOS 應用程式

第一單元︰建立和部署 iOS 應用程式

在本單元中,您將建立一個 iOS 應用程式,並使用 AWS Amplify 的 Web 託管服務將其部署到雲端。

簡介

AWS Amplify 提供一個 Git 型工作流程,用於針對 Web 和行動應用程式建立、管理、整合和部署無伺服器後端。Amplify CLI 提供一個簡單的文字型使用者界面,以佈建和管理後端服務,例如針對應用程式的使用者身份驗證,或者 REST 或 GraphQL API。Amplify Libraries 讓您能夠輕鬆地將這些後端服務與應用程式中的幾行程式碼整合成在一起。

在本單元中,我們首先將建立一個新的 iOS 應用程式,以記錄操作附註。附註由標題、描述和圖片組成。我們將在後續單元中增強此應用程式。

您將學到的內容

  • 建立 iOS 應用程式
  • 更新主要檢視
  • 建置和測試應用程式

主要概念

SwiftUI – SwiftUI 是一種利用 Swift 程式設計語言的強大功能,在所有 Apple 平台上建置使用者界面的簡便方法。

 完成時間

10 分鐘

 使用的服務

實作

  • 建立 iOS 應用程式

    啟動 Xcode 並從初始螢幕中選取 Create a new Xcode project (建立新的 Xcode 專案)

    iOSTutorial-Module1-Step1

    iOS, Application (iOS、應用程式)下,選取 Single View App (單一檢視應用程式),然後按一下 Next (下一步)

    iOSTutorial-Module1-Step2

    輸入專案的名稱,例如 iOS 入門。確保將語言設定為 Swift,並將使用者界面設定為 SwiftUI,然後按一下 Next (下一步)

    iOSTutorial-Module1-Step3

    最後,選取​擇一個目錄,然後按一下 Create (建立),以建立專案。

  • 更新主要檢視

    在 Xcode 左側的檔案清單中,開啟 ContentView.swift,然後將程式碼取代為以下內容:

    import SwiftUI
    
    // singleton object to store user data
    class UserData : ObservableObject {
        private init() {}
        static let shared = UserData()
    
        @Published var notes : [Note] = []
        @Published var isSignedIn : Bool = false
    }
    
    // the data class to represents Notes
    class Note : Identifiable, ObservableObject {
        var id : String
        var name : String
        var description : String?
        var imageName : String?
        @Published var image : Image?
    
        init(id: String, name: String, description: String? = nil, image: String? = nil ) {
            self.id = id
            self.name = name
            self.description = description
            self.imageName = image
        }
    }
    
    // a view to represent a single list item
    struct ListRow: View {
        @ObservedObject var note : Note
        var body: some View {
    
            return HStack(alignment: .center, spacing: 5.0) {
    
                // if there is an image, display it on the left
                if (note.image != nil) {
                    note.image!
                    .resizable()
                    .frame(width: 50, height: 50)
                }
    
                // the right part is a vertical stack with the title and description
                VStack(alignment: .leading, spacing: 5.0) {
                    Text(note.name)
                    .bold()
    
                    if ((note.description) != nil) {
                        Text(note.description!)
                    }
                }
            }
        }
    }
    
    // this is the main view of our app, 
    // it is made of a Table with one line per Note
    struct ContentView: View {
        @ObservedObject private var userData: UserData = .shared
    
        var body: some View {
            List {
                ForEach(userData.notes) { note in
                    ListRow(note: note)
                }
            }
        }
    }
    
    // this is use to preview the UI in Xcode
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
    
            let _ = prepareTestData()
    
            return ContentView()
        }
    }
    
    // this is a test data set to preview the UI in Xcode
    func prepareTestData() -> UserData {
        let userData = UserData.shared
        userData.isSignedIn = true
        let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
    
        let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
        let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
    
        n1.image = Image(systemName: n1.imageName!)
        n2.image = Image(systemName: n2.imageName!)
    
        userData.notes = [ n1, n2 ]
    
        return userData
    }

    我們剛新增了什麼?

    • 我們建立了一個附註類別,來存放附註的資料。我們對 ImageName 和影像使用了兩個不同的屬性。稍後,我們將在 Add Storage (新增儲存體) 部分中處理影像。
    • 我們建立了一個 UserData 類別,來保存特定使用者的資料,在這個階段,只是附註物件清單。
    • 主要檢視 ContentView 包含 ListRow 清單
    • 每行由一個 ListRow 呈現:包含影像和文字的水平堆疊。文字為垂直堆疊,帶有粗體附註名稱,以及附註說明。
    • 最後,我們調整了 ContentView_Previews 並新增 prepareTestData(),以允許在畫布中進行預覽呈現。
  • 建置和測試

    檢查畫布以確認版面配置是否符合要求。如果看不到畫布,則可使用 Editor (編輯器) 功能表來啟用,然後按一下 Canvas (畫布)。您可能還需要按一下 Canvas (畫布) 中的 resume (恢復) 按鈕,以產生版面配置預覽。

    iOSTutorial-Module1-Step4

    請注意,預覽資料在程式碼中產生 (從第 70 行開始),該資料不會在執行時間出現。如果一切正常,請在模擬器中建置並啟動該應用程式。按一下 Product (產品) 功能表,然後選取 Run (執行) 或輸入 。或者,您可以按一下工具列中的 Play (播放) ▶️ 按鈕。

    iOSTutorial-Module1-Step5

    一段時間後,該應用程式將在 iOS 模擬器中啟動,並顯示初始空白螢幕。 預覽資料不會在執行時間呈現,它們僅用於 Xcode 中的預覽。

    iOSTutorial-Module1-step6

結論

您已成功建立一個 iOS 應用程式。您可以隨時開始使用 Amplify!

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
關閉
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。
關閉

初始化 Amplify