구현

• 스토리지 서비스 생성

  이미지 스토리지 기능을 추가하려면 Amplify 스토리지 카테고리를 사용합니다.
  

  amplify add storage
  
  ? Please select from one of the below mentioned services: accept the default Content (Images, audio, video, etc.) and press enter
  ? Please provide a friendly name for your resource that will be used to label this category in the project: type image and press enter
  ? Please provide bucket name: accept the default and press enter
  ? Who should have access: accept the default Auth users only and press enter
  ? What kind of access do you want for Authenticated users? select all three options create/update, read, delete using the space and arrows keys, then press enter
  ? Do you want to add a Lambda Trigger for your S3 Bucket? accept the default No and press enter

  Code snippet copied

  복사

  잠시 후 다음 메시지가 표시됩니다.
  

  Successfully added resource image locally

  Code snippet copied

  복사
• 스토리지 서비스 배포

  방금 생성한 스토리지 서비스를 배포하려면 터미널로 이동하여 다음 명령을 실행합니다.
  

  amplify push

  Code snippet copied

  복사

  Y를 눌러 확인합니다. 잠시 후 다음 메시지가 표시됩니다.
  

  ✔ Successfully pulled backend environment amplify from the cloud.

  Code snippet copied

  복사
• Android Studio 프로젝트에 Amplify 스토리지 라이브러리 추가

  코드 작업을 시작하기 전에 Android Studio로 돌아가 이전에 추가한 다른 `amplifyframework` 구현과 함께 모듈의 `build.gradle`에 다음 종속 구성 요소를 추가하고 메시지가 표시되면 [지금 동기화(Sync Now)]를 클릭합니다.
  

  dependencies {
   ...
      // Amplify core dependency
      implementation 'com.amplifyframework:core:1.4.0'
      implementation 'com.amplifyframework:aws-auth-cognito:1.4.0'
      implementation 'com.amplifyframework:aws-api:1.4.0'
      implementation 'com.amplifyframework:aws-storage-s3:1.4.0'
  }

  Code snippet copied

  복사
• 런타임에 Amplify 스토리지 플러그인 초기화

  Android Studio로 돌아가 java/example.androidgettingstarted에서 Backend.kit를 열고, initialize() 메서드의 Aremplify 초기화 시퀀스에 코드 줄을 추가합니다. 완성된 코드 블록은 다음과 같습니다.
  

  try {
      Amplify.addPlugin(AWSCognitoAuthPlugin())
      Amplify.addPlugin(AWSApiPlugin())
      Amplify.addPlugin(AWSS3StoragePlugin())
  
      Amplify.configure(applicationContext)
  
      Log.i(TAG, "Initialized Amplify")
  } catch (e: AmplifyException) {
      Log.e(TAG, "Could not initialize Amplify", e)
  }

  Code snippet copied

  복사
• Backend 클래스에 Image CRUD 메서드 추가

  아직 Backend.kt에 있습니다. Backend 클래스의 아무 곳에나 다음 세 가지 메서드를 추가하여 스토리지에서 이미지를 업로드, 다운로드 및 삭제합니다.
  

  fun storeImage(filePath: String, key: String) {
      val file = File(filePath)
      val options = StorageUploadFileOptions.builder()
          .accessLevel(StorageAccessLevel.PRIVATE)
          .build()
  
      Amplify.Storage.uploadFile(
          key,
          file,
          options,
          { progress -> Log.i(TAG, "Fraction completed: ${progress.fractionCompleted}") },
          { result -> Log.i(TAG, "Successfully uploaded: " + result.key) },
          { error -> Log.e(TAG, "Upload failed", error) }
      )
  }
  
  fun deleteImage(key : String) {
  
      val options = StorageRemoveOptions.builder()
          .accessLevel(StorageAccessLevel.PRIVATE)
          .build()
  
      Amplify.Storage.remove(
          key,
          options,
          { result -> Log.i(TAG, "Successfully removed: " + result.key) },
          { error -> Log.e(TAG, "Remove failure", error) }
      )
  }
  
  fun retrieveImage(key: String, completed : (image: Bitmap) -> Unit) {
      val options = StorageDownloadFileOptions.builder()
          .accessLevel(StorageAccessLevel.PRIVATE)
          .build()
  
      val file = File.createTempFile("image", ".image")
  
      Amplify.Storage.downloadFile(
          key,
          file,
          options,
          { progress -> Log.i(TAG, "Fraction completed: ${progress.fractionCompleted}") },
          { result ->
              Log.i(TAG, "Successfully downloaded: ${result.file.name}")
              val imageStream = FileInputStream(file)
              val image = BitmapFactory.decodeStream(imageStream)
              completed(image)
          },
          { error -> Log.e(TAG, "Download Failure", error) }
      )
  }

  Code snippet copied

  복사

  이 세 가지 메서드는 Amplify의 해당 메서드를 호출합니다. Amplify 스토리지에는 세 가지 파일 보호 수준이 있습니다.

  • 공용 모든 사용자가 액세스할 수 있습니다.
  • 보호됨 모든 사용자가 읽을 수 있지만 생성하는 사용자만 쓸 수 있습니다.
  • 비공개 생성하는 사용자만 읽고 쓸 수 있습니다.

  이 앱의 경우 노트 소유자만 이미지를 사용할 수 있도록 해야 하므로, StorageAccessLevel.PRIVATE 속성을 사용합니다.

• 이미지를 캡처하는 UI 코드 추가

  다음 단계로, AddNoteACtivity에서 [이미지 추가(Add image)] 버튼을 클릭할 때 사용자가 전화 라이브러리에서 이미지를 선택할 수 있도록 UI를 수정합니다.

  두 가지를 변경해야 합니다. [노트 추가(Add Note)] 작업 레이아웃을 변경하여 [이미지 추가(Add image)] 버튼과 이미지 보기를 추가하고, 작업 클래스에 처리기 코드를 추가합니다.

  Android Studio의 res/layout에서 activity_add_note.xml 파일을 열고 addNote 버튼 바로 위에 이 버튼을 추가합니다.
  

  <!-- after the description EditText -->
  <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image"
      android:layout_width="match_parent"
      android:layout_height="280dp"
      android:layout_margin="16dp"
      android:scaleType="centerCrop" />
  
  <!-- after the Space -->
  <Button
      android:id="@+id/captureImage"
      style="?android:attr/buttonStyleSmall"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:backgroundTint="#009688"
      android:text="Add image" />

  Code snippet copied

  복사

  Android Studio의 java/example.androidgettingstarted에서 AddNoteACtivity.kt 파일을 열고 onCreate() 메서드에 이 코드를 추가합니다.
  

  // inside onCreate() 
  // Set up the listener for add Image button
  captureImage.setOnClickListener {
      val i = Intent(
          Intent.ACTION_GET_CONTENT,
          MediaStore.Images.Media.EXTERNAL_CONTENT_URI
      )
      startActivityForResult(i, SELECT_PHOTO)
  }
  
  // create rounded corners for the image
  image.shapeAppearanceModel = image.shapeAppearanceModel
      .toBuilder()
      .setAllCorners(CornerFamily.ROUNDED, 150.0f)
      .build()

  Code snippet copied

  복사

  Intent, MediaStore 및 CornerFamily에 필요한 가져오기를 추가합니다.

  또한 지원 객체에 이 상수 값을 추가합니다.
  

  // add this to the companion object 
  private const val SELECT_PHOTO = 100

  Code snippet copied

  복사

  마지막으로 선택한 이미지를 받아 저장하는 코드를 임시 파일에 추가합니다.

  아래 코드를 AddNoteACtivityclass의 아무 곳에나 추가합니다.
  

  //anywhere in the AddNoteActivity class
  
  private var noteImagePath : String? = null
  private var noteImage : Bitmap? = null
  
  override fun onActivityResult(requestCode: Int, resultCode: Int, imageReturnedIntent: Intent?) {
      super.onActivityResult(requestCode, resultCode, imageReturnedIntent)
      Log.d(TAG, "Select photo activity result : $imageReturnedIntent")
      when (requestCode) {
          SELECT_PHOTO -> if (resultCode == RESULT_OK) {
              val selectedImageUri : Uri? = imageReturnedIntent!!.data
  
              // read the stream to fill in the preview
              var imageStream: InputStream? = contentResolver.openInputStream(selectedImageUri!!)
              val selectedImage = BitmapFactory.decodeStream(imageStream)
              val ivPreview: ImageView = findViewById<View>(R.id.image) as ImageView
              ivPreview.setImageBitmap(selectedImage)
  
              // store the image to not recreate the Bitmap every time
              this.noteImage = selectedImage
  
              // read the stream to store to a file
              imageStream = contentResolver.openInputStream(selectedImageUri)
              val tempFile = File.createTempFile("image", ".image")
              copyStreamToFile(imageStream!!, tempFile)
  
              // store the path to create a note
              this.noteImagePath = tempFile.absolutePath
  
              Log.d(TAG, "Selected image : ${tempFile.absolutePath}")
          }
      }
  }
  
  private fun copyStreamToFile(inputStream: InputStream, outputFile: File) {
      inputStream.use { input ->
          val outputStream = FileOutputStream(outputFile)
          outputStream.use { output ->
              val buffer = ByteArray(4 * 1024) // buffer size
              while (true) {
                  val byteCount = input.read(buffer)
                  if (byteCount < 0) break
                  output.write(buffer, 0, byteCount)
              }
              output.flush()
              output.close()
          }
      }
  }

  Code snippet copied

  복사

  위의 코드는 선택한 이미지를 InputStream으로 두 번 사용합니다. 첫 번째 InputStream은 UI에 표시할 비트맵 이미지를 생성하고, 두 번째 InputStream은 백엔드로 보낼 임시 파일을 저장합니다.

  이 모듈에서는 Amplify API가 Fileobjects를 사용하기 때문에 임시 파일을 거칩니다. 가장 효율적인 설계는 아니지만 코드가 간단합니다.

  정상적으로 작동하는지 확인하기 위해 프로젝트를 빌드합니다. [빌드(Build)] 메뉴를 클릭하고 [프로젝트 만들기(Make Project)]를 선택하거나 Mac에서 ⌘F9을 입력합니다. 오류가 발생하지 않아야 합니다.
  

• 노트가 생성되면 이미지 저장

  노트가 생성되면 Backend에서 스토리지 메서드를 호출해보겠습니다. AddNoteActivity.kt를 열고 addNote.setOnClickListener() 메서드를 수정하여 Note 객체가 생성된 이후 위치에 아래 코드를 추가합니다.
  

  // add this in AddNoteACtivity.kt, inside the addNote.setOnClickListener() method and after the Note() object is created.
  if (this.noteImagePath != null) {
      note.imageName = UUID.randomUUID().toString()
      //note.setImage(this.noteImage)
      note.image = this.noteImage
  
      // asynchronously store the image (and assume it will work)
      Backend.storeImage(this.noteImagePath!!, note.imageName!!)
  }

  Code snippet copied

  복사
• 노트가 로드되면 이미지 로드

  이미지를 로드하기 위해 Note 데이터 클래스의 메서드에서 정적 데이터를 수정합니다. 이렇게 하면 API에서 반환된 NoteData 객체가 Note 객체로 변환될 때마다 이미지가 병렬로 로드됩니다. 이미지가 로드되면 LiveData의 UserData에 알려 옵저버가 변경 사항을 알도록 합니다. 그러면 UI 새로 고침이 트리거됩니다.

  UserData.kt를 열고 다음과 같이 Note 데이터 클래스의 도우미 개체를 수정합니다.
  

  // static function to create a Note from a NoteData API object
  companion object {
      fun from(noteData : NoteData) : Note {
          val result = Note(noteData.id, noteData.name, noteData.description, noteData.image)
          
          if (noteData.image != null) {
              Backend.retrieveImage(noteData.image!!) {
                  result.image = it
  
                  // force a UI update
                  with(UserData) { notifyObserver() }
              }
          }
          return result
      }
  }

  Code snippet copied

  복사
• 노트가 삭제되면 이미지 삭제

  마지막 단계는 자체 정리 단계, 즉 사용자가 노트를 삭제할 때 클라우드 스토리지에서 이미지를 삭제하는 것입니다. 스토리지 공간을 절약하기 위해 이 작업을 수행할 필요가 없더라도, 저장된 데이터의 월별 Gb당 Amazon S3 요금을 줄이기 위해서 수행합니다. 첫 5Gb는 무료이며, 이 자습서를 실행하는 데는 비용이 들지 않습니다.

  SwipeCallback.kt를 열고 onSwipe() 메서드의 끝에 아래 코드를 추가합니다.
  

  if (note?.imageName != null) {
      //asynchronously delete the image (and assume it will work)
      Backend.deleteImage(note.imageName!!)
  }

  Code snippet copied

  복사
• 구축 및 테스트

  정상적으로 작동하는지 확인하기 위해 프로젝트를 빌드하고 실행합니다. 도구 모음에서 [실행(Run)] 아이콘 ▶을 클릭하거나 ^ R을 입력합니다. 오류가 발생하지 않아야 합니다.

  아직 로그인되어 있다면 이전 섹션에서 삭제하지 않은 노트 목록에서 앱이 시작됩니다. [노트 추가(Add Note)] 버튼을 다시 사용하여 노트를 생성합니다. 이번에는 로컬 이미지 스토어에서 선택한 사진이 추가됩니다.

  앱을 종료하고 다시 시작하여 이미지가 올바르게 로드되었는지 확인합니다.

  전체 흐름은 다음과 같습니다.
  

  

  

  

  

  

• 여러 프로젝트 간에 백엔드 공유

  Amplify를 사용하면 여러 프런트엔드 애플리케이션 간에 단일 백엔드를 손쉽게 공유할 수 있습니다.

  터미널에서 다른 프로젝트 디렉터리로 이동하고 다음 명령을 실행합니다.
  

  mkdir other-project
  cd other-project
  
  amplify pull
  
  ? Do you want to use an AWS profile? accept the default Yes and press enter
  ? Please choose the profile you want to use select the profile you want to use and press enter
  ? Which app are you working on? select the backend you want to share and press enter
  ? Choose your default editor: select you prefered text editor and press enter
  ? Choose the type of app that you're building select the operating system for your new project and press enter
  ? Do you plan on modifying this backend? most of the time, select No and press enter. All backend modifications can be done from the original iOS project.

  Code snippet copied

  복사

  몇 초 후에 다음 메시지가 표시됩니다.
  

  Added backend environment config object to your project.
  Run 'amplify pull' to sync upstream changes.

  Code snippet copied

  복사

  구성 파일 2개를 가져온 것을 알 수 있습니다. 'Do you plan on modifying this backend?'라는 질문에 'Yes'라고 답하면 amplify 디렉터리도 표시됩니다.
  

  ➜  other-project git:(master) ✗ ls -al
  total 24
  drwxr-xr-x   5 stormacq  admin   160 Jul 10 10:28 .
  drwxr-xr-x  19 stormacq  admin   608 Jul 10 10:27 ..
  -rw-r--r--   1 stormacq  admin   315 Jul 10 10:28 .gitignore
  -rw-r--r--   1 stormacq  admin  3421 Jul 10 10:28 amplifyconfiguration.json
  -rw-r--r--   1 stormacq  admin  1897 Jul 10 10:28 awsconfiguration.json

  Code snippet copied

  복사
• 백엔드 삭제

  테스트 또는 프로토타입용 백엔드를 생성하거나 학습용 백엔드를 생성하는 경우 이 자습서를 따를 때와 마찬가지로 생성된 클라우드 리소스를 삭제해야 합니다.

  이 자습서의 맥락에서 리소스를 사용할 때는 프리 티어가 적용되지만 클라우드에서 사용되지 않는 리소스를 정리하는 것이 모범 사례입니다.

  amplify 프로젝트를 정리하려면 터미널에서 다음 명령을 실행합니다.
  

  amplify delete

  Code snippet copied

  복사

  잠시 후에 모든 클라우드 리소스가 삭제되었음을 확인하는 아래의 메시지가 표시됩니다.
  

  ✔ Project deleted in the cloud
  Project deleted locally.

  Code snippet copied

  복사