{"id":5850,"date":"2020-09-28T02:15:41","date_gmt":"2020-09-28T06:15:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?page_id=5850"},"modified":"2020-09-28T03:17:40","modified_gmt":"2020-09-28T07:17:40","slug":"glitch-and-soli-to-ifttt","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/resources\/glitch-and-soli-to-ifttt\/","title":{"rendered":"Glitch (and Soli) to IFTTT"},"content":{"rendered":"

In this guide, a button in a p5.js program hosted at Glitch.com will be used to trigger an IFTTT recipe that sends a tweet from a connected Twitter account.<\/strong><\/em><\/p>\n

\n

p5.js in Glitch \u2192 IFTTT \u2192 Twitter<\/h2>\n

Here<\/a> is a p5.js program hosted at Glitch.com which sends a signal that serves as an IFTTT trigger: https:\/\/glitch.com\/~glitch-p5-to-ifttt-webhooks<\/a>. (You can experience the project without its code and project files at https:\/\/glitch-p5-to-ifttt-webhooks.glitch.me\/<\/a>): To use this project as a template for your own work, log in to Glitch.com and click on the “Remix This” button in the lower right:<\/p>\n

\"\"<\/a><\/p>\n

Once you’re logged in and editing the project, you should see this, assuming you’re editing the p5.js code, sketch.js. Note that I have selected the “Next to the Code” preview mode by clicking on the “Show” sunglasses button in the upper left.<\/p>\n

The program has two “buttons”, red and blue, and a variable, RorB<\/em>, which stores a string (“RED” or “BLUE”) representing the user’s most recent choice. When the user clicks, this variable is stored (in line 44) as a property called “Value1” in a small JSON object called data<\/em>. This JSON object is then packed up and sent to IFTTT.<\/p>\n

\"\"<\/a><\/p>\n

The p5.js sketch works in cooperation with some additional JavaScript code in the server.js<\/em> file, which is also part of the same project on Glitch.com. All of the communications magic happens in line 21 of this file, where a special URL string is constructed, and line 24, which executes a curl<\/a> command containing that string. That’s the trigger to IFTTT.<\/p>\n

\"\"<\/a><\/p>\n

As you can see, there are some special string values that get substituted into the URL string: EVENT_NAME<\/span> and API_KEY<\/span>. Where are they stored and where do they come from? They are stored in your project’s special key file, \ud83d\udddd.env<\/em>:<\/p>\n

\"\"<\/a><\/p>\n

Note that when you forked my copy of the Glitch project to create your own, this private information was scrubbed<\/em>. You’ll have to get your own API key (and make your own EVENT_NAME<\/span>) at IFTTT. Skip on over to IFTTT.com, create your account, log in, and click “Create”. You’ll be able to make 3 “applets” (recipes) with your free account.<\/p>\n

\"\"<\/a><\/p>\n

First, you’ll specify the service that is the “trigger”. IFTTT offers hundreds of different services; we’ll select WebHooks<\/a>. IFTTT’s WebHooks service allows you to “create Applets that work with any device or app that can make or receive a web request.”<\/p>\n

\"\"<\/a><\/p>\n

Then click “Receive a web request”; you’ll be able to specify details about how IFTTT should receive a web request, i.e., specific details about the trigger to which IFTTT will respond. \"\"<\/a><\/p>\n

You’ll have a field where you can enter the “Event Name”. Earlier, I named my event glitch_ping<\/em>, but you could call yours whatever you want, such as my_glitch_event<\/em>. Make a note of this, because this is the string you will use for the EVENT_NAME<\/span>\u00a0property in the \ud83d\udddd.env<\/em> file in your Glitch project!<\/p>\n

\"\"<\/a><\/p>\n

We’ve told IFTTT what trigger to respond to (…the “if this<\/em>“). Now it’s time to tell it how to act in the world (…the “then that<\/em>“). In my case, I’ll use IFTTT to send a tweet from my spare Twitter account, @golancourses, but IFTTT has lots of possible services; for example, instead of sending a tweet, your trigger could save a file to a Google spreadsheet, or cause a pizza to be ordered and delivered from Domino’s….<\/p>\n

\"\"<\/a><\/p>\n

I’ve made sure to log in to my Twitter account<\/em> within the same web browser that’s logged into my IFTTT account. In my IFTTT applet wizard, I select Twitter, and I connect up my Twitter account (giving IFTTT permission to send tweets from my account). I then choose to have IFTTT “Post a tweet” whenever it receives the trigger.<\/p>\n

\"\"<\/a><\/p>\n

IFTTT provides a modest editor that allows you to compose the specific textual phrasing of this tweet. This includes a small number of special strings, including the event name, the current time (OccurredAt<\/em>) and up to three generic values \u2014 Value1<\/em>, Value2<\/em>, and Value3<\/em>\u00a0\u2014 that are presumed to be coming in from the trigger event.<\/p>\n

\"\"<\/a><\/p>\n

At this point you’ve created the IFTTT applet! You should see a screen that looks like this,<\/p>\n

\"\"<\/a><\/p>\n

…and clicking on “Settings” (in the upper right) will pull up a summary of your applet which looks something like this:<\/p>\n

\"\"<\/a><\/p>\n

There’s just one last thing to do, which is to locate your API key, and provide it to your Glitch project. In IFTTT, click on your account icon (in the upper right), select “My services” from the dropdown menu, choose WebHooks,<\/p>\n

\"\"<\/a><\/p>\n

…and select “Documentation” or “Settings”<\/p>\n

\"\"<\/a><\/p>\n

You’ll see a page that looks like this. The crazy-looking string is the API_KEY<\/span> for your IFTTT WebHooks trigger. Copy-paste this in the key file in your Glitch project!<\/p>\n

\"\"<\/a><\/p>\n

Run your project at Glitch.com and press the button on the p5.js canvas. If all goes well, you’ll have sent a Tweet! Here’s what it looks like for me:<\/p>\n

\"\"<\/a><\/p>\n

\n

Soli \u2192 IFTTT \u2192 ???<\/h2>\n

It’s straightforward to extend the above template to use Soli events. For example, you could make an app which, when someone approached the phone, it placed an order for a pizza, etc. My assistant Lingdong has made a Soli-to-IFTTT template project for you along these lines:<\/p>\n