FrontEnd Repo

https://github.com/rktdnjs/starter-kit-smartapp-react

git clone <https://github.com/rktdnjs/starter-kit-smartapp-react.git>

npm install
npm start

BackEnd Repo

GitHub - rktdnjs/starter-kit-smartapp-nodejs at backend

git clone -b backend --single-branch <https://github.com/rktdnjs/starter-kit-smartapp-nodejs.git> 

npm install
npm start

사전 작업

• Smart App deployment using ImageCapability to SmartThings Developer
• Get and use PAT Token from SmartThings Developer
• Run ngrok, which opens to node.js server and tunnels the server to access it from the outside

BackEnd Part. npm start server project & Run ngrok with port 3005 & authenticate servers with SmartThings Developers deploying SmartApp

Tunneling port 3005 from node.js server at ngrok

If you have a Multipurpose Sensor & Camera on your SmartThings device, you can get the above results.

If you click on the URL passed from SmartThings in a working server project, you are authenticated! From now on, you can get events from SmartApps deployed by SmartThings Developer. When ImageCapture occurs on a device such as a camera in your SmartThings environment, logs about the event can be found on the running server project.
We will now try to get an image from the front-end project that is the result of ImageCapability Capture!

FrontEnd Part. npm start frontend project & Import images using tokens

The initial screen configuration is as above.

If you try to load an image without a token, you will see the warning screen as above.