imageCapture 이미지 출력 UX 개선 작업

[rktdnjs]

변경사항

https://github.com/rktdnjs/starter-kit-smartapp-react (프론트)(main 브랜치)

https://github.com/rktdnjs/starter-kit-smartapp-nodejs.git (백엔드)(backend 브랜치)

imageCapture의 결과를 확인하는 절차를 개선하고자 프론트 - 백 분리 및 기능 개발 진행

• 기존에 https://github.com/kwanghoon/starter-kit-smartapp-nodejs 에서 사용하던 server.js와 smartapp.js를 통합

  • 코드 통합 이후 여러가지 센서의 동작 결과를 확인해 본 결과, 기능에는 일단 문제 없는 것으로 확인
  • front 폴더에 있던 index.html & script.js 가 담당하던 프론트를 별도 레파지토리 분리 및 리액트 프로젝트로 구축

• 기존에 Issue 탭에 올렸던 프론트사이드 프로젝트의 UX 개선 및 기능 추가

  • 원래는 서버를 돌린 상태에서 이벤트 발생 시 콘솔에 뜨는 이미지 URL을 별도로 긁고, 토큰도 별도로 소스 파일에 입력하여야 이미지를 확인할 수 있었음
  • 이러한 불편사항을 개선하기 위해 사용자 입장에서 소스 파일을 직접 건드리지 않고 UI를 통해 이미지를 볼 수 있도록 개발
  • 개별적으로 발급받은 토큰만 있으면 원하는 URL을 선택하여 이미지를 확인 및 로드할 수 있도록 기능 구현

이미지 확인을 위한 과정
1. 백엔드 프로젝트를 돌린다(SmartThings Developer WorkSpace Webhook Endpoint - ngrok 사전 설정 필요)
2. 프론트 프로젝트를 돌린다(npm start를 통해 실행하기만 하면 따로 건드릴 내용은 없습니다!)
3. SmartApp의 내용에 따라 SmartThings 기기들의 이벤트 발생시 imageCapture 결과 중 imageURL에 해당하는 정보가 `http://localhost:3005/api/image` 경로에 저장되며, 프론트에서 이 URL로 request를 보내 데이터를 받아올 수 있습니다
4. 서버에서 캡쳐 결과 URL 불러오기 - URL 목록 중 원하는 URL 클릭 - 발급받은 토큰 입력 - 선택한 이미지 불러오기 순으로 진행
5. 그 결과로 서버 작동 이후로 캡쳐된 이미지들의 목록 중 원하는 이미지를 확인 & 저장할 수 있습니다.

[kwanghoon]

@rktdnjs 와우 UI가 더 개선되었네!!
이번 주에 데모를 한번 보여주세요.
👍

[rktdnjs]

넵 알겠습니다!! :) 현재는 CSS를 신경쓰지 않아 보기 좋지 않지만, 차후 CSS 보완을 통해 좀 더 보기좋게 다듬어보도록 하겠습니다..!