코딩 끝에 낙이 온다

[이펙티브 코틀린]가변성을 제한하라

CoBool — Sat, 4 Jun 2022 00:36:08 +0900

요소가 시간의 변화에 따라 변화하는 경우의 단점

프로그램을 이해하고 디버깅하기 힘들어짐
코드의 실행을 추론하기 어려워짐.
멀티스레드 프로그래밍의 경우 동기화가 필요하다
- 변경점이 많을 수록 충돌점이 많아진다.
테스트하기 어렵다
- 변경이 많을 수록 많은 조합을 테스트해야 한다.
상태 변경을 다른 부분에 알려야 할 때도 있다.

가변성 제한 방법

읽기 전용 프로퍼티(val)
- 완전히 변경 불가능하지 않다.
- 다른 프로퍼티를 활용하는 사용자 정의 게터로도 정의 가능하다.
- 정의 옆에 상태가 바로 적히므로 코드의 실행을 예측하는 것이 간단
- 스마트 캐스트를 활용 가능
가변 컬렉션과 읽기 전용 컬렉션 구분하기
- 읽기 전용 컬렉션을 가변 컬렉션으로 다운캐스팅하면 안 된다.
- 읽기 전용 컬렉션 사용 시 장점
  - 한 번 정의된 상태가 유지되므로 코드를 이해하기 쉽다
  - 공유했을 때도 충돌이 이뤄지지 않으므로 병렬 처리가 안전하다.
  - 객체에 대한 참조가 변경되지 않으므로 쉽게 캐시할 수 있다.
  - 방어적 복사본을 만들 필요가 없다.
    - 객체를 복사할 때 깊은 복사를 따로 하지 않아도 된다.
  - 다른 객체를 만들 때 활용하기 좋다.
  - 실행을 더 쉽게 예측 가능하다.
  - set 또는 map의 키로 사용 가능.
    - 키 값을 기반으로한 자료구조는 요소의 변경이 일어나면 찾을 수 없다.
데이터 클래스의 copy
- copy를 사용하여 immutable 객체를 수정할 수 있다.

변경 가능 지점

mutable 컬렉션
- ex)val list1 = MutableList<Int>
- 리스트 구현 내부에 변경 가능 지점이 있다.
  - 멀티스레드 처리가 이뤄질 경우 동기화되어 있는지 확실히 알 수 없어 위험하다.
mutable 프로퍼티
- ex)var list2 = List<Int>
- 프로퍼티 자체가 변경 가능 지점.
  - 멀티스레드 처리의 안정성이 더 좋음.
  - 사용자 정의 세터를 활용하여 변경을 추적 가능.
  - Delegates.observable을 사용 시 변경 시에 로그를 출력할 수 있다.
  - 객체 변경을 제어하기가 더 쉽다.
프로퍼티와 컬렉션 둘 다 mutable인 경우
- 두 지점 모두에 대한 동기화를 구현해야 함.
- 모호성이 발생하여 +=를 사용할 수 없다.

변경 가능 지점 노출하지 말기

상태를 나타내는 mutable 객체를 외부에 노출하는 것은 굉장히 위험하다.
- 돌발적인 수정이 일어날 때 위험할 수 있다.
  - 이를 방지하기 위한 방법
    - 방어적 복제
      - 리턴되는 mutable 객체를 복제하는 것.
    - 읽기 전용 슈퍼클래스로 업캐스트하여 가변성을 제한

실제 코드에 적용해본다.

기존 ViewModel에서 사용되던 MutableStateFlow를 예로 들어보자.

class HomeViewModel:ViewModel(){
...
val nickname: MutableStateFlow<String> = MutableStateFlow("")
    val emoji: MutableStateFlow<String> = MutableStateFlow("")
    val weatherEmoji: MutableStateFlow<String> = MutableStateFlow("")
    val weatherDegree: MutableStateFlow<String> = MutableStateFlow("")

각 프로퍼티들이 val로 정의되어 있으나, 사실상 안의 값은 수정이 가능하다.

가변성을 가진 프로퍼티가 외부에 노출되어 있으므로, 캡슐화가 필요하다.

...
    private val _nickname = MutableStateFlow("")
    private val _emoji = MutableStateFlow("")
    private val _weatherEmoji = MutableStateFlow("")
    private val _weatherDegree = MutableStateFlow("")
    val nickname: StateFlow<String>
        get() = _nickname
    val emoji: StateFlow<String>
        get() = _emoji
    val weatherEmoji: StateFlow<String>
        get() = _weatherEmoji
    val weatherDegree: StateFlow<String>
        get() = _weatherDegree

기존 MutableStateFlow 변수는 private 처리하여 외부에서는 접근을 차단하고,

ViewModel 내부에서는 자유롭게 수정가능하도록 한다.

그리고 외부에 노출할 용도로 MutableStateFlow를 업캐스팅하여 수정 불가능하도록 StateFlow 변수를 getter로 정의한다.

이로써 값은 외부에 노출할 수 있으나, 내부의 변수를 수정하지 못하도록 캡슐화를 진행하였다.

MVVM 적용기(2)

CoBool — Sat, 2 Apr 2022 21:26:17 +0900

이전 글에서는 MVVM에 대한 대략적인 개념과 그것을 구현하기 위한 컴포넌트들에 대해 소개하였다.

이번에는 실제 코드를 통해 내가 MVVM을 어떻게 구현했는 지에 대해 보여주려고 한다.

내가 사이드 프로젝트로 시작한 어플에 MVVM을 적용했는데,

일반적으로는 Repository에 Room을 사용해서 내부데이터를 저장한다고 하지만,

내가 사용할 어플에서는 그 정도로 많은 양의 데이터를 저장할 필요가 없었고,

굳이 MVVM을 구현하기 위해서 Room을 사용하는 것 자체가

소 잡는데 닭 잡는 칼을 쓰는 모양새가 되는 것 같아서,

이전에 사용하던 SharedPreperence를 그대로 사용하기로 했다.

서버에 데이터를 요청하는 로직도 Model의 역할로서 같은 Repository에 포함시키도록 했다.

object MisoRepository {
        fun checkRegistered(
            socialId: String,
            socialType: String,
            onSuccessful: (
                Call<GeneralResponseDto>,
                Response<GeneralResponseDto>
            ) -> Unit,
            onFail: (
                Call<GeneralResponseDto>,
                Response<GeneralResponseDto>
            ) -> Unit,
            onError: (
                Call<GeneralResponseDto>,
                Throwable
            ) -> Unit?,
        ) {
            val callCheckRegistered = TransportManager.getRetrofitApiObject<GeneralResponseDto>()
                .checkRegistered(socialId, socialType)

            TransportManager.requestApi(callCheckRegistered,
                { call, response ->
                    if (response.isSuccessful)
                        onSuccessful(call, response)
                    else
                        onFail(call, response)
                },
                { call, throwable ->
                    onError(call, throwable)
                })
        }
....
}

내가 만든 Repository의 일부 코드이다.

서버와 통신하기 위해 사용한 API 요청 코드를 대신 수행해주는 역할을 한다.

Retrofit의 객체를 만드는 과정은 많은 보일러플레이트 코드를 만들어내므로,

공통되는 코드는 다음과 같이

class TransportManager {
    companion object {
        fun <T> getRetrofitApiObject(): MisoWeatherAPI {
            var gson = GsonBuilder().setLenient().create()
            val retrofit = Retrofit.Builder()
                .baseUrl(MisoActivity.MISOWEATHER_BASE_URL)
                .addConverterFactory(GsonConverterFactory.create(gson))
                .build()
            val api = retrofit.create(MisoWeatherAPI::class.java)
            return api
        }

        fun <T> requestApi(
            callApi: Call<T>,
            onResponse: (Call<T>, Response<T>) -> Unit,
            onFailure: (Call<T>, Throwable) -> Unit
        ) {
            callApi.enqueue(object : Callback<T> {
                override fun onResponse(
                    call: Call<T>,
                    response: Response<T>
                ) {
                    onResponse(call, response)
                }

                override fun onFailure(call: Call<T>, t: Throwable) {
                    onFailure(call, t)
                }
            })
        }
    }
}

TransportManager라는 클래스에 제네릭으로 받아 대신 만들어주도록 했다.

그리고 SharedPreperence를 사용하기 위해서

class MisoRepository private constructor() {
    companion object {
        private var instance: MisoRepository? = null
        private lateinit var context: Context
        private lateinit var prefs: SharedPreferences
        private lateinit var pairList: ArrayList<Pair<String, String>>
        fun getInstance(_context: Context): MisoRepository {
            return instance ?: synchronized(this) {
                instance ?: MisoRepository().also {
                    context = _context
                    instance = it
                    prefs = context.getSharedPreferences("misoweather", Context.MODE_PRIVATE)
                    pairList = ArrayList()
                }
            }
        }
    }

    fun addPreferencePair(first: String, second: String) {
        val pair = Pair(first, second)
        pairList.add(pair)
    }

    fun removePreference(pref: String) {
        val pair = Pair(pref, "")
        pairList.add(pair)
    }

    fun removePreference(vararg pref: String) {
        for (i in 0..pref.size - 1) {
            val pair = Pair(pref[i], "")
            pairList.add(pair)
        }
    }

    fun getPreference(pref: String): String? {
        return prefs!!.getString(pref, "")
    }

    fun savePreferences() {
        var edit = prefs!!.edit()
        for (i in 0..pairList.size - 1) {
            val pair = pairList.get(i)
            edit.putString(pair.first, pair.second)
        }
        edit.apply()
        pairList.clear()
    }
....
}

위와 같은 코드로 변경했다.

SharedPreference에 접근을 위해 Context를 매개변수로 받는 싱글톤 생성자를 만들었다.

리포지토리는 어떤 곳이든 동일한 객체가 반환되어야 하므로,

싱글톤으로 구현하는 것이 정석이라고 생각한다.

그리고 항목을 받아 저장하는 메소드와,항목의 내용을 지우는 메소드들도 추가했다.

repository = MisoRepository.getInstance(applicationContext)
repository.getBriefForecast(
            regionId,
            { call, response ->
                forecastBriefResponse.value = response
            },
            { call, response ->
                forecastBriefResponse.value = response
            },
            { call, t ->
                forecastBriefResponse.value = null
            }
        )

실제 호출 부분은 위와 같다.

사용하는 입장에서는 불러올 데이터를 가져오는 함수를 호출하고,각각 성공했을 때,실패했을 때,예외가 발생했을 때에 대한 메소드를 넣어주면 된다.

이제 Repository가 만들어졌으니,

각 뷰의 데이터를 저장할 ViewModel을 구현해야 한다.

일반적으로 안드로이드에서 ViewModel하면 기본적으로 따라오는 것이 LiveData이므로,

ViewModel을 구현하려면 LiveData도 함께 알아야한다.

LiveData는 관찰 가능한 데이터 홀더 클래스로,

저장된 데이터의 변경을 감지할 수 있는 observer를 붙일 수 있어,

실제 데이터와 UI 상의 데이터를 일치시킬 수 있는 장점이 있다.

class HomeViewModel(private val repository: MisoRepository) : ViewModel() {
    val memberInfoResponse: MutableLiveData<Response<MemberInfoResponseDto>?> = MutableLiveData()
    val forecastBriefResponse: MutableLiveData<Response<ForecastBriefResponseDto>?> =
        MutableLiveData()
    val commentListResponse: MutableLiveData<Response<CommentListResponseDto>?> = MutableLiveData()
    val surveyResultResponse: MutableLiveData<Response<SurveyResultResponseDto>?> =
        MutableLiveData()

    fun getUserInfo(serverToken: String) {
        repository.getUserInfo(
            serverToken,
            { call, response ->
                memberInfoResponse.value = response
            },
            { call, response ->
                memberInfoResponse.value = response
            },
            { call, throwable ->
                memberInfoResponse.value = null
            })
    }

    fun getBriefForecast(regionId: Int) {
        repository.getBriefForecast(
            regionId,
            { call, response ->
                forecastBriefResponse.value = response
            },
            { call, response ->
                forecastBriefResponse.value = response
            },
            { call, t ->
                forecastBriefResponse.value = null
            }
        )
    }

    fun getCommentList(commentId: Int?, size: Int) {
        repository.getCommentList(
            commentId,
            size,
            { call, response ->
                commentListResponse.value = response
            },
            { call, response ->
                commentListResponse.value = response
            },
            { call, throwable -> }
        )
    }

    fun getSurveyResult(shortBigScale: String) {
        repository.getSurveyResults(
            shortBigScale,
            { call, reponse ->
                surveyResultResponse.value = reponse!!
            },
            { call, reponse ->
                surveyResultResponse.value = reponse!!
            },
            { call, t ->

            },
        )
    }
}

메인화면의 날씨정보들을 서버로부터 불러와 데이터를 저장하는 역할을 하고 있다.

위에서 보는 것과 마찬가지로,UI에서 저장할 정보들을 LiveData 객체로 선언한 뒤,

API 메소드에서 응답을 받는 경우 선언된 LiveData의 객체들 또한 변경시킨다.

이정도만 해도,ViewModel로의 역할은 수행할 수 있다고 볼 수 있다.

repository = MisoRepository.getInstance(applicationContext)
        viewModel = HomeViewModel(repository)

실제 Activity 호출 부에서는 이렇게 Repository를 싱글톤으로 넣어 구현하였다.

viewModel.getBriefForecast(getPreference("defaultRegionId")!!.toInt())
viewModel.forecastBriefResponse.observe(this, {
                if (it == null) {
                    Log.i("getBriefForecast", "실패")
                    repeatRequest()
                } else {
                    if (it.isSuccessful) {
                        try {
                            Log.i("결과", "성공")
                            val forecastBriefResponseDto = it.body()!!
                            var forecast = forecastBriefResponseDto.data.forecast
                            var region = forecastBriefResponseDto.data.region
                            addPreferencePair("bigScale", region.bigScale)
                            addPreferencePair(
                                "midScale",
                                if (region.midScale.equals("선택 안 함")) "전체" else region.midScale
                            )
                            addPreferencePair(
                                "smallScale",
                                if (region.smallScale.equals("선택 안 함")) "전체" else region.smallScale
                            )
                            savePreferences()
                            txtLocation.text =
                                region.bigScale + " " + getPreference("midScale") + " " +
                                        if (getPreference("midScale").equals("전체")) "" else getPreference(
                                            "smallScale"
                                        )
                            txtWeatherEmoji.setText(forecast.sky)
                            txtWeatherDegree.setText(forecast.temperature + "˚")
                            setupSurveyResult()
                        } catch (e: Exception) {
                            repeatRequest()
                            e.printStackTrace()
                            Log.i("getBriefForecast", "excepted")
                        }
                    } else {
                        repeatRequest()
                    }
                }
            })

그리고 위와 같이 데이터를 뿌려야할 항목별로 초기화를 하도록 했다.

우선 데이터를 가져올 함수를 호출한뒤,가져올 LiveData 변수에 observe 함수를 이용하여

값이 변경될 때에 실행할 코드를 진행하도록 했다.

위와 같은 코드로 View와 ViewModel 간에 데이터를 요청하고 업데이트하는 과정은 어느정도 구현되었다고 볼 수 있지만, 아직은 SharedPreference를 뷰인 액티비티에서 접근하고 있기에,

ViewModel이 SharedPreperence의 접근도 함께 담당하도록 ViewModel에 Repository를 생성시에 함께 넣는 것으로 변경하였다.

class HomeViewModel(private val repository: MisoRepository) : ViewModel() {
    val memberInfoResponse: MutableLiveData<Response<MemberInfoResponseDto>?> = MutableLiveData()
    val forecastBriefResponse: MutableLiveData<Response<ForecastBriefResponseDto>?> =
        MutableLiveData()
    val commentListResponse: MutableLiveData<Response<CommentListResponseDto>?> = MutableLiveData()
    val surveyResultResponse: MutableLiveData<Response<SurveyResultResponseDto>?> =
        MutableLiveData()
    val isSurveyed: MutableLiveData<String?> = MutableLiveData()
    val lastSurveyedDate: MutableLiveData<String?> = MutableLiveData()
    val defaultRegionId: MutableLiveData<String?> = MutableLiveData()
    val misoToken: MutableLiveData<String?> = MutableLiveData()
    val bigScale: MutableLiveData<String?> = MutableLiveData()
    val midScale: MutableLiveData<String?> = MutableLiveData()
    val smallScale: MutableLiveData<String?> = MutableLiveData()
    val logoutResponseString: MutableLiveData<String?> = MutableLiveData()

    fun updateProperties() {
        setupBigScale()
        setupMidScale()
        setupSmallScale()
        setupDefaultRegionId()
        setupDefaultRegionId()
        setupSurveyed()
        setupMisoToken()
        setupLastSurveyedDate()
    }

    fun setupSurveyed() {
        isSurveyed.value = repository.getPreference("isSurveyed")
    }

    fun setupLastSurveyedDate() {
        lastSurveyedDate.value = repository.getPreference("LastSurveyedDate")
    }

    fun setupDefaultRegionId() {
        defaultRegionId.value = repository.getPreference("defaultRegionId")
    }

    fun setupMisoToken() {
        misoToken.value = repository.getPreference("misoToken")
    }

    fun setupBigScale() {
        bigScale.value = repository.getPreference("bigScaleRegion")
    }

    fun setupMidScale() {
        midScale.value = repository.getPreference("MidScaleRegion")
    }

    fun setupSmallScale() {
        smallScale.value = repository.getPreference("SmallScaleRegion")
    }
...
}

기존에 외부 API를 호출하여 데이터를 가져오는 로직이외에,

SharedPreperence를 호출하여 내부 데이터를 저장하는 메소드도 추가하였다.

fun initializeProperties() {
        fun checkinitializedAll()
        {
            if (
                this::isSurveyed.isInitialized &&
                this::lastSurveyedDate.isInitialized &&
                this::defaultRegionId.isInitialized &&
                this::misoToken.isInitialized &&
                this::bigScale.isInitialized &&
                this::midScale.isInitialized &&
                this::smallScale.isInitialized
            )
                setupData()
        }
        viewModel.updateProperties()
        viewModel.isSurveyed.observe(this, {
            isSurveyed = it!!
            checkinitializedAll()
        })
        viewModel.lastSurveyedDate.observe(this, {
            lastSurveyedDate = it!!
            checkinitializedAll()
        })
        viewModel.defaultRegionId.observe(this, {
            defaultRegionId = it!!
            checkinitializedAll()
        })
        viewModel.misoToken.observe(this, {
            misoToken = it!!
            checkinitializedAll()
        })
        viewModel.bigScale.observe(this, {
            bigScale = it!!
            checkinitializedAll()
        })
        viewModel.midScale.observe(this, {
            midScale = it!!
            checkinitializedAll()
        })
        viewModel.smallScale.observe(this, {
            smallScale = it!!
            checkinitializedAll()
        })

    }

기존 액티비티에는 실행 초기에 먼저 내부 SharedPreperence 데이터부터 먼저 초기화를 시켜,

ViewModel의 데이터와 값이 일치하는 변수를 가지도록 해 액티비티에서 따로 Repository에 접근할 필요가 없도록 했다.

그리고 각각 실행되는 데이터 초기화 요청은 비동기적으로 실행되므로 각 변수들이 전부 초기화된 이후에 API를 호출하는 로직을 실행하도록 했는데, 위 부분이 중복된 코드가 많이 발생하나 어떻게 해결해야 할 지를 우선 고민중에 있다.

위와 같이 구현함으로서 대략적인 MVVM 구현은 끝났다고 볼 수 있다.

데이터를 불러오는 역할은 오로지 ViewModel에서 담당하고,

액티비티는 업데이트된 데이터를 UI에 뿌려주기만 하면 되므로 각 클래스가 담당해야 할 역할은 분명해졌고 유지보수는 편리해졌다.

MVVM을 적용하는 것에 조금이나마 도움이 됐기 바란다.

참조

https://blog.yena.io/studynote/2019/03/27/Android-MVVM-AAC-2.html

MVVM 적용기(1)

CoBool — Sat, 2 Apr 2022 21:24:22 +0900

내가 기존 회사에서 처음으로 시도해봤던 아키텍처 패턴은 MVP 패턴으로,

데이터 소스에 대한 접근은 Model이 담당하고,

사용자에게 데이터를 보여주는 부분(Activity,Fragment)는 View가 담당하며,

두 사이를 Presenter가 매개하는 형식의 패턴이라고 할 수 있다.

위 패턴을 직접 업무에서 적용하려고 했을 때 발생한 문제는 다음과 같았다.

일반적으로 View와 Presenter를 정의한 인터페이스인 Contract 등을 따로 정의해야 했고, 매번 두 아키텍처 컴포넌트를 변경해야 할 일이 생길 때마다 해당 인터페이스를 무조건적으로 변경해야 하므로 일을 두 번하게 되었다.
View에는 데이터를 표시하는 일만 담당시키고, 복잡한 로직은 Presenter에게 위임시켜야 이상적인 MVP 패턴이라고 할 수 있으나, 로직을 분리시키는 과정에서 안드로이드 프레임워크에 의존적인 로직을 Presenter로 분리시키기가 어려워, 사실상 Presenter가 View와 책임 분담이 제대로 되지 않았다.
Presenter가 둘 사이에서 많은 일들을 해야하기 때문에, 많은 책임을 안게 되어 클래스가 지나치게 비대해져갔다.

특히나 많은 어려움을 느낀 것이 View와 Presenter 로직의 분리였다.

특정 로직은 액티비티의 Context가 필요한 경우가 많거나 Intent를 이용해야 해서, 사실상 특정한 같은 기능을 실행하지만 View와 Presenter가 그 기능을 구현하기 위해 로직을 분담해야만 했다.

이후 눈길이 갔던 것이 MVVM이었다.

내게는 생소했지만 최근의 구직 시장에서도 MVVM을 구현할 줄 아는 인재의 수요가 많은 것 같았고,

무엇보다도 구글에서도 공식적으로 MVVM을 구현하기 위한 AAC와 Jetpack 컴포넌트들을 내놓으면서, 진입장벽도 많이 낮아졌다는 느낌이다.

MVVM 패턴의 흐름을 표현하고 있는 그림이다.

위 그림으로 표현된 MVVM 패턴을 간략하게 설명해보면 다음과 같다.

View는 MVP 패턴에서와 마찬가지로 데이터를 불러와 사용자에게 표시해주는 역할을 하고, 사용자로부터 동작이 들어오면 ViewModel에 데이터 변경을 요청한다.
ViewModel은 View에서 들어온 요청을 받아 데이터를 저장하고 있는 Model에 다시 요청한다
요청을 받은 Model은 데이터를 가공하여 ViewModel로 다시 전달하고,
ViewModel은 데이터를 받아 저장한다.
View는 ViewModel의 데이터를 관찰하는 Observer를 가지고 있어, 변경된 데이터가 있으면 바로 사용자에게 보여준다.

View는 ViewModel 객체로 가져 데이터를 요청하고,

ViewModel은 데이터를 요청하고 저장하기만 하면

그걸 바라보고 있는 View는 그대로 데이터를 뿌려주기만 하면 된다고 보면 되겠다.

이것을 구현하기 위해 구글은 AAC(Android Architecture Component)라는 것을 제공한다.

AAC는 각 안드로이드 컴포넌트의 생명주기를 고려하여 만들어졌다.

위에서 보이는 Repository가 Model의 역할을 한다고 보면 되겠다.

Model이 데이터에 접근하여 제공하는 역할을 하는데,

일반적으로 DB는 외부 서버에 접근하는 경우가 많으므로

내부 데이터는 Room에 저장하고, 외부 데이터는 Retrofit 등의 API 통신 프레임워크등을 이용한다.

그리고 이 두 접근을 Repository가 책임 진다고 보면 되겠다.

다음 편에는 이 구조를 실제 코드로 구현하는 과정에 대해 포스팅해보도록 하겠다.

필자는 MVVM을 처음 적용해보므로,

과정에 부족함이 있다고 하더라도 양해 바란다.

참조

https://velog.io/@hwi_chance/Android-안드로이드-AAC

https://beomy.tistory.com/43

[Android]Firebase로 채팅 앱 만들기(6)

CoBool — Thu, 31 Mar 2022 15:03:20 +0900

이번엔 각 채팅방을 선택했을 때 이동할 채팅방 화면을 만들어보자.

우선 채팅방에 필요한 UI와, 메시지의 배경 레이아웃을 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:id="@+id/txt_TItle"
        style="@style/boldBlack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="홍길동"
        android:textSize="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/imgbtn_quit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="@+id/txt_TItle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt_TItle"
        app:srcCompat="@drawable/btn_quit" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:text="오늘"
        app:layout_constraintEnd_toStartOf="@+id/divider_right"
        app:layout_constraintStart_toEndOf="@+id/divider_left"
        app:layout_constraintTop_toBottomOf="@+id/txt_TItle" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/divider_left"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="#B6B6B6"
        app:layout_constraintBottom_toBottomOf="@+id/textView2"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView2">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/divider_right"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:background="#B6B6B6"
        app:layout_constraintBottom_toBottomOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView2">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <EditText
        android:id="@+id/edt_message"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        android:hint="메시지 입력"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:textColor="@color/black"
        android:textSize="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_submit"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/divider_bottom"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="#B6B6B6"
        app:layout_constraintBottom_toTopOf="@+id/edt_message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/btn_submit"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="전송"
        android:textColor="@color/black"
        app:backgroundTint="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/edt_message" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_messages"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toTopOf="@+id/edt_message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        tools:listitem="@layout/list_talk_item_mine" />
</androidx.constraintlayout.widget.ConstraintLayout>

위는 화면에 필요한 레이아웃에 사용되는 XML이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp">

    <TextView
        android:id="@+id/txt_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="web"
        android:background="@drawable/background_talk_mine"
        android:gravity="start|center_vertical"
        android:linksClickable="true"
        android:padding="10dp"
        android:text="안녕하세요."
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:text="오전 10:23"
        android:textSize="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/txt_message"
        app:layout_constraintEnd_toStartOf="@+id/txt_message"
        app:layout_constraintTop_toTopOf="@+id/txt_message"
        app:layout_constraintVertical_bias="0.8" />

    <TextView
        android:id="@+id/txt_isShown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:text="1"
        android:textColor="#FFBE3C"
        app:layout_constraintBottom_toBottomOf="@+id/txt_date"
        app:layout_constraintEnd_toStartOf="@+id/txt_date"
        app:layout_constraintTop_toTopOf="@+id/txt_date" />
</androidx.constraintlayout.widget.ConstraintLayout>

채팅에 사용되는 메시지의 레이아웃이다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#6365FF"/>
    <corners android:radius="15dp"/>
</shape>

background의 배경은 drawable에 corner를 설정하여 둥근 테두리 배경을 생성했다.

나/상대방 구분은 같은 배경에 색상을 변경하여 구분하도록 했다.

@RequiresApi(Build.VERSION_CODES.O)
class ChatRoomActivity : AppCompatActivity() {
    lateinit var binding: ActivityChatroomBinding
    lateinit var btn_exit: ImageButton
    lateinit var btn_submit: Button
    lateinit var txt_title: TextView
    lateinit var edt_message: EditText
    lateinit var firebaseDatabase: DatabaseReference
    lateinit var recycler_talks: RecyclerView
    lateinit var chatRoom: ChatRoom
    lateinit var opponentUser: User
    lateinit var chatRoomKey: String
    lateinit var myUid: String

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityChatroomBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initializeProperty()
        initializeView()
        initializeListener()
        setupChatRooms()
    }

    fun initializeProperty() {  //변수 초기화
        myUid = FirebaseAuth.getInstance().currentUser?.uid!!              //현재 로그인한 유저 id
        firebaseDatabase = FirebaseDatabase.getInstance().reference!!

        chatRoom = (intent.getSerializableExtra("ChatRoom")) as ChatRoom      //채팅방 정보
        chatRoomKey = intent.getStringExtra("ChatRoomKey")!!            //채팅방 키
        opponentUser = (intent.getSerializableExtra("Opponent")) as User    //상대방 유저 정보
    }

    fun initializeView() {    //뷰 초기화
        btn_exit = binding.imgbtnQuit
        edt_message = binding.edtMessage
        recycler_talks = binding.recyclerMessages
        btn_submit = binding.btnSubmit
        txt_title = binding.txtTItle
        txt_title.text = opponentUser!!.name ?: ""
    }

    fun initializeListener() {   //버튼 클릭 시 리스너 초기화
        btn_exit.setOnClickListener()
        {
            startActivity(Intent(this@ChatRoomActivity, MainActivity::class.java))
        }
        btn_submit.setOnClickListener()
        {
            putMessage()
        }
    }

    fun setupChatRooms() {              //채팅방 목록 초기화 및 표시
        if (chatRoomKey.isNullOrBlank())
            setupChatRoomKey()
        else
            setupRecycler()
    }

    fun setupChatRoomKey() {            //chatRoomKey 없을 경우 초기화 후 목록 초기화
        FirebaseDatabase.getInstance().getReference("ChatRoom")
            .child("chatRooms").orderByChild("users/${opponentUser.uid}").equalTo(true)    //상대방의 Uid가 포함된 목록이 있는지 확인
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    for (data in snapshot.children) {
                        chatRoomKey = data.key!!          //chatRoomKey 초기화
                        setupRecycler()                  //목록 업데이트
                        break
                    }
                }
            })
    }

    fun putMessage() {       //메시지 전송
        try {
            var message = Message(myUid, getDateTimeString(), edt_message.text.toString())    //메시지 정보 초기화
            Log.i("ChatRoomKey", chatRoomKey)
            FirebaseDatabase.getInstance().getReference("ChatRoom").child("chatRooms")
                .child(chatRoomKey).child("messages")                   //현재 채팅방에 메시지 추가
                .push().setValue(message).addOnSuccessListener {
                    Log.i("putMessage", "메시지 전송에 성공하였습니다.")
                    edt_message.text.clear()
                }.addOnCanceledListener {
                    Log.i("putMessage", "메시지 전송에 실패하였습니다")
                }
        } catch (e: Exception) {
            e.printStackTrace()
            Log.i("putMessage", "메시지 전송 중 오류가 발생하였습니다.")
        }
    }

    fun getDateTimeString(): String {          //메시지 보낸 시각 정보 반환
        try {
            var localDateTime = LocalDateTime.now()
            localDateTime.atZone(TimeZone.getDefault().toZoneId())
            var dateTimeFormatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss")
            return localDateTime.format(dateTimeFormatter).toString()
        } catch (e: Exception) {
            e.printStackTrace()
            throw Exception("getTimeError")
        }
    }

    fun setupRecycler() {            //목록 초기화 및 업데이트
        recycler_talks.layoutManager = LinearLayoutManager(this)
        recycler_talks.adapter = RecyclerMessagesAdapter(this, chatRoomKey, opponentUser.uid)
    }
}

위 레이아웃을 표시해줄 액티비티의 전체 코드이다.

처음에 뷰들을 초기화 해준 뒤에 채팅방의 메시지 목록을 불러와 셋 업해준 후,

X 버튼을 누를 시와 전송 버튼을 누를 시 메시지 전송을 실행할 리스너를 등록해준다.

fun setupChatRoomKey() {            //chatRoomKey 없을 경우 초기화 후 목록 초기화
        FirebaseDatabase.getInstance().getReference("ChatRoom")
            .child("chatRooms").orderByChild("users/${opponentUser.uid}").equalTo(true)    //상대방의 Uid가 포함된 목록이 있는지 확인
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    for (data in snapshot.children) {
                        chatRoomKey = data.key!!          //chatRoomKey 초기화
                        setupRecycler()                  //목록 업데이트
                        break
                    }
                }
            })
    }

fun setupRecycler() {            //목록 초기화 및 업데이트
        recycler_talks.layoutManager = LinearLayoutManager(this)
        recycler_talks.adapter = RecyclerMessagesAdapter(this, chatRoomKey, opponentUser.uid)
    }

상대방의 Uid를 포함하는 채팅방을 찾아서 chatRoomKey를 얻고, 그걸 토대로 해당 채팅방의 정보들을 가져온다.

그 후, 목록을 표시할 리사이클러뷰에 chatRoomKey와 상대방 유저의 uid를 함께 넘겨서 초기화해준다.

fun putMessage() {       //메시지 전송
        try {
            var message = Message(myUid, getDateTimeString(), edt_message.text.toString())    //메시지 정보 초기화
            Log.i("ChatRoomKey", chatRoomKey)
            FirebaseDatabase.getInstance().getReference("ChatRoom").child("chatRooms")
                .child(chatRoomKey).child("messages")                   //현재 채팅방에 메시지 추가
                .push().setValue(message).addOnSuccessListener {
                    Log.i("putMessage", "메시지 전송에 성공하였습니다.")
                    edt_message.text.clear()
                }.addOnCanceledListener {
                    Log.i("putMessage", "메시지 전송에 실패하였습니다")
                }
        } catch (e: Exception) {
            e.printStackTrace()
            Log.i("putMessage", "메시지 전송 중 오류가 발생하였습니다.")
        }
    }

    fun getDateTimeString(): String {          //메시지 보낸 시각 정보 반환
        try {
            var localDateTime = LocalDateTime.now()
            localDateTime.atZone(TimeZone.getDefault().toZoneId())
            var dateTimeFormatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss")
            return localDateTime.format(dateTimeFormatter).toString()
        } catch (e: Exception) {
            e.printStackTrace()
            throw Exception("getTimeError")
        }
    }

메시지 전송 시 실행될 코드다.

getDateTimeString으로 메시지를 보내는 현재 시각을 구하고,입력란의 텍스트를 Message 객체에 넣어 채팅방 데이터의 messages 노드에 저장한 뒤 입력란을 비운다.

이제 채팅방에서 사용되는 버튼에 대한 처리들은 구현되었으니,

채팅방에서 주고받은 메시지를 표시하여야 한다.

위 형태도 마찬가지로 리사이클러뷰로 구현하였다.

그러나 상대방과 나의 메시지는 다른 레이아웃으로 구분되어야 하므로,

하나의 리사이클러뷰에 두 개의 ViewHolder를 써야만 했다.

class RecyclerMessagesAdapter(
    val context: Context,
    var chatRoomKey: String?,
    val opponentUid: String?
) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    var messages: ArrayList<Message> = arrayListOf()     //메시지 목록
    var messageKeys: ArrayList<String> = arrayListOf()   //메시지 키 목록
    val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()
    val recyclerView = (context as ChatRoomActivity).recycler_talks   //목록이 표시될 리사이클러 뷰

    init {
        setupMessages()
    }

    fun setupMessages() {
        getMessages()
    }

    fun getMessages() {
        FirebaseDatabase.getInstance().getReference("ChatRoom")
            .child("chatRooms").child(chatRoomKey!!).child("messages")   //전체 메시지 목록 가져오기
            .addValueEventListener(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    messages.clear()
                    for (data in snapshot.children) {
                        messages.add(data.getValue<Message>()!!)         //메시지 목록에 추가
                        messageKeys.add(data.key!!)                        //메시지 키 목록에 추가
                    }
                    notifyDataSetChanged()          //화면 업데이트
                    recyclerView.scrollToPosition(messages.size - 1)    //스크롤 최 하단으로 내리기
                }
            })
    }

    override fun getItemViewType(position: Int): Int {               //메시지의 id에 따라 내 메시지/상대 메시지 구분
        return if (messages[position].senderUid.equals(myUid)) 1 else 0
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            1 -> {            //메시지가 내 메시지인 경우
                val view =
                    LayoutInflater.from(context)
                        .inflate(R.layout.list_talk_item_mine, parent, false)   //내 메시지 레이아웃으로 초기화

                MyMessageViewHolder(ListTalkItemMineBinding.bind(view))
            }
            else -> {      //메시지가 상대 메시지인 경우
                val view =
                    LayoutInflater.from(context)
                        .inflate(R.layout.list_talk_item_others, parent, false)  //상대 메시지 레이아웃으로 초기화
                OtherMessageViewHolder(ListTalkItemOthersBinding.bind(view))
            }
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (messages[position].senderUid.equals(myUid)) {       //레이아웃 항목 초기화
            (holder as MyMessageViewHolder).bind(position)
        } else {
            (holder as OtherMessageViewHolder).bind(position)
        }
    }

    override fun getItemCount(): Int {
        return messages.size
    }

    inner class OtherMessageViewHolder(itemView: ListTalkItemOthersBinding) :         //상대 메시지 뷰홀더
        RecyclerView.ViewHolder(itemView.root) {
        var background = itemView.background
        var txtMessage = itemView.txtMessage
        var txtDate = itemView.txtDate
        var txtIsShown = itemView.txtIsShown

        fun bind(position: Int) {           //메시지 UI 항목 초기화
            var message = messages[position]
            var sendDate = message.sended_date

            txtMessage.text = message.content

            txtDate.text = getDateText(sendDate)

            if (message.confirmed.equals(true))           //확인 여부 표시
                txtIsShown.visibility = View.GONE
            else
                txtIsShown.visibility = View.VISIBLE

            setShown(position)             //해당 메시지 확인하여 서버로 전송
        }

        fun getDateText(sendDate: String): String {    //메시지 전송 시각 생성

            var dateText = ""
            var timeString = ""
            if (sendDate.isNotBlank()) {
                timeString = sendDate.substring(8, 12)
                var hour = timeString.substring(0, 2)
                var minute = timeString.substring(2, 4)

                var timeformat = "%02d:%02d"

                if (hour.toInt() > 11) {
                    dateText += "오후 "
                    dateText += timeformat.format(hour.toInt() - 12, minute.toInt())
                } else {
                    dateText += "오전 "
                    dateText += timeformat.format(hour.toInt(), minute.toInt())
                }
            }
            return dateText
        }

        fun setShown(position: Int) {          //메시지 확인하여 서버로 전송
            FirebaseDatabase.getInstance().getReference("ChatRoom")
                .child("chatRooms").child(chatRoomKey!!).child("messages")
                .child(messageKeys[position]).child("confirmed").setValue(true)
                .addOnSuccessListener {
                    Log.i("checkShown", "성공")
                }
        }
    }

    inner class MyMessageViewHolder(itemView: ListTalkItemMineBinding) :       // 내 메시지용 ViewHolder
        RecyclerView.ViewHolder(itemView.root) {
        var background = itemView.background
        var txtMessage = itemView.txtMessage
        var txtDate = itemView.txtDate
        var txtIsShown = itemView.txtIsShown

        fun bind(position: Int) {            //메시지 UI 레이아웃 초기화
            var message = messages[position]
            var sendDate = message.sended_date
            txtMessage.text = message.content

            txtDate.text = getDateText(sendDate)

            if (message.confirmed.equals(true))
                txtIsShown.visibility = View.GONE
            else
                txtIsShown.visibility = View.VISIBLE
        }

        fun getDateText(sendDate: String): String {        //메시지 전송 시각 생성
            var dateText = ""
            var timeString = ""
            if (sendDate.isNotBlank()) {
                timeString = sendDate.substring(8, 12)
                var hour = timeString.substring(0, 2)
                var minute = timeString.substring(2, 4)

                var timeformat = "%02d:%02d"

                if (hour.toInt() > 11) {
                    dateText += "오후 "
                    dateText += timeformat.format(hour.toInt() - 12, minute.toInt())
                } else {
                    dateText += "오전 "
                    dateText += timeformat.format(hour.toInt(), minute.toInt())
                }
            }
            return dateText
        }
    }

}

메시지를 표시하는 어댑터의 전체 코드이다.

class RecyclerMessagesAdapter(
    val context: Context,
    var chatRoomKey: String?,
    val opponentUid: String?
) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    var messages: ArrayList<Message> = arrayListOf()     //메시지 목록
    var messageKeys: ArrayList<String> = arrayListOf()   //메시지 키 목록
    val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()
    val recyclerView = (context as ChatRoomActivity).recycler_talks   //목록이 표시될 리사이클러 뷰

    init {
        setupMessages()
    }

    fun setupMessages() {
        getMessages()
    }

    fun getMessages() {
        FirebaseDatabase.getInstance().getReference("ChatRoom")
            .child("chatRooms").child(chatRoomKey!!).child("messages")   //전체 메시지 목록 가져오기
            .addValueEventListener(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    messages.clear()
                    for (data in snapshot.children) {
                        messages.add(data.getValue<Message>()!!)         //메시지 목록에 추가
                        messageKeys.add(data.key!!)                        //메시지 키 목록에 추가
                    }
                    notifyDataSetChanged()          //화면 업데이트
                    recyclerView.scrollToPosition(messages.size - 1)    //스크롤 최 하단으로 내리기
                }
            })
    }

생성자로부터 건네받은 채팅방의 키와 상대방의 Uid로 채팅방의 메시지 목록을 불러와 각 항목과 항목의 키들을 리스트에 추가한다.

그리고 메시지가 추가될 때마다 화면을 업데이트 한 뒤 스크롤을 맨 아래로 당기도록 한다.(초기화 될 때마다 위로 올라가므로)

inner class OtherMessageViewHolder(itemView: ListTalkItemOthersBinding) :         //상대 메시지 뷰홀더
        RecyclerView.ViewHolder(itemView.root) {
        var background = itemView.background
        var txtMessage = itemView.txtMessage
        var txtDate = itemView.txtDate
        var txtIsShown = itemView.txtIsShown

        fun bind(position: Int) {           //메시지 UI 항목 초기화
            var message = messages[position]
            var sendDate = message.sended_date

            txtMessage.text = message.content

            txtDate.text = getDateText(sendDate)

            if (message.confirmed.equals(true))           //확인 여부 표시
                txtIsShown.visibility = View.GONE
            else
                txtIsShown.visibility = View.VISIBLE

            setShown(position)             //해당 메시지 확인하여 서버로 전송
        }

        fun getDateText(sendDate: String): String {    //메시지 전송 시각 생성

            var dateText = ""
            var timeString = ""
            if (sendDate.isNotBlank()) {
                timeString = sendDate.substring(8, 12)
                var hour = timeString.substring(0, 2)
                var minute = timeString.substring(2, 4)

                var timeformat = "%02d:%02d"

                if (hour.toInt() > 11) {
                    dateText += "오후 "
                    dateText += timeformat.format(hour.toInt() - 12, minute.toInt())
                } else {
                    dateText += "오전 "
                    dateText += timeformat.format(hour.toInt(), minute.toInt())
                }
            }
            return dateText
        }

        fun setShown(position: Int) {          //메시지 확인하여 서버로 전송
            FirebaseDatabase.getInstance().getReference("ChatRoom")
                .child("chatRooms").child(chatRoomKey!!).child("messages")
                .child(messageKeys[position]).child("confirmed").setValue(true)
                .addOnSuccessListener {
                    Log.i("checkShown", "성공")
                }
        }
    }

    inner class MyMessageViewHolder(itemView: ListTalkItemMineBinding) :       // 내 메시지용 ViewHolder
        RecyclerView.ViewHolder(itemView.root) {
        var background = itemView.background
        var txtMessage = itemView.txtMessage
        var txtDate = itemView.txtDate
        var txtIsShown = itemView.txtIsShown

        fun bind(position: Int) {            //메시지 UI 레이아웃 초기화
            var message = messages[position]
            var sendDate = message.sended_date
            txtMessage.text = message.content

            txtDate.text = getDateText(sendDate)

            if (message.confirmed.equals(true))
                txtIsShown.visibility = View.GONE
            else
                txtIsShown.visibility = View.VISIBLE
        }

        fun getDateText(sendDate: String): String {        //메시지 전송 시각 생성
            var dateText = ""
            var timeString = ""
            if (sendDate.isNotBlank()) {
                timeString = sendDate.substring(8, 12)
                var hour = timeString.substring(0, 2)
                var minute = timeString.substring(2, 4)

                var timeformat = "%02d:%02d"

                if (hour.toInt() > 11) {
                    dateText += "오후 "
                    dateText += timeformat.format(hour.toInt() - 12, minute.toInt())
                } else {
                    dateText += "오전 "
                    dateText += timeformat.format(hour.toInt(), minute.toInt())
                }
            }
            return dateText
        }
    }

}

그리고 상대방 메시지와 내 메시지를 구분할 ViewHolder를 따로 정의해준다.

override fun getItemViewType(position: Int): Int {               //메시지의 id에 따라 내 메시지/상대 메시지 구분
        return if (messages[position].senderUid.equals(myUid)) 1 else 0
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            1 -> {            //메시지가 내 메시지인 경우
                val view =
                    LayoutInflater.from(context)
                        .inflate(R.layout.list_talk_item_mine, parent, false)   //내 메시지 레이아웃으로 초기화

                MyMessageViewHolder(ListTalkItemMineBinding.bind(view))
            }
            else -> {      //메시지가 상대 메시지인 경우
                val view =
                    LayoutInflater.from(context)
                        .inflate(R.layout.list_talk_item_others, parent, false)  //상대 메시지 레이아웃으로 초기화
                OtherMessageViewHolder(ListTalkItemOthersBinding.bind(view))
            }
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (messages[position].senderUid.equals(myUid)) {       //레이아웃 항목 초기화
            (holder as MyMessageViewHolder).bind(position)
        } else {
            (holder as OtherMessageViewHolder).bind(position)
        }
    }

현재 포지션의 메시지의 송신자 id와 현재 로그인한 유저의 id를 비교하여,

일치하면 1,아니면 0으로 viewType을 반환하도록 하면,OnCreateViewHolder에서 받아

1이면 내 메시지를 표시하는 ViewHolder,0이면 상대 메시지를 표시하는 ViewHolder로 바인딩 한다.

 fun bind(position: Int) {           //메시지 UI 항목 초기화
            var message = messages[position]
            var sendDate = message.sended_date

            txtMessage.text = message.content

            txtDate.text = getDateText(sendDate)

            if (message.confirmed.equals(true))           //확인 여부 표시
                txtIsShown.visibility = View.GONE
            else
                txtIsShown.visibility = View.VISIBLE

            setShown(position)             //해당 메시지 확인하여 서버로 전송
        }

        fun getDateText(sendDate: String): String {    //메시지 전송 시각 생성

            var dateText = ""
            var timeString = ""
            if (sendDate.isNotBlank()) {
                timeString = sendDate.substring(8, 12)
                var hour = timeString.substring(0, 2)
                var minute = timeString.substring(2, 4)

                var timeformat = "%02d:%02d"

                if (hour.toInt() > 11) {
                    dateText += "오후 "
                    dateText += timeformat.format(hour.toInt() - 12, minute.toInt())
                } else {
                    dateText += "오전 "
                    dateText += timeformat.format(hour.toInt(), minute.toInt())
                }
            }
            return dateText
        }

        fun setShown(position: Int) {          //메시지 확인하여 서버로 전송
            FirebaseDatabase.getInstance().getReference("ChatRoom")
                .child("chatRooms").child(chatRoomKey!!).child("messages")
                .child(messageKeys[position]).child("confirmed").setValue(true)
                .addOnSuccessListener {
                    Log.i("checkShown", "성공")
                }
        }

그리고 각 viewHolder에는 위와 같은 함수가 정의되어 있다.

뷰의 항목들을 초기화 하고, 메시지 옆에 표시될 시각을 계산하여 텍스트를 초기화한다.

그리고 메시지가 초기화되는 순간 상대방의 메시지를 확인했다는 것이므로,

서버에 상대 메시지를 읽음 처리하도록 했다.

정상적으로 작동되는 모습이다.

참조

https://m.blog.naver.com/zoown13/222094002924 https://cionman.tistory.com/72 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=traeumen927&logNo=221493556497 https://lasbe.tistory.com/19

우선 채팅방에 필요한 UI와, 메시지의 배경 레이아웃을 만들어준다.

위는 화면에 필요한 레이아웃에 사용되는 XML이다.

[Android]Firebase로 채팅 앱 만들기(5)

CoBool — Thu, 31 Mar 2022 14:58:52 +0900

이번에는 새로 채팅할 상대를 추가할 수 있는 검색창을 만들어보도록 하겠다.

class AddChatRoomActivity : AppCompatActivity() {
    lateinit var binding:ActivityAddChatroomBinding
    lateinit var btn_exit: ImageButton
    lateinit var edt_opponent:EditText
    lateinit var firebaseDatabase:DatabaseReference
    lateinit var recycler_people:RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityAddChatroomBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initializeView()
        initializeListener()
        setupRecycler()
    }

    fun initializeView()   //뷰 초기화
    {
        firebaseDatabase = FirebaseDatabase.getInstance().reference!!
        btn_exit = binding.imgbtnBack
        edt_opponent = binding.edtOpponentName
        recycler_people = binding.recyclerPeoples
    }
    fun initializeListener()   //버튼 클릭 시 리스너 초기화
    {
        btn_exit.setOnClickListener()
        {
            startActivity(Intent(this@AddChatRoomActivity, MainActivity::class.java))
        }

        edt_opponent.addTextChangedListener(object :TextWatcher                  //검색 창에 입력된 글자가 변경될 때마다 검색 내용 업데이트
        {
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            }

            override fun afterTextChanged(s: Editable?) {
                var adapter = recycler_people?.adapter as RecyclerUsersAdapter
                adapter.searchItem(s.toString())                  //입력된 검색어로 검색 진행 및 업데이트
            }
        })
    }
    fun setupRecycler()   //사용자 목록 초기화 및 업데이트
    {
       recycler_people.layoutManager = LinearLayoutManager(this)
        recycler_people.adapter = RecyclerUsersAdapter(this)
    }
}

새롭게 대화를 시작할 친구를 검색할 액티비티의 전체 코드이다.

해당 화면에 필요한 뷰들을 초기화한 후,

edt_opponent.addTextChangedListener(object :TextWatcher                  //검색 창에 입력된 글자가 변경될 때마다 검색 내용 업데이트
        {
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            }

            override fun afterTextChanged(s: Editable?) {
                var adapter = recycler_people?.adapter as RecyclerUsersAdapter
                adapter.searchItem(s.toString())                  //입력된 검색어로 검색 진행 및 업데이트
            }
        })

검색어 입력란에 단어와 일치하는 사용자를 바로 검색하게 하기 위해 리스너를 추가하였다.

다음으로 각 사용자들의 목록을 불러올 Recycler를 만들어야 한다.

class RecyclerUsersAdapter(val context: Context) :
    RecyclerView.Adapter<RecyclerUsersAdapter.ViewHolder>() {
    var users: ArrayList<User> =arrayListOf()        //검색어로 일치한 사용자 목록
    val allUsers: ArrayList<User> =arrayListOf()    //전체 사용자 목록
    lateinit var currnentUser: User

    init {
        setupAllUserList()
    }

    fun setupAllUserList() {        //전체 사용자 목록 불러오기
        val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()        //현재 사용자 아이디
        FirebaseDatabase.getInstance().getReference("User").child("users")   //사용자 데이터 요청
            .addValueEventListener(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {
                }

                override fun onDataChange(snapshot: DataSnapshot) {
                    users.clear()
                    for (data in snapshot.children) {
                        val item = data.getValue<User>()
                        if (item?.uid.equals(myUid)) {
                            currnentUser = item!!             //전체 사용자 목록에서 현재 사용자는 제외
                            continue
                        }
                        allUsers.add(item!!)              //전체 사용자 목록에 추가
                    }
                    users = allUsers.clone() as ArrayList<User>
                    notifyDataSetChanged()              //화면 업데이트
                }
            })
    }

    fun searchItem(target: String) {            //검색
        if (target.equals("")) {      //검색어 없는 경우 전체 목록 표시
            users = allUsers.clone() as ArrayList<User>
        } else {
            var matchedList = allUsers.filter{ it.name!!.contains(target)}//검색어 포함된 항목 불러오기
            users.clear()
            matchedList.forEach{users.add(it)}
}
        notifyDataSetChanged()          //화면 업데이트
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.list_person_item, parent, false)
        return ViewHolder(ListPersonItemBinding.bind(view))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.txt_name.text= users[position].name
        holder.txt_email.text= users[position].email

        holder.background.setOnClickListener()
{
addChatRoom(position)        //해당 사용자 선택 시
}
}

    fun addChatRoom(position: Int) {     //채팅방 추가
        val opponent = users[position]   //채팅할 상대방 정보
        var database = FirebaseDatabase.getInstance().getReference("ChatRoom")    //넣을 database reference 세팅
        var chatRoom = ChatRoom(         //추가할 채팅방 정보 세팅
mapOf(currnentUser.uid!!totrue, opponent.uid!!totrue),
            null
        )
        var myUid = FirebaseAuth.getInstance().uid//내 Uid
        database.child("chatRooms")
            .orderByChild("users/${opponent.uid}").equalTo(true)       //상대방 Uid가 포함된 채팅방이 있는 지 확인
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    if (snapshot.value== null) {              //채팅방이 없는 경우
                        database.child("chatRooms").push().setValue(chatRoom).addOnSuccessListener{// 채팅방 새로 생성 후 이동
                            goToChatRoom(chatRoom, opponent)
}
} else {
                        context.startActivity(Intent(context, MainActivity::class.java))
                        goToChatRoom(chatRoom, opponent)                    //해당 채팅방으로 이동
                    }

                }
            })
    }

    fun goToChatRoom(chatRoom: ChatRoom, opponentUid: User) {       //채팅방으로 이동
        var intent = Intent(context, ChatRoomActivity::class.java)
        intent.putExtra("ChatRoom", chatRoom)       //채팅방 정보
        intent.putExtra("Opponent", opponentUid)    //상대방 정보
        intent.putExtra("ChatRoomKey", "")   //채팅방 키
        context.startActivity(intent)
        (context as AppCompatActivity).finish()
    }

    override fun getItemCount(): Int {
        return users.size
    }

    inner class ViewHolder(itemView: ListPersonItemBinding) :
        RecyclerView.ViewHolder(itemView.root) {
        var background = itemView.background
        var txt_name = itemView.txtName
        var txt_email = itemView.txtEmail
    }

}

사용자 목록을 불러오는 Recycler의 전체 코드다.

 fun setupAllUserList() {        //전체 사용자 목록 불러오기
        val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()        //현재 사용자 아이디
        FirebaseDatabase.getInstance().getReference("User").child("users")   //사용자 데이터 요청
            .addValueEventListener(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {
                }

                override fun onDataChange(snapshot: DataSnapshot) {
                    users.clear()
                    for (data in snapshot.children) {
                        val item = data.getValue<User>()
                        if (item?.uid.equals(myUid)) {
                            currnentUser = item!!             //전체 사용자 목록에서 현재 사용자는 제외
                            continue
                        }
                        allUsers.add(item!!)              //전체 사용자 목록에 추가
                    }
                    users = allUsers.clone() as ArrayList<User>
                    notifyDataSetChanged()              //화면 업데이트
                }
            })
    }

사용자들의 정보가 포함된 데이터베이스인 User 데이터베이스에 접근하여 목록을 가져와 저장한 뒤,

현재 사용자의 uid와 비교하여 자신은 제외한다.

 fun searchItem(target: String) {            //검색
        if (target.equals("")) {      //검색어 없는 경우 전체 목록 표시
            users = allUsers.clone() as ArrayList<User>
        } else {
            var matchedList = allUsers.filter{ it.name!!.contains(target)}//검색어 포함된 항목 불러오기
            users.clear()
            matchedList.forEach{users.add(it)}
}
        notifyDataSetChanged()          //화면 업데이트
    }

사용자가 입력란에 검색어를 넣는 경우 위 코드를 실행하여 불러온 전체 목록에서 검색어를 포함하는 목록만 남겨 리스트를 업데이트 한다.

 override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.txt_name.text= users[position].name
        holder.txt_email.text= users[position].email

        holder.background.setOnClickListener()
{
addChatRoom(position)        //해당 사용자 선택 시
}
}

    fun addChatRoom(position: Int) {     //채팅방 추가
        val opponent = users[position]   //채팅할 상대방 정보
        var database = FirebaseDatabase.getInstance().getReference("ChatRoom")    //넣을 database reference 세팅
        var chatRoom = ChatRoom(         //추가할 채팅방 정보 세팅
mapOf(currnentUser.uid!!totrue, opponent.uid!!totrue),
            null
        )
        var myUid = FirebaseAuth.getInstance().uid//내 Uid
        database.child("chatRooms")
            .orderByChild("users/${opponent.uid}").equalTo(true)       //상대방 Uid가 포함된 채팅방이 있는 지 확인
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    if (snapshot.value== null) {              //채팅방이 없는 경우
                        database.child("chatRooms").push().setValue(chatRoom).addOnSuccessListener{// 채팅방 새로 생성 후 이동
                            goToChatRoom(chatRoom, opponent)
}
} else {
                        context.startActivity(Intent(context, MainActivity::class.java))
                        goToChatRoom(chatRoom, opponent)                    //해당 채팅방으로 이동
                    }

                }
            })
    }

항목을 선택 시 채팅방 목록 중에서 해당 사용자의 Uid가 포함된 채팅방을 찾아 해당 채팅방 화면으로 이동하고, 없으면 새로 데이터베이스에 채팅방을 삽입한다.

완성된 화면이다.

참조

[Android]Firebase로 채팅 앱 만들기(4)

CoBool — Thu, 31 Mar 2022 14:55:10 +0900

회원가입 페이지와 로그인 페이지도 만들어졌으니,

이제 진입할 홈 화면을 만들 차례다.

나는 카카오톡처럼 채팅방 목록과 함께 새 채팅방을 추가할 수 있는 버튼과 로그아웃 버튼을 표시했다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".main.MainActivity">

    <TextView
        android:id="@+id/txt_TItle"
        style="@style/boldBlack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="메시지"
        android:textSize="18dp"
        app:layout_constraintEnd_toStartOf="@+id/btn_new_message"
        app:layout_constraintStart_toEndOf="@+id/btn_signout"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_new_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:background="@android:color/transparent"
        android:text="새 메시지"
        android:textColor="#3F51B5"
        android:textSize="18dp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="@+id/txt_TItle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt_TItle" />

    <Button
        android:id="@+id/btn_signout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:text="로그아웃"
        android:textColor="#8D8D8E"
        android:textSize="18dp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="@+id/txt_TItle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt_TItle" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_chatrooms"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_TItle"
        tools:listitem="@layout/list_chatroom_item" />
</androidx.constraintlayout.widget.ConstraintLayout>

전체 레이아웃 코드는 위와 같다.

package com.miso.chatapplication.main

import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.database.*
import com.miso.chatapplication.LoginActivity
import com.miso.chatapplication.addChatRoom.AddChatRoomActivity
import com.miso.chatapplication.databinding.ActivityMainBinding
import com.miso.chatapplication.model.ChatRoom

@RequiresApi(Build.VERSION_CODES.O)
class MainActivity : AppCompatActivity() {
    lateinit var btnAddchatRoom: Button
    lateinit var btnSignout: Button
    lateinit var binding: ActivityMainBinding
    lateinit var firebaseDatabase: DatabaseReference
    lateinit var recycler_chatroom: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initializeView()
        initializeListener()
        setupRecycler()
    }

    fun initializeView() { //뷰 초기화
        try {
            firebaseDatabase = FirebaseDatabase.getInstance().getReference("ChatRoom")!!
            btnSignout = binding.btnSignout
            btnAddchatRoom = binding.btnNewMessage
            recycler_chatroom = binding.recyclerChatrooms
        }catch (e:Exception)
        {
            e.printStackTrace()
            Toast.makeText(this,"화면 초기화 중 오류가 발생하였습니다.",Toast.LENGTH_LONG).show()
        }
    }
    fun initializeListener()  //버튼 클릭 시 리스너 초기화
    {
        btnSignout.setOnClickListener()
        {
            signOut()
        }
        btnAddchatRoom.setOnClickListener()  //새 메시지 화면으로 이동
        {
            startActivity(Intent(this@MainActivity, AddChatRoomActivity::class.java))
            finish()
        }
    }

    fun setupRecycler() {
        recycler_chatroom.layoutManager = LinearLayoutManager(this)
        recycler_chatroom.adapter = RecyclerChatRoomsAdapter(this)
    }

    fun signOut()    //로그아웃 실행
    {
        try {
            val builder = AlertDialog.Builder(this)
                .setTitle("로그아웃")
                .setMessage("로그아웃 하시겠습니까?")
                .setPositiveButton("확인"
                ) { dialog, id ->
                    try {
                        FirebaseAuth.getInstance().signOut()             //로그아웃
                        startActivity(Intent(this@MainActivity, LoginActivity::class.java))
                        dialog.dismiss()
                        finish()
                    } catch (e: Exception) {
                        e.printStackTrace()
                        dialog.dismiss()
                        Toast.makeText(this, "로그아웃 중 오류가 발생하였습니다.", Toast.LENGTH_LONG).show()
                    }
                }
                .setNegativeButton("취소"          //다이얼로그 닫기
                ) { dialog, id ->
                    dialog.dismiss()
                }
            builder.show()
        }catch (e:Exception)
        {
            e.printStackTrace()
            Toast.makeText(this,"로그아웃 중 오류가 발생하였습니다.",Toast.LENGTH_LONG).show()
        }
    }

    override fun onBackPressed() {
        signOut()
    }
}

액티비티 전체 코드는 위와 같다.

fun signOut()    //로그아웃 실행
    {
        try {
            val builder = AlertDialog.Builder(this)
                .setTitle("로그아웃")
                .setMessage("로그아웃 하시겠습니까?")
                .setPositiveButton("확인"
                ) { dialog, id ->
                    try {
                        FirebaseAuth.getInstance().signOut()             //로그아웃
                        startActivity(Intent(this@MainActivity, LoginActivity::class.java))
                        dialog.dismiss()
                        finish()
                    } catch (e: Exception) {
                        e.printStackTrace()
                        dialog.dismiss()
                        Toast.makeText(this, "로그아웃 중 오류가 발생하였습니다.", Toast.LENGTH_LONG).show()
                    }
                }
                .setNegativeButton("취소"          //다이얼로그 닫기
                ) { dialog, id ->
                    dialog.dismiss()
                }
            builder.show()
        }catch (e:Exception)
        {
            e.printStackTrace()
            Toast.makeText(this,"로그아웃 중 오류가 발생하였습니다.",Toast.LENGTH_LONG).show()
        }
    }

    override fun onBackPressed() {
        signOut()
    }

로그아웃 버튼을 눌렀을 시 다이얼로그를 띄우도록 하고,

확인 버튼을 누를 시 로그아웃을 실행한 후 로그인 화면으로 이동하도록 했고,

하단의 백 버튼을 눌렀을 때에도 동일하게 동작되도록 했다.

채팅방을 불러와 목록으로 표시하는 로직은 별도의 RecyclerAdapter를 만들어 수행하기로 했다.

그 전에,각 채팅방에서 사용할 정보를 담을 채팅방 객체를 만들어야 한다.

package com.miso.chatapplication.model

import android.os.Parcelable
import java.io.Serializable

data class ChatRoom(
    val users: Map<String, Boolean>? = HashMap(),
    var messages: Map<String,Message>? = HashMap()
) : Serializable {
}

채팅방의 정보를 저장하는 ChatRoom 객체이다.

Firebase RealtimeDatabase는 JSON 형태로 데이터를 저장하기 떄문에,

Map형태로 데이터를 전달하는 것이 좋다.

나는 일전에 값을 List형태로 전달해보았으나 런타임 오류로 실패했기에,Map을 전달하는 것을 권장한다.

채팅방에 포함된 사용자는 users에 저장하고,

해당 채팅방에서 오간 메시지는 messages에 저장하기로 하였다.

package com.miso.chatapplication.model

import java.io.Serializable

data class Message(
    var senderUid: String = "",
    var sended_date: String = "",
    var content: String = "",
    var confirmed:Boolean=false
) : Serializable {
}

채팅방에서 오간 메시지를 저장하는 객체다.

차례대로 보낸 사람의 uid,

보낸 시각,

메시지의 내용,

상대방의 확인 여부를 저장한다.

그리고 각 data class는 인텐트로 전달될 필요가 있어

Serializable을 구현하도록 하였다.

@RequiresApi(Build.VERSION_CODES.O)
class RecyclerChatRoomsAdapter(val context: Context) :
    RecyclerView.Adapter<RecyclerChatRoomsAdapter.ViewHolder>() {
    var chatRooms: ArrayList<ChatRoom> = arrayListOf()   //채팅방 목록
    var chatRoomKeys: ArrayList<String> = arrayListOf()  //채팅방 키 목록
    val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()   //현재 사용자 Uid

    init {
        setupAllUserList()
    }

    fun setupAllUserList() {     //전체 채팅방 목록 초기화 및 업데이트
        FirebaseDatabase.getInstance().getReference("ChatRoom").child("chatRooms")
            .orderByChild("users/$myUid").equalTo(true)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    chatRooms.clear()
                    for (data in snapshot.children) {
                        chatRooms.add(data.getValue<ChatRoom>()!!)
                        chatRoomKeys.add(data.key!!)
                    }
                    notifyDataSetChanged()
                }
            })

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.list_chatroom_item, parent, false)
        return ViewHolder(ListChatroomItemBinding.bind(view))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        var userIdList = chatRooms[position].users!!.keys    //채팅방에 포함된 사용자 키 목록
        var opponent = userIdList.first { !it.equals(myUid) }  //상대방 사용자 키
        FirebaseDatabase.getInstance().getReference("User").child("users").orderByChild("uid")   //상대방 사용자 키를 포함하는 채팅방 불러오기
            .equalTo(opponent)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    for (data in snapshot.children) {
                        holder.chatRoomKey = data.key.toString()!!             //채팅방 키 초기화
                        holder.opponentUser = data.getValue<User>()!!         //상대방 정보 초기화
                        holder.txt_name.text = data.getValue<User>()!!.name.toString()     //상대방 이름 초괴화
                    }
                }
            })
        holder.background.setOnClickListener()               //채팅방 항목 선택 시
        {
            try {
                var intent = Intent(context, ChatRoomActivity::class.java)
                intent.putExtra("ChatRoom", chatRooms.get(position))      //채팅방 정보
                intent.putExtra("Opponent", holder.opponentUser)          //상대방 사용자 정보
                intent.putExtra("ChatRoomKey", chatRoomKeys[position])     //채팅방 키 정보
                context.startActivity(intent)                            //해당 채팅방으로 이동
                (context as AppCompatActivity).finish()
            }catch (e:Exception)
            {
                e.printStackTrace()
                Toast.makeText(context,"채팅방 이동 중 문제가 발생하였습니다.",Toast.LENGTH_SHORT).show()
            }
        }

        if (chatRooms[position].messages!!.size > 0) {         //채팅방 메시지가 존재하는 경우
            setupLastMessageAndDate(holder, position)        //마지막 메시지 및 시각 초기화
            setupMessageCount(holder, position)
        }
    }

    fun setupLastMessageAndDate(holder: ViewHolder, position: Int) { //마지막 메시지 및 시각 초기화
        try {
            var lastMessage =
                chatRooms[position].messages!!.values.sortedWith(compareBy({ it.sended_date }))    //메시지 목록에서 시각을 비교하여 가장 마지막 메시지  가져오기
                    .last()
            holder.txt_message.text = lastMessage.content                 //마지막 메시지 표시
            holder.txt_date.text = getLastMessageTimeString(lastMessage.sended_date)   //마지막으로 전송된 시각 표시
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

    fun setupMessageCount(holder: ViewHolder, position: Int) {            //확인되지 않은 메시지 개수 표시
        try {
            var unconfirmedCount =
                chatRooms[position].messages!!.filter {
                    !it.value.confirmed && !it.value.senderUid.equals(               //메시지 중 확인되지 않은 메시지 개수 가져오기
                        myUid
                    )
                }.size
            if (unconfirmedCount > 0) {              //확인되지 않은 메시지가 있을 경우
                holder.txt_chatCount.visibility = View.VISIBLE           //개수 표시
                holder.txt_chatCount.text = unconfirmedCount.toString()
            } else
                holder.txt_chatCount.visibility = View.GONE
        } catch (e: Exception) {
            e.printStackTrace()
            holder.txt_chatCount.visibility = View.GONE
        }
    }

    fun getLastMessageTimeString(lastTimeString: String): String {           //마지막 메시지가 전송된 시각 구하기
        try {
            var currentTime = LocalDateTime.now().atZone(TimeZone.getDefault().toZoneId()) //현재 시각
            var dateTimeFormatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss")

            var messageMonth = lastTimeString.substring(4, 6).toInt()                   //마지막 메시지 시각 월,일,시,분
            var messageDate = lastTimeString.substring(6, 8).toInt()
            var messageHour = lastTimeString.substring(8, 10).toInt()
            var messageMinute = lastTimeString.substring(10, 12).toInt()

            var formattedCurrentTimeString = currentTime.format(dateTimeFormatter)     //현 시각 월,일,시,분
            var currentMonth = formattedCurrentTimeString.substring(4, 6).toInt()
            var currentDate = formattedCurrentTimeString.substring(6, 8).toInt()
            var currentHour = formattedCurrentTimeString.substring(8, 10).toInt()
            var currentMinute = formattedCurrentTimeString.substring(10, 12).toInt()

            var monthAgo = currentMonth - messageMonth                           //현 시각과 마지막 메시지 시각과의 차이. 월,일,시,분
            var dayAgo = currentDate - messageDate
            var hourAgo = currentHour - messageHour
            var minuteAgo = currentMinute - messageMinute

            if (monthAgo > 0)                                         //1개월 이상 차이 나는 경우
                return monthAgo.toString() + "개월 전"
            else {
                if (dayAgo > 0) {                                  //1일 이상 차이 나는 경우
                    if (dayAgo == 1)
                        return "어제"
                    else
                        return dayAgo.toString() + "일 전"
                } else {
                    if (hourAgo > 0)
                        return hourAgo.toString() + "시간 전"     //1시간 이상 차이 나는 경우
                    else {
                        if (minuteAgo > 0)                       //1분 이상 차이 나는 경우
                            return minuteAgo.toString() + "분 전"
                        else
                            return "방금"
                    }
                }
            }
        } catch (e: Exception) {
            e.printStackTrace()
            return ""
        }
    }

    override fun getItemCount(): Int {
        return chatRooms.size
    }

    inner class ViewHolder(itemView: ListChatroomItemBinding) :
        RecyclerView.ViewHolder(itemView.root) {
        var opponentUser = User("", "")
        var chatRoomKey = ""
        var background = itemView.background
        var txt_name = itemView.txtName
        var txt_message = itemView.txtMessage
        var txt_date = itemView.txtMessageDate
        var txt_chatCount = itemView.txtChatCount
    }

}

채팅방을 불러오는 RecyclerChatRoomsAdapter의 전체 코드는 위와 같다.

var chatRooms: ArrayList<ChatRoom> = arrayListOf()   //채팅방 목록
    var chatRoomKeys: ArrayList<String> = arrayListOf()  //채팅방 키 목록
    val myUid = FirebaseAuth.getInstance().currentUser?.uid.toString()   //현재 사용자 Uid

    init {
        setupAllUserList()
    }

우선 첫째로 채팅방과 각 채팅방의 키를 받아올 채팅방 키를 저장할 ArrayList들과,

현재 로그인한 사용자의 Uid를 저장할 변수를 선언하였고,

생성과 동시에 전체 채팅방 목록을 초기화하도록 하였다.

fun setupAllUserList() {     //전체 채팅방 목록 초기화 및 업데이트
        FirebaseDatabase.getInstance().getReference("ChatRoom").child("chatRooms")
            .orderByChild("users/$myUid").equalTo(true)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    chatRooms.clear()
                    for (data in snapshot.children) {
                        chatRooms.add(data.getValue<ChatRoom>()!!)
                        chatRoomKeys.add(data.key!!)
                    }
                    notifyDataSetChanged()
                }
            })

    }

채팅방 데이터를 저장하고 있는 ChatRoom 항목에서 자신이 포함된 채팅방들만 불러오기 위하여

myUid를 child로 가지고 있는 항목만 추려온 뒤, chatRooms와 chatRoomKey에 각각 항목을 추가한다.

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        var userIdList = chatRooms[position].users!!.keys    //채팅방에 포함된 사용자 키 목록
        var opponent = userIdList.first { !it.equals(myUid) }  //상대방 사용자 키
        FirebaseDatabase.getInstance().getReference("User").child("users").orderByChild("uid")   //상대방 사용자 키를 포함하는 채팅방 불러오기
            .equalTo(opponent)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onCancelled(error: DatabaseError) {}
                override fun onDataChange(snapshot: DataSnapshot) {
                    for (data in snapshot.children) {
                        holder.chatRoomKey = data.key.toString()!!             //채팅방 키 초기화
                        holder.opponentUser = data.getValue<User>()!!         //상대방 정보 초기화
                        holder.txt_name.text = data.getValue<User>()!!.name.toString()     //상대방 이름 초괴화
                    }
                }
            })
        holder.background.setOnClickListener()               //채팅방 항목 선택 시
        {
            try {
                var intent = Intent(context, ChatRoomActivity::class.java)
                intent.putExtra("ChatRoom", chatRooms.get(position))      //채팅방 정보
                intent.putExtra("Opponent", holder.opponentUser)          //상대방 사용자 정보
                intent.putExtra("ChatRoomKey", chatRoomKeys[position])     //채팅방 키 정보
                context.startActivity(intent)                            //해당 채팅방으로 이동
                (context as AppCompatActivity).finish()
            }catch (e:Exception)
            {
                e.printStackTrace()
                Toast.makeText(context,"채팅방 이동 중 문제가 발생하였습니다.",Toast.LENGTH_SHORT).show()
            }
        }

        if (chatRooms[position].messages!!.size > 0) {         //채팅방 메시지가 존재하는 경우
            setupLastMessageAndDate(holder, position)        //마지막 메시지 및 시각 초기화
            setupMessageCount(holder, position)
        }
    }

초기화된 각 채팅방에서 상대방 사용자의 키를 얻어내고, 사용자 목록이 포함된 Users 데이터베이스에서 상대방 사용자를 찾아 정보를 불러온 뒤, 상대방의 이름을 초기화하여 보여준다.

그리고 해당 채팅방 항목을 선택 시, 해당 상대방과의 채팅방 정보, 상대방 사용자의 정보, 키를 Intent로 넘겨 채팅방 화면으로 전환하도록 한다.

그리고 채팅방에 메시지가 존재하는 경우, 마지막 메시지와 메시지를 전송한 시각도 함께 표시해준다.

fun setupLastMessageAndDate(holder: ViewHolder, position: Int) { //마지막 메시지 및 시각 초기화
        try {
            var lastMessage =
                chatRooms[position].messages!!.values.sortedWith(compareBy({ it.sended_date }))    //메시지 목록에서 시각을 비교하여 가장 마지막 메시지  가져오기
                    .last()
            holder.txt_message.text = lastMessage.content                 //마지막 메시지 표시
            holder.txt_date.text = getLastMessageTimeString(lastMessage.sended_date)   //마지막으로 전송된 시각 표시
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

해당 채팅방에 포함된 메시지들을 비교해서 시각이 가장 큰 메시지를 뽑아 텍스트 표시

fun getLastMessageTimeString(lastTimeString: String): String {           //마지막 메시지가 전송된 시각 구하기
        try {
            var currentTime = LocalDateTime.now().atZone(TimeZone.getDefault().toZoneId()) //현재 시각
            var dateTimeFormatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss")

            var messageMonth = lastTimeString.substring(4, 6).toInt()                   //마지막 메시지 시각 월,일,시,분
            var messageDate = lastTimeString.substring(6, 8).toInt()
            var messageHour = lastTimeString.substring(8, 10).toInt()
            var messageMinute = lastTimeString.substring(10, 12).toInt()

            var formattedCurrentTimeString = currentTime.format(dateTimeFormatter)     //현 시각 월,일,시,분
            var currentMonth = formattedCurrentTimeString.substring(4, 6).toInt()
            var currentDate = formattedCurrentTimeString.substring(6, 8).toInt()
            var currentHour = formattedCurrentTimeString.substring(8, 10).toInt()
            var currentMinute = formattedCurrentTimeString.substring(10, 12).toInt()

            var monthAgo = currentMonth - messageMonth                           //현 시각과 마지막 메시지 시각과의 차이. 월,일,시,분
            var dayAgo = currentDate - messageDate
            var hourAgo = currentHour - messageHour
            var minuteAgo = currentMinute - messageMinute

            if (monthAgo > 0)                                         //1개월 이상 차이 나는 경우
                return monthAgo.toString() + "개월 전"
            else {
                if (dayAgo > 0) {                                  //1일 이상 차이 나는 경우
                    if (dayAgo == 1)
                        return "어제"
                    else
                        return dayAgo.toString() + "일 전"
                } else {
                    if (hourAgo > 0)
                        return hourAgo.toString() + "시간 전"     //1시간 이상 차이 나는 경우
                    else {
                        if (minuteAgo > 0)                       //1분 이상 차이 나는 경우
                            return minuteAgo.toString() + "분 전"
                        else
                            return "방금"
                    }
                }
            }
        } catch (e: Exception) {
            e.printStackTrace()
            return ""
        }
    }

메시지 시각을 오늘 날짜와 비교하여 마지막으로 전송된 메시지를 다음과 같이 표시한다.

ex)3분 전, 10분 전, 어제,3일 전..

fun setupMessageCount(holder: ViewHolder, position: Int) {            //확인되지 않은 메시지 개수 표시
        try {
            var unconfirmedCount =
                chatRooms[position].messages!!.filter {
                    !it.value.confirmed && !it.value.senderUid.equals(               //메시지 중 확인되지 않은 메시지 개수 가져오기
                        myUid
                    )
                }.size
            if (unconfirmedCount > 0) {              //확인되지 않은 메시지가 있을 경우
                holder.txt_chatCount.visibility = View.VISIBLE           //개수 표시
                holder.txt_chatCount.text = unconfirmedCount.toString()
            } else
                holder.txt_chatCount.visibility = View.GONE
        } catch (e: Exception) {
            e.printStackTrace()
            holder.txt_chatCount.visibility = View.GONE
        }
    }

채팅방의 메시지 중에서 확인되지 않은 메시지의 개수를 세어 표시해준다.

완성된 화면이다.

참조

[Android]Firebase로 채팅 앱 만들기(3)

CoBool — Thu, 31 Mar 2022 14:53:34 +0900

지난 페이지에서는 채팅 앱에서 참여할 사용자를 추가할 수 있는 회원가입 화면을 만들어보았다.

이제는 만들어진 회원의 계정으로 로그인할 수 있는 로그인 페이지를 만들어야 한다.

먼저 로그인 레이아웃을 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3660DC">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent">

        <EditText
            android:id="@+id/edt_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="Email"
            android:inputType="textPersonName"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/edt_password"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <EditText
            android:id="@+id/edt_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="비밀번호"
            android:inputType="textPersonName|textPassword"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/btn_sign_in"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/edt_email" />

        <Button
            android:id="@+id/btn_signup"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textColor="@color/white"
            app:backgroundTint="#3660DC"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/edt_password"
            app:layout_constraintStart_toStartOf="@+id/edt_password"
            app:layout_constraintTop_toBottomOf="@id/btn_sign_in" />

        <Button
            android:id="@+id/btn_sign_in"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="로그인"
            android:textColor="@color/white"
            app:backgroundTint="#3660DC"
            app:layout_constraintBottom_toTopOf="@id/btn_signup"
            app:layout_constraintEnd_toEndOf="@+id/edt_password"
            app:layout_constraintStart_toStartOf="@+id/edt_password"
            app:layout_constraintTop_toBottomOf="@id/edt_password" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ChatingApp"
        android:textColor="#FFFFFF"
        android:textSize="60dp"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

로그인 레이아웃 xml은 위와 같다.

package com.miso.chatapplication

import android.content.Context
import android.content.Intent
import android.content.SharedPreferences
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.auth.api.signin.GoogleSignIn
import com.google.android.gms.auth.api.signin.GoogleSignInAccount
import com.google.android.gms.auth.api.signin.GoogleSignInClient
import com.google.android.gms.auth.api.signin.GoogleSignInOptions
import com.google.android.gms.common.SignInButton
import com.google.android.gms.common.api.ApiException
import com.google.android.gms.tasks.OnCompleteListener
import com.google.firebase.auth.AuthResult
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.FirebaseUser
import com.google.firebase.auth.GoogleAuthProvider
import com.miso.chatapplication.databinding.ActivityLoginBinding
import com.miso.chatapplication.main.MainActivity

class LoginActivity : AppCompatActivity() {
    lateinit var auth: FirebaseAuth
    lateinit var btn_signUp: Button
    lateinit var btn_signIn: Button
    lateinit var edt_email: EditText
    lateinit var edt_password: EditText
    lateinit var binding: ActivityLoginBinding
    lateinit var preference: SharedPreferences
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initProperty()
        initializeView()
        initializeListener()
    }

    fun initProperty() {    //초기 변수 세팅
        auth = FirebaseAuth.getInstance()     //Firebase 계정 관련 변수
        preference = getSharedPreferences("setting", MODE_PRIVATE)    //로그인 정보 저장용 SharedPreference
    }

    fun initializeView() {   //뷰 초기화
        btn_signUp = binding.btnSignup
        btn_signIn = binding.btnSignIn
        edt_email = binding.edtEmail
        edt_password = binding.edtPassword

        edt_email.setText(preference.getString("email", ""))     //마지막으로 로그인 한 이메일 세팅
        edt_password.setText(preference.getString("password", ""))   //마지막으로 로그인 한 패스워드 세팅
    }

    fun initializeListener() {        //버튼 클릭 시 리스너 세팅
        btn_signIn.setOnClickListener()
        {
            signInWithEmailAndPassword()
        }
        btn_signUp.setOnClickListener()
        {
            startActivity(Intent(this, SignUpActivity::class.java))
        }
    }

    fun signInWithEmailAndPassword() {
        if (edt_email.text.toString().isNullOrBlank() &&   //아이디 또는 패스워드가 입력되었는 지 유효성 검사
            edt_password.text.toString().isNullOrBlank())
            Toast.makeText(this, "아이디 또는 패스워드를 입력해주세요", Toast.LENGTH_SHORT).show()
        else {
            auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }
        }
    }

    private fun updateUI(user: FirebaseUser?) { //로그인 성공 시 화면 이동
        if (user != null) {
            try {
                var preference = getSharedPreferences("setting", MODE_PRIVATE).edit()    //이메일 및 패스워드 저장
                preference.putString("email", edt_email.text.toString())
                preference.putString("password", edt_password.text.toString())
                preference.apply()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent)
                finish()
            } catch (e: Exception) {
                e.printStackTrace()
                Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

로그인 액티비티의 전체 코드는 위와 같다.

fun signInWithEmailAndPassword() {
        if (edt_email.text.toString().isNullOrBlank() &&   //아이디 또는 패스워드가 입력되었는 지 유효성 검사
            edt_password.text.toString().isNullOrBlank())
            Toast.makeText(this, "아이디 또는 패스워드를 입력해주세요", Toast.LENGTH_SHORT).show()
        else {
            auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }
        }
    }

로그인 버튼을 누를 시 실행되는 로그인 요청 코드이다.

이전 회원가입과 같이 firebase authentification에 접근하기 위하여

auth = FirebaseAuth.getInstance()

를 사용하여 auth 변수를 초기화 해준후,

auth.signInWithEmailAndPassword(edt_email.text.toString(), edt_password.text.toString())    //로그인 실행
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Log.d("로그인", "성공")
                        val user = auth.currentUser
                        updateUI(user)
                        finish()
                    } else {
                        Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                }

위 함수를 사용하여 로그인을 요청한다.

회원가입 코드와 마찬가지로 task.isSuccessful로 성공 여부를 구분하며,

성공 시 다음 화면으로 진입하게 해주는 코드를 넣으면 된다.

private fun updateUI(user: FirebaseUser?) { //로그인 성공 시 화면 이동
        if (user != null) {
            try {
                var preference = getSharedPreferences("setting", MODE_PRIVATE).edit()    //이메일 및 패스워드 저장
                preference.putString("email", edt_email.text.toString())
                preference.putString("password", edt_password.text.toString())
                preference.apply()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent)
                finish()
            } catch (e: Exception) {
                e.printStackTrace()
                Toast.makeText(this, "로그인에 실패하였습니다.", Toast.LENGTH_SHORT).show()
            }
        }
    }

나 같은 경우 채팅방을 보여줄 메인화면에서 사용할 주요 변수를 SharedPreference를 사용하여 저장하고,이후 이동하는 다음 액티비티에서 꺼내쓸 수 있게 하였다.

완성화면

참조

[Android]Firebase로 채팅 앱 만들기(2)

CoBool — Thu, 31 Mar 2022 14:50:23 +0900

지난 페이지에서는 안드로이드와 Firebase 간의 연동 설정을 끝냈으니,

이젠 회원가입 페이지를 만들어보도록 하자.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3660DC">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent">

        <EditText
            android:id="@+id/edt_opponent_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="이름"
            android:inputType="textPersonName"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/edt_email"
            app:layout_constraㅁintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <EditText
            android:id="@+id/edt_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:ems="10"
            android:hint="Email"
            android:inputType="textPersonName"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@id/edt_password"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/edt_opponent_name"
            app:layout_constraintVertical_chainStyle="packed" />

        <EditText
            android:id="@+id/edt_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="비밀번호"
            android:inputType="textPersonName|textPassword"
            android:textColor="@color/black"
            android:textColorHint="#B8B8B8"
            app:layout_constraintBottom_toTopOf="@+id/btn_signup"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/edt_email" />

        <Button
            android:id="@+id/btn_signup"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="회원가입"
            android:textColor="@color/white"
            app:backgroundTint="#3660DC"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/edt_password"
            app:layout_constraintStart_toStartOf="@+id/edt_password"
            app:layout_constraintTop_toBottomOf="@id/edt_password" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ChatingApp"
        android:textColor="#FFFFFF"
        android:textSize="60dp"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

우선 회원가입에 쓸 레이아웃 페이지를 만들어준다.

완성한 모습은 위와 같다.

이제 회원가입을 진행할 Activity를 만들어주자.

package com.miso.chatapplication

import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.auth.api.signin.GoogleSignInClient
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.database.FirebaseDatabase
import com.miso.chatapplication.databinding.ActivitySignupBinding
import com.miso.chatapplication.main.MainActivity
import com.miso.chatapplication.model.User

class SignUpActivity : AppCompatActivity() {
    lateinit var auth: FirebaseAuth
    lateinit var btn_signUp: Button
    lateinit var edt_email: EditText
    lateinit var edt_password: EditText
    lateinit var edt_name: EditText

    lateinit var binding: ActivitySignupBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivitySignupBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initializeView()
        initializeListener()
    }

    fun initializeView() {  //뷰 초기화
        auth = FirebaseAuth.getInstance()
        btn_signUp = binding.btnSignup
        edt_email = binding.edtEmail
        edt_password = binding.edtPassword
        edt_name = binding.edtOpponentName
    }

    fun initializeListener() {   //버튼 클릭 시 리스너 초기화
        btn_signUp.setOnClickListener()
        {
            signUp()
        }
    }

    fun signUp() {     //회원 가입 실행
        var email = edt_email.text.toString()           //각 입력란 값 String으로 변환
        var password = edt_password.text.toString()
        var name = edt_name.text.toString()

        auth.createUserWithEmailAndPassword(email, password)      //FirebaseAuth에 회원가입 성공 시
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {     //회원 가입 성공 시
                    try {
                        val user = auth.currentUser
                        val userId = user?.uid
                        val userIdSt = userId.toString()
                        FirebaseDatabase.getInstance().getReference("User").child("users")
                            .child(userId.toString()).setValue(User(name, userIdSt, email))             //Firebase RealtimeDatabase에 User 정보 ㅊ추가
                        Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
                        Log.e("UserId", "$userId")
                        startActivity(Intent(this@SignUpActivity, MainActivity::class.java))
                    } catch (e: Exception) {
                        e.printStackTrace()
                        Toast.makeText(this, "화면 이동 중 문제가 발생하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                } else
                    Toast.makeText(this, "회원가입에 실패하였습니다.", Toast.LENGTH_SHORT).show()

            }

    }
}

전체 코드는 위와 같다.

이메일 및 패스워드를 사용한 로그인을 구현하려면 서버가 필수적인데,

Firebase Authentification에서는 이러한 인증 절차를 간편하게 대신 수행해준다.

lateinit var auth:FirebaseAuth
auth = FirebaseAuth.getInstance()

위 코드를 통하여 FirebaseAuth 객체를 초기화해주면,

이후 인증 절차를 진행할 수 있다.

fun signUp() {     //회원 가입 실행
        var email = edt_email.text.toString()           //각 입력란 값 String으로 변환
        var password = edt_password.text.toString()
        var name = edt_name.text.toString()

        auth.createUserWithEmailAndPassword(email, password)      //FirebaseAuth에 회원가입 성공 시
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {     //회원 가입 성공 시
                    try {
                        val user = auth.currentUser
                        val userId = user?.uid
                        val userIdSt = userId.toString()
                        FirebaseDatabase.getInstance().getReference("User").child("users")
                            .child(userId.toString()).setValue(User(name, userIdSt, email))             //Firebase RealtimeDatabase에 User 정보 ㅊ추가
                        Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
                        Log.e("UserId", "$userId")
                        startActivity(Intent(this@SignUpActivity, MainActivity::class.java))
                    } catch (e: Exception) {
                        e.printStackTrace()
                        Toast.makeText(this, "화면 이동 중 문제가 발생하였습니다.", Toast.LENGTH_SHORT).show()
                    }
                } else
                    Toast.makeText(this, "회원가입에 실패하였습니다.", Toast.LENGTH_SHORT).show()

            }

    }

난 회원가입을 진행하기 위해 위와 같은 함수를 작성했다.

우선 각 이름,이메일,패스워드에 해당하는 입력란의 텍스트들을 가져오고,

createUserWithEmailAndPassword(email, password)라는 함수를 통해

회원가입 요청을 진행했다.단순히 이 함수만으로도 회원가입은 가능하겠지만,

요청이 성공했는지에 대한 여부도 확인해야 하므로,

.addOnCompleteListener(this) { task ->
if(task.isSuccesful())
...
else
...
}

위와 같은 리스너도 추가해줘야 한다.

task.isSuccesful()이 참이면, 회원등록에 성공했다는 뜻이고,그렇지 않으면 실패했다는 뜻이다.

val user = auth.currentUser
                        val userId = user?.uid
                        val userIdSt = userId.toString()
                        FirebaseDatabase.getInstance().getReference("User").child("users")
                            .child(userId.toString()).setValue(User(name, userIdSt, email))             //Firebase RealtimeDatabase에 User 정보 ㅊ추가
                        Toast.makeText(this, "회원가입이 완료되었습니다.", Toast.LENGTH_SHORT).show()
                        Log.e("UserId", "$userId")
                        startActivity(Intent(this@SignUpActivity, MainActivity::class.java))

회원가입에 성공했으면,해당 회원 정보를 가져와 데이터베이스에도 함께 등록해줘야 한다.

FirebaseDatabase.getInstance().getReference("User").child("users")
                            .child(userId.toString()).setValue(User(name, userIdSt, email))

FirebaseDatabase.getInstance()를 통해 ReatimeDatabase에 접근하고,

getReference(String)에 자신이 접근하고 싶은 노드 이름을 입력하고,

.child(String)에 자식 이름을 넣어 자식에 접근한다.

나같은 경우 users라는 자식에 내가 만든 회원의 userId를 넣어주었고,값으로 사용자 정보를 저장하는 객체인 User 클래스를 사용하여 넣어주었다.

package com.miso.chatapplication.model

import java.io.Serializable

data class User(val name:String?="",
                val uid:String?="",
                val email:String?=""):Serializable {

}

User의 내용은 위와 같다.

회원가입이 위와 같은 절차를 이루어 성공하면, MainActivity로 이동하게 해두었다.

참조

[Android] Firebase로 채팅 앱 만들기(1)

CoBool — Thu, 31 Mar 2022 14:20:08 +0900

이직을 위해 구직활동을 하던 중 평소 눈여겨 보고 있던 회사에서 입사 제안이 와서 프로젝트 과제를 수행하게 되었다. 그 과제의 요구조건은 1:1 채팅 앱을 만들어보라는 것이었는데, 서버가 있다는 가정 하에서 진행을 해보라는 것이 내게는 참 막막했다. 그래서 어떻게 구현할 지 곰곰히 생각해보다가, 예전에 졸업작품을 만들 때 썼던 Firebase가 떠올라 검색을 해보니 Realtime Database를 통해 채팅 앱을 만들 수 있는 것 같아 나도 시도해보게 되었다. 그 결과 꽤나 보기좋은 형태의 결과가 나왔고, 이 과정을 글로 공유하고자 한다.

본래 회원가입 기능은 기능 요구사항에 포함되어 있지는 않았으나,

만들어두는 것이 추후 프로젝트 진행에도 편리할 것 같아 만들어보았다.

우선 처음 프로젝트를 시작하기 전, Firebase와 본인의 프로젝트를 연결해야 한다.

‘시작하기’를 눌러 이동해준다.

본인의 구글 계정으로 로그인해준다.

그럼 현재 연동된 프로젝트가 표시된다. 새 프로젝트를 만들기 위해 프로젝트 추가 버튼을 누른다.

만들 프로젝트의 이름을 간단하게 입력해준다.

계속을 눌러준다.

애널리틱스 계정을 위와 같이 설정해주고,프로젝트 만들기를 선택해준다.

조금만 기다리면 프로젝트가 만들어진다.

프로젝트가 만들어졌다. 이제 본격적인 연동을 위해 안드로이드 아이콘을 선택해준다.

앱의 패키지 네임을 입력하고, 앱 닉네임을 정해준다.

디버그 서명 인증서는 뒤에서 설명할 예정이다. 다음을 누른다.

다음으로 google-services.json을 다운로드하여 프로젝트의 app 폴더에 넣어주도록 한다.

난 위와 같이 내 프로젝트 폴더에 넣었다.

buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.10'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

다음으로 프로젝트 수준의 build.gradle 파일에 위와 같은 내용을 추가하고,

dependencies {
  // ...

  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:29.0.4')

  // When using the BoM, you don't specify versions in Firebase library dependencies

  // Declare the dependency for the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics-ktx'

  // Declare the dependencies for any other desired Firebase products
  // For example, declare the dependencies for Firebase Authentication and Cloud Firestore
  implementation 'com.google.firebase:firebase-auth-ktx'
  implementation 'com.google.firebase:firebase-firestore-ktx'
}

앱 수준의 build.gradle 파일에 위와 같은 내용을 추가해준다.

그 다음 프로젝트 상단에 표시된 ‘Sync now’라는 버튼을 눌러주면 연동은 완료된다.

참조

[Android] 안드로이드 스튜디오 디자인 뷰가 보이지 않는 경우

CoBool — Wed, 30 Mar 2022 00:00:57 +0900

안드로이드 스튜디오를 사용하던 중 UI XML의 디자인 뷰가 보이지 않았다.

그래서 Clean Project를 수행해주었더니,

다시 원상복구 되었다.