[iOS] 현재 위치 날씨 & 24시간 & 7일 데이터 띄우기 - 1(Current Location Get weather 24 hours a day, 2 week)

안녕하세요 Foma 입니다!!

 

저번 시간에 현재 위치에 대한 권한을 받아오고 현재 위치를 알아보는 방법에 대해서 알아보았는데요.

 

혹시라도 못보신 분들은 여기 로 이동하셔서 보고 와주세요~

 

오늘은 현재 위치의 날씨와 앞으로의 24시간,앞으로의 일주일간 날씨 데이터를 받아와서 화면에 띄워볼거에요.

 

바로 시작할게요~

---

Preview

 

---

Weatherbit.io

 

날씨 정보를 받는 서비스는 아래와 같이 weatherbit에서 제공하는 API를 이용했습니다.

Weatherbit | Weather API - Historical Weather API

위 사이트로 이동하셔서 회원가입 후 로그인 하면 아래와 같은 화면이 보이실거에요!

 

여기서 Key를 잘 저장해둡니다.

 

 

그다음 API Docs를 클릭하시면 아래와 같이 뜰건데 파란색으로 표시된 API Documentation을 눌러줍니다.

 

 

그러면 아래와 같이 여러 API Documentation이 보이실건데 여기서 원하시는 API를 사용하시면 됩니다!

 

 

 

그리고 날씨에 따른 아이콘이 필요한데 아래 사이트로 접속하셔서

 

Weatherbit | Weather API metadata

 

아래의 PNG Archive 파일을 다운받아주세요!

 

---

Pod

 

자 그럼 본격적으로 시작해볼게요!

 

Xcode 프로젝트를 생성해주시고 podfile부터 만들어주세요!

 

날씨 데이터를 받아오기 위해 Alamofire,SwiftyJSON 이라는 라이브러리를 사용해야 하기때문에

 

터미널에서 해당 프로젝트 이동 후 pod init을 해주시고

 

여러분들도 podfile에 추가하신뒤 pod install 해주세요~

pod 'SwiftyJSON', '~> 4.0'
pod 'Alamofire', '~> 5.2'

---

Assets

 

위에서 다운받은 icons를

프로젝트의 Assets에 모두 넣어주세요!

---

KeyCenter

 

위에서 저장한 KEY를 이렇게 KeyCenter struct를 만들어서 저장해줍니다.

struct KeyCenter {
    static let key = "YOUR_API_KEY"
}

---

LocationService

 

저번 시간에 얻어온 현재 위치 위도와 경도를 LocationService 싱글턴으로 만들어주시고 저장해주세요!

 

(여기 에서 저번 시간에 배웠던 위도 경도 얻어올때 부분을 참조해주세요!) 

class LocationService {
    static var shared = LocationService()
    var longitude:Double!
    var latitude:Double!
}

---

Layout

 

WeatherView.xib

 

xib 파일을 만들어주시고 아래와 같이 레이아웃을 만들어주세요!

위 부분은 현재 날씨를 띄울 뷰입니다.

 

각 cityLabel,dateLabel,tempLabel로 구성해주세요.

 

아래는 hourlyCollectionView로 24시간의 날씨 정보를 컬렉션뷰입니다.

 

컬렉션뷰 아래 테이블뷰는 weeklyTableView로 2주간의 날씨 정보를 받아올 테이블뷰입니다.

WeatherView

 

WeatherView 파일은 만들어주신 후 아웃렛을 모두 연결해주세요!

class WeatherView: UIView {

    //MARK:IBOutlets
    
    @IBOutlet weak var cityLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var tempLabel: UILabel!
    @IBOutlet weak var weatherInfoLabel: UILabel!
    @IBOutlet weak var weeklyTableView: UITableView!
    @IBOutlet weak var hourlyCollectionView: UICollectionView!

---

HourlyCollectionViewCell.xib

 

아래와 같이 HourlyCollectionViewCell을 xib로 만들어주시고 위 Label은 timeLabel로

 

가운데 이미지는 weatherImage , 아래는 timeLabel로 레이아웃해주시고

HourlyCollectionViewCell

 

HourlyCollectionViewCell에 모두 연결해줍니다.

class HourlyCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var tempLabel: UILabel!
    @IBOutlet weak var weatherImage: UIImageView!
    @IBOutlet weak var timeLabel: UILabel!

---

WeeklyTableViewCell.xib

 

왼쪽 Lable은 날짜를 표시할 weekLabel로

 

가운데는 날씨 아이콘을 표시할 weatherImage로

 

오른쪽 레이블은 온도를 표시할 tempLabel로 만들어줍니다.

 

WeeklyTableViewCell

 

마찬가지로 모두 연결해줍니다.

class WeeklyTableViewCell: UITableViewCell {

    @IBOutlet weak var weekLabel: UILabel!
    @IBOutlet weak var weatherImage: UIImageView!
    @IBOutlet weak var tempLabel: UILabel!

---

CurrentWeather

 

이렇게 레이아웃을 끝내셨다면 이제 본격적으로 날씨 정보를 받아오는 작업을 해볼게요!

 

현재 위치의 날씨

 

CurrentWeatehr 클래스를 하나 만들어줍니다.

 

제일 먼저 Alamofire와 SwiftyJSON을 import 해주세요!

import Alamofire
import SwiftyJSON

 

그 다음으론 도시와 날짜 온도 날씨정보를 받아올 변수들을 만들어줍니다.

 var city:String = ""
 var date:String = ""
 var temp:Double = 0.0
 var weatherInfo:String = ""

아래와 같이 현재 날씨를 받아올 함수를 만들어줍니다.

    func getCurrentWeather(completion:@escaping() -> Void) {
        let lon = LocationService.shared.longitude!
        let lat = LocationService.shared.latitude!
        let path =  "https://api.weatherbit.io/v2.0/current?lat=\(lat)&lon=\( lon)&key=\(KeyCenter.key)&include=minutely"
        
        AF.request(path).responseJSON { (response) in
            let result = response.result
            
            switch result {
            
            case .success(let value as [String:Any]):
                let json = JSON(value)
                let data = json["data"][0]
                self.city = data["city_name"].stringValue
                self.date = currentDateFromUnix(unixDate: data["ts"].double)?.shortDate() ?? ""
                self.temp = data["temp"].double ?? 0.0
                self.weatherInfo = data["weather"]["description"].stringValue
                completion()
                
            case .failure(let error):
                print(error.errorDescription ?? "")
            default:
                fatalError()
            }
        }
    }

간단하게 설명드리면 

 

위에서 lon,lat 변수는 LocationService에 저장해두었던 위도와 경도입니다.

let lon = LocationService.shared.longitude!
let lat = LocationService.shared.latitude!

그리고 path를 위도와 경도를 넣어주시고 KeyCenter에 저장해두었던 API키를 이용해서 현재 날씨 정보가 담긴 url 경로를 만들어줍니다.

 

 let path =  "https://api.weatherbit.io/v2.0/current?lat=\(lat)&lon=\( lon)&key=\(KeyCenter.key)&include=minutely"

 

그 다음으로 Alamofire 라이브러리를 이용해 path를 통해 받은 JSON 데이터의 응답을 받아와줍니다.

  AF.request(path).responseJSON { (response) in... }

응답에 대한 결과를 만들어주시고

  let result = response.result

swiftch case 구문을 활용해 각 응답에 대한 결과를 아래와 같이 만들어줍니다.

 

만약 응답이 성공적으로 받아와졌을 경우

 

json으로 받아온 데이터를 [String:Any] 딕셔너리로 만들어주기 위해서 SwiftyJSON 라이브러리를 사용해

 

JSON(value)로 만들어준 다음 각 파라미터들의 정보를 각 위치에 맞게 넣어줍니다.

  switch result {
            case .success(let value as [String:Any]):
                let json = JSON(value)
                let data = json["data"][0]
                self.city = data["city_name"].stringValue
                self.date = currentDateFromUnix(unixDate: data["ts"].double)?.shortDate() ?? ""
                self.temp = data["temp"].double ?? 0.0
                self.weatherInfo = data["weather"]["description"].stringValue
                completion()
                
            case .failure(let error):
                print(error.errorDescription ?? "")
            default:
                fatalError()
            }

---

JSON 데이터 정보

 

아래 사이트로 이동하시면 json data에 어떤 파라미터들이 담겨있는지 볼 수 있습니다.

 

 

 

Weatherbit | Current Weather API Documentation

---

Helpers & Extensions

 

위에서 currentDateFromUnix와 shortDate() 부분에서 오류가 생길거에요.

 

이 때 당황하지 마시고 새로운 Swift 파일을 만들어주시고 아래와 같이 붙여넣어주세요

 

시간과 날짜를 변환해주는 메소드입니다.

import UIKit

//Double로 오는 타임스탬프 데이트 형식으로 변환
func currentDateFromUnix(unixDate:Double?) -> Date? {
    if unixDate != nil {
        return Date(timeIntervalSince1970: unixDate!)
    }else{
        return Date()
    }
}

//날씨 아이콘 이름에 따라서 이미지로 변환
func getWeatherIconFor(_ type:String) -> UIImage? {
    return UIImage(named: type)
}

import Foundation

extension Date {
    func shortDate() -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "MMM d"
        return dateFormatter.string(from: self)
    }
    
    func time() -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "HH:mm"
        return dateFormatter.string(from: self)
    }
}

---

HourlyWeather

 

24시간 날씨 정보를 받아올 클래스도 만들어줍니다.

 

(자세한 설명은 위 CurrentWeather을 참고해주세요.) 

import Alamofire
import SwiftyJSON

class HourlyWeather {
    
    var date:String = ""
    var temp:Double = 0.0
    var weatherIcon:String = ""
    
    init(weatherDictionary:Dictionary<String,Any>) {
        let data = JSON(weatherDictionary)
        self.date = currentDateFromUnix(unixDate: data["ts"].double)?.time() ?? ""
        self.temp = data["temp"].double ?? 0.0
        self.weatherIcon = data["weather"]["icon"].stringValue
    }
    
    class func getHourlyWeather(completion:@escaping([HourlyWeather]) -> Void) {
        
        let lon = LocationService.shared.longitude!
        let lat = LocationService.shared.latitude!
        
        let path = "https://api.weatherbit.io/v2.0/forecast/hourly?lat=\(lat)&lon=\(lon)&key=\(KeyCenter.key)"
        
        AF.request(path).responseJSON { (response) in
            let result = response.result
            var hourlyWeathers = [HourlyWeather]()
            
            switch result {
            
            case .success(let value as [String:Any]):
                    if let data = value["data"] as? [Dictionary<String,AnyObject>] {
                        data.forEach{hourlyWeathers.append(HourlyWeather(weatherDictionary: $0))}
                    }
                completion(hourlyWeathers)
                
            case .failure(let error):
                print(error.errorDescription ?? "")
            default:
                fatalError()
            }
        }
    }
}

---

WeeklyWeather

 

2주간의 날씨 데이터를 받아올 Weeklyweahter 클래스를 만들어서 아래와 같이 붙여넣어주세요!

 

(자세한 설명은 위 CurrentWeather을 참고해주세요.) 

import Alamofire
import SwiftyJSON

class WeeklyWeather {
    var date:String = ""
    var temp:Double = 0.0
    var weatherIcon:String = ""
    
    
    init(weatherDictionary:Dictionary<String,Any>) {
        let data = JSON(weatherDictionary)
        self.date = String("\(currentDateFromUnix(unixDate: data["ts"].double) ?? Date())".prefix(10))
        self.temp = data["temp"].double ?? 0.0
        self.weatherIcon = data["weather"]["icon"].stringValue
    }
    
    
    class func getWeeklyWeather(completion:@escaping ([WeeklyWeather]) -> Void) {
        
        let lat = LocationService.shared.latitude!
        let lon = LocationService.shared.longitude!
        let path = "https://api.weatherbit.io/v2.0/forecast/daily=7?lat=\(lat)&lon=\(lon)&key=\(KeyCenter.key)"
        
        AF.request(path).responseJSON { (response) in
            let result = response.result
            var weeklyWeathers = [WeeklyWeather]()
            
            switch result {
            case .success(let value as [String:Any]) :
                if let data = value["data"] as? [Dictionary<String,AnyObject>]  {
                    data.forEach {weeklyWeathers.append(WeeklyWeather(weatherDictionary: $0))}
                }
                completion(weeklyWeathers)
            case .failure(let error):
                print(error.errorDescription ?? "")
                
            default :
                fatalError()
            }
        }

    }
}

 

---

적다보니 글이 너무 길어져서... ㅜ

 

다음 포스팅에 날씨 정보를 받아와서 띄우는법을 정리하도록 하겠습니다!!

 

모르시는 부분이 있으면 언제든 댓글 달아주세요~~