안드로이드 앱 만들기 : 멀티 언어 채팅 앱 만들기 (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 을 활용할 생각이다.