Unit 5: Get data from the internet (1)

📚 Retrofit 사용하여 웹 서버에서 데이터 가져오기

Unit 5: 인터넷에서 Retrofit Library를 활용하여 Image를 가져오는 실습을 합니다.

1. web service를 위한 URL을 상수로 추가

private const val BASE_URL =
    "https://android-kotlin-fun-mars-server.appspot.com"

2. Retrofit 빌더 추가
   Retrofit은 converter factory가 있어야 웹 서비스 API를 빌드할 수 있습니다. converter은 데이터를 가져와 Retrofit에게 data로 해야하는 것을 알려줍니다. 이번 앱에서는 JSON을 String으로 바꿔야하기 때문에 ScalarsConverter라는 Converter를 사용합니다.

private val retrofit = Retrofit.Builder().addConverterFactory(ScalarsConverterFactory.create())

3. baseURL을 추가해주며, build()를 통해 retrofit을 빌드

private val retrofit =
    Retrofit.Builder().addConverterFactory(ScalarsConverterFactory.create()).baseUrl(
        BASE_URL
    ).build()

4. retrofit이 http를 사용해 웹 서버와 통신할 interface를 선언

interface MarsApiService {
    fun getPhotos() : String
}

5. @Get("photos") Retroft에게 Get요청임을 알리고 기본 URL의 엔드포인트에 "photos"를 추가해 원하는 완벽한 URL을 만듬

interface MarsApiService {
    @GET("photos")
    fun getPhotos() : String
}

❗️싱글톤 선언은 인스턴스가 하나만 생성되는 것을 보장해주며 이 객체는 하나의 전역 포인터를 갖습니다. 객체 초기화는 스레드 안전을 보장받으며 access시 실행됩니다. 이 앱에서 Retrofit 인스턴스는 하나만 필요하므로 싱글톤을 통해 생성합니다.

6. retrofit의 create()는 리소스를 많이 소비하는 작업이므로 싱클톤으로 선언

object MarsApi {
    val retrofitService: MarsApiService by lazy {
        retrofit.create(MarsApiService::class.java)
    }
}

❗️ViewModelScope
viewModelScope은 앱의 각 ViewModel을 대상으로 정의된 기본 제공 코루틴 범위입니다. 이 범위에서 실행된 모든 코루틴은 ViewModel이 삭제되면 자동으로 취소됩니다.

7. getPhotos()를 suspend funtion으로 만들어 비동기처리

interface MarsApiService {
    @GET("photos")
    suspend fun getPhotos(): String
}

8. viewModel에서 viewModelScope를 사용해 앞서 만들었던 서버에서 데이터를 가져오는 함수를 코루틴으로 실행함

fun getMarsPhotos() {
        viewModelScope.launch {
            val listResult = MarsApi.retrofitService.getPhotos()
            marsUiState = listResult
        }
    }

그럼 다음과 같이 서버로부터 Json형태로 정보를 받아올 수 있게 됩니다.

하지만 만약 사용자가 데이터를 끄고 앱을 실행한다면 앱이 곧바로 종료되는 버그가 남아있습니다.우리는 이러한 상황을 해결할 순 없지만 최대한 사용자 친화적이게 앱이 실행되지 않는 이유를 예외처리를 사용해 보여준다면 좋습니다.

서버에 연결하는 동안 발생할 수 있는 예외는 다음과 같습니다.

• API에 사용된 URL 또는 URI가 잘못됨
• 서버를 사용할 수 없어 앱을 서버에 연결할 수 없음
• 네트워크 지연 문제가 있음
• 기기의 인터넷 연결이 불안정하거나 기기가 인터넷에 연결되지 않음

9. 다음과 같이 예외가 나올 수 있는 부분을 try-catch문으로 처리해줍니다.

viewModelScope.launch {
   try {
       val listResult = MarsApi.retrofitService.getPhotos()
       marsUiState = listResult
   } catch (e: IOException) {

   }
}

📚 State UI 추가하기

아직 이 앱에서는 서버로 데이터를 요청할 때 요청 상태를 보여주지 못합니다.

• Loading 상태는 앱이 데이터를 기다리고 있음을 나타냅니다.
• Success 상태는 웹 서비스에서 데이터를 성공적으로 가져왔음을 나타냅니다.
• Error 상태는 네트워크 오류 또는 연결 오류를 나타냅니다.

10. uiState는 위와 같은 상태만 보여주면 되므로 sealed interface를 사용해 uiState의 범위를 제한

sealed interface MarsUiState {
    data class Success(val photos: String) : MarsUiState
    object Error : MarsUiState
    object Loading : MarsUiState
}

    var marsUiState: MarsUiState by mutableStateOf(MarsUiState.Loading)
        private set

11. try-catch문에서 성공시 Success를 실패시 Error를 넣기

private fun getMarsPhotos() {
   viewModelScope.launch {
       marsUiState = try {
           val listResult = MarsApi.retrofitService.getPhotos()
           MarsUiState.Success(listResult)
       } catch (e: IOException) {
           MarsUiState.Error
       }
   }
}

12. uiState의 상태에 따라 화면에 무엇을 그려줄지 선택

fun HomeScreen(
   marsUiState: MarsUiState,
   modifier: Modifier = Modifier
) {
    when (marsUiState) {
        is MarsUiState.Loading -> LoadingScreen(modifier)
        is MarsUiState.Success -> ResultScreen(marsUiState.photos, modifier)
        is MarsUiState.Error -> ErrorScreen(modifier)
    }
}

-실패 화면- -로딩 화면- -성공 화면-

📚 Serialization사용하여 Json을 Kotlin 객체로 변환

13. Json을 Kotlin 객체로 바꾸기 위해 Data Class 만들기

@Serializable
data class MarsPhoto(
    val id: String,  val img_src: String
)

❗️ @SerialName 어노테이션 : Json의 Key이름이 Kotlin 객체의 매개변수들의 이름과 같아야 각각에 맞게 파싱이 됩니다. 하지만 Json는 변수명을 스네이크 표기법으로 하는데 Kotlin의 경우 Camel 표기법을 사용합니다. Kotlin 객체가 무조건적으로 Json의 Key이름을 따라한다면 Kotlin의 속성을 어지럽게 하거나 권장 속성을 벗어날 수 있어 @SerialName 어노테이션을 사용하여 Json의 Key이름과 Kotlin 객체의 변수명을 맵핑할 수 있습니다.

14. Json의 Key 맵핑

@Serializable
data class MarsPhoto(
    val id: String,
    @SerialName(value = "img_src")
    val imgSrc: String
)