[Android/Kotlin] RemoteConfig로 클릭하면 뒤집히는 뷰로 영단어 암기장 만들기

이번 포스팅은 RemoteConfig에 대한 포스팅을 진행하여 보겠습니다.

RemoteConfig란?

앱 업데이트를 게시하지 않아도 하루 활성 사용자 수 제한 없이 무료로 앱의 동작과 모양을 변경할 수 있는 툴 이라고 생각하시면 될 것 같습니다.

 

바로 코드 보며 설명 드리겠습니다.

 

RemoteConfig구성

https://console.firebase.google.com/

파이어 베이스 콘솔에 접속하여 좌측 참여 > RemoteConfig > 구성만들기 

 매개변수 만들기

매개 변수 이름(Key)와 Value를 지정해 줍니다.

데이터 타입은 문자열,숫자,boolean,json 이 있는데 지금은 Json으로 작성하겠습니다.

매개변수 key는 Vocabulary로 지정하고 value는  대각선 화살표를 클릭하면 아래처럼 나오는 화면에서 작성 할수 있습니다.

아래 내용처럼 key로 english 와 korean을 지정해주고 그에 맞는 value를 작성하여 줍니다.

변강사항 게시

그후 변경사항을 게시 해주면 RemoteConfig 구성은 끝입니다.

---

코드작성

1. Build.gradle(app)

- dependencies 안에 Firebase Remote Config 에 대한 의존성을 추가해줍니다.

      implementation 'com.google.firebase:firebase-config-ktx'

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id 'com.google.gms.google-services'
}

android {
   ....
}

dependencies {
	....
    implementation platform('com.google.firebase:firebase-bom:31.2.3')
    implementation 'com.google.firebase:firebase-config-ktx:21.2.1'
    implementation 'com.google.firebase:firebase-analytics-ktx:21.2.0'
}

2.MainActivity.kt

Firebase 의 Remote Config 싱글톤 객체 가져와서 사용합니다.

val remoteConfig = Firebase.remoteConfig

싱글톤 객체는 인앱 기본 매개변수 값을 저장하고, 업데이트된 매개변수 값을 가져와 앱에서 사용할 수 있게 되는 시기를 제어하는 ​​데 사용됩니다.

fetchAndActivate.addOnCompleteListener 를 사용하여 fech성공 여부를 가져와 json형태로 값을 변환하여 adapter로 넘겨줍니다.

class MainActivity : AppCompatActivity() {
    private val viewPager: ViewPager2 by lazy { findViewById(R.id.viewpager) }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initData()
    }

    private fun initData() {
        //개발용 시간을 단축시킴
        val remoteConfig = Firebase.remoteConfig
//        remoteConfig.setConfigSettingsAsync(
//            remoteConfigSettings {
//                minimumFetchIntervalInSeconds = 0
//            }
//        )

        remoteConfig.fetchAndActivate().addOnCompleteListener {
            if (it.isSuccessful) {
                val vocabulary = parseQuotesJson(remoteConfig.getString("vocabulary"))
                viewPager.adapter =
                    VocabularyPagerAdapter(vocabularies = vocabulary)
            }
        }
    }

    override fun onDestroy() {
        super.onDestroy()
    }

    private fun parseQuotesJson(json: String): ArrayList<Vocabulary> {
        val jsonArray = JSONArray(json)
        var jsonList = emptyList<JSONObject>()
        for (index in 0 until jsonArray.length()) {
            val jsonObject = jsonArray.getJSONObject(index)
            jsonObject?.let {
                jsonList = jsonList + it
            }
        }
        return jsonList.map {
            Vocabulary(
                english = it.getString("english"),
                korean = it.getString("korean")
            )
        } as ArrayList<Vocabulary>
    }
}

 

3. VocabularyPagerAdapter

Activity에서 받은 값을 활용하여 adapter에 VocabularyViewHolder에서 각 TextView에 값을 넣어줍니다.

package com.example.firebaseremoteconfig

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.wajahatkarim3.easyflipview.EasyFlipView

class VocabularyPagerAdapter(
    private val vocabularies: List<Vocabulary>
) : RecyclerView.Adapter<VocabularyPagerAdapter.VocabularyViewHolder>() {


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = VocabularyViewHolder(
        LayoutInflater.from(parent.context).inflate(R.layout.itme_vocabulary, parent, false)
    )

    override fun getItemCount() = Int.MAX_VALUE

    override fun onBindViewHolder(holder: VocabularyViewHolder, position: Int) {
        holder.bind(vocabularies[position % vocabularies.size])
    }

    class VocabularyViewHolder(itemview: View) : RecyclerView.ViewHolder(itemview) {

        private val englishTV: TextView = itemview.findViewById(R.id.englishTV)
        private val koreanTv: TextView = itemview.findViewById(R.id.koreanTv)
        private val flipView: EasyFlipView = itemview.findViewById(R.id.flipview)

        fun bind(vocabulary: Vocabulary) {
            englishTV.text = vocabulary.english
            koreanTv.text = vocabulary.korean
            flipView.isFlipOnTouch = true
            flipView.isEnabled = true
        }
    }
}

 

다른 xml이나 data class는 아래 포스팅에 UI설정이 되어있으니 참고 하시면 될 것 같습니다.

https://tg-world.tistory.com/25

[Android/Kotlin] 클릭하면 뒤집히는 뷰로 영단어 암기장 만들기 flip view(플립뷰)

 

---

결과물

 

위 처럼 RemoteConfig를 적용하면 앱 업데이트 없이 영단어 변경이 가능하며(파이어 베이스 콘솔 매개변수 변경) 매개변수를 추가하여 더 많은 기능을 활용 할 수 있습니다.