🌄 Sandamso 프로젝트 - 7

뭔가 머릿속으로 대충 코드가 그려진당 !

---

오늘의 날짜 가져오기

일단 좌표값인 nx와 ny는 고정해두고 날씨를 제대로 가져오는지 확인하기 위한 작업을 해주려고 한다. 오늘의 날씨를 표시하기 위해, 오늘의 날짜를 가져오기 위한 코드를 추가해준다. 생각보다 굉장히 간단한 !!

기존 baseDate의 형식인 20231031과 같은 형식으로 날짜 형식을 설정해주고 현재 날짜인 currentDate로 format 해주면 끝!

// 현재 날씨 상수
    private val currentDate = Date()
    @SuppressLint("SimpleDateFormat")
    private val dateFormat = SimpleDateFormat("yyyyMMdd")
    private val today = dateFormat.format(currentDate)

---

TextView에 표시되는 부분 변경하기

기존에는 0200, 0500으로 표시되는데, 이는 사용자가 보기에 불편할 것 같기 때문에 시간은 뒤에 있는 00을 제거하고 '시' 를 추가해주었고, 온도는 ºC를 뒷 부분에 추가해주었다.

inner class WeatherHolder(private val binding : WeatherItemBinding) : RecyclerView.ViewHolder(binding.root) {
        fun setItem(item : WeatherData) = with(binding) {
            binding.weatherItemTvHour.text = formatBaseTime(item.baseTime)
            binding.weatherItemTvTemperature.text = formatTmp(item.tmp)
            binding.weatherItemIv.setImageResource(R.drawable.ic_cloud)
        }
    }

    // 0200, 0500 등을 02시, 05시로 변경
    private fun formatBaseTime(baseTime : String) : String {
        val formatTime = baseTime.removeSuffix("00")
        return "${formatTime}시"
    }

    // 온도 뒤에 ºC 추가
    private fun formatTmp(tmp : String) : String {
        return "${tmp}ºC"
    }

---

시간대별로 날씨 가져오기

기존코드는 시간이 오름차순으로 하나씩 보여지는 것이 아니라 랜덤으로 두 번 이상씩 나오는걸 확인할 수 있다.

---

  // 기존코드
  val baseTimes = listOf("0200", "0500", "0800", "1100", "1400", "1700", "2000", "2300")
  // 비동기로 데이터 가져오기
  for(baseTime in baseTimes) {
              CoroutineScope(Dispatchers.IO).launch {
                  WeatherClient.weatherNetwork.getWeatherInfo(
                      serviceKey = BuildConfig.WEATHER_API_KEY,
                      pageNo = 1,
                      numOfRows = 10,
                      dataType = "JSON",
                      baseDate = today.toInt(),
                      baseTime = baseTime,
                      nx = 21,
                      ny = 132,
                  ).enqueue(object : Callback<Weather?> {
                      override fun onResponse(call: Call<Weather?>, response: Response<Weather?>) {
                          response.body().let {
                              it?.response?.body?.items?.item?.forEach { item ->
                                  if (item.category == "TMP") {
                                      val tmpValue = item.fcstValue
                                      weatherDataList.add(WeatherData(baseTime, tmpValue))
                                  }
                              }
                          }
						  ...

---

반복하는 구간에서 여러번 반복되는 것 같아 list의 크기만큼 인덱스 값을 하나씩 돌아가면서 값을 출력하도록 수정했다.

  // 변경된 코드
  val baseTimes = listOf("0200", "0500", "0800", "1100", "1400", "1700", "2000", "2300")
          fun fetchWeather(index: Int) {
              if(index >= baseTimes.size) {
                  return runOnUiThread {
                      infoPageAdapter.addItem(weatherDataList)
                  }
              }
          val baseTime = baseTimes[index]
              CoroutineScope(Dispatchers.IO).launch {
                  WeatherClient.weatherNetwork.getWeatherInfo(
                      serviceKey = BuildConfig.WEATHER_API_KEY,
                      pageNo = 1,
                      numOfRows = 10,
                      dataType = "JSON",
                      baseDate = today.toInt(),
                      baseTime = baseTime,
                      nx = 21,
                      ny = 132,
                  ).enqueue(object : Callback<Weather?> {
                      override fun onResponse(call: Call<Weather?>, response: Response<Weather?>) {
                          response.body().let {
                              it?.response?.body?.items?.item?.forEach { item ->
                                  if (item.category == "TMP") {
                                      val tmpValue = item.fcstValue
                                      weatherDataList.add(WeatherData(baseTime, tmpValue))
                                  }
                              }
                          }
                          fetchWeather(index + 1)
                      }
					  ...

반복되지 않고 baseTime을 하나씩 돌면서 출력되는걸 확인할 수 있다.

---

좌표값에 따른 날씨 정보 출력

이전에는 데이터 값을 잘 가져올 수 있는지 확인하기 위해 좌표값을 고정해뒀었는데, 사용자가 선택한 산의 address값을 가져와서 위치에 따른 좌표값(nx, ny)를 매칭해서 선택한 산 지역의 날씨 정보를 가져와보자.

그렇다면 내가 선택한 산의 근처 지역의 날씨를 알아보려면 어떤 정보가 필요할까? 🤔

해당 산의 위치정보에 따른 nx, ny값을 받기 위해서 **시, 구, nx, ny 정보가 필요하다!

날씨API에 어떤 데이터 정보가 있나 ?

공공데이터 포털에서 기상청단기예보 ((구)동네예보) 조회서비스에서 첨부된 참고자료의 엑셀 자료 중 일부이다.

그리고 데이터의 예시 결과이다.

그렇다면 서울특별시의 날씨를 받아오기 위해서는 nx인 격자 X와 ny인 격자 Y를 가져와 이 좌표값에 맞는 fcstValue 데이터 값을 가져와서 온도 textView에 설정해주면 되겠구나?!

---

로그 찍기

mountainAddress가 어떤 식로 데이터를 가져오는지 확인을 먼저 해주자. Log를 추가해주고 실행하니 다음과 같이 데이터를 가져온다는 것을 확인할 수 있었다.

// 뒤로가기 버튼을 눌렀을 경우
binding.infoPageBtnBackArrow.setOnClickListener {
            Log.d("location Data", "$mountainAddress")
            finish()
        }

서울특별시의 강서구에 존재하는 산을 클릭하고 뒤로가기 버튼을 누를 경우 로그가 찍히는데 로그 결과를 보아 서울특별시 강서구로 찍히기 때문에 실제 nx, ny 데이터를 추가해줄 때 서울특별시 강서구와 서울특별시 강서구의 nx, ny값을 추가해주면 된다.

---

실제 데이터를 담은 데이터 클래스 생성

지역명 + nx + ny 데이터를 넣는 데이터 클래스를 생성해주었다.

실제 엑셀 값을 지역명과 연결해 생성해준 뒤, InfoPage에 서울특별시 강서구처럼 주소값이 들어가 있는 mountainAddress에서 find 메소드를 이용해 regionList의 regionX와 regionY의 값을 nx와 ny에 추가해줬다.

  fun setRegionLocation(address: String?): RegionList? {
              val regionList = RegionLocation().regionList
              return regionList.find { mountainAddress?.contains(it.region) ?: false }
          }
          
	...
    
  fun fetchWeather(index: Int) {
      if (index >= baseTimes.size) {
          return runOnUiThread {
              infoPageAdapter.addItem(weatherDataList, skyDataList)
          }
      }

      val baseTime = baseTimes[index]
      val nx = setRegionLocation(mountainAddress)?.regionX
      val ny = setRegionLocation(mountainAddress)?.regionY

      CoroutineScope(Dispatchers.IO).launch {
          WeatherClient.weatherNetwork.getWeatherInfo(
              serviceKey = BuildConfig.WEATHER_API_KEY,
              pageNo = 1,
              numOfRows = 10,
              dataType = "JSON",
              baseDate = today.toInt(),
              baseTime = baseTime,
              nx = nx!!,
              ny = ny!!,
          ).enqueue(object : Callback<Weather?> {
              override fun onResponse(call: Call<Weather?>, response: Response<Weather?>) {
              
              ...
              

실행해보면 이전과 달리 시간대별로, 지역에 맞는 날씨가 나오는 것을 확인할 수 있다.

로그로 내가 선택한 산의 nx, ny의 값을 확인할 수 있는데 nx는 87, ny는 89로 나온다. 실제 데이터 값과 동일한 것으로 보아 대구광역시 달성군의 날씨가 맞는다는걸 알 수 있다.

---

날씨 아이콘 변경하기

비가 내리거나 흐리거나 등등의 날씨의 변화에 따라서 날씨 아이콘이 변경되어 나오도록 설정해주려고 한다.

공식문서 확인

기상청단기예보 ((구)동네예보) 조회서비스에 첨부된 활용가이드의 내용 중 일부이다.

---

코드 구상

이 내용 정리하면서 어떻게 코드를 구현하면 좋을지 수기로 작성하면서 머릿속을 정리해봤다.

---

코드 구현

InfoPage에서는 조건문인 when을 이용해서 코드를 최대한 간결하게 사용해봤다.

  if (item.category == "TMP") {
      val tmpValue = item.fcstValue
      weatherDataList.add(WeatherData(baseTime, tmpValue))
  }
  if(item.category == "SKY") {
      sky = item.fcstValue
  }
  if(item.category == "PTY") {
      val ptyValue = item.fcstValue
      when(ptyValue) {
          "0" -> skyDataList.add(SkyData("0", sky))
          "1" -> skyDataList.add(SkyData("1", "0"))
          "2" -> skyDataList.add(SkyData("2", "0"))
          "3" -> skyDataList.add(SkyData("3", "0"))
          "4" -> skyDataList.add(SkyData("4", "0"))
          else -> skyDataList.add(SkyData("4", "0"))
      }
  }

아이콘 이미지 변경은 InfoPageAdapter에서 설정해주면 된다 ! (onBindViewHolder와 addItem의 함수 내용도 코드 변경해줄 것 )

  inner class WeatherHolder(private val binding : WeatherItemBinding) : RecyclerView.ViewHolder(binding.root) {
          fun setItem(item : WeatherData, skyItem : SkyData) = with(binding) {
              binding.weatherItemTvHour.text = formatBaseTime(item.baseTime)
              binding.weatherItemTvTemperature.text = formatTmp(item.tmp)
              binding.weatherItemIv.setImageResource(ptyIcon(skyItem.pty, skyItem.sky))
          }
      }
      
        ...
      
  private fun ptyIcon(ptyNum : String, skyNum : String) : Int {
          return when (ptyNum) {
              "0" -> skyIcon(skyNum)
              // 비
              "1" -> {
                  Log.d("weatherIcon", "rainy")
                  return R.drawable.ic_weather_rainy
              }

              ...

          }
      }

  private fun skyIcon(skyNum : String) : Int {
          return when(skyNum) {
              // 맑음
              "1" -> {
                  Log.d("weatherIcon", "sunny")
                  return R.drawable.ic_weather_sunny
              }

              ...

          }
      }

그리고 앱을 실행해주면 날씨 조건에 따라서 날씨 아이콘이 변경된다 !

---

이렇게 날씨는 끝! 뭔가 코드를 작성하면서 어렵게 느낀 적이 없는건 처음인데..? 기분 좋다..