안드로이드 앱 만들기 : 멀티 언어 채팅 앱 만들기 (Jetpack compose 활용해 보기)

이 나라에는 여러 나라의 사람 들어와 살고 있다.  코리안 드림을 꿈꾸며... 한 때는 이 나라의 사람들이 아메리칸드림을 꿈꾸며, 미국으로 떠났던 것처럼... 그래서 이번에는 다국적 언어를 이용한 채팅앱을 하나 만들어 볼까 한다.

 

잘 될지는 모르겠지만, 그러면서 Jetpack Compose 을 이용한 화면 구성 등에 대한 공부를 해 볼 요량이다. 

오늘은 그 처음으로 로그인 페이지를 하나 만들어 보고자 한다. 

 

로그인 페이지

이 화면을 layout 으로 그리라고 했다면

아마도 금새 그리지 않았을까 하는 생각이 든다.

 

화면에 Card box 와 Text가 들어간 button 기능 3개

제목 이름 표시 하나

 

그런데, 난 이 화면 하나를 그리기 위해서 며칠을 고민했고, 예제를 하나 찾았다. 그리고 그 예제를 참고해 가면서 화면을 그렸다.

 

그러자니, 3시간쯤... 지났다.

 

예전 project 파일에서 필요한 기능 몇개를 가지고 왔고, 그리고는 이제 완성이 되었다.

 

그냥 layout 으로 그리는 것이 나은가?  쉽게 그리는 데는 그것이 낫을 것 같기도 하다.

 

 

 

 

 

 

 

 

 

 

 

화면을 그린 source 을 살펴보자.

 

import android.app.Activity
import android.content.Intent
import android.content.IntentSender
import android.content.SharedPreferences
import android.os.Bundle
import android.preference.PreferenceManager
import android.preference.PreferenceManager.getDefaultSharedPreferences
import android.util.Log
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.billcoreatech.multichat416.ui.theme.MultiChat416Theme
import com.google.android.gms.auth.api.signin.GoogleSignIn
import com.google.android.gms.auth.api.signin.GoogleSignInClient
import com.google.android.gms.auth.api.signin.GoogleSignInOptions
import com.google.android.gms.common.api.ApiException
import com.google.android.gms.tasks.OnCompleteListener
import com.google.android.play.core.appupdate.AppUpdateInfo
import com.google.android.play.core.appupdate.AppUpdateManager
import com.google.android.play.core.appupdate.AppUpdateManagerFactory
import com.google.android.play.core.install.model.AppUpdateType
import com.google.android.play.core.install.model.UpdateAvailability
import com.google.android.play.core.review.ReviewInfo
import com.google.android.play.core.review.ReviewManager
import com.google.android.play.core.review.ReviewManagerFactory
import com.google.android.play.core.review.model.ReviewErrorCode
import com.google.android.play.core.tasks.RuntimeExecutionException
import com.google.android.play.core.tasks.Task
import com.google.firebase.appcheck.FirebaseAppCheck
import com.google.firebase.appcheck.debug.DebugAppCheckProviderFactory
import com.google.firebase.appcheck.safetynet.SafetyNetAppCheckProviderFactory
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.GoogleAuthProvider
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase
import java.text.SimpleDateFormat
import java.util.*

class GoogleLogin : ComponentActivity() {

    var appUpdateManager: AppUpdateManager? = null
    var appUpdateInfoTask: Task<AppUpdateInfo>? = null
    lateinit var sp: SharedPreferences
    lateinit var editor: SharedPreferences.Editor
    lateinit var sdf: SimpleDateFormat
    lateinit var today: Calendar
    lateinit var googleSignInClient: GoogleSignInClient
    lateinit var auth: FirebaseAuth
    val MY_REQUEST_CODE = 1000
    var RC_SIGN_IN:Int = 1001
    var TAG = "GoogleLogin"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val gso = GoogleSignInOptions
            .Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(getString(R.string.default_web_client_id))
            .requestEmail()
            .build()

        googleSignInClient = GoogleSignIn.getClient(this, gso)
        auth = Firebase.auth

        setContent {
            MultiChat416Theme {

                fun signIn() {
                    val signInIntent = googleSignInClient.signInIntent
                    startActivityForResult(signInIntent, RC_SIGN_IN)
                }

                fun doLogOut() {
                    googleSignInClient.signOut().addOnCompleteListener( OnCompleteListener  {
                            task -> if (task.isComplete ) {
                            Log.e(TAG, "finish ... " )
                            auth.signOut()
                            finish()
                        }
                    })
                }

                Column(modifier = Modifier
                    .fillMaxHeight()
                    .fillMaxWidth()
                    .padding(16.dp),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ){
                    Text(text = buildAnnotatedString {
                        withStyle(style = SpanStyle(color = Color.Red)) {
                            append("M")
                        }
                        withStyle(style = SpanStyle(color = Color.Black)) {
                            append("ulti")
                        }

                        withStyle(style = SpanStyle(color = Color.Red)) {
                            append(" L")
                        }
                        withStyle(style = SpanStyle(color = Color.Black)) {
                            append("anguage")
                        }

                        withStyle(style = SpanStyle(color = Color.Red)) {
                            append(" C")
                        }
                        withStyle(style = SpanStyle(color = Color.Black)) {
                            append("hatting")
                        }
                    }, fontSize = 30.sp)
                    Spacer(Modifier.size(32.dp))
                    Card(modifier = Modifier
                        .width(200.dp)
                        .height(100.dp)
                        .padding(8.dp),
                    ) {
                        TextButton(onClick = {
                            signIn()
                        },content={
                            Text(text = getString(R.string.title_activity_google_login), color = Color.Blue)
                        })
                    }
                    Spacer(Modifier.size(8.dp))
                    Card(modifier = Modifier
                        .width(200.dp)
                        .height(100.dp)
                        .padding(8.dp),
                    ) {
                        TextButton(onClick = {
                            Toast.makeText(applicationContext,
                                getString(R.string.mesgRegistorOnlyGoogle),
                                Toast.LENGTH_SHORT
                                ).show()
                        }) {
                            Text(text = getString(R.string.doRegister), color = Color.Red)
                        }
                    }
                    Spacer(Modifier.size(8.dp))
                    Card(modifier = Modifier
                        .width(200.dp)
                        .height(100.dp)
                        .padding(8.dp),
                    ) {
                        TextButton(onClick = {
                            doLogOut()
                        }) {
                            Text(text = getString(R.string.doLogout), color = Color.Gray)
                        }
                    }

                }
            }
        }

        val firebaseAppCheck = FirebaseAppCheck.getInstance()
        firebaseAppCheck.installAppCheckProviderFactory(
            if (BuildConfig.DEBUG_MODE) {
                Log.e(TAG, "DebugAppCheckProviderFactory ...")
                DebugAppCheckProviderFactory.getInstance() // AVD 에서 적용시
                //SafetyNetAppCheckProviderFactory.getInstance() // 폰에서 적용시
            } else {
                Log.e(TAG, "SafetyNetAppCheckProviderFactory ...")
                SafetyNetAppCheckProviderFactory.getInstance() // 폰에서 적용시
            }
        )

        appUpdateManager = AppUpdateManagerFactory.create(this@GoogleLogin)
        // Returns an intent object that you use to check for an update.
        appUpdateInfoTask = appUpdateManager!!.appUpdateInfo
        doUpdateCheck()

        sp = getSharedPreferences("MultiChat", MODE_PRIVATE)
        editor = sp.edit()

        sdf = SimpleDateFormat("yyyyMMdd")
        today = Calendar.getInstance()
        if (!sp.getBoolean("REVIEW", false)) {
            editor.putString("REVIEW_DATE", sdf.format(today.timeInMillis))
            editor.commit()
        }

        // 사용하고 10일 지나가면 ...
        if ((today.timeInMillis - sdf.parse(sp.getString("REVIEW_DATE",sdf.format(today.timeInMillis))).time) / (1000 * 60 * 60 * 24) > 10) {
            var manager = ReviewManagerFactory.create(this@GoogleLogin)
            var request = manager.requestReviewFlow()
            editor.putBoolean("REVIEW", true)
            editor.commit()
            request.addOnCompleteListener { task ->
                if (task.isSuccessful) {
                    // We got the ReviewInfo object
                    val reviewInfo = task.result
                    if (sp.getBoolean("REVIEW", false)) {
                        doReviseInfo(manager, this@GoogleLogin, reviewInfo)
                    }
                } else {
                    // There was some problem, log or handle the error code.
                    @ReviewErrorCode val reviewErrorCode = (task.getException() as RuntimeExecutionException).errorCode
                }
            }
        }
    }

    private fun doUpdateCheck() {
        // Checks that the platform will allow the specified type of update.
        appUpdateInfoTask!!.addOnSuccessListener { appUpdateInfo: AppUpdateInfo ->
            if (appUpdateInfo.updateAvailability() == UpdateAvailability.UPDATE_AVAILABLE
                // This example applies an immediate update. To apply a flexible update
                // instead, pass in AppUpdateType.FLEXIBLE
                && appUpdateInfo.isUpdateTypeAllowed(AppUpdateType.IMMEDIATE)
            ) {
                // Request the update.
                try {
                    doRequestUpdate(appUpdateInfo)
                } catch (e: IntentSender.SendIntentException) {
                    e.printStackTrace()
                }
            }
        }
    }

    @Throws(IntentSender.SendIntentException::class)
    private fun doRequestUpdate(appUpdateInfo: AppUpdateInfo) {
        Log.e(TAG, "do Update Start")
        appUpdateManager!!.startUpdateFlowForResult( // Pass the intent that is returned by 'getAppUpdateInfo()'.
            appUpdateInfo,  // Or 'AppUpdateType.FLEXIBLE' for flexible updates.
            AppUpdateType.IMMEDIATE,  // The current activity making the update request.
            this,  // Include a request code to later monitor this update request.
            MY_REQUEST_CODE
        )
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (requestCode == MY_REQUEST_CODE) {
            if (resultCode != RESULT_OK) {
                Log.e(TAG, "Update flow failed! Result code: $resultCode")
                // If the update is cancelled or fails,
                // you can request to start the update again.
            }
        }

        if (requestCode == RC_SIGN_IN) {
            val task = GoogleSignIn.getSignedInAccountFromIntent(data)
            try {
                // Google Sign In was successful, authenticate with Firebase
                val account = task.getResult(ApiException::class.java)!!
                Log.e(TAG, "firebaseAuthWithGoogle: ${account.id}")
                firebaseAuthWithGoogle(account.idToken!!)
            } catch (e: ApiException) {
                // Google Sign In failed, update UI appropriately
                Log.e(TAG, "Google sign in failed ${e.message}")
            }
        }
    }

    private fun firebaseAuthWithGoogle(idToken: String) {
        val credential = GoogleAuthProvider.getCredential(idToken, null)
        auth.signInWithCredential(credential)
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {
                    // Sign in success, update UI with the signed-in user's information
                    Log.e(TAG, "signInWithCredential:success")
                    val user = auth.currentUser
                    var intent = Intent(this@GoogleLogin, MainActivity::class.java)
                    startActivity(intent)
                    finish()
                } else {
                    // If sign in fails, display a message to the user.
                    Log.w(TAG, "signInWithCredential:failure", task.exception)

                }
            }
    }

    private fun doReviseInfo(manager: ReviewManager, activity: Activity, reviewInfo: ReviewInfo) {
        val flow = manager.launchReviewFlow(activity, reviewInfo)
        flow.addOnCompleteListener { _ ->
            editor.putBoolean("REVIEW", false)
            editor.putString("REVIEW_DATE", sdf.format(today.timeInMillis))
            editor.commit()
        }
    }
}

다른 건 볼 꺼 없고, setContent 함수에 들어 있는 것만 보면 될 것 같다.  전체 흐름을 알아야 하기 때문에,  

 

setContent {
    // 테마이름은 개별적이므로 참고만...
    MultiChat416Theme {

.....

       // 먼저 아래로 배열을 하기 위해서 선언 linearlayout 처럼 사용...
        Column(modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ){
        
            // 제목을 표시 한다. 첫글짜만, 대문자로 표시, 폰트색상도 빨간색...
            Text(text = buildAnnotatedString {
                withStyle(style = SpanStyle(color = Color.Red)) {
                    append("M")
                }
                withStyle(style = SpanStyle(color = Color.Black)) {
                    append("ulti")
                }

                withStyle(style = SpanStyle(color = Color.Red)) {
                    append(" L")
                }
                withStyle(style = SpanStyle(color = Color.Black)) {
                    append("anguage")
                }

                withStyle(style = SpanStyle(color = Color.Red)) {
                    append(" C")
                }
                withStyle(style = SpanStyle(color = Color.Black)) {
                    append("hatting")
                }
            }, fontSize = 30.sp)
            // 여백 두기
            Spacer(Modifier.size(32.dp))
            
            // button 을 구분하기 위해서 네모상자에 넣는다.
            Card(modifier = Modifier
                .width(200.dp)
                .height(100.dp)
                .padding(8.dp),
            ) {
                TextButton(onClick = {
                    .....
                },content={
                    Text(text = getString(R.string.title_activity_google_login), color = Color.Blue)
                })
            }
            
            // 여백 두기
            Spacer(Modifier.size(8.dp))
            // button 을 구분하기 위해서 네모상자에 넣는다.
            Card(modifier = Modifier
                .width(200.dp)
                .height(100.dp)
                .padding(8.dp),
            ) {
                TextButton(onClick = {
                    Toast.makeText(applicationContext,
                        getString(R.string.mesgRegistorOnlyGoogle),
                        Toast.LENGTH_SHORT
                        ).show()
                }) {
                    Text(text = getString(R.string.doRegister), color = Color.Red)
                }
            }
            
            // 여백 두기
            Spacer(Modifier.size(8.dp))
            // button 을 구분하기 위해서 네모상자에 넣는다.
            Card(modifier = Modifier
                .width(200.dp)
                .height(100.dp)
                .padding(8.dp),
            ) {
                TextButton(onClick = {
                    .....
                }) {
                    Text(text = getString(R.string.doLogout), color = Color.Gray)
                }
            }

        }
    }
}

대략적으로 이런 정도의 코드로 위에 나오는 화면을 구성을 하게 된다.  이걸 Layout으로 만들어 보면 얼마나 걸릴까?

 

아무튼 오늘은 1일 차 coding 끝.

 

 

 

다음은 채팅목록을 구현해 보겠다.  Database 은 Firebase 의 Realtime database 을 활용할 생각이다.