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

서드파티 모듈 설치하기

기본 모듈에 대한 정보

  앞서 수정을 했던 기능들은 모두 MagicMirror/modules/default에 기본으로 들어있는 기능들입니다. [그림 104] 좌측에 보는 바와 같습니다. 우리가 매직미러를 실행했을 때 보이지 않았던 기능들이 몇개 보이긴 합니다. 기능이 없는 helloworld라는 모듈도 보입니다. 이것은 설치 용도가 아니라 매직미러 프로젝트의 사용방법을 알려주기 위해 만든 모듈입니다. 매직미러 사이트에서 Documented를 선택해서 들어가면 [그림 104]의 오른쪽과 같은 화면을 볼 수 있습니다. 이 화면의 좌측을 보면 기본 모듈들에 대한 사용방법을 자세히 설명하고 있습니다. 

 

  이번 장에서는 기본적으로 매직미러에 들어있는 모듈이 아니라 여러 매직미러 사용자들이 필요한 기능들을 만들고 등록한 모듈들을 살펴보고 무엇을 추가로 설치할 것인지 살펴볼 예정입니다. 능력이 있는 분들이 본인의 매직미러에 추가로 기능들을 개발한 것이죠. 우리도 모듈을 직접 만들 수도 있습니다. 스텝 4에서 간단하게 소개를 드릴 예정입니다.

 

   

그림 104. Default modules과 Documentation 

서드파티 모듈 둘러보기

  서드파티 모듈들은 매직미러 홈페이지에서 [Modular] 를 클릭해서 들어가면 찾을 수 있습니다. [그림 105]에는 서드파티 모듈들이 카테고리별로 나누어져 있는 테이블을 볼 수 있습니다. 여기서 원하는 카테고리를 클릭해 해당 카테고리로 이동을 하면 정말로 다양한 서드파티 모듈들을 볼 수 있습니다. 우리는 Weather를  클릭해서 이동을 해 볼까요? 

 

그림 105. 서드파티 모듈들

 

  Weather 모듈 즉, 날씨를 보는 모듈은 이미 현재 날씨와 7일치에 대한 예보를 볼 수 있도록 설치를 마쳤습니다. 그런데 보이시나요? Air Quality가 보입니다. 미세먼지가 어떤지 날씨를 보여주는 weather 모듈 아래에 같이 보여주면 좋겠다라는 생각을 해 봤습니다. 괜찮은 생각인가요?

 미세먼지 정보와 이메일의 제목을 보여주는 기능의 써드파티 모듈들을 설치 해보겠습니다. 

 

 

MMM-AirQuality

  서드파티 모듈을 어떻게 우리 설치를 할 수 있을까요? 서드파티 모듈 중에서 MMM-AirQuality를 클릭해서 들어가 봅시다. 들어가서 보면 우선 파일리스트 들이 보입니다. 파일 이름을 클릭해서 들어가면 파일의 내용을 볼 수도 있습니다.

이 파일들이 Air-Quality를 구성하고 이는 전체 소스 파일입니다. 이 파일들을 우리 라즈베리파이의 MagicMirror 폴더로 가져와야 하고 AirQuality에 맞게 설정들를 Config.js에 추가해 줘야 합니다.

 

그림 106. 서드파티 모듈 Github

서드파티 모듈 다운로드와 설치

조금 더 스크롤을 해서 내려가 볼까요? 맨 위에는 화면의 구성이 나타납니다. 언어는 나중에 보도록 하고 Usage를 보겠습니다. 

 

그림 107. AirQuality 설치

 

  Air Quality를 다운로드 받는 과정이 나와있네요. 터미널을 열고 MagicMirror의 modules 폴더로 이동을 합니다. ‘~’는 자신의 홈 폴더를 의미합니다. 라즈베리파이 OS를 설치할 때 기본 사용자 명이 기억나시나요? 

pi입니다. 그래서 ~는 /home/pi를 가리킵니다. cd ~를 입력합니다. 그리고 다음을 입력하기 위해서 ‘/’를 입력하고 Ma까지 터미널에 입력을 하시고 Tab키를 눌러 보세요. 자동 완성이 됩니다. 다시 ‘/’를 입력하고 mo를 입력하고 Tab을 누르면 자동으로 modules가 완성이 됩니다. mo로 시작하는 다른 단어가 없다는 가정하에서 동작을 합니다.

 

$cd ~/MagicMirror/modules $git clone https://github.com/CFenner/MMM-AirQuality

 

  git clone이라는 명령은 기억이 나시나요? 현재 폴더에 git clone 명령 다음에 있는 주소의 소스코드들을 다운로드 받아준다는 의미입니다. 그리고 탐색기로 MMM-AirQuality 폴더로 이동해서 파일이 들어왔는지 확인을 해 보시기 바랍니다. 그리고 웹사이트에는 나와있지 않습니다만 다음과 같은 명령을 꼭 실행해 주시기 바랍니다. 소스파일을 다운로드 받은 후에는 꼭 설치를 해 줘야 합니다.

 

$cd MMM-AirQuality $npm install

그림 108. 소스 다운로드

Air Quality 설정

그 다음은 다운로드 받은 AirQuality와 관련된 설정 사항들을 config.js에 넣어서 매직미러에 Air Quality가 표시되도록 해 줘야 합니다. config 파일의 역할은 설치된 모듈에 대해서 해당 모듈을 매직미러에 연결하고 Air Quality 기능을 우리에게 보여주는 역할을 합니다. 매직미러와 연결할 때에는 다양한 옵션들을 설정을 할 수 있습니다.

 

그림 109. Config 설정하기

 

  Configuration 아래의 박스에 있는 부분을 복사해서 config.js 파일을 열고 모듈 weather와 weather forecast 사이에 붙여넣기를 합니다. 주의를 할 점은 모듈과 모듈사이에 ‘,’를 꼭 넣도록 합니다.

 

 

그림 110. Config 복사해 넣기

서드파티 애플리케이션 첫 실행

이제 실행을 해 볼 차례입니다. npm run start 기억하시죠? 폴더도 ~/MagicMirror에서 해야합니다. 

 

그림 111. Air Quality 실행 화면

 

  매직미러 중앙 상단에 Air Quality가 보입니다. 잘 설치되고 실행은 되었지만 마음에 안드는 부분이 몇가지 보입니다. 우선 중간에 나타나니 보기가 싫습니다. 오른쪽 날짜가 있는 곳 아래로 넣고 싶습니다. 지역이 베이징이네요. 그리고 영어로 나타납니다. 이 세 가지를 고쳐야겠습니다. 

지역, 위치와 언어 수정하기

  조금 앞으로 돌아가 [그림109]을 보면 http://aqicn.org/city/ 에서 지역을 얻어 올 수 있다고 합니다. 저는 도시명을 ‘Seoul’로 바꾸었습니다. 다음은 출력되는 위치를 우측으로 이동을 하려고 합니다. 이를 위해서는 position: 'top_right'와 같이 ‘top_cener’를 top_right으로 바꿔주면 됩니다. 마지막으로 [그림109]에서 조금 아래로 스크롤을 해 보면 테이블에 lang이라고 언어를 선택할 수 있는 옵션이 있는데 lang: ‘kr’로 설정을 해 주면 됩니다. ‘ko’화 헷갈리지 않도록 합니다. lang을 넣지 않더라도 매직미러의 언어 자체를 한글로 했기 때문에 한글이 뜨긴 합니다. 

 

그림 112. 완성된 Air Quality 화면