Giter VIP home page Giter VIP logo

acme-control-panel-example's Introduction

Acme Control Panel Example

This SmartApp hosts a web page dashboard that allows the control of scenes, locks, and switches. It also creates two devices in the SmartThings location, which are also reflected on the dashboard. It's an example of how to:

  • Execute scenes
  • Execute device commands
  • Subscribe to device state change events by capability
  • Store the auth tokens and settings of installed app instances and use them when making calls to the SmartThings API that are not in response to SmartApp lifecycle events.
  • Create devices
  • Respond to device commands

File Structure

  • lib
    • db.js — module for listing installed app instances from the context store
    • smartapp.js — the SmartApp implementation
    • sse.js — Server-Sent Event object used to update the web page
  • locales
    • en.json — English version of the app configuration page text
  • public
    • images — web image files
    • javascript — web page JavaScript files
    • stylesheets — web page css files
  • routes
    • index.js -- defines routes for the dashboard and SmartApp endpoint
    • oauth.js - defines routes for the OAuth server (not normally part of a SmartApp)
  • server.js — the Express server that hosts the SmartApp as a web-hook
  • views
    • index.ejs — the home page
    • dashboard.ejs — the installed app instance control page
    • login.js &mdash the OAuth login page

Prerequisites

Getting Started

Clone this GitHub repository

git clone https://github.com/SmartThingsCommunity/device-scene-example-nodejs.git

Create the local data directory

cd device-scene-example-nodejs
mkdir data
mkdir data/smartthings

Start the server

npm install
node server.js

Start ngrok and point it to your server

ngrok http localhost:3001

Make note of the HTTPS forwarding URL, for example https://c79461932dfc.ngrok.io

Create an automation in the developer workspace

Go to the SmartThings developer workspace and create an Automation SmartApp. This app should have the scopes:

r:devices:*
x:devices:*
r:scenes:*
x:scenes:*
i:deviceprofiles:*

Choose the web-hook option when creating the app. The targetURL should be set to the ngrok forwarding URL with the path /smartapp, for example https://c79461932dfc.ngrok.io/smartapp

Take note of the appId, clientId, and clientSecret displayed after creating your app.

Confirm that your app is ready to receive lifecycle events

Look in your server log for a line with a URL to use for verifying your app. Visit this URL to confirm the location of your app (you can do this in a web browser).

Create a .env file and restart the server

Create a file named .env in the project directory that sets your appId, clientId, and clientSecret. For example:

APP_ID=912e0214-5706-4407-a299-b3796a57cf56
CLIENT_ID=61225bef-d2db-4ab0-82f6-d28c0f11911d
CLIENT_SECRET=94c2b3df-b0ab-4abd-84bf-1823d63b944c

and restart your NodeJS server. Do not restart ngrok or the URL will change (unless your are using a paid account)

Install your SmartApp and visit the web page

Install your SmartApp using the SmartThings mobile app. Then visit your local web server to see and control devices and scenes.

http://localhost:3001

acme-control-panel-example's People

Contributors

bflorian avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.