중고 거래 앱 만들기(5) - 파이어베이스 스토리지 이용, 이미지 업로드하기,프로그래스바 이용하기

• 이미지 업로드 하기

기존에 만들었던 코드를 조금 변형한다. 먼저 갤러리부터 받아온 이미지가 존재한지 확인하고,

존재한다면 포토를 업로드해주도록한다. 이미지 uri가 없다면 빈 이미지는 빼고 업로드해야한다.

        //중간에 이미지가 있으면 업로드 과정을 추가
        if (selectedUri != null) {
            uploadPhoto(selectedUri!!,
                successHandler = { uri ->
                    uploadArticle(sellerId, title, price, uri)

                },
                errorHandler = {
                    Toast.makeText(this, "사진 업로드에 실패햇습니다.", Toast.LENGTH_SHORT).show()

                }
            )
              
        } else {
            uploadArticle(sellerId, title, price, "")

        }

    }
}

  선택된 이미지 uri가 존재할경우 이미지를  파이어베이스 스토리지에 저장시키고, 스토리지에 저장시킨후, 실시간데이터베이스 Article모델에 uri값을 넣어 만들어줘야한다.

그렇지않다면  else구문이 실행되 이미지가 존재하지않아 사진이없는 게시글을 작성한다.

 

#파이어베이스 스토리지

->전역변수로 만들어준다,

private val storage: FirebaseStorage by lazy {
    Firebase.storage

 

#파이어베이스 스토리지에서 이미지 저장 및 가져오기. 

private fun uploadPhoto(uri: Uri, successHandler: (String) -> Unit, errorHandler: () -> Unit) {
    val fileName = "${System.currentTimeMillis()}.png"
    storage.reference.child("article/photo").child(fileName)
        .putFile(uri)
        .addOnCompleteListener {
            if (it.isSuccessful) {
                storage.reference.child("article/photo").child(fileName)
                    .downloadUrl
                    .addOnSuccessListener { uri ->
                        successHandler(uri.toString())
                    }.addOnFailureListener {
                        errorHandler()
                    }
            } else {
                errorHandler()
            }
        }
}

이미지 uri가 null이 아니면, 현재 내 이미지 파일을 파이어베이스에 업로드시키고, 스토리지에서 해당

이미지의 uri값을 가져온다. 그 uri를 이용해 filename이라는 모델객체를 만들고, 글라이더는 해당 uri에서 이미지를 가져온다.

이 코드는 실행순서가 중요하기때문에 비동기의 문제 처리를 하기위해서 콜백함수 성공핸들러와 에러핸들러를

콜백함수로써 넘겨준다.  위에 전역으로만들어준 스토리지의 래퍼런스를 얻고, child를 통해서 경로를잡아준다

그리고 해당경로의 지정한 파일명 putfile을 해주는데 여기서 uri는 현재 내 애뮬레이터의 이미지의uri가된다.

그리고 addoncompleteListener 이벤트가 성공시, 다시 이미지파일의 uri을 받아온후, 콜백함수가 호출하여, 인자로

넘겨줬던 함수가 호출되면서, 아래 uploadArticle() 최종적으로 실행하게된다.

private fun uploadArticle(sellerId: String, title: String, price: String, imageUri: String) {
    val model = ArticleModel(sellerId, title, System.currentTimeMillis(), "$price 원", imageUri)
    articlDB.push().setValue(model)
    //처음 액티비티화면으로 실행됨.
    finish()
}

 

• 프래그레스바 - 로딩 바 추가하기.
• 이미지가 서버에 저장되는 순간 작업시간이 있기때문에 , 사용자는 이미지가 업로드된건지 알수없기때문에
• 레이아웃에 프로그래스바를 추가해준다.
• visibility=gone 을 하는 이유는 화면에보이지않다가 어떤 순간에 화면에보이도록 처리하기위해서입니다.

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:visibility="gone"/>

 

• 게시글등록을 햇을때 프로그래스바가 실행될때만 true로 보여주도록한다.

        //게시글 등록 버튼을 클릭하엿을때
        binding.submitButton.setOnClickListener {
            val title = binding.titleEditText.text.toString()
            val price = binding.priceEditText.text.toString()
            val sellerId = auth.currentUser?.uid.orEmpty()
            binding.progressBar.isVisible= true

• 애뮬래이터 실행

 

• 파이어베이스 스토리지, 실시간데이터베이스 확인.