스마트싱스(SmartThings) 스마트 앱 웹코어(webcore) 설치하는 방법

안녕하세요? 오늘은 CoRE의 Web Edition인 웹코어(webcore)를 설치하는 방법에 대해 설명하려고 합니다. 코어를 이미 설치하셨다면 웹코어 설치는 아주 수월하게 하실 수 있을 것으로 생각합니다.

[스마트홈, IoT] - 스마트싱스(SmartThings) 스마트 앱 코어(CoRE) 설치하는 방법

웹코어에 대한 설명은 아래 makelism님의 블로그 포스팅과 웹코어 위키를 보시면 아주 자세히 나와 있습니다.

http://makelism.tistory.com/entry/webCoRE

https://wiki.webcore.co/

일단 제가 웹코어를 설치하게 된 이유는 코어가 피스톤을 짜기에 너무 불편하기 때문입니다. 반드시 스마트폰이나 패드를 이용해서 피스톤을 짜도록 해 두었고 피스톤의 일부를 수정하거나 비슷한 피스톤을 다시 짜려고 해도 반드시 처음부터의 과정을 다 거쳐야 하는 단점이 있었습니다. 이러한 단점을 보완하여 Web Edition으로 나온 것이 웹코어입니다. 웹이라는 말에서도 알 수 있듯이 웹브라우져를 이용해서 피스톤 생성 및 편집이 가능하고 기존에 사용하던 피스톤을 복사하여 만들 수도 있으며 다른 사람의 피스톤을 복사하여 사용할 수도 있다고 합니다.

그리고 미세하게 동작속도가 빨라지는 이득도 얻게 되었습니다. 그러면 간단히 웹코어 설치과정을 설명하겠습니다.

Makelism님 블로그에도 설치과정이 나와있지만 조금 변한 부분이 있어 처음부터 다시 설치하면 캡쳐를 했으며 알려진 오류를 회피하기 위하여 몇 가지 과정이 더 추가되었습니다. 저도 잘 모르는 부분이 있을 수 있으므로 잘 안되는 부분은 스마트 홈 관련 카페에 문의하시기 바랍니다. (블로그 오른쪽 배너로도 들어갈 수 있음.)

http://cafe.naver.com/stsmarthome/

1. 스마트싱스 개발홈에서 웹코어 설치하기

코어 설치과정과 동일하게 웹코어도 스마트싱스 허브 설치, GitHub 연결과정이 선행되어야 합니다. 코어 설치를 건너뛰고 웹코어로 바로 오신 분들은 아래 링크에서 GitHub 가입과 연결을 먼저 하시고 웹코어를 설치하시기 바랍니다. GitHub 연결을 건너뛰면 제대로 설치가 안됩니다.

[스마트홈, IoT] - 스마트싱스(SmartThings) 스마트 앱 코어(CoRE) 설치하는 방법

GitHub가 제대로 연결된 상태라면 스마트싱스 개발 홈에 들어갑니다.

https://graph.api.smartthings.com/

그런 다음에는 My Location에서 미리 설정한 Location(사용자마다 다르며 기본 Name은 My Home)을 클릭합니다.

이 과정은 아주 간단하지만 매우 중요합니다. 스마트싱스는 Location 단위로 허브와 사물(센서 등)을 설치하도록 하고 있습니다. 간단히 Location에 사물과 허브가 종속되는 개념인데 Location이 하나밖에 없더라도 어떤 Location인지 클릭하지 않으면 오류가 발생합니다. Location 클릭 없이 스마트앱을 설치하면 스마트싱스 앱에서 보이지 않습니다. 간혹 보이더라도 제대로 작동을 하지 않습니다. 이 부분은 스마트싱스 초기와 달라진 점인데 꼭 체크해야 할 부분입니다.

다양한 경로로 수집된 오류 리포팅 대부분의 원인은 위 과정을 빠뜨린 것이었습니다. 앞으로 DTH 설치 등 개발홈에서 작업을 할 경우에는 반드시 Location을 먼저 클릭해 주시기 바랍니다.

그러고 난 뒤에 My SmartApps에 Setting으로 들어갑니다.

Add new repository(저장소)를 누릅니다.

Owner에 ady624, Name에 webcore, Branch에 master를 입력합니다.

그런 다음 Update from Rapo를 눌러 webcore를 눌러줍니다. GitHub를 연결하지 않으면 이 과정에서 제대로 소스코드를 불러오지 않아서 설치가 안됩니다.

처음 설치하는 경우에는 맨 오른쪽에 네개의 체크박스를 볼 수 있습니다. 이 네개의 앱을 모두 설치해야 하지만 한꺼번에 설치하면 에러가 뜬다고 합니다.

따라서 webcore, webcore-dashboard, webcore-storage, webcore-piston순으로 설치해 줍니다. 순서는 제가 임의로 정한 것이라 정확한 것은 아닙니다. 중요한 것은 webcore를 먼저, webcore-piston을 마지막에 설치하는 것이라고 합니다. (주워들은 정보)

차례대로 앱 체크, Publish 체크, Excute Update를 누르는 방식으로 네 번 반복합니다.

그런 다음 WebCoRE 왼쪽에 Edit Properties를 눌러 들어갑니다.

OAuth부분에 Enable OAuth in Smart App를 누르고

Update를 누릅니다.

다시 WebCoRE를 눌러 소스로 들어간 뒤

Publish - For Me를 누릅니다.

2. 스마트 싱스 앱에서 설치하기

위 과정을 다 마쳤으면 스마스싱스 앱으로 들어갑니다. Automation - Add a SmartApp - 스마트 앱 나의 로 들어가면 WebCoRE가 떠 있는 것을 볼 수 있습니다. WebCoRE를 눌러 들어갑니다.

첫번째 화면에서 아래로 스크롤을 하면 비밀번호를 설정하는 부분이 있습니다. 비밀번호를 넣어줍니다. 그 다음화면에서 장비(Things)를 설정하는 부분이 나옵니다. 이 부분은 처음에 해도 되고 나중에 피스톤을 작성하기 전에 해도 상관이 없습니다. 장비는 Type과 Capacity 두 가지로 분류하여 입력할 수 있는데 어떤 사물인지 잘 파악하고 있다면 Type으로 입력하는 것이 간단합니다.

그리고 사물을 웹코어에 등록하기 전에 사물의 이름을 미리 변경해 두는 것이 좋습니다. 피스톤을 설정하고 나중에 사물의 이름을 바꾸면 제대로 반영이 안되는 경우가 간혹 있었습니다.  

모든 과정이 끝나면 Save를 하고 나옵니다. 그러면 다시 처음화면이 나오는데 중간에 Register a browser를 누릅니다.

비밀번호를 입력하면 웹브라우저 등록을 위한 4자리 코드가 뜹니다. 

https://dashboard.webcore.co/register

로 들어가서 4자리 코드를 입력해 줍니다. 웹코어는 계정생성없이 아래와 같은 브라우져 등록절차를 거치면 피스톤 등록 및 편집이 가능합니다.

3. 피스톤 편집을 사용할 PC에서 웹브라우저 등록하기

위 과정에 이어서

https://dashboard.webcore.co/register

에 브라우저 등록을 해 줍니다.

위에 앱에서 설정했던 비밀번호까지 입력하면 웹코어의 대시보드 화면으로 들어갈 수 있습니다.

스마트폰 앱에 화면이 떠 있다면 Save를 눌러 나옵니다.

4. 웹코어 대시보드 구경하기

웹코어의 설치과정은 위의 3번까지 하면 완료됩니다. 코어와 웹코어의 차이를 살짝 맛보기 위해서 웹코어의 대시보드를 구경해 보겠습니다.

Add a new piston을 눌러보면 피스톤 설치화면이 나옵나다. 최초로 피스톤을 설치한다면 Create a blank piston으로 들어가면 됩니다.

피스톤의 이름을 입력하고 Create를 누르면

아래와 같이 피스톤 생성화면이 나옵니다. add a new statement를 누르면

피스톤을 만드는 다양한 방법이 차례대로 나옵니다.

이미 코어를 사용하시는 분들이라면 아시겠지만 웹코어는 훨씬 더 직관적으로 피스톤을 작성하도록 잘 정비된 느낌입니다. Group기능이나 피스톤 Import기능도 참 기대되는 부분입니다. 지금 조금씩 피스톤을 웹코어로 옮기고 있는데 작은 스마트폰 화면이 아닌 큰 모니터로 작업하다보니 피스톤 작성 및 편집도 훨씬 수월한 느낌입니다.

Physical device(s)는 위의 앱에서 사물 등록절차를 거쳐야만 나옵니다. 저도 웹코어 설치에 맞추어 사물의 이름을 다시 정비하였습니다. 아래는 정비 전에 캡쳐한 화면인데 장비의 사용목적이나 설치 장소 등이 잘 표시될 수 있도록 이름을 정하는 것이 좋습니다. 또한 알렉사와 같이 AI스피커를 이용하여 조정하기를 원한다면 이름은 반드시 영어로 작성해야 합니다.

피스톤 만드는 과정은 저도 배우는 입장이라 간단히만 적겠습니다. 나중에 조금 더 배우거든 다른 포스팅에서 적도록 하겠습니다. 웹코어 설치에 참고하시기 바랍니다.