Build an iOS Application

Create a simple iOS application using AWS Amplify

Module 1: Create and Deploy an iOS App

In this module, you will create an iOS application and deploy it to the cloud using AWS Amplify’s web hosting service

Overview

AWS Amplify provides a Git-based workflow for creating, managing, integrating, and deploying serverless backends for web and mobile applications. The Amplify CLI provides a simple text-based user interface to provision and manage backend services, such as user authentication or a REST or GraphQL API for your applications. Amplify libraries allow you to easily integrate these backend services with just a few lines of code in your applications.

In this module, we will begin by creating a new iOS application to take travel notes. A note is made of a title, a description, and a picture. We will enhance this application in the following modules.

What you will accomplish

In this module, you will:
  • Create an iOS application
  • Update the main view
  • Build and test your application

Key concepts

SwiftUI – SwiftUI is a simple way to build user interfaces across all Apple platforms with the power of the Swift programming language.

 Time to complete

10 minutes

 Services used

Implementation

Create an iOS project

Start Xcode and create a new project by going to File > New > Project... or by pressing Shift + Cmd + N.

Under iOS > Application, select App and choose Next.

Type a name for your project, for example, iOS Getting Started. Make sure Interface is SwiftUI and Language is Swift and then choose Next.

Finally, select a directory and choose Create to create the project.

Update the main view

Create a new file by clicking the plus ( +) at the bottom of the navigation pane ( ⌘N), name it Note.swift, and add the following content:
import SwiftUI
// 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
    }
}

In the snippet above, I created a Note class to store the data of Notes. I used two distinct properties for ImageName and Image. I will take care of Image later on in section Add Storage

Next, create another file named UserData.swift and add the following:

// singleton object to store user data
class UserData : ObservableObject {
    private init() {}
    static let shared = UserData()

    @Published var notes : [Note] = []
    @Published var isSignedIn : Bool = false
}
// this is a test data set to preview the UI in Xcode
@discardableResult
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
}
Here, I created a UserData class to hold specific user's data, at this stage, just a list of Note objects. The prepareTestData function is will be used to keep the SwiftUI previews working as the UI continues to get updated.
 
From the file list on the left of Xcode, open ContentView.swift and replace the code with this content:
import SwiftUI
// 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 {

        prepareTestData()

        return ContentView()
    }
}
  • The main view ContentView contains a List of ListRows
  • Each line is rendered by a ListRow : a horizontal stack with an image and text. Text is a vertical stack with the note name, in bold, and the note description.
  • Finally, I adjusted ContentView_Previews and added prepareTestData() to allow a preview rendering in the canvas.

Build and test

Check the Canvas to verify the layout is as desired. If you do not see the canvas, you can enable it using the Editor menu, then choose Canvas. You may also need to choose the Resume button in the Canvas to generate the preview of the layout.

Note that the data for the preview are generated in the code (starting at line 67); the data does not appear at runtime. If everything looks OK, build and launch the app in the simulator. Select the Product menu and select Run, or press ⌘R. Alternatively, you can choose the Play ▶️ button in the toolbar.

After a while, the app starts in the iOS simulator, with an initial empty screen.

The preview data does not render at runtime; they are only intended for previews inside Xcode.

Conclusion

You have successfully created an iOS app. You are ready to start building with Amplify!

Was this page helpful?

Initialize Amplify