이 나라에는 여러 나라의 사람 들어와 살고 있다. 코리안 드림을 꿈꾸며... 한 때는 이 나라의 사람들이 아메리칸드림을 꿈꾸며, 미국으로 떠났던 것처럼... 그래서 이번에는 다국적 언어를 이용한 채팅앱을 하나 만들어 볼까 한다.
잘 될지는 모르겠지만, 그러면서 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 을 활용할 생각이다.
