[SwiftUI] 날씨 어플 만들기 05 완성 (View 에 ViewModel 적용)

날씨 어플 만들기 마지막!

지난 글에 구현한 ViewModel을 View 에 적용 시켜주겠습니다.

 

지난 글 못 보셨으면 아래 링크 눌러주세요~

 

[SwiftUI] 날씨 어플 만들기 04 (ViewModel 구성, Custom Color설정, Date & DateFormatter 사용하기 )

 

ContentView.swift

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var viewModel: WeatherViewModel
    
    var body: some View {
        
        ZStack {
            LinearGradient(gradient: viewModel.weatherBackground, startPoint: .topLeading, endPoint: .bottomTrailing)
                .edgesIgnoringSafeArea(.all)
            
            VStack(){
                Spacer()
                
                Text("\(viewModel.todayDay)")
                    .font(.system(size: 24, weight: .medium))
                    .foregroundColor(.white)
                Text("\(viewModel.cityName)")
                    .font(.system(size: 60, weight: .medium))
                    .foregroundColor(.white)
                    .padding()
                
                
                VStack(spacing: 20) {
                    Image(systemName: "\(viewModel.weatherIcon)")
                        .renderingMode(.original)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 180, height: 180)
                        .padding(20)
                    
                    Text("\(viewModel.temperature)")
                        .font(.system(size: 50, weight: .medium))
                        .foregroundColor(.white)
                    
                    Text("\(viewModel.tempMin) ~ \(viewModel.tempMax)")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                        .padding(.bottom, 40)
                }
                Spacer()
            }
        }
        .onAppear(perform: viewModel.refresh)
        
        
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(viewModel: WeatherViewModel(weatherService: WeatherService()))
    }
}

 

WeatherTodayApp.swift

import SwiftUI

@main
struct WeatherTodayApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView(viewModel: WeatherViewModel(weatherService: WeatherService()))
        }
    }
}

WeatherTodayApp 에서 

ContentView 에 viewModel이 무엇이지

viewModel 에 들어가는 WeatherViewModel의 weatherService가 무엇인지

다 인자를 넣어주어야 합니다.

 

코드 한 줄 한 줄 살펴보기 

@ObservedObject var viewModel: WeatherViewModel

 

@ObservedObject 를 통해 ViewModel을 받아옵니다. @ObservedObject는 WeatherViewModel을 감시하고 있다가 변화가 있으면 이를 감지하고 변경된 값으로 View를 re-rendering 해줍니다

 

viewModel 의 인스턴스들을 View에서 나올 수 있게 넣어줍니다.

 

 LinearGradient(gradient: viewModel.weatherBackground, startPoint: .topLeading, endPoint: .bottomTrailing)
                .edgesIgnoringSafeArea(.all)
         
                Text("\(viewModel.todayDay)")

                Text("\(viewModel.cityName)")

                Image(systemName: "\(viewModel.weatherIcon)")

                Text("\(viewModel.temperature)")

                Text("\(viewModel.tempMin) ~ \(viewModel.tempMax)")

 

ZStck 코드 블럭 뒤에 onAppear을 사용해 refresh 함수를 사용합니다.

 

ZStack {
		...
        }
        .onAppear(perform: viewModel.refresh)

 

이를 통해 View 가 보여지면 refresh 함수를 통해 API로부터 데이터를 받아옵니다.

 

 

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(viewModel: WeatherViewModel(weatherService: WeatherService()))
    }
}

ContentView_Previews 에서도 마찬가지로 인자를 다 넣어줘야 합니다.

 

이제 어플이 완성되었습니다!

시뮬레이터를 통해 실행해보도록 하겠습니다.

 

 

서울의 날씨가 잘 나오는 것을 확인할 수 있습니다! 지금 밖에 비가 내리고 있는데 정확하네요~ ㅎㅎ

 

WeatherService 에서 String 인자를 바꿔서 다른 도시에서도 잘 작동되는지 확인해보겠습니다.

 

 

뉴욕과 파리는 화창하네요!

런던은 역시나 흐리군요...

이렇게 다른 도시 날씨도 살펴보면서 날씨에 따라 아이콘과 배경화면이 바뀌는 것 까지 확인했습니다.

 

 

마지막으로 git 에 올리기전 .gitignore 에 APIKey.plist를 잊지않고 추가해줍니다.

 

 

GitHub - never-better/WeatherToday: SwiftUI 날씨 어플

 

GitHub  링크 올리니 참고하시면 되겠습니다.

 

 

이렇게 해서 MVVM 모델로 기본적인 날씨 어플을 만들어 보았습니다.

기획부터 디자인, 개발까지 처음부터 끝까지 다 해보았는데요, 기본적인 어플인데도 뭐하나 쉬운게 없네요 😂

그래도 만들고 나니 뿌듯합니다 ㅎㅎ

 

다음 번에는 더 재밌는 어플을 가지고 돌아오겠습니다.

 

 

긴 글 읽어주셔서 감사합니다 ☺️