开始使用 AWS

构建 iOS 应用程序

使用 AWS Amplify 创建简单的 iOS 应用程序

模块 1:创建和部署 iOS 应用程序

在本模块中,您将创建 iOS 应用程序并使用 AWS Amplify 的 Web 托管服务将它部署到云中。

简介

AWS Amplify 提供基于 Git 的工作流,用于创建、管理、集成和部署 Web 和移动应用程序的无服务器后端。Amplify CLI 提供了一个简单的基于文本的用户界面,用于预置和管理后端服务,如用于您的应用程序的用户身份验证或 REST 或 GraphQL API。使用 Amplify 库可以轻松地将这些后端服务与应用程序中的几行代码集成。

在本模块中,我们将首先创建一个新的 iOS 应用程序来记录旅行备注。备注由标题、描述和图片组成。我们将在以下模块中增强此应用程序。

您将学到的内容

  • 创建 iOS 应用程序
  • 更新主视图
  • 构建和测试您的应用程序

重要概念

SwiftUI – SwiftUI 是一种通过 Swift 编程语言在所有 Apple 平台上构建用户界面的简单方法。

 完成时间

10 分钟

 使用的服务

实施

  • 创建 iOS 应用程序

    启动 Xcode 并从闪屏中选择创建新的 Xcode 项目

    iOSTutorial-Module1-Step1

    iOS 应用程序下,选择单一视图应用程序,然后单击下一步:

    iOSTutorial-Module1-Step2

    键入项目的名称,例如 iOS 入门。确保将语言设置为 Swift 且用户界面为 SwiftUI,然后单击下一步:

    iOSTutorial-Module1-Step3

    最后,选择一个目录,然后单击创建以创建项目。

  • 更新主视图

    从 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 和 Image 使用了两个不同的属性。稍后,我们将在“添加存储”部分中处理图像。
    • 我们创建了一个 UserData 类来保存特定用户的数据,在此阶段,只保存一个备注对象列表。
    • 主视图 ContentView 包含 ListRow 的列表
    • 每行都由 ListRow 呈现:包含图像和文本的水平堆栈。文本垂直堆栈备注名称和备注说明,以粗体显示。
    • 最后,我们调整了 ContentView_Previews 并添加了 prepareTestData() 以允许在画布中进行预览渲染。
  • 构建和测试

    检查画布以验证布局是否满足需要。如果看不到画布,可以使用编辑器菜单启用画布,然后单击 画布。您可能还需要单击画布中的恢复按钮以生成布局预览。

    iOSTutorial-Module1-Step4

    请注意,预览数据是在代码中生成的(从第 70 行开始),数据不会在运行时显示。如果一切正常,请在模拟器中构建并启动应用程序。单击产品菜单,然后选择运行或键入  。或者,您也可以单击工具栏中的播放 ▶️ 按钮。

    iOSTutorial-Module1-Step5

    一段时间后,应用程序会在 iOS 模拟器中启动,初始屏幕为空。 预览数据不会在运行时呈现,它们仅用于 Xcode 内的预览。

    iOSTutorial-Module1-step6

结论

您已成功创建 iOS 应用程序。您已准备就绪,可以开始使用 Amplify 进行构建!

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

初始化 Amplify