#15/28 [매직미러 HowTo] / 스텝 2

날씨를 추가하자

  modules 폴더에 weather 폴더가 있음에도 화면에 날씨는 나타나지 않고 있습니다. 화면에 표시하도록 했으면 합니다. 그래서 config.js 파일을 열어보니 다음과 같이 currentweather와 weatherforecast가 보입니다. 각각 현재 날씨와 예보를 보여주는 것으로 예상이 됩니다. 

  다만 appid가 없어서 그런지 화면에 아무런 정보가 나타나지 않습니다. 어떻게 해 줘야 하는지 MagicMirror 홈페이지에서 Documented로 들어가 찾아봅시다. 

openweathermap 설정하기

  좌측 하단부에 Modules를 클릭하고 Weather Module로 들어가 봅시다. 그리고 스크롤을 해서 테이블의 맨 위쪽을 보면 옵션 중에 WeatherProvider가 있습니다. 여기서 사용할 수 있는 값은 총 네개로 openweathermap, darksky, weathergov 또는 ukmetoffice를 사용할 수 있고 WeatherProvider를 지정하지 않았을 때의 기본 값은 openweathermap라는 의미입니다. 

 

그림 95. Weather Module

 

  네 개의 옵션은 각각 날씨 서비스를 제공해 주는 사이트 들입니다. 첫번째와 네번째는 영국, 두번째와 세번째는 미국의 날씨 제공 서비스 업체입니다. Default로 지정되어 있는 openweathermap을 이용해서 매직미러에 날씨를 출력해 보도록 하겠습니다. 앞서서 WeatherProvider의 기본 값이 openweathermap이라고 했으니 아래의 코딩 중에서 config 맨 윗줄에 

 

   

WeatherProvider : “openweathermap”,

 

이 생략되어 있다고 보면 됩니다.

그림 96. Weather Module 코드

 

App ID 받기

  [그림 95]에서 주석으로 처리된 부분에 써 있는대로 Openweathermap에서 appid라는 것을 받아야 합니다. 처음에 실행했을 때 날씨가 나오지 않은 이유가 appid가 없기 때문이 아닐까 추측해 봅니다. appid를 발급받기 위해서 해당 사이트 (https://home.openweathermap.org/)에 접속을 합니다. 그리고 회원 가입을 해야겠죠. 웹사이트 가입 후에는 등록한 email로 확인 메일이 옵니다. 수신한 메일을 열고 ‘Verify’ 버튼을 클릭해서 최종 확인을 해 주셔야 가입이 완료됩니다. 

가입을 완료했으면 웹페이지에서 내 ID를 우측 상단에서 클릭해서 Services에 접속을 해서 아래와 같은 창이 나타나는지 확인을 합니다.

 

그림 97. home.openweathermap.org

 

  다음으로 우측의 view를 클릭하면 [그림98]과 같이 여러가지 서비스 목록이 나오는데 여기서 Free 아래의 Get API Key를 클릭합니다. 그러면 API Key가 Openweathermap에 가입할 때 등록한 이메일로 전달이 됩니다. 이메일에서 API를 복사해서 config.js의 currentWeather 및 weatherforecast 모듈을 찾아서 appid에 복사해 넣습니다.

 

그림 98. API Key 얻기

City Code 받기

  API Key를 얻었으면 다음은 City code를 얻어야 합니다. City code는 다음에 있는 도시코드 압축파일 주소를 웹브라우저에 복사해 넣어서 다운로드를 받을 수 있습니다. gz는 압축파일의 확장자인데 다소 낯익지 않은 파일명을 가지고 있습니다. 하지만 탐색기에서 해당 파일 위치로 가서 마우스 오른쪽 버튼을 클릭하면 압축 해제를 할 수 있는 메뉴가 나옵니다.

 

도시 코드 : http://bulk.openweathermap.org/sample/city.list.json.gz 

 

  터미널에서 압축을 해제하는 방법은 우선 해당 폴더로 이동을 합니다. “cd” 명령을 배운바 있습니다. 그리고 gzip이라는 프로그램을 다음과 같이 압축을 풀 수 있습니다.

 

$gzip -d sample/city.list.json.gz

 

  서울의 도시코드는 1835848입니다. 파일에서 Seoul을 찾으면 두 개가 나오는데 하나는 개략적인 위도, 경도가 나타난 것 같아서 소수점이 긴 Seoul의 코드를 택했습니다. 도시코드는 curretnweather와 weatherforecast의 locationID에 넣으시면 됩니다. 마지막으로 두 모듈의 location은 파일에 있는대로 Seoul로 변경을 합니다. 그래서 최종적으로 수정된 코드는 다음과 같습니다. 

 

그림 99. 수정된 코드

 

  API Key가 보이니 그대로 사용하셔도 되겠으니 가능하면 새로 받아보시길 권장합니다.  그리고 나서 실행을 해 보면 [그림100]와 같이 수정된 화면이 보여집니다.

 

그림 100. 완성 화면

포럼은?

  그런데 날씨 예보가 두 줄 밖에 나오지 않습니다. 홈페이지에서 maxNumberOfDays의 default 값이 5라고 했는데 말이죠. 그래서 maxNumberOfDays의 값을 여러 가지로 테스트를 해 봐도 동일합니다. 우리의 문제가 아닌 것 같아서 매직미러 홈페이지 상단의 포럼으로 가서 검색을 해 봤더니 우리와 같은 문제를 겪는 사람들이 있었는데 잘 되던 것이 갑자기 7월에 오픈소스가 업데이트 되고나서 문제가 발생했다고 합니다. 포럼에서는 벌써 해결 방법을 찾았네요. 그래서 우리도 따라서 해 보고자 합니다.

그림 101. 날씨 예보 오류 수정

 

  위의 [그림 101]에서 보면 weatherforecast.js 파일에서 한 줄의 소스코드를 바꾸면 된다고 나옵니다. 그래서 다음과 같이 바꾸어 주었습니다. weatherforecast는 기본 모듈입니다. 그래서 이 파일은 ~/MagicMirror/modules/default/weatherforecast에서 찾을 수 있습니다. 탐색기로 이동을 하고 마우스 오른쪽 버튼을 이용해 지니로 엽니다. 

 

그림 102. 날씨 예보 출력 오류 수정

 

  오류를 수정하거나 새로 코드를 추가할 때에는 위와 같이 주석문에 메모를 남겨두는 것을 추천드립니다. 그래야 나중에 다시 코드를 볼 때에도 왜 수정을 했는지, 언제 첨삭이 되었는지를 쉽게 알아 볼 수 있습니다.

자 다시 실행을 해 보면 다음과 같이 제대로 실행이 되는 모습을 볼 수 있습니다. 그리고 일기 예보를 일주일치가 보고 싶어서 config.js에서 weatherforecast 모듈을 찾아서 maxNumberOfDays를 7로 추가를 했습니다. appid 다음줄에 ‘maxNumberOfDays: 7,’를 추가해 주면 됩니다. appid의 맨 뒤에 ‘,’를 추가해야 합니다. 그렇지 않으면 에러가 발생합니다. 

 

그림 103. 최종 수정화면

 

  지금까지 우리는 매직미러에서 지원하는 기본기능을 기반으로 우리가 원하는 정보들을 하나 둘 씩, 모두 우리 구미에 맞게 변경해 봤습니다. 그리고 포럼의 도움을 받아 오픈소스의 오류도 수정을 해 봤습니다. 한글로 출력을 하고, 개인의 구글 캘린더를 읽어와서 일정을 표시해 주었습니다. 뉴스는 뉴욕타임즈에서 연합뉴스 속보로 바꾸어 주었고, 날씨는 서울 날씨로 바꿨습니다. 매직미러까지 만들필요 없이 이대로 사용한다고 해도 무방할 것 같습니다. 

 

  하지만 우리 목표는 여기에 포토 앨범을 추가하고 센서를 탑재해서 특정 조건에서 화면을 다르게 보이도록 하는 것입니다. 다음 장에는 매직미러에서 제공하는 기능이 아니라 포럼에서 활동하는 분들이 매직미러에 맞게 만든 모듈들이 있습니다. 서드파티 모듈이라고 하는데 이것을 추가적으로 설치해 보도록 하겠습니다.