Build an iOS Application

Implementation

• Create the storage service

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

  amplify add storage

  Code snippet copied

  Copy

  When prompted, make the following selections:
  

  Select from one of the below mentioned services:
      ❯ Content (Images, audio, video, etc.)
  
  Provide a friendly name for your resource that will be used to label this category in the project
      image
  
  Provide bucket name
      «default value»
  
  Who should have access:
      ❯ Auth users only
  
  What kind of access do you want for Authenticated users?
      ● create/update
      ● read
      ● delete
      «i.e. select all options»
  
  Do you want to add a Lambda Trigger for your S3 Bucket?
      N

  Code snippet copied

  Copy

  Finally, deploy the service by running the following command:

  amplify push
  
  Are you sure you want to continue?
      Y

  Code snippet copied

  Copy

• Add the Amplify Storage 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 AWSS3StoragePlugin, and select Add.

  

  Close

  

  You will see AWSS3StoragePlugin as a dependency for your project.

  

  Close

  

• Configure the Amplify Storage library at runtime

  Navigate back to Xcode and open the GettingStartedApp.swift file. To configure Amplify API, you will need to:

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

  Your code should look like the following:

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

  Code snippet copied

  Copy

• Create a class to support image CRUD operations

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

  import Amplify
  import Foundation
  
  class StorageService: ObservableObject {
      func upload(_ data: Data, name: String) async {
          let task = Amplify.Storage.uploadData(
              key: name,
              data: data,
              options: .init(accessLevel: .private)
          )
          do {
              let result = try await task.value
              print("Upload data completed with result: \(result)")
          } catch {
              print("Upload data failed with error: \(error)")
          }
      }
  
      func download(withName name: String) async -> Data? {
          let task = Amplify.Storage.downloadData(
              key: name,
              options: .init(accessLevel: .private)
          )
          do {
              let result = try await task.value
              print("Download data completed")
              return result
          } catch {
              print("Download data failed with error: \(error)")
              return nil
          }
      }
  
      func remove(withName name: String) async {
          do {
              let result = try await Amplify.Storage.remove(
                  key: name,
                  options: .init(accessLevel: .private)
              )
              print("Remove completed with result: \(result)")
          } catch {
              print("Remove failed with error: \(error)")
          }
      }
  }

  Code snippet copied

  Copy

  The methods in this class simply call their Amplify counterpart. Amplify Storage has three file protection levels:

  • Public: Accessible by all users
  • Protected: Readable by all users, but only writable by the creating user
  • Private: Readable and writable only by the creating user

  For this app, we want the images to only be available to the note owner, so we set the accessLevel: .private property in each operation's options.

• Update the existing UI

  Displaying Images

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

  import SwiftUI
  
  struct RemoteImage: View {
      @EnvironmentObject private var storageService: StorageService
      @State private var image: UIImage? = nil
      @State private var isLoading = true
      var name: String
      
      var body: some View {
          content
              .task {
                  if let data = await storageService.download(withName: name) {
                      image = UIImage(data: data)
                  }
                  isLoading = false
              }
      }
      
      @ViewBuilder
      private var content: some View {
          if isLoading {
              ProgressView()
          } else if let image {
              Image(uiImage: image)
                  .resizable()
                  .aspectRatio(contentMode: .fill)
          } else {
              EmptyView()
          }
      }
  }

  Code snippet copied

  Copy

  This view will attempt to download the data using the storage service and the provided name, while displaying a loading view while the operation is in progress. If the data cannot be downloaded, it shows an empty view.

  Next, update NoteView.swift to use this new view when displaying the image:

      if let image = note.image {
          Spacer()
          RemoteImage(name: image)
              .frame(width: 30, height: 30)
      }

  Code snippet copied

  Copy

  Finally, update the GettingStartedApp.swift's body to set the StorageService object:

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

  Code snippet copied

  Copy

  Saving Images

  In order to allow the user to select a picture from their library, create a new Swift file named PicturePicker.swift with the following content:

  import PhotosUI
  import SwiftUI
  
  struct PicturePicker: View {
      @State private var selectedPhoto: PhotosPickerItem? = nil
      @Binding var selectedData: Data?
  
      var body: some View {
          VStack {
              if let selectedData, let image = UIImage(data: selectedData) {
                  Image(uiImage: image)
                      .resizable()
                      .frame(width: 100, height: 100)
                      .clipShape(Circle())
                      .overlay(Circle().stroke(Color.white, lineWidth: 4))
                      .shadow(radius: 10)
              }
              
              PhotosPicker(title, selection: $selectedPhoto)
          }
          .onChange(of: selectedPhoto) {
              Task {
                  selectedData = try? await selectedPhoto?.loadTransferable(type: Data.self)
              }
          }
      }
      
      private var title: String {
          return selectedPhoto == nil ? "Choose a picture" : "Change picture"
      }
  }

  Code snippet copied

  Copy

  Make the following changes to the SaveNoteView.swift files:

  • Add a new @EnvironmentObject private var storageService: StorageService property.
  • Replace the type of the image property to Data instead of String.
  • Display PicturePicker(selectedData: $image) on the Picture section instead of a text field.
  • Modify the Save Note button's action to also save the image using storageService. Keep in mind that the note's image value should match the name you give to the stored image.

  You file should look like the following:
  

  struct SaveNoteView: View {
      @Environment(\.dismiss) private var dismiss
      @EnvironmentObject private var notesService: NotesService
      @EnvironmentObject private var storageService: StorageService
      @State private var name = ""
      @State private var description = ""
      @State private var image: Data? = nil
  
      var body: some View {
          Form {
              Section("Details") {
                  TextField("Name", text: $name)
                  TextField("Description", text: $description)
              }
  
              Section("Picture") {
                  PicturePicker(selectedData: $image)
              }
  
              Button("Save Note") {
                  let imageName = image != nil ? UUID().uuidString : nil
                  let note = Note(
                      name: name,
                      description: description.isEmpty ? nil : description,
                      image: imageName
                  )
  
                  Task {
                      if let image, let imageName {
                          await storageService.upload(image, name: imageName)
                      }
                      await notesService.save(note)
  
                      dismiss()
                  }
              }
          }
      }
  }

  Code snippet copied

  Copy

  Deleting Images

  To delete images that are associated with a note that is deleted, update the NotesView.swift file:

  • Add a new @EnvironmentObject private var storageService: StorageService property
  • Call storageService.remove(withName:) inside the onDelete callback after calling notesService.delete(_:).

  Your file should look like the following:
  

  struct NotesView: View {
      @EnvironmentObject private var authenticationService: AuthenticationService
      @EnvironmentObject private var notesService: NotesService
      @EnvironmentObject private var storageService: StorageService
      @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)
                              if let image = note.image {
                                  await storageService.remove(withName: image)
                              }
                          }
                      }
                  }
              }
              .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 going 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.

  You can tap on the "⨁ New Note" button at the bottom to create a new list, and now you should be able to select a picture from the device's photo library.

  List of notes
  

  

  Close

  

  Create a note

  

  Close

  

  Select a picture

  

  Close

  

  Note with picture
  

  

  Close