앱 테스트 및 디버그

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

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

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

Chrome

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

Node.js

  1. Google Home Developer Console의 설정 및 구성 페이지에서 오프라인 주문으로 스크롤하고 설정을 사용 설정합니다.
  2. 테스트 URL > 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의 최신 코드로 로컬 이행 앱 컨테이너를 다시 로드합니다. 이렇게 해도 로컬 홈 플랫폼은 재설정되지 않으며, 로컬 처리 앱에서 플랫폼 인텐트(예: IDENTIFY)를 다시 트리거해야 할 수 있습니다. 로컬 홈 플랫폼을 재설정하려면 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에 제출하세요. 여기에는 자체 테스트 및 인증 요청 단계를 완료하는 것이 포함됩니다.
이전
로컬 처리 앱 구현