[Android, Kotlin] compose에서 api 통신하기

 

이전 포스팅의 연장선입니다.

https://rkdrkd-history.tistory.com/55

[Android, Kotlin] Android clean architecture 프로젝트에서 api 에러 핸들링하기

 

이전 포스팅에서 clean architecture 관점에서 api error handling 방법을 공부해 봤는데,

이번 글에서는 지난 글의 연장선인 clean architecture 관점에서 compose로 api 통신법을 적어보겠다.

사실 한 포스팅에 모두 담을 생각이었지만, 주제 차이도 있고 글이 너무 길어질 듯해서 두 개로 나눈 점 이해해 주시길 xD

 

1. viewModel parameter 생성

compose에서 viewmodel을 사용하려면 screen 함수에 viewmodel 파라미터를 만들어서 초기화 후 사용해 주면 된다.

@Composable
fun MainScreen(
    twitchAuthViewModel: TwitchAuthViewModel = hiltViewModel()
) {
	. . . 
}

현재 clean architecture로 개발을 하고 있고, 의존성 주입 라이브러리는 hilt를 사용 중이기에 hiltViewModel()을 사용해 주었다.

hiltViewModel은 navigation compose library를 추가해서 사용할 수 있다.

"androidx.navigation:navigation-compose:2.6.0"	// 2023-08-01 기준

이제 생성한 hiltViewModel을 이용해 api 호출 작업을 수행해 보겠다.

 

다음 코드는 mainScreen 전체 코드이다

@Composable
fun MainScreen(
    twitchAuthViewModel: TwitchAuthViewModel = hiltViewModel()
) {
    LaunchedEffect(Unit) {
        twitchAuthViewModel.getOAuthToken(
            clientId = BuildConfig.CLIENT_ID,
            clientSecret = BuildConfig.CLIENT_SECRET,
            grantType = "client_credentials"
        )
    }
    val oAuthToken by twitchAuthViewModel.oAuth.observeAsState()

    Column(modifier = Modifier.fillMaxSize()) {
        when (val data = oAuthToken) {
            ApiState.Loading -> {}
            is ApiState.Success -> {
                Text(text = "accessToken: ${data.data?.accessToken}")
                Text(text = "tokenType: ${data.data?.tokenType}")
                Text(text = "expiresIn: ${data.data?.expiresIn}")
            }
            ApiState.BadRequest -> Text(text = "bad request")
            ApiState.Forbidden -> Text(text = "forbidden")
            ApiState.TimeOut -> Text(text = "time out")
            ApiState.Server -> Text(text = "server error")
            ApiState.Unknown -> Text(text = "unknown")
            else -> Text(text = "else")
        }
    }
}

launchedEffect(Unit)를 이용해 api 로직이 한 번만 수행되게 하였다.

그리고 observeAsState를 이용해 twitchAuthViewModel.oAuth을 observing 하면서도 state를 가져와 사용할 수 있게 하였다.

when을 이용해 ApiState 상태에 따라 다른 로직이 호출되게 하였다.

 

2. 수행 결과

api 호출이 정상적으로 된 것을 확인할 수 있다.

 

정리

---

compose로 api 통신을 공부해 봤는데 observing 하면서 data state를 쓸 수 있다는 점이 편리한 것 같았다.

그러나 나중에 사용할 api가 많아지면, when 문이 많아져 코드가 더러워질 것 같아서 해결할 방법을 생각해봐야 할 것 같다.

 

참고

https://arca.live/b/twitchdev/44459710

* 트위치 API 가이드 * - 트위치개발 채널