라즈베리 파이 4B 매직미러 만들기(#5) - 매직미러 날씨, 뉴스 모듈 수정하기

그럼 현재 자신이 원하는 지역의 날씨 정보를 가져와서 표시할 수 있도록 config.js 파일을 수정해 보자.

 

매직미러의 날씨모듈

매직미러 문서에 보면 날씨를 위한 weather라는 모듈이 존재하는 것을 확인할 수 있다. 해당 문서를 확인해서 옵션을 설정할 수 있는 정보를 확인할 수 있다.

대표사진 삭제

사진 설명을 입력하세요.

 

우리의 샘플 설정 파일의 weather 모듈을 확인해 보자. 아래 설정파일처럼 weather 라는 모듈이 2개 등록되어 있고 위치는 동일하게 top_right로 되어 있다.(빨간색으로 표시한 부분) 모듈도 동일하고 표시하는 위치도 동일하다. 샘플 설정 정보를 보면 locationID와 apiKey 부분이 있는데 이 부분을 우리가 설정하고자 하는 정보로 변경해야 그 지역의 날씨 정보를 가져온다.

 

{
	module: "weather",
	position: "top_right",
	config: {
		weatherProvider: "openweathermap",
		type: "current",
		location: "New York",
		locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
		apiKey: "YOUR_OPENWEATHER_API_KEY"
	}
},
{
	module: "weather",
	position: "top_right",
	header: "Weather Forecast",
	config: {
		weatherProvider: "openweathermap",
		type: "forecast",
		location: "New York",
		locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
		apiKey: "YOUR_OPENWEATHER_API_KEY"
	}
},

 

날씨 정보를 제공해주는 OpenWeather

날씨 정보를 가져오기 위해서는 날씨 정보를 서비스해주는 사이트의 정보를 가져와야한다. 매직미러 사이트의 문서를 확인해 보면 weatherProvider 부분의 값으로 취할 수 있는 정보가 있는데 제일 처음에 나오는 openweathermap을 사용해보자.

 

 

 

OpenWeather 가입하기

OpenWeather는 날씨에 대한 정보를 서비스해주는 포탈로 API를 통해 날씨 정보를 취득하여 활용할 수 있도록 서비스를 제공한다. 먼저 아래 사이트에 접속하여 회원가입을 하고 로그인을 한다.

날씨 정보를 제공해주는 OpenWeather 사이트

 

날씨 정보를 위한 ApiKey 생성

회원가입 후 우리가 필요한 부분은 API를 사용하기 위한 apiKey 정보이다. 기본적으로 회원가입하면 디폴트 apiKey가 생성되어 있는데 라즈베리파이용으로 별도로 생성해 보자.

 

로그인 후 API keys 항목에 들어가 보면 기본적으로 설정된 키가 보이는데 우측의 Create Key 부분에 적당한 설명을 입력하고 Generate 버튼을 클릭해보자.

매직미러에서 사용할 Key를 생성해 보자

 

그럼 아래처럼 새로운 API Key가 생성된다. 생성된 Key를 복사한 후 config.js 파일에 설정해 보자.

 

날씨 지역 정보 확인하기

그리고 날씨를 받아올 지역 정보를 아래와 같이 Bucheon이라는 키워드 검색으로 지역 정보를 얻어온다. 지역정보는 “Bucheon-si, KR”이고, 코드는 URL을 보면 1838716 인 것을 확인할 수 있다. 이 정보와 API 정보를 설정파일에 반영하고 서비스를 재시작 한다.

 

매직미러 설정에 반영하기

원래 설정에서 2개의 모듈이 있던 것을 하나만 남겨 놓고 아래와 같이 수정한다. apiKey 값은 뒷 부분을 "*"로 가렸으니 자신에 맞는 apiKey를 사용한다.

 

{
    module: "weather",
    position: "top_right",
    header: "Weather Forecast",
    config: {
        weatherProvider: "openweathermap",
        type: "forecast",
        location: "Bucheon-Si, KR",
        locationID: "1838716 ",
        apiKey: "43430308bb2f***********************"
    }
},

 

매직미러 재시작 후 확인

그리고 npm run start 명령을 통해 서비스를 다시 시작하면 아래와 같이 바뀌어서 표시되는 날씨 정보를 확인할 수 있다.

우측 상단의 날씨 정보를 지역에 맞게 출력

 

불필요한 캘린더 모듈 삭제

좌측의 불필요한 캘린더를 삭제하려면 아래와 같이 빨간색 부분을 삭제하고 재시작하면 된다.

modules: [

{

module: "alert",

},

{

module: "updatenotification",

position: "top_bar"

},

{

module: "clock",

position: "top_left"

},

{

module: "calendar",

header: "US Holidays",

position: "top_left",

config: {

calendars: [

{

symbol: "calendar-check",

url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"

}

]

}

},

{

module: "compliments",

position: "lower_third"

},

 

삭제 후 재시작 하면 아래 처럼 캘린더 부분이 없어진 것을 확인할 수 있다.

캘린더를 삭제하였다.

 

 

뉴스 모듈 수정하기

또한 위의 스샷 처럼 하단부에 한글 뉴스가 나타나도록 설정하려면 뉴스피드 모듈을 수정한다. 빨간색으로 표기된 부분을 뉴스 서비스를 제공하는 서비스 제공 사이트의 정보로 대체하면 된다.

{

module: "newsfeed",

position: "bottom_bar",

config: {

feeds: [

{

title: "New York Times",

url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"

}

],

showSourceTitle: true,

showPublishDate: true,

broadcastNewsFeeds: true,

broadcastNewsUpdates: true

}

},

 

 

JTBC 뉴스 속보 피드 확인

여기서는 JTBC의 뉴스속보 뉴스 피드를 설정해 보자. 구글 검색을 통해 JTBC 뉴스 RSS 검색을 하면 아래와 같은 사이트를 확인할 수 있다. JTBC에서 제공하는 RSS 서비스 주소를 확인할 수 있다. 이 정보를 설정파일에 반영하여 서비스를 재시작 하면 된다.

.

 

JTBC 뉴스 피드 반영하기

위 RSS 뉴스피드 URL을 아래와 같이 적용한다.

 

{

  module: "newsfeed",

  position: "bottom_bar",

  config: {

  feeds: [

  {

title: "JTBC 뉴스속보",

url: "https://fs.jtbc.co.kr/RSS/newsflash.xml"

}

],

showSourceTitle: true,

showPublishDate: true,

broadcastNewsFeeds: true,

broadcastNewsUpdates: true

}

},

 

재시작 하면 적용된 뉴스를 확인할 수 있다.