Build an iOS Application

Implementation

• Create a GraphQL API service and a database

  Open the Terminal, navigate to your project root directory, and run the following command:

  amplify add api

  Code snippet copied

  Copy

  When prompted, make the following selections:
  

  Select from one of the below mentioned services: 
      ❯ GraphQL
      
  Authorization modes:
      Choose the default authorization type for the API
          ❯ Amazon Cognito User Pool
          
  Configure additional auth types?
      N

  Code snippet copied

  Copy

  Validate the selected options, and choose Continue.

  Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)
    Name: gettingstarted
    Authorization modes: Amazon Cognito User Pool (default)
    Conflict detection (required for DataStore): Disabled
  ❯ Continue

  Code snippet copied

  Copy

  Select Blank Schema and choose Y when asked to edit the schema:
  

  Choose a schema template:
      ❯ Blank Schema
      
  Do you want to edit the schema now?
      Y

  Code snippet copied

  Copy

  As we want to represent the model we previously defined in the Note.swift file, use the following schema and save the file:

  type Note
  @model
  @auth (rules: [ { allow: owner } ]) {
      id: ID!
      name: String!
      description: String
      image: String
  }

  Code snippet copied

  Copy

  The data model is made of one class named Note and four String properties: id and name are mandatory; description and image are optional.

  • The @model transformer indicates we want to create a database to store these data.
  • The @auth transformer adds authentication rules to allow access to these data. For this project, we want only the owner of Notes to have access to them.

  Delete the Note.swift file, we will re-generate the models in the next step.

• Generate client-side code

  Amplify generates client-side code.  

  To generate the code, run the following command in your terminal:

  amplify codegen models

  Code snippet copied

  Copy

  This creates Swift files in the amplify/generated/models directory and automatically add them to your project.
  

• Deploy the API service and database

  To deploy the backend API and database we have just created, in your terminal run the following command:
  

  amplify push

  Code snippet copied

  Copy

  When prompted, make the following selections:
  

  amplify push
  
  Are you sure you want to continue?
      Y
      
  Do you want to generate code for your newly created GraphQL API?
      N

  Code snippet copied

  Copy

• Add API client library to the project

  Navigate to the General tab of your Target application (Your Project > Targets > General), and select the plus (+) in the Frameworks, Libraries, and Embedded Content section. 

  

  Close

  

  Choose the AWSAPIPlugin, and select Add. 

  

  Close

  

  You have now added AWSAPIPlugin as a dependency for your project.

  

  Close

  

• Configure the Amplify API library at runtime

  Navigate back to Xcode, and open the GettingStartedApp.swift file.

  To configure Amplify API, you will need to:

  • Add the import AWSAPIPlugin statement.
  • Create the AWSAPIPlugin plugin and register it with Amplify.

  Your code should look like the following:
  

  import Amplify
  import AWSAPIPlugin
  import AWSCognitoAuthPlugin
  import SwiftUI
  
  @main
  struct GettingStartedApp: App {
      init() {
          do {
              try Amplify.add(plugin: AWSCognitoAuthPlugin())
              try Amplify.add(plugin: AWSAPIPlugin(modelRegistration: AmplifyModels()))
              try Amplify.configure()
              print("Initialized Amplify");
          } catch {
              print("Could not initialize Amplify: \(error)")
          }
      }
  
      var body: some Scene {
          WindowGroup {
              LandingView()
                  .environmentObject(AuthenticationService())
          }
      }
  }

  Code snippet copied

  Copy

• Create a class to support API CRUD operations

  Create a new Swift file named NotesService.swift with the following content:

  import Amplify
  import SwiftUI
  
  @MainActor
  class NotesService: ObservableObject {
      @Published var notes: [Note] = []
  
      func fetchNotes() async {
          do {
              let result = try await Amplify.API.query(request: .list(Note.self))
              switch result {
              case .success(let notesList):
                  print("Fetched \(notesList.count) notes")
                  notes = notesList.elements
              case .failure(let error):
                  print("Fetch Notes failed with error: \(error)")
              }
          } catch {
              print("Fetch Notes failed with error: \(error)")
          }
      }
  
      func save(_ note: Note) async {
          do {
              let result = try await Amplify.API.mutate(request: .create(note))
              switch result {
              case .success(let note):
                  print("Save note completed")
                  notes.append(note)
              case .failure(let error):
                  print("Save Note failed with error: \(error)")
              }
          } catch {
              print("Save Note failed with error: \(error)")
          }
      }
  
      func delete(_ note: Note) async {
          do {
              let result = try await Amplify.API.mutate(request: .delete(note))
              switch result {
              case .success(let note):
                  print("Delete note completed")
                  notes.removeAll(where: { $0.id == note.id })
              case .failure(let error):
                  print("Delete Note failed with error: \(error)")
              }
          } catch {
              print("Delete Note failed with error: \(error)")
          }
      }
  }

  Code snippet copied

  Copy

  This class allows to fetch all notes, save a new note, and delete an existing note, while also publishing the fetched notes in a notes array.

• Update the existing UI

  Listing notes

  Make the following changes to the NotesView.swift file:

  • Add a new @EnvironmentObject private var notesService: NotesService property
  • Delete the local notes array and instead use published notesService.notes when creating the List items in the ForEach loop.
  • Call notesService.fetchNotes() when the view appears. We can do this using the task(priority:_:) method.

  Your file should look like the following:

  struct NotesView: View {
      @EnvironmentObject private var authenticationService: AuthenticationService
      @EnvironmentObject private var notesService: NotesService
  
      var body: some View {
          NavigationStack{
              List {
                  if notesService.notes.isEmpty {
                      Text("No notes")
                  }
                  ForEach(notesService.notes, id: \.id) { note in
                      NoteView(note: note)
                  }
              }
              .navigationTitle("Notes")
              .toolbar {
                  Button("Sign Out") {
                      Task {
                          await authenticationService.signOut()
                      }
                  }
              }
          }
          .task {
              await notesService.fetchNotes()
          }
      }
  }

  Code snippet copied

  Copy

  Since the notesService variable is marked with a @EnvironmentObject property wrapper annotation, we need to set it using the environmentObject(_:) view modifier on an ancestor view.

  Update the GettingStartedApp.swift's body to set the NotesService object: 

      var body: some Scene {
          WindowGroup {
              LandingView()
                  .environmentObject(NotesService())
                  .environmentObject(AuthenticationService())
          }
      }

  Code snippet copied

  Copy

  Creating notes

  Create a new Swift file named SaveNoteView.swift with the following content:

  import SwiftUI
  
  struct SaveNoteView: View {
      @Environment(\.dismiss) private var dismiss
      @EnvironmentObject private var notesService: NotesService
      @State private var name = ""
      @State private var description = ""
      @State private var image = ""
  
      var body: some View {
          Form {
              Section("Details") {
                  TextField("Name", text: $name)
                  TextField("Description", text: $description)
              }
              
              Section("Picture") {
                  TextField("Image Name", text: $image)
              }
              
              Button("Save Note") {
                  let note = Note(
                      name: name,
                      description: description.isEmpty ? nil : description,
                      image: image.isEmpty ? nil : image
                  )
                  
                  Task {
                      await notesService.save(note)
                      dismiss()
                  }
              }
          }
      }
  }

  Code snippet copied

  Copy

  This view displays text fields for a name, description, and image. It also has a Save Note button that when tapped, it creates a Note object and calls noteService.save(_:) to save it.

  Note: The view automatically dismisses itself by the usage of the @Environment(\.dismiss) property.

  Update the NotesView.swift file with the following information:

  • Add a new @State private var isSavingNote = false property
  • Add a new ToolbarItem at the bottom, with a "⨁ New Note" button that sets isSavingNote = true
  • Show SaveNoteView() inside a sheet(isPresented:) method, using the isSavingNote property.

  Your file should now look like the following:
  

  struct NotesView: View {
      @EnvironmentObject private var authenticationService: AuthenticationService
      @EnvironmentObject private var notesService: NotesService
      @State private var isSavingNote = false
  
      var body: some View {
          NavigationStack{
              List {
                  if notesService.notes.isEmpty {
                      Text("No notes")
                  }
                  ForEach(notesService.notes, id: \.id) { note in
                      NoteView(note: note)
                  }
              }
              .navigationTitle("Notes")
              .toolbar {
                  Button("Sign Out") {
                      Task {
                          await authenticationService.signOut()
                      }
                  }
              }
              .toolbar {
                  ToolbarItem(placement: .bottomBar) {
                      Button("⨁ New Note") {
                          isSavingNote = true
                      }
                      .bold()
                  }
              }
              .sheet(isPresented: $isSavingNote) {
                  SaveNoteView()
              }
          }
          .task {
              await notesService.fetchNotes()
          }
      }
  }

  Code snippet copied

  Copy

  Deleting notes

  To implement this we can rely on the onDelete(perform:) method of ForEach:

      ForEach(notesService.notes, id: \.id) { note in
          NoteView(note: note)
      }
      .onDelete { indices in
          for index in indices {
              let note = notesService.notes[index]
              Task {
                  await notesService.delete(note)
              }
          }
      }

  Code snippet copied

  Copy

  Your NotesView.swift file should look like the following:
  

  import SwiftUI
  
  struct NotesView: View {
      @EnvironmentObject private var authenticationService: AuthenticationService
      @EnvironmentObject private var notesService: NotesService
      @State private var isSavingNote = false
  
      var body: some View {
          NavigationStack{
              List {
                  if notesService.notes.isEmpty {
                      Text("No notes")
                  }
                  ForEach(notesService.notes, id: \.id) { note in
                      NoteView(note: note)
                  }
                  .onDelete { indices in
                      for index in indices {
                          let note = notesService.notes[index]
                          Task {
                              await notesService.delete(note)
                          }
                      }
                  }
              }
              .navigationTitle("Notes")
              .toolbar {
                  Button("Sign Out") {
                      Task {
                          await authenticationService.signOut()
                      }
                  }
              }
              .toolbar {
                  ToolbarItem(placement: .bottomBar) {
                      Button("⨁ New Note") {
                          isSavingNote = true
                      }
                      .bold()
                  }
              }
              .sheet(isPresented: $isSavingNote) {
                  SaveNoteView()
              }
          }
          .task {
              await notesService.fetchNotes()
          }
      }
  }

  Code snippet copied

  Copy

• Build and test

  To verify everything works as expected, build, and run the project.

  Choose the ► button in the toolbar. Alternatively, you can also do it by navigating to Product -> Run, or by pressing Cmd + R.

  The iOS simulator will open and the app should show you the Notes view, assuming you are still signed in.

  Choose the "⨁ New Note" button at the bottom to create a new list, which should automatically display in the list when saved. You can delete a note by swiping from the left of its row.

  Empty list

  

  Close

  

  Create a note

  

  Close

  

  Displayed note

  

  Close

  

  Delete a note
  

  

  Close