🧩 전기장판을 애플 홈에 연결해보자 — 2편 플러그인 개발

Homebridge 플러그인을 개발해보자!

이전 편— 리버싱편

안녕하세요, 스마트 홈 자동화에 진심인 개발자 전성우입니다.

[embed]🧩 전기장판을 애플 홈에 연결해보자 — 1편 리버싱 직접 Homebridge 플러그인을 개발해보자!medium.com

이전 편에선 스마트폰 앱을 분석해서 전기장판을 코드로 제어하는 방법을 알아냈습니다. 이번 편에선 알아낸 코드를 이용해서 애플 홈이 전기장판을 제어할 수 있도록 연결해주는 홈브릿지 플러그인을 개발해보도록 하겠습니다.

홈브릿지란?

이전 편에서도 설명했지만 다시 간단히 설명드리자면, 홈브릿지란 node.js 기반으로 Apple HomeKit과 쉽게 연동할 수 있게 해주는 프로그램입니다.

홈브릿지를 설치하고 나면 위와 같이 UI에서 원하는 플러그인을 검색하고 설치할 수 있습니다. 이 플러그인들은 기업/단체에서 공식으로 배포하는 것이 아니고 개인 개발자들이 직접 개발하고 배포하는 것입니다.

그래서 저도 개발자로서, 플러그인을 개발해보자 생각이 들었습니다.

[embed]Homebridge Plugin Developer Documentation Homebridge plugin developer documentation and API reference.developers.homebridge.io

플러그인 개발을 하기 위해서 검색해보니 위 공식 개발 문서를 찾았습니다. 플러그인 템플릿 레포지토리를 포크해서 홈브릿지 API에 맞게 코드를 짜주면 된다고 합니다. 이제 개발환경을 구축해봅시다.

준비 1단계 — 개발 환경 구축하기

[embed]GitHub - homebridge/homebridge-plugin-template: A template you can use to create your own… A template you can use to create your own Homebridge plugins. - homebridge/homebridge-plugin-templategithub.com

개발 환경을 구축하는 방법에 대해선 위 템플릿 레포지토리의 README에 자세히 적혀 있습니다. 그런데 글을 읽어보니 개발하기 번거로울 것 같은 부분이 있습니다.

Link To Homebridge 을 보면 다음과 같이 하라고 적혀 있습니다.

1. npm link를 통해 개발중인 플러그인을 글로벌로 설치한다.
2. homebridge 인스턴스를 실행한다.

여기서 문제는 홈브릿지가 설치된 기기와 플러그인를 개발하는 기기가 같아야 한다는 점입니다. 저는 홈브릿지는 시놀로지 나스에 설치했고, 플러그인 개발은 제 맥북에서 하려고 하기 때문에 이를 맞춰줄 수 없습니다. 😥

가장 심플한 해결책은 실행할 때 마다 scp를 하거나 git push & pull을 해서 배포하는 방법이 있긴 합니다만, 매우 번거로울 것이 뻔했습니다.

그래서 생각한 방법은 실제 시놀로지 나스는 납두고, 제 맥북에다가 별도의 홈브릿지를 설치해 개발하는 동안 제 맥북을 홈브릿지 서버로써 동작시키는 것입니다.

$ npm install -g homebridge homebridge-config-ui-x

홈브릿지 설치는 간단합니다. npm 패키지를 글로벌로 설치해주기만 하면 됩니다. (참고로 homebridge-config-ui-x 패키지는 홈브릿지 UI에 대한 패키지로 홈브릿지가 실행 중에 localhost:8581로 접근하면 웹 UI를 제공합니다.)

이제 제 맥북에서 플러그인를 실행할 수 있게 되었습니다.🥳

그런데 여기서 끝이 아니고 이제 디버깅 환경을 갖춰야합니다. 저는 개발을 할 때, IDE(주로 VS Code)에서 디버깅 모드로 실행(혹은 Attach)하여 브레이킹 포인트를 잡거나, 변수의 값을 확인하는 등의 디버깅 환경을 갖추는 것이 매우 중요하다고 생각합니다.

일반적인 개발(프론드엔드 or 백엔드)에서의 디버깅 환경을 갖추는 것은 매우 간단하지만 이렇게 특수한 상황에서는 갖추기가 복잡합니다. 다행히도 관련해서 찾아보니 비교적 간단히 디버깅 환경을 갖출 수 있었습니다.

아래 두 글을 참고해서 VS Code에서 디버깅 환경을 만들었습니다

• Reddit — Live debugging using VSCode
• YouTube — Getting Started with Homebridge Plugin Development

**lanch.json**

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "Debug Homebridge",
      "program": "${workspaceFolder}/node_modules/.bin/homebridge",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "internalConsoleOptions": "neverOpen",
      "args": ["-I", "-D"],
      "request": "launch",
      "skipFiles": [
        "<node_internals>/**"
      ],
    }
  ]
}

program에 설치한 홈브릿지 프로그램의 주소를 적어줍니다. ($ which homebridge)

참고로 저는 글로벌로 설치하지 않고 devDependencies에 homebridge와 homebridge-config-ui-x를 추가하고 node_modules에 있는 바이너리 주소를 넣어줬습니다.

**tasks.json**

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc: build - tsconfig.json",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": [
                "$tsc"
            ]
        }
    ]
}

타입스크립트 프로젝트이기 때문에, 실행하기 전 무조건 빌드하고 실행할 수 있도록 빌드 태스크도 추가해줬습니다.

이렇게 해서 VS Code에서 Ctrl + F5 로 홈브릿지 서버와 플러그인을 실행시키고, 브레이크 포인트 잡을 수 있는 등 개발 + 디버깅 환경을 모두 갖추었습니다.

(참고로 별도의 홈브릿지 서버기 때문에, 최초 한 번 localhost:8581을 켜고 애플 홈에서 추가해줘야 합니다.)

준비 2단계 — 홈브릿지 플러그인 구조 파악하기

[embed]Homebridge Plugin Developer Documentation Homebridge plugin developer documentation and API reference.developers.homebridge.io

뭐든지 개발을 하기 앞서 본인이 개발하려는 프레임워크에 대해 잘 이해해야 합니다. 홈브릿지 플러그인에 대한 설명은 위 사이트에서 예시 코드 등으로 볼 수 있지만 사실 이것만 보고 이해하기가 쉽지 않습니다. 제가 개발하면서 느낀 구조를 보기 쉽게 다이어그램으로 정리해보았습니다.

[embed]

• 플랫폼 플러그인 (Platform Plugin) 플러그인이 실행되는 최상단 엔트리 포인트로써, 캐시된 엑세서리를 불러오거나 동적(API 호출 등)으로 기기를 검색/브라우징 한 후 이를 플랫폼 엑세서리 객체로 만듭니다.
• 액세서리 (Accessory) 기기 하나에 대응대는 객체입니다. 만약 스마트 전구 플러그인이라면 집 안의 여러 전구 하나하나 마다 액세서리 객체를 가집니다. (기기마다 구별할 수 있는 고유 아이디 값을 가지고 있어야 합니다.)
• 서비스 (Service) 관련된 여러 특성/정보(캐릭터리스틱)에 대한 그룹으로써, 엑세서리 하나에 여러 개의 서비스가 있을 수 있습니다. 예를 들어 불빛이 나는 선풍기란 엑세서리는 LightBulb 서비스로 불빛 제어, Fan 서비스로 풍향, 풍속 제어 등을 할 수 있다고 생각하면 됩니다.
• 캐릭터리스틱 (Characteristic) 서비스가 가지고 있는 특성/정보 들을 의미합니다. 예를 들어 Fan 서비스에는 [On](https://developers.homebridge.io/#/characteristic/On) (boolean), [Name](https://developers.homebridge.io/#/characteristic/Name) (string), [Rotation Direction](https://developers.homebridge.io/#/characteristic/RotationDirection) (enum), [Rotation Speed](https://developers.homebridge.io/#/characteristic/RotationSpeed) (float) 의 캐릭터리스틱이 있습니다.

캐릭터리스틱은 각각의 캐릭터리스틱마다 onGet, onSet 라는 이벤트 핸들러가 있는데, onGet은 애플 홈 앱이 켜질 때처럼 정보를 요청할 때 불리고, onSet은 애플 홈에서 조작을 할 때 같이 기기를 제어할 때 불립니다.

우리는 onGet 에선 기기의 상태를 읽어서 리턴하고, onSet에선 API를 호출하기만 하도록 구현하면 됩니다.

개발 1단계 — 가짜로 동작하는 플러그인 만들기

실제 API와 소통하지 않고 가짜 데이터를 기반하는 플러그인 구조

실제 나비엔 API와 연동하는 비즈니스 로직을 구현하기 전에 플러그인 부분을 먼저 구현하고자 합니다. 실제 기기 상태를 읽지 않고, 메모리상 가짜 데이터를 넘겨주고 이를 기반으로 동작하는 것을 먼저 확인할 것입니다.

이렇게 레이어를 나눠야 테스트하기도 쉽고, 개발 중 문제가 생겼을 때 플러그인 부분이 문제인지, 비즈니스 로직 부분이 문제인지 알기 쉽습니다. 한 번에 개발한다면 어디서 문제인지 알기가 쉽지 않죠. 마지막에 비즈니스 로직을 구현하고 나면 가짜 부분을 실제 서비스로 갈아치우기만 하면 됩니다.

이제 PlatformPlugin를 구현해봅시다.

export class NavienHomebridgePlatform implements DynamicPlatformPlugin {
  constructor(
    public readonly log: Logging,
    config: PlatformConfig,
    public readonly api: API,
  ) {
    // ...
    this.api.on('didFinishLaunching', this.onLaunched.bind(this));
  }

  async onLaunched() {
    this.log.info('onLaunched called');

    // run the method to discover / register your devices as accessories
    const devices = this.service.getDevices();
    for (const device of devices) {
      this._registerDeviceAsAccessory(device);
    }
  }

  private _registerDeviceAsAccessory(device: NavienDevice) {
    this.log.info('Adding new accessory:', device.name);

    const uuid = this.api.hap.uuid.generate(device.id);
    const accessory = new this.api.platformAccessory<NavienDeviceContext>(device.name, uuid);
    accessory.context.device = device;

    new ElectricMat(this, accessory);

    this.api.registerPlatformAccessories(PLUGIN_NAME, PLATFORM_NAME, [accessory]);
  }
}

(대부분 템플릿에서 포크한 코드이기 때문에 중요한 부분만 가져와봤습니다.)

플러그인은 실행되었을 때, 기기를 검색하고 이를 액세서리로 등록합니다. 우리는 우선 API 호출을 하지 않고 service.getDevices()에서 하드 코딩된 기기 목록을 리턴하도록 합시다.

이제 생성된 Accessory를 관리하는 ElectricMat 클래스를 만들어봅시다.

export default class ElectricMat {
  constructor(
    private readonly platform: NavienHomebridgePlatform,
    private readonly accessory: NavienPlatformAccessory,
  ) {
    const { device } = accessory.context;

    // set accessory information
    this.accessory.getService(Service.AccessoryInformation)!
      .setCharacteristic(Characteristic.Manufacturer, 'Navien')
      .setCharacteristic(Characteristic.Model, device.modelName)
      .setCharacteristic(Characteristic.SerialNumber, device.id);

    // TODO: implement
  }
}

기본적으로 필요한 [AccessoryInformation](https://developers.homebridge.io/#/service/AccessoryInformation) 서비스를 통해 기기의 정보들을 넣어줍니다. 넣어준 정보는 다음과 같이 애플 홈에서 기기의 상세 정보 화면에 나타납니다.

개발 1–2단계 — 기기의 카테고리 설정하기

[embed]Homebridge Plugin Developer Documentation Homebridge plugin developer documentation and API reference.developers.homebridge.io

애플 홈에선 다양한 기기의 카테고리를 제공합니다. 전구💡나 스위치🔌부터 시작해서 도어벨🔔, 도어락🔒이라든지, 심지어 샤워 헤드🚿 (⁉️)타입도 있습니다! 🫢

전기 장판은 어떤 카테고리가 적합할 지 찾아보니, 온도 조절 관련한 기기 카테고리는 [HeaterCooler](https://developers.homebridge.io/#/service/HeaterCooler)와 [Thermostat](https://developers.homebridge.io/#/service/Thermostat)이 있었습니다.

문서를 읽어보니 HeaterCooler는 에어컨인데, 특정 온도로 설정하지 못하고 냉/난방만 설정할 수 있는 기기, Thermostat은 보일러나 집안 온도조절기처럼 특정 온도를 설정하면 그에 따라 냉/난방이 동작하는 기기로 이해했습니다. 그래서 Thermostat이 더 적합하다고 생각했습니다.

// create thermostat service
const thermostat = this.accessory.getService(Service.Thermostat)
  || this.accessory.addService(Service.Thermostat);

위와 같이 Thermostat 서비스를 생성합니다. 엑세서리가 처음 생성될 땐 getService()가 undefined를 리턴하고, addService()를 통해서 서비스가 추가됩니다. 캐싱이 된 이후로부턴 getService()를 통해 서비스에 접근합니다.

Thermostat에는 다음과 같은 5개의 캐릭터리스틱이 있습니다.

• Current Heating Cooling State
• Target Heating Cooling State
• Current Temperature
• Target Temperature
• Temperature Display Units

이를 모두 구현해줘야 하는데, 그 전에 잠깐 각각 캐릭터리스틱의 onGet, onSet 에서 불릴 이벤트 핸들러를 모두 정의해줍시다.

export default class ElectricMat {
  private async getHeatingState(): Promise<CharacteristicValue> {
    const { isActive } = this.device;
    const state = isActive ? Characteristic.CurrentHeatingCoolingState.HEAT : Characteristic.CurrentHeatingCoolingState.OFF;
    return state;
  }

  private async setHeatingState(value: CharacteristicValue) {
    const state = value as number;
    const isActive = !!state;
    this.device.isActive = isActive;
  }

  private async getTemperature(): Promise<CharacteristicValue> {
    const { temperature } = this.device;
    return temperature;
  }

  private async setTemperature(value: CharacteristicValue) {
    const temperature = value as number;
    this.device.temperature = temperature;
  }
}

현재는 단순히 device의 필드 값을 읽고 쓰기만 하는 핸들러를 작성합시다. 참고로 추후에 이벤트 핸들러에서 API 요청을 보낼 것이므로 모두 async 함수로 만들어 놓습니다.

이제 각각의 캐릭터리스틱에다가 작성한 이벤트 핸들러를 넣어줍시다.

// current state
thermostat.getCharacteristic(Characteristic.CurrentHeatingCoolingState)
  .setProps({
    validValues: [
      Characteristic.CurrentHeatingCoolingState.OFF,
      Characteristic.CurrentHeatingCoolingState.HEAT,
    ],
  })
  .onGet(this.getHeatingState.bind(this));

// target state
thermostat.getCharacteristic(Characteristic.TargetHeatingCoolingState)
  .setProps({
    validValues: [
      Characteristic.TargetHeatingCoolingState.OFF,
      Characteristic.TargetHeatingCoolingState.HEAT,
    ],
  })
  .onGet(this.getHeatingState.bind(this))
  .onSet(this.setHeatingState.bind(this));

첫번째 HeatingCoolingState는 현재 설정된 냉/난방 상태 정보를 나타냅니다. 전기장판은 (당연하게도) 냉방을 지원하지 않으니까 validValues에 OFF와 HEAT 만을 주어서 끄기/난방만 설정할 수 있도록 합니다.

참고로 Current와 Target 의 차이는 자동 냉/난방을 모두 지원하는 기기를 위한 옵션입니다. 예를 들어 Target을 자동(TargetHeatingCoolingState.AUTO)으로 설정하면 기기는 설정된 온도에 따라 알아서 냉/난방을 합니다. 그 때 현재 동작하고 있는 상태를 나타내는 특성이 Current입니다. (당연하게도CurrentHeatingCoolingState는 AUTO가 없습니다.)

우리는 해당 사항이 아니므로 두 특성을 똑같이 처리합시다.

// current temperature
thermostat.getCharacteristic(Characteristic.CurrentTemperature)
  .onGet(this.getTemperature.bind(this));

두번째 CurrentTemperature는 현재 측정되는 온도(실내 온도)를 나타냅니다. 실내온도 정보도 있는 에어컨과 달리 전기장판에는 그런 기능이 없으므로 그냥 현재 설정된 온도를 리턴하도록 합시다. (이로 인해 애플 홈 요약에서 집의 온도가 전기장판 설정온도로 나오게 됩니다. 요약에서 제외를 눌러서 제외시켜 줍시다.)

// target temperature
const { heatRange } = device.functions;
thermostat.getCharacteristic(Characteristic.TargetTemperature)
  .setProps({
    minValue: heatRange.min,
    maxValue: heatRange.max,
    minStep: heatRange.step,
  })
  .onGet(this.getTemperature.bind(this))
  .onSet(this.setTemperature.bind(this));

세번째 TargetTemperature는 현재 설정된 온도를 나타냅니다. minValue, maxValue, minStep 등을 주어서 기기가 설정가능한 온도 범위를 정해줍니다.

// temp unit
thermostat.getCharacteristic(Characteristic.TemperatureDisplayUnits)
  .setProps({
    validValues: [Characteristic.TemperatureDisplayUnits.CELSIUS],
  })
  .setValue(Characteristic.TemperatureDisplayUnits.CELSIUS);

마지막 TemperatureDisplayUnits는 온도 단위입니다. 전기장판이 섭씨를 기반으로 동작하기 때문에 화씨로 설정을 바꿔도 무시합시다. 기존과 다르게 onGet, onSet을 주지 않고 setValue로 고정된 값을 줍니다.

짜잔~🤭 아직 API 연동은 하지 않아 실제 기기 조작은 안 되지만, 제 아이폰의 컨트롤 센터에서 위 화면과 같이 제어할 수 있는 UI가 생겼습니다.

온도 범위와 OFF/HEAT 옵션 등이 코드에서 설정한대로 잘 반영되었습니다. 위에서 만든 이벤트 핸들러에 로그를 추가해보면 UI를 조작할 때, 요청이 잘 오는 것도 볼 수 있습니다.

이제 실제 API와 연동을 해볼 차례입니다.

개발 1–3단계 — 설정 UI 만들기

[embed]Homebridge Plugin Developer Documentation Homebridge plugin developer documentation and API reference.developers.homebridge.io

당연하겠지만 실제 API에 요청을 보내기 위해선 로그인을 해야 합니다. 즉 앱의 계정 정보🔑가 필요한데 이 필요한 정보를 유저가 설정 UI에서 입력해서 받을 수 있도록 해줍시다.

홈브릿지 플러그인은 config.schema.json를 스펙에 맡게 구성하면 이에 맞게 알아서 설정 UI를 구성해줍니다. (참고로 이 JSON 규격을 *Angular JSON Schema Form*라고 한다고 합니다. demonstration playground를 통해서 라이브로 테스트를 해볼 수 있습니다.)

**config.schema.json**

{
  "pluginAlias": "NavienSmart",
  "pluginType": "platform",
  "singular": true,
  "schema": {
    "type": "object",
    "properties": {
      "username": {
        "title": "Username",
        "type": "string"
      },
      "password": {
        "title": "Password",
        "type": "string"
      }
    }
  }
}

우리 플러그인에는 단순히 아이디, 비밀번호만 필요하므로 위와 같이 구성해줍시다.

config.schema.json 에 따라 생성된 설정 UI

홈브릿지 설정 페이지에서 확인해보면 위와 같은 UI가 생기는 것을 볼 수 있습니다.

이제 이 설정은 런타임에서 config란 파라미터로써 플러그인 생성자에서 주입되어 {"username": "<your-username>", "password": "<your-password>"}와 같이 JSON으로 넘어오게 됩니다. 이제 이 config에서 값을 읽어 로그인 처리를 해줍시다.

개발 2단계 — 로그인 처리하기

기존 가짜 플러그인 구조에서 로그인만 연동해봅시다.

로그인은 이전 포스트에서 얘기했듯이 다음과 같이 동작합니다.

두 가지의 인증 과정이 있는데 1. 웹 로그인과 2. 토큰 로그인 으로 나뉘어 있었습니다. 웹에서 UI를 통해 유저에서 아이디와 패스워드를 받으면 Form 태그로 로그인 요청을 보내고, 로그인 성공 시 인증 정보(토큰 등)을 안드로이드/iOS 웹뷰에게 콜백으로 보냅니다. 앱에서는 이 정보를 받아서 토큰 로그인 API 요청을 보내서 최종적으로 로그인을 완료합니다.

우선 웹로그인을 따라해야 합니다. 웹 로그인을 HTML의 Form 기반으로 하고 있는데 이를 Postman에서 따라서 요청해보니 다행히 동작합니다. 그래서 이걸 기반으로 코드로 옮겨서 테스트해보니 node.js 단에선 500 응답이 넘어옵니다. 😱

node-fetch를 axios 로 바꿔도 보고, HTTP 1.1/2.0 문제인가 싶어서 바꿔보고, 여러가지 변경해봐도 동일했습니다. 도저히 원인을 모르겠는… 미궁에 빠졌습니다.

그러다가 curl로 요청을 해도 마찬가지로 동작을 하지 않는 것을 발견했습니다. 자세한 확인을 위해 curl -v로 요청을 보내보니 POST /member/login 은 로그인 성공으로 처리해서 /member/loginOk로 리다이렉트를 하는데, 이 요청의 응답이 500이 나오고 있다는 것을 발견, 이게 node.js 에서 받는 응답과 동일하다는 것을 알았습니다.

리다이렉트할 때 어떤 쿼리 스트링이나 헤더 같은 것이 없었으므로, 세션/쿠키 등을 통해 인증 정보를 주는 것 같다고 추측🧐, Postman은 자체 쿠키 컨테이너가 있으니 되고, curl과 node-fetch는 기본적으로는 쿠키 컨테이너가 없이 동작하니 500 이슈가 생긴 것으로 보였습니다.

[embed]fetch-cookie Decorator for a fetch function to support automatic cookies.. Latest version: 3.0.1, last published: 9 months ago…www.npmjs.com

fetch가 쿠키 컨테이너랑 함께 동작하는 패키지를 찾아서 이를 적용해봤는데, 빙고~! 이제는 500없이 Postman과 동일한 응답이 넘어옵니다. 🤩

이 후엔 응답 HTML 내 javascript 태그에서 웹뷰로 보낼 JSON을 그대로 파싱해서 가져오고, 이를 통해 토큰 로그인 API를 호출해보니 잘 동작합니다. 로그인 완료!

개발 3단계 — API 호출하기

연동한 로그인을 기반으로 API도 연동해봅시다.

이제 로그인도 연동했고, 얻은 credentials을 통해 API를 호출하면 됩니다.

필요한 곳에 이전에 리버싱해서 얻은 기기 목록 API, 기기 제어 API를 사용해봅시다.

• 기기 목록 API PlatformPlugin이 기기를 찾는 부분에서 API를 호출하도록 수정합니다.

async onLaunched() {
  this.log.info('onLaunched called');

  // run the method to discover / register your devices as accessories
  const devices = await this.service.getDevices()
  for (const device of devices) {
    this._registerDeviceAsAccessory(device);
  }
}

• 기기 제어 API 각각의 캐릭터리스틱 onSet에서 API 호출을 하도록 수정합니다.

private async setHeatingState(value: CharacteristicValue) {
  const state = value as number;
  const isActive = !!state;

  // api calll
  await this.service.activate(this.device, isActive);
}

private async setTemperature(value: CharacteristicValue) {
  const temperature = value as number;

  // api call
  await this.service.setTemperature(this.device, temperature);
}

(위에서 얘기했듯이, 여기서 service를 기존 Fake로 동작하는 서비스에서 실제 API를 호출하는 서비스로 갈아끼워 주기만 하면 됩니다.)

이제 플러그인이 실행될 때, 알아서 내 계정에 등록된 전기장판을 찾아서 애플 홈에 보여주고, 애플 홈 UI에서 조작 시 실제로 기기가 조작이 됩니다. 이제 거의 다 왔다!!!

개발 4단계 — AWS PubSub 연동하기

[embed]마지막으로 실제 기기 상태를 알려주는 AWS PubSub 를 연동해봅시다.

이제 마지막으로 AWS PubSub 연동만이 남았습니다. 현재까진 기기의 상태를 내부 메모리 변수에 저장한 것을 보여주고 있기 때문에 만약 애플 홈이 아니라 직접 기기를 조작한다면 실제 기기의 상태와 달라지게 됩니다. 실제 기기의 상태와 싱크🔄를 해봅시다.

PubSub을 관리하는 클래스를 만들어 봅시다. 이전 포스트에서 설명한 것과 같이 인증도 할 수 있도록 하고, 우리가 궁금한 이벤트를 알려주는 메소드도 만들어봅시다.

import { PubSub } from '@aws-amplify/pubsub';
import { filter, map, Observable } from 'rxjs';

export class AwsPubSub {
  private readonly _pubsub: PubSub;

  constructor(...) {
    // create pubsub instance
    this._pubsub = new PubSub({
      region: AWS_IOT_REGION,
      endpoint: `wss://${AWS_IOT_ENDPOINT}/mqtt`,
      clientId: "<client-id>",
    });
  }

  public deviceStatusChanges(deviceId: string): Observable<DeviceEvent> {
    return this._pubsub.subscribe({
      topics: [
        `$aws/things/${deviceId}/shadow/name/.../get/accepted`,
        `$aws/things/${deviceId}/shadow/name/.../update/accepted`,
      ],
    }).pipe(
      // event is Record<string, unknown> type, so we double cast it
      map((event) => event as unknown as DeviceEvent),
      // ignore if it doesn't have state.reported
      filter((event) => !!event.state.reported),
    );
  }
}

기기의 이벤트를 구독하고 그 중 필요한 이벤트만 필터하는 Observable를 만들어줍니다. (참고로 PubSub 라이브러리가 rxjs 기반으로 동작하길래 동일하게 맞춰주었습니다.)

import { BehaviorSubject, Subscription } from 'rxjs';

export interface NavienDevice extends Device { }

export class NavienDevice {
  private _isActive: boolean | null = null;
  private _temperature: number | null = null;

  private readonly isActiveSubject = new BehaviorSubject<boolean | null>(null);
  private readonly temperatureSubject = new BehaviorSubject<number | null>(null);

  constructor(
    private readonly pubsub: AwsPubSub,
    json: Device,
  ) {
    Object.assign(this, json);

    this.pubsub.deviceStatusChanges(this.id).subscribe((event) => {
      // parse status
      const state = event.payload.state.reported!;
      const isActive = ...;
      const temperature = ...;

      this.isActive = isActive;
      this.temperature = temperature;
    });
  }

  get isActive() {
    return this._isActive;
  }

  set isActive(value: boolean | null) {
    if (this._isActive === value) {
      return;
    }
    this._isActive = value;
    this.isActiveSubject.next(value);
  }

  get temperature() {
    return this._temperature;
  }

  set temperature(value: number | null) {
    if (this._temperature === value) {
      return;
    }
    this._temperature = value;
    this.temperatureSubject.next(value);
  }

  get activeChanges() {
    return this.isActiveSubject.asObservable();
  }

  get temperatureChanges() {
    return this.temperatureSubject.asObservable();
  }
}

Device 클래스에선 BehaviorSubject를 통해 상태, 설정 온도가 달라졌을 때 알려주는 activeChanges, temperatureChanges를 만들어주고, 위 PubSub 객체로부터 기기 상태를 받아 파싱해서, 원하는 데이터만 골라 저장해주어 상태가 달라졌을 때 이벤트가 불리도록 해줍니다.

// subscribe to device events
this.device.activeChanges.subscribe((isActive) => {
  thermostat.updateCharacteristic(
    CurrentHeatingCoolingState,
    isActive ? CurrentHeatingCoolingState.HEAT : CurrentHeatingCoolingState.OFF,
  );
  thermostat.updateCharacteristic(
    TargetHeatingCoolingState,
    isActive ? TargetHeatingCoolingState.HEAT : TargetHeatingCoolingState.OFF,
  );
});
this.device.temperatureChanges.subscribe((temperature) => {
  thermostat.updateCharacteristic(TargetTemperature, temperature);
  thermostat.updateCharacteristic(CurrentTemperature, temperature);
});

엑세서리에선 위 Device로부터 상태, 설정온도가 달라질 때 마다 이벤트를 받아updateCharacteristic()를 호출해, 애플 홈에 업데이트 요청을 보내도록 합니다.

이렇게 해서 PubSub → Device → Accessory → Apple Home 순으로 이벤트를 통해 기기의 상태가 전달되어 업데이트가 이뤄지게 됩니다.

이로써 상태 싱크도 완료했습니다! 🥳 이제 실제 기기를 물리적으로 조작해도 플러그인이 데이터를 받아서 애플 홈에서 반영이 되는 것을 볼 수 있습니다.

완료 — 결과물

[embed]Siri로 제어하는 모습

[embed]컨트롤 센터에서 제어하는 모습

결과 영상입니다. 애플 홈에 연동한 만큼, 별도의 작업 없이도 Siri와도 연동되어 동작하는 모습을 볼 수 있습니다.

[embed]GitHub - kyle-seongwoo-jun/homebridge-navien-smart: Homebridge plugin to control Navien devices via… Homebridge plugin to control Navien devices via Navien Smart - kyle-seongwoo-jun/homebridge-navien-smartgithub.com

블로그에 글을 정리하면서 코드의 많은 부분을 간단히 줄여서 올리기도 했고, 구조 변경이나 코드가 업데이트된 부분들도 있는데, 최대한 개발 시점을 기준으로 코드를 작성했습니다. 자세한 코드가 궁금하다면 위 레포지토리를 참고해주세요.

마무리

이렇게 열심히 만든 플러그인을 저 혼자만 쓰기에는 매우 아깝죠. 저 말고도 다른 사람들도 쓸 수 있도록 하려면 플러그인을 배포를 해야 합니다.

배포를 하는 과정과 그 외 사소한 내용들은 다음 마지막 편에서 읽어주세요!

[embed]📦 전기장판을 애플 홈에 연결해보자 — 3편 플러그인 배포 자동으로 npm 패키지를 배포해보자!medium.com

읽어주셔서 감사합니다~~ 🙇