imageCapture 이미지 출력 확인

[rktdnjs]

변경사항

https://github.com/rktdnjs/starter-kit-smartapp-nodejs/tree/test (PR은 하지 않고, 별도의 test 브랜치에서 진행하였습니다)

imageCapability의 이미지 결과물을 확인하기 위한 프론트사이드 파일 추가 및 이미지 출력 테스트

• 디렉터리 구조에 새롭게 front 폴더를 두었고, 하위에 index.html & script.js 파일을 두었습니다.
• 기존에 Postman을 통해서 이미지URL과 함께 요청을 보내는 작업을 html 파일을 통해서 할 수 있도록 하였습니다.
• postman에서 이미지 URL과 토큰을 설정해주어야 했던 것처럼, script.js에서 수동으로 이미지 URL & 액세스 토큰이 필요합니다.
• smartapp.js 단에서 확인되었던 이미지 URL을 가지고, 별도로 script.js에서 이미지 URL과 함께 토큰(https://account.smartthings.com/tokens 사이트의 PAT)을 넣고 이미지 불러오기를 누르면 Camera에 의해 캡쳐된 이미지를 불러와서 시각적으로 확인할 수 있습니다.
• URL에 대한 이미지 확인 및 다운로드의 간단한 기능을 사용할 수 있도록 구현해보았습니다.

[kwanghoon]

@rktdnjs @YANGSEOKWOO @cosmos-1885
👍 Wow!!

[kwanghoon]

@rktdnjs
일단 아주^2 잘했어요!!
또 한 걸음 진전이 있었네. 그리고 UI가 동작하니까 더 좋아보이기도 하고. ^^;

SmartThings 카메라로 찍기 이벤트에서 사진 URL을 분석해내는 코드는 작성할 수 있었나? SmartApp에서...

로그에서 그 URL이 찍힌 곳에서 마우스로 긁어다가 HTML 폼에 붙여넣기를 해야한다는건가?

(BEARER는 일단 하드 코딩하든지, 제대로 하려면 환경 변수에 설정해놓고 읽어가도록 코딩하면 될 것 같고.)

[rktdnjs]

• SmartApp 사진 URL 분석 내용
  저희가 받아온 Response에서 urlList라는 항목에 접근하여 내부 데이터를 확인해본 결과, 내부에 추가적인 데이터가 존재했습니다. 이에 대한 부분은 조만간 내용을 정리하여 Issue 탭으로 리포팅드리고자 합니다!
• HTML 문서 활용 방법
  이 부분은 교수님께서 이해하신 바가 맞습니다! 제 repository test 브랜치의 smartapp.js의 경우, 이미지 캡쳐를 통해 얻은 이미지 정보가 저장되는 링크를 콘솔에서 확인할 수 있도록 되어있는데, 해당 이미지 URL을 마우스로 긁어서 front 폴더 하위의 script.js 파일의 const imageURL = ""; 코드에 붙여넣기를 하고 index.html 문서의 이미지 불러오기 버튼을 클릭하면 이미지 정보를 시각적으로 확인할 수 있도록 되어있습니다!