🌞android compose에서 날씨 api를 연동해보자!

1.JSON response의 Data Class를 정의해준다.
2. Retrofit interface를 만든다 : @Query의 용도
3. Retrofit 객체를 얻기 위한 파일
4. 레트로핏 객체와 레트로핏 인터페이스를 연결해준다.
5. Repository 생성해주기
6. ViewModel 구현하기
7. Composabe UI 만들어주기 : rememberUpdatedState
같이 보면 좋은 자료

android compose에서 날씨 api를 연동하는 과정을 기록해보았다.

1.JSON response의 Data Class를 정의해준다.

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <header>
        <resultCode>0</resultCode>
        <resultMsg>NORMAL_SERVICE</resultMsg>
    </header>
    <body>
        <dataType>XML</dataType>
        <items>
            <item>
                <baseDate>20210628</baseDate>
                <baseTime>0500</baseTime>
                <category>TMP</category>
                <fcstDate>20210628</fcstDate>
                <fcstTime>0600</fcstTime>
                <fcstValue>21</fcstValue>
                <nx>55</nx>
                <ny>127</ny>
            </item>
        </items>
        <numOfRows>10</numOfRows>
        <pageNo>1</pageNo>
        <totalCount>742</totalCount>
    </body>
</response>

날씨 데이터의 response는 위와 같았다. 따라서 이를 위해 아래와 같이 dataClass를 정의해주었다.

먼저 큰 틀의 data class를 정의해주고 내부의 작은 data class를 정의해주면 된다!

궁금한 점 : 이 때 numOfRows와 pageNo와 totalCount에 대해서는 따로 정의해주지 않아도 잘 동작하는 이유가 궁금하다.

package com.example.sejong2washertimer.data

data class Weather(
    val response: Response
) {
    data class Response(
        val header : Header,
        val body : Body
    ) {
        data class Header(
            val resultCode : Int,
            val resultMessage : String,
        )
        data class Body(
            val dataType : String,
            val items : Items
        ){
            data class Items(
                val item : List<Item>
            ){
                data class Item(
                    val baseDate : Int,
                    val baseTime : Int,
                    val category: String,
                    val fsctDate : Int,
                    val fcstTime : Int,
                    val fcstValue : Int,
                    val nx : Int,
                    val ny : Int
                )
            }

        }
    }
}

2. Retrofit interface를 만든다 : @Query의 용도

- URL endpoint를 이용한다.

- 비동기 함수

interface WeatherApi {
    @GET("getVilageFcst?serviceKey=$API_KEY")
    suspend fun getWeather(
        @Query("dataType") dataType : String,
        @Query("numOfRows") numOfRows : Int,
        @Query("pageNo") pageNo : Int,
        @Query("base_date") baseDate : Int,
        @Query("base_time") baseTime : Int,
        @Query("nx") nx : String,
        @Query("ny") ny : String
    ) : Response<Weather>
}

궁금한 점 : @Query는 왜 적어줘야할까?

그래서 @Query부분을 주석 처리 한 후 실행해보았다. 결과는 아래처럼 None of the following functions can be called with the arguments supplied 에러가 떴다.

예상해본 Query의 기능은 @Query에 적어주는 변수를 함수 호출 시 인자로 넘겨줘야할 때 사용하는 것 같다!

찾아본 Query의 기능은 이 매개변수들이 HTTP 요청의 쿼리 스트링으로 매핑되도록 하는 것이다

즉 이 인터페이스를 사용하여 요청을 할 때 함수에 전달하는 값들이 HTTP 요청의 쿼리 파라미터로 들어간다.

아래의 에러는 쿼리 매개변수가 필요한데 전달되지 않았음을 나타낸다.

3. Retrofit 객체를 얻기 위한 파일

- retrofit 객체를 반환하는 함수 생성

object RetrofitHelper {

    fun provideRetrofit(): Retrofit =
        Retrofit.Builder()
            .baseUrl(WEATHER_BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()

    fun provideWeatherApi(retrofit: Retrofit): WeatherApi =
        retrofit.create(WeatherApi::class.java)
}

- provideRetrofit 함수는 Retrofit 객체를 생성하고 구성한다.

4. 레트로핏 객체와 레트로핏 인터페이스를 연결해준다.

- provideWeatherApi 함수는 Retrofit 객체를 사용하여 WeatherApi 인터페이스를 구현해줍니다 .

5. Repository 생성해주기

데이터 명령어를 다루기 위한 repository class를 생성해준다.

@Singleton
class WeatherRepository  @Inject constructor(
    private val weatherApi: WeatherApi
) {
    suspend fun getWeather(
        dataType:String,
        numOfRows:Int,
        pageNo:Int,
        baseDate:Int,
        baseTime:Int,
        nx:String,
        ny:String
    ) : Response<Weather> {
        return weatherApi.getWeather(dataType,numOfRows,pageNo,baseDate,baseTime,nx,ny)
    }
}

6. ViewModel 구현하기

composable UI를 위한 데이터를 관리하기 위한 viewModel을 구현해준다.

@HiltViewModel
class WeatherViewModel  @Inject constructor(

    private val repository : WeatherRepository):ViewModel() {
    private val _weatherResponse: MutableLiveData<Response<Weather>> = MutableLiveData()
    private val _temperature : MutableState<String> = mutableStateOf("")
    @DrawableRes private var _weatherImageResource : MutableState<Int> = mutableIntStateOf(R.drawable.sunny)

    val temperature :MutableState<String> get() = _temperature

    val weatherImageResource : MutableState<Int> get() = _weatherImageResource

    fun makeWeatherRequest(
        dataType: String, numOfRows: Int, pageNo: Int,
        baseDate: Int, baseTime: Int, nx: String, ny: String
    ) {
        viewModelScope.launch {
            try {
                val response =
                    repository.getWeather(dataType, numOfRows, pageNo, baseDate, baseTime, nx, ny)
                _weatherResponse.value = response

                updateTemperature(response.body()?.response?.body?.items?.item)


            }
            catch (e:Exception){
                Log.d("날씨", e.toString())

            }

        }

    }

    private fun updateTemperature(items: List<Weather.Response.Item>?) {
        if ((items != null) && items.isNotEmpty()) {
        
                    val filteredItems = items.filter {
                        it.category in listOf("TMP")
                    }

                    for (i in filteredItems) {
                    	// 현재 기온
                        if (i.category == "TMP") {
                            val temperature = i.fcstValue + "°C"
                            _temperature.value = temperature
                        }
                        //강수 처리
                        if (i.category == "PTY") {
                            if (i.fcstValue == "1" || i.fcstValue == "4") {
                                rainStateText = "비"
                                _weatherImageResource.value = R.drawable.rainy
                            }
                            if (i.fcstValue == "2") {
                                rainStateText = "비/눈"
                                _weatherImageResource.value = R.drawable.rainy_snow
                            }
                            if (i.fcstValue == "3") {
                                rainStateText = "눈"
                                _weatherImageResource.value = R.drawable.snowy
                            }

                        }

                    }
                }
        }

7. Composabe UI 만들어주기 : rememberUpdatedState

앱바에서 날씨 위젯을 구현해주기 위하여 Main 코드를 작성해주었다.

여기서 rememberUpdateState라는 함수를 알게되었다!

val imageResource by rememberUpdatedState(newValue = weatherViewModel.weatherImageResource)
 Icon(
      painterResource(imageResource.value),
      contentDescription = "weather"
)
val temperature by rememberUpdatedState(newValue = weatherViewModel.temperature)
      Text(
           text = temperature.value,
           fontSize = 10.sp
 )

rememberUpdatedState 함수를 사용하면 날씨 상태의 값이 변경되면 이 상태를 사용하는 부분만 다시 그려진다고 한다!

이후에 날씨 위젯에 전달되는 날짜와 시간 값 로직을 추가한 뒤 결과를 봐야겠다

같이 보면 좋은 자료

https://developer.android.com/jetpack/compose/side-effects?hl=ko#rememberupdatedstate

사진 출처

작가 macrovector</a> 출처 Freepik

728x90

저작자표시

'🐤2024 안드로이드 > 기숙사 프로젝트 기록' 카테고리의 다른 글

Compose에서 구성변경 시 저장되지 않는 문제 해결하기 (2)	2024.01.21
android Flow 알아보기 (2)	2024.01.21
compose와 preferences datastore 이용하기 (1)	2024.01.18
kotlin coroutines basic 공식문서 읽어보기 (0)	2024.01.17
🔔 Android FCM 적용기 2탄 : FCM + Retrofit (0)	2024.01.07

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🐤🐤우당탕탕 개발 기록

🌞android compose에서 날씨 api를 연동해보자!

1.JSON response의 Data Class를 정의해준다.

2. Retrofit interface를 만든다 : @Query의 용도

3. Retrofit 객체를 얻기 위한 파일

4. 레트로핏 객체와 레트로핏 인터페이스를 연결해준다.

5. Repository 생성해주기

6. ViewModel 구현하기

7. Composabe UI 만들어주기 : rememberUpdatedState

같이 보면 좋은 자료

'🐤2024 안드로이드 > 기숙사 프로젝트 기록' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

🌞android compose에서 날씨 api를 연동해보자!

1.JSON response의 Data Class를 정의해준다.

2. Retrofit interface를 만든다 : @Query의 용도

3. Retrofit 객체를 얻기 위한 파일

4. 레트로핏 객체와 레트로핏 인터페이스를 연결해준다.

5. Repository 생성해주기

6. ViewModel 구현하기

7. Composabe UI 만들어주기 : rememberUpdatedState

같이 보면 좋은 자료

'🐤2024 안드로이드 > 기숙사 프로젝트 기록' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역