Things Gateway 프로젝트는 표준화된 HTTP 기반 API를 사용하여 여러분의 모든 IoT 기기를 하나로 통합하여 제공할 수 있는 플랫폼입니다. 우리는 최근에 Things Gateway를 발표했으며 Gateway를 구축하고 Web of Things를 가지고 놀 수 있는 실습 프로젝트 시리즈를 게시하기 시작했습니다. 2월 초에 Gateway 부가 기능을 만드는 방법에 대한 고급 레벨 개요를 게시했습니다.

이 글에서는 우리가 지금까지 배웠던 것으로 Gateway를 위한 진짜 부가 기능을 구축할 것입니다. 이 부가 기능은 라이트나 다른 기기를 제어하는데 사용할 수 있는 박수 인식 Web Thing을 제공합니다.

이 예제에서는 박수로 활성화되는 라이트를 만드는 것을 목표로 JavaScript로 Gateway 부가 기능을 작성할 것입니다. 입력을 위해 마이크가 필요하므로, 마이크를 Gateway에 연결하고 박수 인식 Web Thing으로 설정할것입니다. 예제를 따라하시려면 Raspberry Pi에 기본 USB 마이크를 연결하시기 바랍니다. eLinux 인증 USB 사운드 카드 모두는 마이크 입력을 얻기 위한 좋은 옵션입니다.

생성하려는 마이크 부가 기능의 종류를 결정한 후에 코드를 위한 뼈대로 사용할 부가 기능 예제를 복사하는 것부터 시작합니다. 그 다음, 뼈대에 약간의 코드를 추가하고 Gateway로 부가 기능을 테스트하는 것으로 마칩니다.

부가 기능 개요 작성

부가 기능의 어댑터가 제공하는 “장치”로써 우리가 원하는 것에대해 생각해야 합니다. 부가 기능이 여러 기기를 다룰 수 있는 어댑터를 제공할 수 있지만, 우리는 박수 소리를 들을 마이크 하나만 갖고 있으므로 이를 간소화할 수 있습니다. 우리는 마이크를 “박수 센서” 장치로써 효과적으로 사용하고 있습니다. 다음으로, 박수 인식을 수행할 방법에 대해 생각해야합니다. npmjs.com에서 Thomas Schell이 개발한 오픈 소스 라이브러리 clap-detector를 검색합니다. 우리의 어댑터는 박수 센서로써 마이크를 사용하기 위해 이 라이브러리를 포함합니다.

이제 박수 센서에 대한 우리의 아이디어가 기존의 Web Thing 타입에 적합한지 고려해야합니다. Web of Things 사양의 중요한 부분은 각 Thing이 Gateway와 다른 API의 소비자들에게 사용가능한 프로퍼티, 동작 및 이벤트를 알려주는 장치 타입을 갖는다는 것입니다. 예를 들면, dimmableLight 타입은 라이트를 켜고 끄거나 희미하게 할 수 있음을 나타냅니다. Web Thing 타입 목록의 활성화 및 비활성화 상태를 갖는 binarySensor가 박수 센서의 박수 상태와 묵음 상태를 위해 가장 적합합니다.

코드 작성

이제 구현을 시작합니다. Gateway 소프트웨어가 컴퓨터에 설치되어있다면 개발을 시작할 수 있습니다. Raspberry Pi 0.3.0 릴리즈를 갖고 계시다면, 이 설명에 따라 로그인하고, ~/mozilla-iot/gateway/src/addons 폴더를 따라가면 됩니다. 다른 방법으로는, 여러분이 Gateway 소프트웨어를 Github 프로젝트 페이지의 설명에 따라 로컬에 설치했다면, 그 복사본 내의 src/addons 폴더를 따라가면 됩니다.

두 번째 단계는 src/addons 폴더 안에 example-adapter 코드의 복사본을 다운로드하여 모든 것을 처음부터 작성하는 대신 존재하는 어댑터를 수정할 수 있게 하는 것입니다. Pi에 git이 설치되었는지 확인한 후 example-adapter repo를 클론합니다.

cd ~/mozilla-iot/gateway/src/addons
sudo apt install git
git clone https://github.com/mozilla-iot/example-adapter

이 단계가 끝나면 src/addons안에 example-adapter 폴더가 생깁니다. 이제 clap-detector 라이브러리로 박수 인식 binarySensor의 활성화 프로퍼티를 업데이트하는 작업을 진행할 수 있습니다. example-adpater 폴더안의 example-plugin-adapter.js 파일만 수정하면 됩니다.

먼저, 예제 adpater의 제네릭한 일부를 제거합니다. 이름을 바꾸는 작업이 많으므로 에디터의 찾아 바꾸기 기능을 활용하시기 바랍니다. 우리는 센서를 활성화하는 하나의 프로퍼티만 필요하므로, ExampleProperty를 ActiveProperty로 변경합니다.

class ActiveProperty extends Property {

ExampleDevice가 박수 센서로만 사용될 것을 알고 있으므로, 이를 ClapSensor로 변경합니다. 또한 ClapSensor 생성자의 ExampleProperty를 ActiveProperty로, addDevice안의 ExampleDevice를 ClapSensor로 변경해야 한다는 점을 유의하세요.

class ClapSensor extends Device {
  constructor(adapter, id, deviceDescription) {
    super(adapter, id);
    this.name = deviceDescription.name;
    this.type = deviceDescription.type;
    this.description = deviceDescription.description;
    for (var propertyName in deviceDescription.properties) {
      var propertyDescription = deviceDescription.properties[propertyName];
      var property = new ActiveProperty(this, propertyName,
                                         propertyDescription);
      this.properties.set(propertyName, property);
    }
  }
}

지금 상태에서 마지막으로 수정할 작업은 로딩 함수내에 binarySensor를 만드는것입니다. 따라서 다음과 같이 addDevice내의 ExampleDevice와 loadExamplePluginAdapter를 수정합니다:

class ClapSensorAdapter extends Adapter {
  // ...
  addDevice(deviceId, deviceDescription) {
    return new Promise((resolve, reject) => {
      if (deviceId in this.devices) {
        reject('Device: ' + deviceId + ' already exists.');
      } else {
        var device = new ClapSensor(this, deviceId, deviceDescription);
        this.handleDeviceAdded(device);
        resolve(device);
      }
    });
  }
  // ...
}

function loadExamplePluginAdapter(addonManager, manifest, _errorCallback) {
  var adapter = new ExamplePluginAdapter(addonManager, manifest.name);
  var device = new ClapSensor(adapter, 'clap-sensor-0', {
    name: 'Clap Sensor',
    type: 'binarySensor',
    description: 'Clap Sensor',
    properties: {
      active: {
        name: 'active',
        type: 'boolean',
        value: false,
      },
    },
  });
  adapter.handleDeviceAdded(device);
}

이제 clap-detector가 어떻게 동작하는지 알아봅시다. clap-detector 문서에 따르면 이를 우리의 adapter에서 사용하기 전에 sox와 clap-detector를 설치해야합니다.

cd ~/mozilla-iot/gateway/src/addons/example-adapter
sudo apt-get install sox
npm install --save clap-detector

그러면 clap-detector 문서의 API 예시를 통해 박수가 발생했는지 여부를 얻을 수 있습니다:

const clapDetector = require('clap-detector');

// 박수 인식 시작
clapDetector.start();

// 박수 이벤트 등록
clapDetector.onClap(function(history) {
    console.log('clapping is happening', history)
});

그 다음, 박수를 인지했을 때마다 그 상태를 토글링하기 위해 이를 우리의 ActiveProperty에 연결합니다.

var clapDetector = require('clap-detector');
// 박수 인식 시작
clapDetector.start();

class ActiveProperty extends Property {
  constructor(device, name, propertyDescription) {
    super(device, name, propertyDescription);
    this.unit = propertyDescription.unit;
    this.description = propertyDescription.description;
    this.setCachedValue(propertyDescription.value);
    this.device.notifyPropertyChanged(this);

    clapDetector.onClap(function() {
      console.log('clap!');
      this.value = !this.value;
      this.setCachedValue(this.value);

      this.device.notifyPropertyChanged(this);
    }.bind(this));
  }
  // ...
}

박수로 불 켜기

이 프로젝트의 코드 부분은 끝났습니다. 이제 example-adapter의 박수 인식 버전을 설치하고 우리가 원하는 것을 수행하면 됩니다. 먼저, Gateway를 재시작해 부가 기능이 깨끗이 로드되도록 합니다. sudo systemctl restart mozilla-iot-gateway.service를 실행하고 Gateway가 재시작될때까지 기다립니다. 이제 Gateway의 설정 화면으로 이동해 부가 기능이 동작하고 있는 것을 확인할 수 있습니다. 설정 화면에 부가 기능이 나열되어있지 않다면, tail -n +0 -f ~/mozilla-iot/gateway/run-app.log를 실행하고 로그에서 문제를 확인해보시기 바랍니다:

다음으로, Gateway의 메인 Things 페이지의 더하기 표시를 클릭해 ClapSensor 기기를 추가하고 “Clap Sensor”로 명명되어 나타나는 binarySensor를 저장합니다:

이제 마이크 근처에서 박수를 쳐 우리의 기기를 테스트해볼 수 있습니다. 의도한대로 동작한다면, 박수를 칠 때마다 센서가 켜지고 꺼져야 합니다. 그렇지 않다면, 박수 센서 설정을 조절해보거나 공식 ClapSensor 코드와 여러분의 코드를 비교해보시기 바랍니다.

모든것이 잘 동작한다면 우리가 박수를 칠 때마다 라이트를 켜거나 끄도록 규칙을 설정할 수 있습니다. Gateway의 Rules 페이지로 이동해 더하기 표시를 클릭해 새 규칙을 추가합니다. 하단의 기기 목록에서 박수 센서를 선택하고 드래그하여 트리거에 위치시킵니다. 트리거의 프로퍼티를 “on”으로 선택하여 센서가 비활성화에서 활성화 상태가 될때마다 트리거되도록 합니다. 다음으로, 여러분이 원하는 라이트를 드래그하여 규칙 영역의 효과 섹션에 놓습니다. 켜려는 라이트를 선택합니다. 문제가 생겼다면 아래에 나타나는 완전한 규칙을 참고하시기 바랍니다. 이제 박수를 쳐 라이트를 켜거나 끌 수 있습니다:

읽어 주셔서 감사합니다! 더 알고 싶으시다면, Mozilla IoT 메인 페이지에서 Web of Things에 대한 더 많은 내용과 컨트리뷰트 방법을 확인하실 수 있습니다!