13. WeatherApp - ViewModel

 

01.

01.1 

프로그램은, 데이터와 로직으로 이루어집니다. 

C언어에서 단수 자료형과, 간단한 로직으로 프로그램을 만들었습니다.

Model은 자료형입니다. ViewModel은 로직입니다.

 

복잡한 로직, 

프로그램 외부와 데이터(DB, TCP/IP, Serial 등)를 주고받는 로직

모두 ViewModel에서 처리됩니다.

 

02. ViewModel 폴더 생성

학습 과정에서 ViewModel을 확실하게 구분하기 위해 ViewModel 폴더를 만듭니다.

ViewModel 폴더와  ViewModel.Helpers 폴더를 만듭니다.

 

03. ViewModel.Helpers 

ViewModel.Helpers 폴더의 AccuWeatherHelpers.cs 에서는,

외부 API 데이터를 Request 하거나, DB 로직을 구현합니다. 

 

04. AutoComplete API

❶ API Reference 에서, ❷ Location API 메뉴를 찾습니다. 

이 메뉴에서 AccuWeather 에서 "지역명"을 검색시, 해당 지역 코드를 찾을 수 있습니다.

 

 

 

 

Location API  >  ❸ AutoComplete  >  ❹ AutoComplete search 로 이동합니다.

 

 

 

 

❺ 개인 API Key, 지역명, 언어 를 차례로 입력하고, ❻ Request 요청을 보내면, 

❼ 하단에 cURL 을 확인 할 수 있습니다.

 

WPF 프로젝트의 ViewModel 에서 API Request(요청)할 때 사용 할 URL 입니다.

해당 URL을 Request 하면, Json 형태의 결과물을 Response로 돌려받습니다.

 

해당 요청은 '도시 이름'을 전달하고, AccuWeather API의 도시 코드 및 관련 데이터를 찾는데 사용됩니다.

cURL을 복사해서 메모장에 저장해놓습니다.

 

05. Current Conditions API

❶ API Reference 에서, ❷ Current Conditions API 메뉴를 찾습니다. 

이 메뉴에서, AccuWeather 에서 "상세 날씨"를 정보를 확인할 수 있습니다.

 

 

 

 

❸ Current Conditions  >  ❹ Current Conditions 로 이동합니다.

 

 

 

 

❺ 이전 단계에서 찾은 지역코드와, 

❻ 개인 API Key, 언어 를 차례로 입력하고, 

❼ Request 요청을 보내면, 

❽ 하단에 cURL 을 확인 할 수 있습니다.

 

WPF 프로젝트의 ViewModel 에서 API Request(요청)할 때 사용 할 URL 입니다.

❾ 해당 URL을 Request 하면, Response로 요청한 도시의 "날씨 상세 정보"를  Json 형태의 결과물을 돌려받습니다.

cURL을 복사해서 메모장에 저장해놓습니다.

 

06. URL

❶ AUTOCOMPLETE

apikey=

&q=

&language=

 

❷  CURRENTCODITIONS 

apikey=

&language=

 

API_KEY,  Query(요청), Language(언어) 순으로 조합되어 있는것을 확인 할 수 있습니다.

 

public const string API_KEY = "개인API_KEY입력";

public const string BASE_URL = "http://dataservice.accuweather.com/";

public const string LANGUAGE = "ko-kr";

public const string AUTOCOMPLETE_ENDPOINT =
    "locations/v1/cities/autocomplete?apikey={0}&q={1}&language={2}";
    
public const string CURRENT_CONDITIONS_ENDPOINT =
    "currentconditions/v1/{0}?apikey={1}&language={2}";

 

07. API Request & Response 구현

07.1 Json 사용을 위한 외부 라이브러리 설치

 

 

 

 

07.2 API 도시 코드를 가져오는 VM 로직 구현 

public static async Task<List<City>> GetCities(string query)
{
    // API Json 결과에서 City 객체 타입 데이터를 List에 담습니다.
    List<City> cities = new List<City>();

    // API 요청 URL 을 설정합니다.
    string url = BASE_URL + string.Format(AUTOCOMPLETE_ENDPOINT, API_KEY, query, LANGUAGE);

    // HttpClient 에서
    using (HttpClient clnt = new HttpClient())
    {
        // url로 API 요청을 request 하고, reponse 값을 cities 리스트에 할당합니다.
        var res = await clnt.GetAsync(url);
        string json = await res.Content.ReadAsStringAsync();
        cities = JsonConvert.DeserializeObject<List<City>>(json);
    }

    return cities;
}

 

 

 

 

07.3 API 도시 코드를 가져오는, 전달 구조

 

 

 

 

07.4 API 날씨 상세 정보를 가져오는 VM 로직 구현 

public static async Task<CurrentConditions> GetCurrentConditions(string citikey)
{
    // API Json 결과에서 CurrentConditions 객체 타입 데이터를 List에 담습니다.
    CurrentConditions currentConditions = new CurrentConditions();

    // API 요청 URL 을 설정합니다.
    string url = BASE_URL + string.Format(CURRENT_CONDITIONS_ENDPOINT, citikey, API_KEY, LANGUAGE);

    // HttpClient 에서
    using (HttpClient clnt = new HttpClient())
    {
        // url로 API 요청을 request 하고, reponse 값을 CurrentConditions 리스트에 할당합니다.
        var res = await clnt.GetAsync(url);
        string json = await res.Content.ReadAsStringAsync();
        currentConditions = JsonConvert.DeserializeObject<List<CurrentConditions>>(json).FirstOrDefault();
    }
    return currentConditions;
}

 

 

 

 

07.5 API 날씨 상세 정보를 가져오는, 전달 구조

 

08.

 

13.8 WeatherApp.zip

0.18MB