Endpoint SmartApps with File Store Contexts

For this tutorial we will be taking a closer look at endpoint smartapps by automating a light based on our Zoom presence status. We want to create an automation that will react to our presence status and activate a light when we go “On Air”.

Prerequisites:

  1. Samsung Developer Workspace Account
  2. Android Device
  3. Glitch.com Account

Preparation

Remix the glitch app at this url

Overview

The work of creating a SmartApp using Javascript has been greatly simplified with the following packages

const SmartApp = require('@smartthings/smartapp');
const FileContextStore = require('@smartthings/file-context-store')

The two packages that will be used for this tutorial are the SmartApp SDK and the FileContextStore. The SmartApp SDK provides the boilerplate for creating SmartApps on the platform and the FileContextStore allows one to easily store the context information for the installed app. This context store should not be used in a production environment. For a production environment see the notes in the SmartApp SDK Github Repo.

In the tutorial examples, the glitch app has the name “onairnow”. When you remix the app your glitch app will have a different name.

Creating a SmartApp

Open the developer workspace in another browser tab. One tab should have your remixed glitch app, the other tab should have the developer workspace. You will need to be able to flip back and forth between them during this process.

Select Automation for the SmartThings App

Give the app a unique name

Choose Webhook Endpoint

The Webhook URL is the hostname of your glitch app.

For example my URL is https://onairnow.glitch.com.

Next give your app display and permissions as seen on this screen.

After you submit a confirmation URL will be logged in your glitch app logs. Copy this URL into a third tab and hit enter. This will confirm your endpoint app belongs to you and remove the warning. You will recieve a notification in the window that the app was verified.

Now deploy to test via Developer Mode under test in the left hand menu.

With developer mode enabled in the SmartThings App, you should now be able to install the SmartApp. It will be visible under custom on the “Install SmartApp” screen.

Follow the prompts to install the App.

Once the App is installed, collect your webhook URL from the glitch developer logs. Create a presence webhook only application over at Zoom

https://marketplace.zoom.us/develop/create

Final Notes

If everything is installed correctly your light color should change based on events from the Zoom webhook.

4 Likes

Hey @jody.albritton , will be possible in the future to run these smartapps locally ? Or Glitch and AWS are the definitive solution for this

2 Likes

Endpoint SmartApps are designed to run externally to the hub and platform. AWS, Glitch, Etc in our tutorials and demos are just easy ways to learn how to build solutions using these tools. They can run on a local computer at your home like a raspberry pi or a mac mini or can be hosted in the cloud on services like AWS, Glitch, or any hosting provider. The only requirement for the SDK is node.js support

Endpoint apps are targeted at solving the problem of building complex automations that need to interact with external services/clouds. In this example your app needs to not only be able to send events to the SmartThings cloud, but also needs to recieve events from a third party cloud.

2 Likes

@jody.albritton
Thanks for doing these tutorials but for some reason i dont succeed each time i try them.
Even understanding what is a direct connected device is not possible!

Anyway i am quiting smartthings because of the lack of integration with google assistant, chromecast and tts.
I dont know why since on Homey it s simple as install an app so it should be possible on ST.

1 Like

@jody.albritton
Thanks for the tutorial! From what I understand endpoint smartapps are still just for a users own personal use and the direction for more users to use a service which integrates SmartThings cloud functionality is an API Access project?

Is there any work being done to share user built SmartApps/Endpoint Apps/API Access Apps inside of a market place in the SmartThings mobile app? For example instead of going to my-example-smartapp.com, signing in with my SmartThings account and initiating the OAuth flow, I could provide a UI in the SmartThings application for users?

To explain a bit more at the moment when I sign in with an API Access app (at example-smartapp.com) , it appears as a “linked service” in the Smarting’s Application.

image

Would be nice for users to maybe search in marketplace for “ESHER”, have a UI in the application which lists what device/subscriptions are attached, maybe even a little description about what the service is.

I feel you, I am still totally lost when I go to buy a device how can I know if it is a SmartThings “Directly connected device” or other kind of device. I have found the integration of third party services on SmartThings to be very useful however especially with the SDK. The ability to write device handlers is also a nice feature.

We will eventually allow publication and certification of endpoint SmartApps into the catalog. These will appear in the catalog of installable apps on the mobile client. API apps are a bit different since the authorization and installation journey begins on your externally hosted service.

We have discovery via a marketplace on the roadmap and will share more information as those features are released into production.

I’m trying to follow along with this tutorial but the app (after being verified via glitch logs) doesn’t appear in the SmartApps custom list on iOS app (1.6.59). Developer mode is enabled. Will I have to wait for an app update?

Yes. There is a known limitation on IOS (enabling developer mode does not show custom apps). I listed having an Android device as a prerequisite for this reason. This issue should be resolved in the next major release of the IOS app.

Thanks for the quick reply/verification.

Apologies, I missed that pre-res. Time to see if my old phone still works. :+1:

1 Like

Jody,
I’m struggling with one aspect.
it appears the Zoom post is expected to pass the installed app id in req.params.smartappId in order to retrieve the context via

const context = await smartapp.withContext(req.params.smartappId)

Is this correct? If so, how did the Zoom webhook acquire that id?

i’m writing an unrelated app but need to respond to non-lifecycle events like this does.
Do i need to capture the installed app id on my own during the install/update lifecycle or am i missing something?

Thanks,
David

Welcome to the SmartThings Community, @dhaustin!
When you install the SmartApp, you receive the Webhook URL you must enter in the subscription of Zoom’s Webhook where the installedAppId (smartappId) is at the end. (Look at the picture below)

Once you create successfully your Webhook in Zoom and you enter or leave a meeting, you’ll receive an event similar to the one below the URL

This is the subscription configuration page:

The event selected is in “User Activity” > “User’s Presence status has been updated”

A post was split to a new topic: [Webhook SmartApp] Context Store for API calls

Hi, it looks like “onairnow” app is not available anymore on glitch, where can I find it ?

It would appear that the app is still there but needs updating. However when I followed that link I found it could still be remixed, which may or may not help.

Hi, I am new to Smarthings and trynig to follow the tutorial; I managed to have the first one working ( very happy :-)) now I am trying to do the second one but cannot find the glitch code

When I click on the link it does not show any code ; if I push on remix it hangs forever

I went to https://glitch.com/~onairnow and scrolled down to a remixbutton which linked to https://glitch.com/edit/#!/remix/onairnow amd there seemed to be code there.

I do find Glitch completely unusable so I’m not really sure what I was looking at.

Fantastic, thank you very much. I am totally new to this so not able to judge about the environment. I am struggling a bit with Glitch bit managing so far. I am trying to connect a hue lamp to the performance of my shares (green = going up, white: stable, Red : going down)
I get this error: 2024-01-25T14:02:24.758Z error: Error: ENOENT: no such file or directory, open ‘data/afd5a0c3-35c4-4095-a0a4-c83305d56a54.json’
Any Idea ? I must say I doubt I have set up the zoom part correctly as it is not clear to me but I think this error is probably not related

Hi, @Giammi
I was checking that yesterday and I got the same error. This is due to the file-context-store module, it supposedly saves the SmartApp context in a folder called data but it seems it’s not doing it properly. If you create the file manually, it allows the execution of the SmartApp but if we make changes, it doesn’t update the file.

I’ll ask the engineering team about it to see if we’re doing something wrong or if there’s an issue with the module and I’ll let you know.

Hi Nayelyz, any news ?