SmartApp Web IDE

A key component of the SmartThings vision are the SmartApps.  SmartApps interact with your SmartThings, as well as online and other services, to make the world around you smarter and your life easier, more convenient and fun. It could be as simple as a SmartApp that turns on the entryway light when you open the front door or as complex as a SmartApp that learns when you wake up and what temperature you like it.  These are just a few of the ideas you came up with already.  We expect that as you get your SmartThings, you’ll have even more ideas for SmartApps.  So we’re obviously going to need great tooling to help you implement all those great ideas.

One of the tools we’ve been working on is a web-based IDE that lets you build and test SmartApps in your browser:

SmartApp IDE
The SmartApp IDE

If you’ve used other IDEs, hopefully you’ll see a lot of similarities.  The SmartApp IDE consists of four main components: the editor, the preferences, the devices, and the console.

Editor

The Editor is a pretty standard affair.  It offers line numbers and code syntax highlighting.  If you have compile errors in your code, they will be highlighted when you save.

Preferences

The Preferences area is where things get more interesting. Any non-trivial SmartApp will declare a set of preferences for the SmartThings and data it operates on. For example, if the SmartApp turns on a light when a door is opened, it would declare a preference for a contact sensor (the door) and a switch (the light). When a user installs the SmartApp on their phone, she would be prompted to choose specific SmartThings to fill the preference slots. The Preference area provides the same function; it allows you to choose the specific virtual or real devices you want to test your SmartApp with in the simulator.

Devices

The Devices area shows the state of the SmartThings that the running SmartApp is configured to use. These can represent real SmartThings that you own, in which case when you open a contact sensor, the state of the device in the IDE would update and any effects from the running SmartApp will be triggered. The devices can also represent ‘virtual’ SmartThings. You can interact with these virtual devices by clicking on them in the IDE. This will update their state and send the appropriate events to the running SmartApp. This allows you to develop and test SmartApps for SmartThings you don’t actually own.

Console

The Console area shows the logging output from the running SmartApp. Any logging statements you put in your event handlers will show up here.

Help & Examples

Since starting from scratch in a new language can often be a daunting task, we also provide links to the SmartApp developer documentation as well as source code for some example SmartApps. You can pull in an existing SmartApp as a starting point and be testing it with virtual devices in a minute or two.

SmartApp IDE Help and Examples
The Help and Examples menu in the SmartApp IDE

We’re really excited about how the SmartApp IDE is progressing. We’re already using this tool, today to create and test SmartApps and we hope to roll it out to everyone very soon.

3 Responses to SmartApp Web IDE

  1. Avatar of Dave Hastings
    Dave Hastings December 4, 2012 at 1:14 pm #

    Great post Josh. Can’t wait to give this a try!

  2. John Lee March 24, 2013 at 10:41 pm #

    May i know where to download the SmartApp IDE ?

  3. Paul Shabian March 26, 2013 at 10:27 am #

    November 30, 2012 : “We’re really excited about how the SmartApp IDE is progressing. We’re already using this tool, today to create and test SmartApps and we hope to roll it out to everyone very soon.”

    It is end of March now, still SmartApp IDE not ready ???

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img height="" src="" width="">