회원 아이디 정보를 토큰에 숨겨놓았다고 하여 디코딩을 해보았다. header, payload, signature 세 가지로 분리가 가능하며, 필요한 정보는 payload에 숨겨져 있다.

    /**
     * [응답 예시]
     * header: {"alg":"HS256"}
     * payload: {"sub":"65","iat":1722328823,"exp":1724920823}
     * signature: �p�]��4��U�(��X�|��i�D�vH
     */

    fun getTokenPayload(token: String): String {
        val tokenParts = token.split(".")

        val decoder = Base64.getUrlDecoder()

        val header = String(decoder.decode(tokenParts[0]))
        val payload = String(decoder.decode(tokenParts[1]))
        val signature = String(decoder.decode(tokenParts[2]))

        LogUtil.d_dev("[JwtDecodingUtil] header: $header")
        LogUtil.d_dev("[JwtDecodingUtil] payload: $payload")
        LogUtil.d_dev("[JwtDecodingUtil] signature: $signature")

        return payload
    }

json 파싱하기

payload에 숨겨진 멤버 정보를 data class로 파싱하여 뽑아쓴다. 나는 멤버 아이디를 정수로 변환하는 코드를 짰다.

object GetMemberIdExtension {

    fun String.getMemberId(): Int? {
        return try {
            val memberId = Gson().fromJson(this, MemberId::class.java)
            memberId.sub.toInt()
        } catch (e: JsonSyntaxException) {
            LogUtil.e_dev("JsonSyntaxException: ${e.localizedMessage}")
            null
        } catch (e: NumberFormatException) {
            LogUtil.e_dev("NumberFormatException: ${e.localizedMessage}")
            null
        }
    }

    data class MemberId(
        val sub: String,
        val iat: Long,
        val exp: Long
    )
}

오랜만에 컴포즈로 탭 레이아웃을 짤 일이 있어서 구글링해서 자료를 보는데, 너무나 익숙한 코드여서 계속 보다보니 내가 3년 전에 쓴 글이었다ㅋㅋ

그 사이 컴포즈 버전도 많이 올라오고머테리얼3 버전을 쓰다보니 업데이트를 할 필요가 있어보여서 새로운 글을 쓴다.

컴포즈 TabRow + HorizontalPager

우선 TabRow 에는 두 종류가 있는데 아이콘이 있는 것과 없는 것. 그리고 세부적으로 좌우 스크롤이 되는 것과 그렇지 않은 것에 따라 총 다섯가지로 확인된다.

지금 할 것은 픽스된 사이즈 안에서 아이콘 없이 텍스트로만 표현하는 탭 로우 (SecondaryTabRow), 좌우 페이저(HorizontalPager)를 결합하여 만들 것이다.

라이브러리

libs.versions.toml

[versions]
composeBom = "2024.04.01"
material = "1.12.0"

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3" }

build.gradle.kts

     implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.material3)

코딩

1. rememberPagerState 를 통해 초기화 값을 세팅 해주고 seletedTabIndex 를 설정해주면 탭 UI가 만들어진다.

2. 탭을 클릭했을 때 화면을 이동하기 위해 Tab의 onClick 메소드 안에 [animate]scrollToPage(index) 를 넣어준다. (코루틴 안에서 동작하기 떄문에 코루틴 스코프를 넣어 주었다)

3. HorizontalPager에 PagerState를 넣어주면 탭뷰와 결합이 되어 선택된 탭에 따라 화면이 좌우로 스크롤 된다. 만약 스와이프를 막고 싶다면 userScrollEnabled = false 로 설정하면 된다. (기본값은 true) content() 라고 쓰여있는 부분은 선택된 인덱스에 다라 컴포저블을 넣어주면 된다.

4. 그 외 컬러값이나 디자인은 알아서..

    val coroutineScope = rememberCoroutineScope()

    val tabs = listOf("대시보드", "고장이력", "게시판")
    val pagerState = rememberPagerState(
        pageCount = { tabs.size },
        initialPageOffsetFraction = 0f,
        initialPage = 0,
    )
    val tabIndex = pagerState.currentPage

    SecondaryTabRow(
        selectedTabIndex = tabIndex
    ) {
        tabs.forEachIndexed { index, value ->
            Tab(selected = tabIndex == index,
                onClick = {
                    coroutineScope.launch {
                        pagerState.animateScrollToPage(index)
                    }
                }
            ) {
                Text(text = "value")
            }
        }
    }

    HorizontalPager(state = pagerState, userScrollEnabled = true) {
        content()
    }

그런데도 계속 해당 브랜치 때문에 에러가 나서 다른 사람들이 pull 을 받을 수 없는 상황이었다

git branch -r 명령으로 조회해도 분명 없는 브랜치인데 왜 그러지.. 했으나 git remote show origin 로 조회하니 나오더라.. 무사히 해당 브랜치를 삭제하고 해피엔딩^ㅡ^

error log

git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks fetch --tags origin
error: cannot lock ref 'refs/remotes/origin/develops/drivingReport': 'refs/remotes/origin/develops' exists; cannot create 'refs/remotes/origin/develops/drivingReport'
From https://git-codecommit.ap-northeast-2.amazonaws.com/
 ! [new branch]        develops/drivingReport -> origin/develops/drivingReport  (unable to update local ref)
error: some local refs could not be updated; try running
 'git remote prune origin' to remove any old, conflicting branches

1. remote branch 확인

git remote show origin

조회 시 나타나는 목록

* remote origin
  Fetch URL: https://
  Push  URL: https://
  HEAD branch: main
  Remote branches:
    autocard_garage_devlops                          tracked
    develops                                         tracked
    develops/drivingReport                           new (next fetch will store in remotes/origin)
    main                                             tracked
    service_multi_file                               tracked
  Local branches configured for 'git pull':
...

3. branch 삭제

git push origin --delete develops/drivingReport

Flow는 코루틴을 기반으로 빌드되며 비동기로 계산되는 데이터 스트림이다. 데이터베이스에서 실시간 업데이트를 수신할 수 있다.

리액티브 프로그래밍과 데이터 스트림

리액티브 프로그래밍이란 데이터가 변경될 때 이벤트를 발생시켜 데이터를 계속해서 전달하도록 하는 프로그래밍 방식이다. 리액티브 프로그래밍에는 하나의 데이터를 발행하는 생산자가 있고 그 생산자가 데이터 소비자에게 지속적으로 데이터를 전달하는데, 이 것이 데이터 스트림의 요소이다.

• 생산자는 스트림에 추가되는 데이터를 생산합니다. 코루틴 덕분에 흐름에서 비동기적으로 데이터가 생산될 수도 있다.
• (선택사항) 중개자는 스트림에 내보내는 각각의 값이나 스트림 자체를 수정할 수 있다.
• 소비자는 스트림의 값을 사용한다.

예시

flow 블럭 내에서 emit() 함수를 사용하여 수동으로 데이터 스트림에 값을 내보낸다. (생산자 역할) 생산자는 suspend 함수인 fetchLatestNews() 의 네트워크 요청이 완료될 때까지 정지상태로 유지된다.

class NewsRemoteDataSource(
    private val newsApi: NewsApi,
    private val refreshIntervalMs: Long = 5000
) {
    val latestNews: Flow<List<ArticleHeadline>> = flow {
        while(true) {
            val latestNews = newsApi.fetchLatestNews()
            emit(latestNews) // Emits the result of the request to the flow
            delay(refreshIntervalMs) // Suspends the coroutine for some time
        }
    }
}

// Interface that provides a way to make network requests with suspend functions
interface NewsApi {
    suspend fun fetchLatestNews(): List<ArticleHeadline>
}

데이터 스트림의 모든 값을 가져올 때 collect 를 사용한다.(소비자 역할) 코루틴 내에서 실행하야 하며 collect를 호출하는 코루틴은 데이터 스트림이 종료될 때까지 정지될 수 있다.

class LatestNewsViewModel(
    private val newsRepository: NewsRepository
) : ViewModel() {

    init {
        viewModelScope.launch {
            // Trigger the flow and consume its elements using collect
            newsRepository.favoriteLatestNews.collect { favoriteNews ->
                // Update View with the latest favorite news
            }
        }
    }
}

비동기 프로그래밍을 하기 위해 코틀린에서 지원하는 라이브러리. 단일 스레드에서 많은 작업이 가능하여 메모리를 절약하고 스레드를 더 잘게 쪼개 사용하기 위한 개념이다.

스레드와 다른 점

코루틴은 작업 하나하나에 Thread 를 할당하는 것이 아닌 'Object' 를 할당해주고, 이 Object 를 자유롭게 스위칭함으로써 메모리와 Context Switching 비용 낭비를 대폭 줄일 수 있다.

예를 들어 Thread A 가 Thread B 의 결과가 나오기까지 기다려야 한다면, Thread A 은 블로킹되어 Thread B 로 Context Switching이 일어나고 결과가 나올 때 까지 해당 자원을 쓰지 못한다.

반면 코루틴에서 Object 1 이 Object 2 의 결과가 나오기까지 기다려야 한다면, Object 1 은 Suspend 되지만, Object 1 을 수행하던 Thread 는 그대로 유효하기 때문에 Object 2 도 Object 1 과 동일한 Thread 에서 실행될 수 있다.

suspend

함수 앞에 suspend 키워드를 붙이면 코루틴 내에서만 사용이 가능하다. 코루틴 내에서 suspend 함수가 호출된 경우 부모 루틴에서 코드를 잠시 멈추어 상태를 저장했다가, suspend 함수의 처리가 완료 되었을 때 부모 루틴이 다시 복원되어 그 다음 코드가 실행된다.

코루틴의 빌더

• launch - 결과를 반환하지 않는 실행 후 망각 코루틴
• async - await()을 통해 코루틴 결과를 기다릴 수 있다.
• withContext - 부모 코루틴과 다른 컨텍스트(스레드)에서 코루틴을 실행 시킬 수 있다.
• runBlocking - 코루틴을 실행하고 완료될 때까지 현재 스레드를 중단시킨다.

Dispatcher

• Main - UI와 상호작용하는 경우
• IO - 디스크 또는 네트워크 작업
• Default - CPU를 많이 사용하는 경우

예시

class LoginRepository(...) {
    ...
    suspend fun makeLoginRequest(
        jsonBody: String
    ): Result<LoginResponse> {

        // Move the execution of the coroutine to the I/O dispatcher
        return withContext(Dispatchers.IO) {
            // Blocking network request code
        }
    }
}

class LoginViewModel(
    private val loginRepository: LoginRepository
): ViewModel() {

    fun login(username: String, token: String) {

        // Create a new coroutine on the UI thread
        viewModelScope.launch {
            val jsonBody = "{ username: \"$username\", token: \"$token\"}"

            // Make the network call and suspend execution until it finishes
            val result = loginRepository.makeLoginRequest(jsonBody)

            // Display result of the network request to the user
            when (result) {
                is Result.Success<LoginResponse> -> // Happy path
                else -> // Show error in UI
            }
        }
    }
}

로그인 함수가 실행되는 과정

• 앱이 기본 스레드의 View 레이어에서 login() 함수를 호출합니다.
• launch가 기본 스레드에 새 코루틴을 만들고 코루틴이 실행을 시작합니다.
• 코루틴 내에서 이제 loginRepository.makeLoginRequest() 호출은 makeLoginRequest()의 withContext 블록 실행이 끝날 때까지 코루틴의 추가 실행을 정지합니다.
• withContext 블록이 완료되면 login()의 코루틴이 네트워크 요청의 결과와 함께 기본 스레드에서 실행을 재개합니다.

참고 : https://developer.android.com/kotlin/coroutines?hl=ko https://velog.io/@haero_kim/Thread-vs-Coroutine-%EB%B9%84%EA%B5%90%ED%95%B4%EB%B3%B4%EA%B8%B0

Thread : 동시 작업을 위한 하나의 실행 단위 Handler : Thread 간의 통신을 하기 위한 클래스

안드로이드의 UI는 Main Thread 라는 하나의 스레드에서 동작한다. 메인 스레드에서 네트워크나 DB 작업 등 무거운 작업을 하게되면 작업이 완료되기 전까지 멈춘 화면이 사용자에게 나타나고, ANR이 나타날 수 있기 때문에 여분의 스레드에서 백그라운드로 긴 작업을 실행한다. 그 과정에서 UI를 변경하려 한다면 Main Thread로 작업을 전달해야 하는데 이때 사용하는 것이 Handler이다.

Handler가 필요한 이유

만약 병렬로 돌아가고 있는 Main Thread와 Sub Thread에서 동일한 TextView에 값을 저장하려 한다면 데드락이 발생하게 된다. 시스템에서 어떤 스레드의 작업을 먼저 처리해야 하는지 모르기 때문에 멈추게 되는 것이다. 이런 동기화 문제를 해결하기 위해 Handler를 통해 Sub Thread에서 Main Thread로 UI 작업을 전달하던지, Main Thread 내에서 자체적으로 처리하도록 해야한다.

Handler의 동작 과정

1. Handler의 sendMessage() 를 통해 다른 Thread의 MessageQueue에 메시지를 전달한다.
2. Looper에서 MessageQueue의 메세지를 핸들러로 전달한다.
3. Handler는 handleMessage()를 통해 메시지를 처리한다.

여기서 Looper는 하나의 스레드만을 담당하며 스레드 또한 하나의 Looper를 갖는다.

예시

Thread 내에서 실행하기 위해 Runnable이라는 인터페이스를 사용한다.

// 메인 스레드에서 실행하기 위한 Looper 추가
val handler = Handler(Looper.getMainLooper())

val runnable = Runnable {
    // TODO
    runOnUiThread {
        // 메인스레드에서 실행하고 싶을 때
    }
}

editText.addTextChangedListener {
    handler.removeCallbacks(runnuable) // 실행했던 함수 지우기
    handler.postDelayed(runnable, 500)
}

이미지 출처 : https://itmining.tistory.com/

홈페이지 번역 관련 작업을 하면서 RTL 언어에 대해 파악할 필요가 있었다. 아래 목록에 있는 12 개의 언어는 RTL을 적용해야 한다.

Right-To-Left Languages

1. Azure에서 서비스 생성하기

• Azure에 ResourceGroup, Workspace 를 먼저 생성한다
• Name을 입력하고 ResourceGroup, Workspace 을 선택하여 Application Insights 를 생성한다
• 생성이 완료되면 Overview 화면 상단에 있는 Instrumentation Key 를 복사한다

2. AppCenter에서 Export 설정하기

• AppCenter의 [Settings - Export - New Export] 메뉴를 통해 Application Insight를 custom 으로 등록한다.
• 위에서 복사한 Instrumentation 키를 붙여넣어 Create를 완료한다.

Application insights Work item integration with GitHub

1. Application Insights Work Items 에서 Template 만들기

• GitHub를 tracking system으로 등록한다.
• Advanced setting을 통해 Assignee, Project, Template, Milestone 등을 지정할 수 있다
• template을 적용 할때는 템플릿의 이름이 아닌 (Bug Report) 실제 파일명을 (bug_report.md) 적어야 한다.

2. 결과 화면

• Template, Assignee, Labels가 잘 적용되었다.
• 그러나 Project 설정은 여러가지 서치와 시도를 해보았으나 아직 적용을 못하였다.

app.gradle

android {
..
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            shrinkResources true
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
..
}

이대로 앱을 release 모드에서 테스트 할 경우 몇 라이브러리에서 난독화로 인한 충돌이 생긴다.

때문에 해당 라이브러리에 대한 예외처리를 proguard-rules.pro 에 작성해 주어야 한다.

> 공식문서 보기

각 라이브러리마다 구글링을 통해 proguard 작성법을 알 수 있다.

• Retrofit
• Azure Communnication

retrofit의 경우 MyApi의 class와 interface, 그리고 enum을 각각 예외 처리한 코드를 추가했다.

그리고 소셜 로그인 시 access token 을 identityToken에 잘 넣어주지 않아 model, utils 패키지를 모두 예외처리 하였다.

proguard-rules-pro

# When minifyEnabled true
# retrofit
-keep class MyApi.models.* { *; }
-keep interface MyApi.apis.* { *; }
-keepclassmembers enum MyApi.models.* { *; }
# model, utils
-keep class com.myapp.model.** { *; }
-keep class com.myapp.utils.** { *; }
-keepclassmembers class com.myapp.model.** { *; }
-keepclassmembers class com.myapp.utils.** { *; }
-keepclassmembers enum * { *; }
# azure call
-keep class com.skype.rt.** {*;}
-keep class com.azure.** {*;}
-keep class com.skype.android.** {*;}
-keep class com.microsoft.media.** {*;}
-keep class com.microsoft.dl.** {*;}
# Retrofit does reflection on generic parameters. InnerClasses is required to use Signature and
# EnclosingMethod is required to use InnerClasses.
-keepattributes Signature, InnerClasses, EnclosingMethod

# Retrofit does reflection on method and parameter annotations.
-keepattributes RuntimeVisibleAnnotations, RuntimeVisibleParameterAnnotations

# Keep annotation default values (e.g., retrofit2.http.Field.encoded).
-keepattributes AnnotationDefault

# Retain service method parameters when optimizing.
-keepclassmembers,allowshrinking,allowobfuscation interface * {
    @retrofit2.http.* <methods>;
}

# Ignore annotation used for build tooling.
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement

# Ignore JSR 305 annotations for embedding nullability information.
-dontwarn javax.annotation.**

# Guarded by a NoClassDefFoundError try/catch and only used when on the classpath.
-dontwarn kotlin.Unit

# Top-level functions that can only be used by Kotlin.
-dontwarn retrofit2.KotlinExtensions
-dontwarn retrofit2.KotlinExtensions.*
#-dontwarn retrofit2.KotlinExtensions$*

# With R8 full mode, it sees no subtypes of Retrofit interfaces since they are created with a Proxy
# and replaces all potential values with null. Explicitly keeping the interfaces prevents this.
-if interface * { @retrofit2.http.* <methods>; }
-keep,allowobfuscation interface <1>

# Keep generic signature of Call, Response (R8 full mode strips signatures from non-kept items).
-keep,allowobfuscation,allowshrinking interface retrofit2.Call
-keep,allowobfuscation,allowshrinking class retrofit2.Response

# With R8 full mode generic signatures are stripped for classes that are not
# kept. Suspend functions are wrapped in continuations where the type argument
# is used.
-keep,allowobfuscation,allowshrinking class kotlin.coroutines.Continuation

1. 다운로드 카운트가 0 이어야 한다.
2. ready 상태가 아니어야 한다.
3. 테스터를 모두 삭제한다.
4. 국가를 모두 삭제한다.
5. 출시 개요 화면에서 (Publish Overview) 변경사항 검토 요청을 클릭한다. (Send for review to submit your changes)
6. 출시 > 설정 > 고급 설정 > 앱 이용 가능 여부 항목에서 (Release > Setup > Advanced settings > App Availability) 출시 안됨 (Unpublish) 을 선택한다

https://support.google.com/googleplay/android-developer/answer/9859654?hl=en

https://support.google.com/googleplay/android-developer/answer/9859350?hl=en#unpublish

1. 장단점

• 설치하고 사용하기 쉽다.
• 화질이 다소 떨어진다.

2. 사용법

Vysor 설치

당신의 OS에 맞는 프로그램을 설치한다.

https://www.vysor.io/download/

실행

프로그램을 실행하고 폰 연결하면 끝!

Scrcpy

1. 장단점

• 맥 유저라면 brew를 먼저 설치해야 한다.

  https://brew.sh/index_ko

• 고화질의 화면이 구현된다.

2. 사용법

Scrcpy 설치

brew install scrcpy

실행

폰을 연결하고 터미널에 명령어를 입력하면 끝!

scrcpy

참조 링크

https://github.com/Genymobile/scrcpy

fun searchAutoComplete(
        searchTerm: String,
        index: String,
        marketingType: MarketingType?,
        consultationEnabled: Boolean?,
        distance: Float?,
        longitude: String?,
        latitude: String?
    ){
        val actionName = "search"
        Log.d("debug", "$actionName $index started.")

        var hospitalFilter = ""
        var doctorFilter = ""
        var dealFilter = ""
        var departmentFilter = ""
        var specialtyFilter = ""

        val locationFilterString = "geo.distance(Location/Point, geography'POINT(${longitude} ${latitude})') le ${distance?.roundToInt()}"

        marketingType?.let {
            if (it.name.equals("both")) {
                consultationEnabled?.let {
                    if(it) {
                        hospitalFilter = "ConsultationEnabled eq $it"
                        doctorFilter = "ConsultationEnabled eq $it"

                        if (distance != null && distance > 0f) {
                            hospitalFilter = hospitalFilter.plus("and $locationFilterString")
                        }
                    } else {
                        if (distance != null && distance > 0f) {
                            hospitalFilter = locationFilterString
                        }
                    }
                }
            } else {
                hospitalFilter = "MarketingType eq '${marketingType.value.replaceFirstChar { it.uppercase() }}'"
                doctorFilter = "Hospital/MarketingType eq '${marketingType.value.replaceFirstChar { it.uppercase() }}'"
                dealFilter = "MarketingType eq '${marketingType.value.replaceFirstChar { it.uppercase() }}'"
                departmentFilter = "MarketingType eq '${marketingType.value.replaceFirstChar { it.uppercase() }}'"
                specialtyFilter = "Department/MarketingType eq '${marketingType.value.replaceFirstChar { it.uppercase() }}'"

                if (distance != null && distance > 0f) {
                    hospitalFilter = hospitalFilter.plus("and $locationFilterString")
                }

                consultationEnabled?.let {
                    if(it) {
                        hospitalFilter = hospitalFilter.plus("and ConsultationEnabled eq $it")
                        doctorFilter = doctorFilter.plus("and ConsultationEnabled eq $it")

                        if (distance != null && distance > 0f) {
                            hospitalFilter = hospitalFilter.plus("and $locationFilterString")
                        }
                    } else {
                        if (distance != null && distance > 0f) {
                            hospitalFilter = locationFilterString
                        }
                    }
                }
            }
        }

        val searchOption = SearchOption(
            search = "Translations/Name: ${searchTerm.trim()}*",
            select = "Id, Translations",
            searchFields = "Translations/Name",
            queryType = "full",
            top = 3)

        when (index) {
            "idx-hospitals-int" -> {
                searchOption.filter = hospitalFilter
                searchHospitals(searchOption, index)
            }
            "idx-doctors-int" -> {
                searchOption.filter = doctorFilter
                searchDoctors(searchOption, index)
            }
            "idx-deals-int" -> {
                searchOption.filter = dealFilter
                searchDeals(searchOption, index)
            }
            "idx-departments-int" -> {
                searchOption.filter = departmentFilter
                searchDepartments(searchOption, index)
            }
            "idx-specialties-int" -> {
                searchOption.filter = specialtyFilter
                searchSpecialties(searchOption, index)
            }
        }
    }

1. Search Client

object SearchClient {
    private val okHttpClientBuilder = OkHttpClient().newBuilder()
        .connectTimeout(30, TimeUnit.SECONDS)
        .readTimeout(30, TimeUnit.SECONDS)
        .writeTimeout(15, TimeUnit.SECONDS)
        .addInterceptor { chain ->
            val request = chain.request().newBuilder()
                .addHeader("Content-Type" ,"application/json")
                .addHeader("api-key", "YOUR_KEY")
            chain.proceed(request.build())
        }
        .build()

    private val moshi = Moshi.Builder()
        .add(KotlinJsonAdapterFactory())
        .add(OffsetDateTimeAdapter())
        .build()

    var retrofit = Retrofit.Builder()
        .baseUrl("https://YOUR_SERVICE_NAME.search.windows.net")
        .client(okHttpClientBuilder)
        .addConverterFactory(MoshiConverterFactory.create(moshi))
        .build()
}

2. Search Api

interface SearchApi {
    @POST("indexes/{index}/docs/search?api-version=2021-04-30-Preview")
    suspend fun searchHospitals(@Body body: SearchOption, @Path("index") index: String): Response<SearchHospitalResult>

    @POST("indexes/{index}/docs/search?api-version=2021-04-30-Preview")
    suspend fun searchDoctors(@Body body: SearchOption, @Path("index") index: String): Response<SearchDoctorResult>

    @POST("indexes/{index}/docs/search?api-version=2021-04-30-Preview")
    suspend fun searchDeals(@Body body: SearchOption, @Path("index") index: String): Response<SearchDealResult>

    @POST("indexes/{index}/docs/search?api-version=2021-04-30-Preview")
    suspend fun searchDepartments(@Body body: SearchOption, @Path("index") index: String): Response<SearchDepartmentResult>

    @POST("indexes/{index}/docs/search?api-version=2021-04-30-Preview")
    suspend fun searchSpecialties(@Body body: SearchOption, @Path("index") index: String): Response<SearchSpecialtyResult>
}

3. Search ViewModel

    private val searchApi = SearchClient.retrofit.create(SearchApi::class.java)

    fun searchAutoComplete(searchTerm: String, index: String, page: Int = 1, limit: Int = 20){
        val searchOption = SearchOption(
            search = "$searchTerm*",
            queryType = "full",
            searchFields = "Translations/Name",
            skip = limit.times(page.minus(1)), // pagination
            top = 3) // limit

        when (index) {
            "idx-hospitals-int" -> {
                searchHospitals(searchOption, index, page)
            }
            "idx-doctors-int" -> {
                searchDoctors(searchOption, index, page)
            }
            "idx-deals-int" -> {
                searchDeals(searchOption, index, page)
            }
            "idx-departments-int" -> {
                searchDepartments(searchOption, index, page)
            }
            "idx-specialties-int" -> {
                searchSpecialties(searchOption, index, page)
            }
        }
    }

    private fun searchHospitals(searchOption: SearchOption, index: String, page: Int = 1) {
        val actionName = "searchHospitals"

        viewModelScope.launch(Dispatchers.Main) {
            val result = searchApi.searchHospitals(searchOption, index)
            try {
                if (result.isSuccessful) {
                    if (result.code() == 200) {
                        result.body()?.let { data ->
                            _hospitals.postValue(data.value)
                        }
                    }
                } else {
                    Log.d("debug", "$actionName failed")
                }
            } catch (e: Exception) {
                Log.d("debug", "$actionName failed: ${e.message}")
            }
        }
    }

4. Result

appCompat 최신 버전에서 onActivityResult 가 deprecate 되어 Compose 에서 rememberLauncherForActivityResult() 라는 메소드를 사용하게 되었다.

2. 사용법

Compose 에서 rememberLauncherForActivityResult() Kotlin 에서 registerForActivityResult() Composable과 Activity에서 각각 다른 메소드를 쓸 뿐, 역할은 같다. MainActivity 에서 SigninActivity 의 intent 값을 가져와 resultCode가 "OK" 일 때 로직을 실행하는 예시이다.

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CloudhospitalTheme {
                MainContent(authorizationViewModel) {
                    signIn()
                }
            }
        }
}

fun signIn() {
    signInResult.launch(Intent(this, SigninActivity::class.java))
}


private val signInResult = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()
    ) { result ->
        if (result.resultCode == RESULT_OK) {
            result.data.let { data ->
                if (data != null) {

                    // TODO
                }
            }
        }
    }

Mypage()

@Composable
fun MyPage(
    signIn: () -> Unit
) {
    Button(onClick = { signIn() }) {
        Text("Login")
    }
}

SigninActivity를 MainActivity가 아닌 상속된 Composable에서 launch 하기 위해 작성된 코드이다. MyPage Composable에서 버튼 클릭시 signInActivity를 launch 한다.

SigninActivity.kt

 authenticationViewModel.signedIn.observe(this, { signedIn ->
            if (signedIn == true){
                val returnIntent = Intent()
                returnIntent.putExtra("signInResult", signedIn)
                setResult(Activity.RESULT_OK, returnIntent)

                finish()
            }
        })

3. 주의 사항

컴포저블 내에서 요청을 시작하려고 하면 그 시점에 ActivityResultLauncher가 아직 초기화되지 않았기 때문에 런타임 오류가 발생합니다. 구성 이후 실행을 트리거해야 하는 경우 LaunchedEffect 블록 또는 DisposableEffect 블록에서 launch() 메서드를 호출해야 합니다.

MaterialDatePicker 의 setCalendarConstraints() 메소드

MaterialDatePicker.Builder.datePicker().setCalendarConstraints([CalendarConstraints])

CalendarConstraints 의 setValidator() 메소드를 사용한다.

CalendarConstrains.Builder().setValidator([DateValidator]).build()

Set max date

DateValidatorPointBackward

CalendarConstraints.Builder()
    .setValidator(DateValidatorPointBackward.now()).build()

Set min date

DateValidatorPointForward

CalendarConstraints.Builder()
            .setValidator(DateValidatorPointForward.now()).build()

Set max month

달력의 최대값을(month 단위) 설정해 달력이 다음 달로 넘어가지 않도록 해준다. CalendarConstraints.Builder.setEnd()

val calendar = Calendar.getInstance()
val presentMonth = calendar.timeInMillis

CalendarConstraints.Builder().setEnd(presentMonth)

Set min month

달력의 최소값을(month 단위) 설정해 달력이 이전 달로 넘어가지 않도록 해준다. CalendarConstraints.Builder.setStart()

val calendar = Calendar.getInstance()
val presentMonth = calendar.timeInMillis

CalendarConstraints.Builder().setStart(presentMonth)

최종 코드

private fun showDatePicker(
    activity : AppCompatActivity,
    date: LocalDateTime?,
    isBirthDay: Boolean,
    updatedDate: (LocalDateTime) -> Unit)
{
    val selection = date?.atZone(ZoneId.of("UTC"))
    val selectionMs = selection?.toInstant()?.toEpochMilli()

    val calendar = Calendar.getInstance()
    val presentMonth = calendar.timeInMillis
    val upTo = calendar.timeInMillis.plus(172800000) //min date 설정. 오늘포함 3일 이후로 날짜 선택 가능

    val constraints: CalendarConstraints = if (isBirthDay) {
        // set max month and date
        CalendarConstraints.Builder().setEnd(presentMonth)
            .setValidator(DateValidatorPointBackward.now()).build()
    } else {
        // set min month and date
        CalendarConstraints.Builder().setStart(presentMonth)
            .setValidator(DateValidatorPointForward.from(upTo)).build()
    }

    val picker = MaterialDatePicker.Builder.datePicker()
        .setCalendarConstraints(constraints)
        .setSelection(selectionMs)
        .build()
    picker.show(activity.supportFragmentManager, "picker")
    picker.addOnPositiveButtonClickListener {
        val date = LocalDateTime.ofInstant(
            Instant.ofEpochMilli(it), ZoneId.of("UTC")
        )
        updatedDate(date)
    }
}

implementation("com.google.accompanist:accompanist-coil:0.15.0")

사용하기

rememberImagePainter()

implementation "com.google.accompanist:accompanist-pager:0.12.0"

Tab Layout + View Pager

@OptIn(ExperimentalPagerApi::class)
@Composable
fun Procedures(slug: String){
    val tabData = listOf(
        Procedure.treatment.value,
        Procedure.diagnostic.value
    )
    val pagerState = rememberPagerState(
        pageCount = tabData.size,
        initialOffscreenLimit = 2,
        infiniteLoop = true,
        initialPage = 0,
    )
    val tabIndex = pagerState.currentPage
    val coroutineScope = rememberCoroutineScope()

    // TAB
    TabRow(selectedTabIndex = tabIndex,
        modifier = Modifier.padding(top = 20.dp)) {
        tabData.forEachIndexed { index, text ->
            Tab(selected = tabIndex == index, onClick = {
                coroutineScope.launch {
                    pagerState.animateScrollToPage(index)
                }
            }, text = {
                Text(text = text)
            })
        }
    }

    // PAGER
    HorizontalPager(
        state = pagerState
    ) { index ->
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            if (tabData[index] == Procedure.treatment.value) {
                Services(Procedure.treatment, slug)
            } else {
                Services(Procedure.diagnostic, slug)
            }
        }
    }
}

@Composable
fun Services(procedure: Procedure, slug: String) {
    val viewModel: ProcedureVM = viewModel()
    val services = viewModel.services.observeAsState().value
    val loadingState = viewModel.loading.observeAsState().value

    LaunchedEffect("GET_HOSPITALS_SERVICES") {
        viewModel.fetchHospitalService(procedure, slug, 20)
    }

    if (loadingState == true) {
        LoadingBar()
    } else {
        services?.items?.let { services ->
            Column(Modifier.fillMaxWidth()) {
                services.forEach { service ->
                    Row(horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.fillMaxWidth().padding(vertical = 5.dp)
                    ) {
                        Text(text = service.name!!, modifier = Modifier.width(200.dp), maxLines = 2)
                        Text(text = price(service), color = MaterialTheme.colors.primaryVariant)
                    }
                }
            }
        }
    }
}

SpaceBetween 잠깐 팁. Row()에서 horizontalArrangement 를 적용하기 위해서는 부모의 width 값이 fillMaxWidth() 여야 한다.

참고 https://levelup.gitconnected.com/implement-tablayout-with-viewpager-in-android-jetpack-compose-d509fc6e2d8e

메모리에 로컬 상태를 저장한다

mutableStateOf()

mutableStateOf() 에 전달된 값이 업데이트 될 때마다 이 state를 사용하는 컴포저블과 하위 요소는 재구성(recomposition) 한다.

활용하기

장문의 텍스트를 ellipsis로 숨겼다가 보여주는 토글 버튼 만들기. boolean 값의 mutableState로 See More / See Less 토글 텍스트 컴포넌트를 만들었다.

@Composable
fun ToggleText(string: String) {
    var seeMore by remember { mutableStateOf(true) }

    Text(
        text = string,
        style = MaterialTheme.typography.body2,
        maxLines = if (seeMore) 5 else Int.MAX_VALUE,
        overflow = TextOverflow.Ellipsis
    )
    val textButton = if (seeMore) {
        stringResource(id = R.string.see_more)
    } else {
        stringResource(id = R.string.see_less)
    }
    Text(
        text = textButton,
        style = MaterialTheme.typography.button,
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primaryVariant,
        modifier = Modifier
            .heightIn(20.dp)
            .fillMaxWidth()
            .padding(top = 15.dp)
            .clickable {
                seeMore = !seeMore
            }
    )
}

implementation 'androidx.navigation:navigation-compose:2.4.0-alpha08'

사용하기

1. NavHost

composable() 메소드로 시작 경로와 라우트를 정의한다.

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "home") {
    composable(route = "home") { Home() }
    composable(route = "search") { Search() }
}

2. Button Link

@Composable
fun Home(navController: NavController) {
    Button(onClick = { navController.navigate("search") }) {
        Text(text = "Click")
    } 
}

3. With Argument

'slug' 라는 string 타입의 argument 를 사용하여 HomeDetail로 이동하는 예제

NavHost(startDestination = "home/{slug}") {
    composable(
        "home/{slug}",
        arguments = listOf(navArgument("slug") { type = NavType.StringType })
    ) { backStackEntry ->
        val slug = requireNotNull(backStackEntry.arguments).getString("slug")
        HomeDetail(navController, slug)
    }
}

4. Nested Navigation

BottomBar() 의 네비게이션과 상세 화면으로 이동하기 위한 예제. 네비게이션 규모가 커질수록 NavGraphBuilder() 로 중첩 네비게이션을 쓰는게 좋다.

sealed class 만들기

sealed class NavItem(
    @StringRes val title: Int,
    val icon: ImageVector,
    val route: String
){
    object Hospital : NavItem(R.string.nav_hospital, Icons.Filled.LocalHospital, "hospital")
    object Article : NavItem(R.string.nav_article, Icons.Filled.Article, "article")
}

addHomeGraph

fun NavGraphBuilder.addHomeGraph(
    navController: NavHostController,
    onClickHospital: (String, NavBackStackEntry) -> Unit,
    onClickArticle: (String, NavBackStackEntry) -> Unit
) {
    composable(NavItem.Hospital.route) {
        Hospitals(navController, onClick = { slug ->
            onClickHospital(slug, it)
        })
    }
    composable(NavItem.Article.route) {
        Article(navController, onClick = { slug ->
            onClickArticle(slug, it)
        })
    }
}

mainNavGraph

fun NavGraphBuilder.mainNavGraph(
    navController: NavHostController,
    onClickHospital: (String, NavBackStackEntry) -> Unit,
    onClickArticle: (String, NavBackStackEntry) -> Unit
) {
    navigation(
        route = "home",
        startDestination = NavItem.Hospital.route
    ) {
        addHomeGraph(navController, onClickHospital, onClickDoctor, onClickDeal, onClickArticle)
    }

    composable(
        "hospital_detail/{slug}",
        arguments = listOf(navArgument("slug") { type = NavType.StringType })
    ) { backStackEntry ->
        val slug = requireNotNull(backStackEntry.arguments).getString("slug")
        HospitalDetail(navController, slug)
    }

    composable(
        "article_detail/{slug}",
        arguments = listOf(navArgument("slug") { type = NavType.StringType })
    ) { backStackEntry ->
        val slug = requireNotNull(backStackEntry.arguments).getString("slug")
        ArticleDetail(navController, slug)
    }
}

View

@Composable
fun MainContent() {
    val navController = rememberNavController()
    val navBackStackEntry by appState.navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast("/")

    Scaffold(
        topBar = { TopBar(navController) },
        bottomBar = { BottomBar(navController) },
        floatingActionButton = { FloatingChatButton() }
    ) {
        NavHost(navController = navController, startDestination = "home") {
            mainNavGraph(
                navController = navController,
                onClickHospital = {navController.navigate("hospital_detail/$slug")},
                onClickArticle = {navController.navigate("article_detail/$slug")}
            )
        }
    }
}

Detail Page

@Composable
fun HospitalDetail(
    navController: NavHostController, slug: String
) {
    val viewModel: HospitalVM = viewModel()
    val hospital = viewModel.hospital.observeAsState().value
    val loadingState = viewModel.loading.observeAsState().value

    LaunchedEffect(key1 = "GET_HOSPITAL_DETAIL") {
        slug?.let {
            viewModel.fetchHospitalItem(slug)
        }
    }

    if (loadingState == true) {
        LoadingBar()
    } else {
        hospital?.let {
            HospitalDetailView(hospital)
        }
    }
}

참고 https://developer.android.com/jetpack/compose/navigation#bottom-nav https://github.com/android/compose-samples/tree/main/Jetsnack

Library 적용

build.gradle[app] 에 runtime-livedata 추가

implementation "androidx.compose.runtime:runtime-livedata:$compose_version"

사용하기

ViewModel

private val _myModels = MutableLiveData<MyViewModel>()
val myModels: LiveData<MyViewModel> = _deal

View

observableAsState() 로 state 를 관찰하여 가져온다.

private val viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        ComposableTheme {
            val myModels = viewModel.myModels.obverseAsState().value ?: emptyList()
            val clickedModel = viewModel.clickedModel.observeAsState().value
        }
    }
}

Flow

사용하기

ViewModel

val pager: Flow<PagingData<MyDocument>> = Pager(PagingConfig(pageSize = 20)) {
    MySource(MyRepository())
}.flow.cachedIn(viewModelScope)

스크롤의 상태를 저장하고 싶다면 cachedIn() 을 쓴다.

View

loadState에 따라 화면을 다르게 구현한다.

import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.items

@Composable
fun MessageList(myViewModel: MyViewModel) {
    val pager = myViewModel.pager
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
          items = lazyPagingItems,
          // The key is important so the Lazy list can remember your
          // scroll position when more items are fetched!
          key = { message -> message.id }
        ) { message ->
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }

        pager.apply {
            loadState.refresh is LoadState.Loading -> {
                item { LoadingBar() }
            }
            loadState.append is LoadState.Loading -> {
                item { LoadingItem() }
            }
            loadState.refresh is LoadState.Error -> {
                val e = pager.loadState.refresh as LoadState.Error
                item {
                    ErrorItem(
                        message = e.error.localizedMessage ?: "Error!",
                        modifier = Modifier.fillParentMaxSize(),
                        onClickRetry = { retry() }
                    )
                }
            }
            loadState.append is LoadState.Error -> {
                val e = pager.loadState.append as LoadState.Error
                item {
                    ErrorItem(
                        message = e.error.localizedMessage ?: "Error!",
                        onClickRetry = { retry() }
                    )
                }
            }
            loadState.refresh is LoadState.NotLoading && loadState.append.endOfPaginationReached -> {
                if (this.itemCount == 0) {
                    item {
                        NoLoadData()
                    }
                }
            }
        }
    }
}

마무리

여러 아티클을 읽다보면 안드로이드에 종속적인 liveData 보다, 코틀린 순수 라이브러리인 stateFlow가 더 좋다고 말하고 있다. liveData가 장기적으로 봤을 때 deprecated 되는 것이 아니냐는 소문까지 돌고 있다고..

우선 이런 의견이 있구나, 참고만 하자.