앱 테스트 및 디버그

앞에서 설명한 단계에 따라 로컬 처리 앱을 빌드한 후 다음 단계에 따라 자체 호스팅 환경에서 스마트 홈 통합을 테스트하는 것이 좋습니다.

  1. 자체 호스팅 환경에서 로컬 처리 앱을 실행하는 HTML 페이지를 제공합니다. 다음 스니펫은 로컬 처리 앱을 실행하는 정적 HTML 파일의 예시를 보여줍니다.

    <html>
      <head>
        <!-- Local Home SDK -->
        <script src="//www.gstatic.com/eureka/smarthome/smarthome_sdk.js"></script>
        <!-- Local app under development -->
        <script src="local_execution.js"></script>
      </head>
    
    </html>
    
    
  2. 기기 제어를 테스트합니다.

  3. Chrome에서 디버그 중단점과 로그를 사용하여 통합 문제를 해결하세요.

  4. TypeScript 코드를 수정하고 컴파일한 후 이 단계를 반복합니다.

이 빌드 및 테스트 프로세스를 반복하면 변경사항의 작동 방식을 빠르고 더 쉽게 포착하고 코드의 문제를 디버그할 수 있습니다.

기기 제어 테스트

작업 콘솔에서는 로컬 처리 중에 Google Home 또는 Google Nest 기기에 로드되는 HTML을 제공하는 웹 앱의 URL을 지정해야 합니다.

로컬 처리를 사용하여 기기 제어를 테스트하려면 다음 단계를 따르세요.

Chrome

  1. Actions 콘솔에서 스마트 홈 프로젝트를 엽니다.
  2. 왼쪽 탐색 메뉴에서 작업을 클릭합니다.
  3. 로컬 홈 SDK 구성 (선택사항) > Chrome용 테스트 URL 입력에서 로컬 처리 앱을 실행하는 HTML을 제공하는 개발 서버 URL을 지정합니다.
  4. 저장을 클릭합니다. Google에서 콘솔 변경사항을 전파하는 데 최대 30분이 걸릴 수 있습니다.
  5. 테스트용 Google Home 또는 Google Nest 기기를 재부팅합니다.
  6. 스마트 기기에 명령어를 실행합니다. 예를 들어 기기에서 OnOff 트레잇을 구현한다면 "Hey Google, 조명 켜 줘"라고 말할 수 있습니다.

Node.js

  1. Actions 콘솔에서 스마트 홈 프로젝트를 엽니다.
  2. 왼쪽 탐색 메뉴에서 작업을 클릭합니다.
  3. 로컬 홈 SDK 구성 (선택사항) > 노드의 테스트 URL 입력에서 로컬 처리 앱을 실행하는 JavaScript를 제공하는 개발 서버 URL을 지정합니다.
  4. 저장을 클릭합니다. Google에서 콘솔 변경사항을 전파하는 데 최대 30분이 걸릴 수 있습니다.
  5. 테스트용 Google Home 또는 Google Nest 기기를 재부팅합니다.
  6. 스마트 기기에 명령어를 실행합니다. 예를 들어 기기에서 OnOff 트레잇을 구현한다면 "Hey Google, 조명 켜 줘"라고 말할 수 있습니다.

기기에서 사용되는 런타임에 관한 자세한 내용은 지원되는 기기를 참고하세요.

Chrome에서 디버깅

Chrome DevTools를 사용하여 로컬 처리 앱을 디버그할 수 있습니다. 디버그하기 전에 환경이 올바르게 설정되었는지 확인하세요.

  • 콘솔에서 개발 URL을 Google Home 또는 Google Nest 기기에서 (근거리 통신망 또는 인터넷을 통해) 연결할 수 있는 URL로 설정한 경우
  • 머신이 테스트 중인 Google Home 또는 Google Nest 기기와 동일한 근거리 통신망에 연결되어 있습니다.
  • 네트워크가 기기 간 패킷을 차단하지 않습니다.
  • Actions 콘솔과 Google Home 또는 Google Nest 기기에서 동일한 Google 계정으로 로그인되어 있습니다.
  • 클라우드 처리에서 SYNC 응답을 업데이트해야 합니다. otherDeviceIds 필드에 유효한 값을 하나 이상 반환해야 합니다.
  • Actions 콘솔에 올바른 스캔 구성 정보를 입력했습니다.

로컬 처리 앱을 Chrome DevTools 디버거에 연결하려면 다음 단계를 따르세요.

Chrome

  1. 로컬 개발 머신에서 Chrome 브라우저를 설치하고 실행합니다.
  2. Chrome 브라우저의 주소 입력란에 chrome://inspect#devices를 입력하여 Chrome 검사기를 실행합니다. 페이지에 기기 목록이 표시되고 HTML 파일이 테스트 Google Home 또는 Google Nest 기기의 이름 아래에 나열됩니다.
  3. HTML 아래에 있는 파란색 검사 링크를 클릭하여 Chrome DevTools를 실행합니다. Console 탭으로 전환합니다. Local Home 플랫폼이 콘솔 로그에 앱 버전과 Local Home SDK 버전을 출력합니다. 로그가 표시되면 Google에서 앱을 성공적으로 로드하여 연결할 수 있다는 의미입니다. 켜지지 않으면 Google Home 또는 Google Nest 기기를 재부팅합니다.
  4. 그림 1: chrome://inspect의 로컬 처리 앱

Node.js

  1. 로컬 개발 머신에서 Chrome 브라우저를 설치하고 실행합니다.
  2. 테스트 기기의 로컬 IP 주소를 확인합니다.
  3. Chrome 브라우저의 주소 입력란에 chrome://inspect#devices를 입력하여 Chrome 검사기를 실행합니다.
  4. 구성...을 선택하여 타겟 검색 설정을 엽니다.
  5. 그림 2: chrome://inspect의 타겟 검색 설정
  6. 목록에 DEVICE_IP_ADDRESS:9222을 입력하고 완료를 클릭합니다.
  7. 스크립트 아래의 파란색 검사 링크를 클릭하여 Chrome DevTools를 실행합니다. Console 탭으로 전환합니다. Local Home 플랫폼이 콘솔 로그에 앱 버전과 Local Home SDK 버전을 출력합니다. 로그가 표시되면 Google에서 앱을 성공적으로 로드하여 연결할 수 있다는 의미입니다. 켜지지 않으면 Google Home 또는 Google Nest 기기를 재부팅합니다.

기기에서 사용되는 런타임에 관한 자세한 내용은 지원되는 기기를 참고하세요.

디버깅 도움말

디버깅 중에 유의해야 할 몇 가지 추가 사항은 다음과 같습니다.

  • 여러 대의 Google Home 또는 Google Nest 기기를 동일한 로컬 네트워크의 테스트 계정에 연결하지 마세요. 로컬 처리 명령어로 타겟팅할 Google Home 또는 Google Nest 기기를 제어할 수는 없습니다.
  • Chrome DevTools에서 페이지를 새로고침하여 개발 URL의 최신 코드로 로컬 처리 앱 컨테이너를 새로고침합니다. 이렇게 해도 로컬 홈 플랫폼은 재설정되지 않으며 이 플랫폼은 로컬 처리 앱에서 플랫폼 인텐트(예: IDENTIFY)를 다시 트리거하는 데 필요할 수 있습니다. 로컬 홈 플랫폼을 재설정하려면 Google Home 또는 Google Nest 기기를 재부팅합니다.
  • JavaScript 앱이 오류 없이 로드되는지 확인합니다. 이렇게 하려면 DevTools 페이지의 콘솔 섹션을 확인하세요. 문제가 있으면 Uncaught TypeError: Cannot read property ‘open’ of null.와 같은 메시지가 표시됩니다.
  • IDENTIFY 응답의 verificationIdSYNC 응답의 otherDeviceIds 중 하나와 일치해야 합니다.
  • EXECUTE 핸들러의 경우 HTTP, TCP 또는 UDP 명령어를 기기에서 수신할 수 있고 예상대로 작동하는지 확인합니다.
  • 핸들러에서 Promise를 반환해야 합니다.
  • 메모리에 전역 상태를 유지하지 마세요. 애플리케이션 수명 주기를 참고하세요.
  • 로컬 처리 앱에서 발생한 오류는 프로젝트 오류 로그에 표시됩니다.

프로덕션 준비 및 출시

스마트 홈 작업을 실행할 준비가 되면 다음 단계를 따르세요.

  1. 터미널을 엽니다. 프로젝트 디렉터리에서 npm run build 명령어를 실행합니다. 이 명령어는 dist 디렉터리에 앱에 사용할 다음 자바스크립트 번들을 생성합니다.
    project-directory/
    └── dist
     ├── web
     │    └── bundle.js
     └── node
          └── bundle.js
    
  2. 콘솔에서 개발 > 작업을 클릭하여 JavaScript 앱을 업로드합니다. Local Home SDK 구성 섹션에서 JavaScript 파일 업로드를 클릭합니다.
    그림 3: JavaScript 앱 업로드
  3. 파일 업로드 대화상자에서 이전에 생성한 번들 파일을 업로드합니다. 작업이 로컬 처리에서 지원하는 모든 런타임 환경에서 올바르게 작동하도록 구성되도록 두 버전의 번들 파일 (노드, 웹)을 모두 업로드해야 합니다.
    1. Node.js를 타겟팅하는 자바스크립트 업로드: dist/node 디렉터리에서 bundle.js 파일을 업로드합니다.
    2. Chrome (브라우저)을 타겟팅하는 자바스크립트 업로드: dist/web 디렉터리에서 bundle.js 파일을 업로드합니다.
  4. 어시스턴트 지원 기기에서 작업을 테스트하여 프로덕션 환경에서 예상대로 작동하는지 확인합니다. 자세한 내용은 스마트 홈 작업 테스트 및 공유를 참고하세요.
  5. 작업이 작동하는 방식에 만족하면 스마트 홈 작업 실행의 안내에 따라 프로덕션 배포를 위해 Google에 작업을 제출합니다. 여기에는 자체 테스트 및 인증 요청 단계 완료도 포함됩니다.