앱 테스트 및 디버그

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

  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 Developer Console에서 로컬 처리 중에 Google Home 또는 Google Nest 기기에 로드되는 HTML을 제공하는 웹 앱의 URL을 지정해야 합니다.

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

Chrome

  1. Google Home Developer Console의 클라우드 간 통합 설정 및 구성 페이지에서 로컬 처리로 스크롤하여 설정을 사용 설정합니다.
  2. Testing URLs(URL 테스트) > Testing URL for Chrome(Chrome용 URL 테스트)에서 로컬 처리 앱을 실행하는 HTML을 제공하는 개발 서버 URL을 지정합니다.
  3. 저장을 클릭합니다. Google에서 콘솔 변경사항을 전파하는 데 최대 30분이 걸릴 수 있습니다.
  4. 테스트용 Google Home 또는 Google Nest 기기를 재부팅합니다.
  5. 스마트 기기에 명령어를 실행합니다. 예를 들어 기기가 OnOff 트레잇을 구현하는 경우 "Hey Google, 조명 켜 줘"라고 말할 수 있습니다.

Node.js

  1. Google Home Developer Console의 설정 및 구성 페이지에서 로컬 처리로 스크롤하여 설정을 사용 설정합니다.
  2. Testing URLs(URL 테스트) > Testing URL for Node(Node용 URL 테스트)에서 로컬 처리 앱을 실행하는 JavaScript를 제공하는 개발 서버 URL을 지정합니다.
  3. 저장을 클릭합니다. Google에서 콘솔 변경사항을 전파하는 데 최대 30분이 걸릴 수 있습니다.
  4. 테스트용 Google Home 또는 Google Nest 기기를 재부팅합니다.
  5. 스마트 기기에 명령어를 실행합니다. 예를 들어 기기가 OnOff 트레잇을 구현하는 경우 "Hey Google, 조명 켜 줘"라고 말할 수 있습니다.

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

Chrome에서 디버그

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

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

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

Chrome

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

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

디버깅 도움말

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

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

프로덕션 준비 및 출시

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

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