Building a bridge simulator game with realtime Slack alerts via IFTTT

The Ably Integrations provide a way to trigger events and to stream data from Ably’s pub/sub channels. This tutorial will go over how to use Ably Integrations with the IfThisThenThat Webhooks service. IfThisThenThat (IFTTT) allows you to create chains of conditional statements called Applets. These Applets can be triggered by events on your Ably Channel. They in turn can trigger other web services such as email, social media, chat apps, IoT devices etc.

In this specific example we’ll be using IFTTT to trigger a post to a Slack channel every time a message is published on your Ably channel.

We’ll be building a bridge simulator game using HTML, CSS, JavaScript and Webhooks. Players will receive commands from their “captain” via Slack. These commands will let them know what to press in the game to move to the next command. Clicking the controls that match the commands will win them the game, mistakes will lose and crash the spaceship.

Prerequisite Accounts

You’ll need an Ably account, login or sign up for free at https://ably.com/.
You’ll also need an IFTTT account, login or sign up at https://ifttt.com/.
Finally you’ll need an account with Slack and a workspace to send messages to, sign in or create a workspace at https://slack.com/signin

Step 1 – Create your Ably app and API key

To follow this tutorial, you will need an Ably account. Sign up for a free account if you don’t already have one.

Access to the Ably global messaging platform requires an API key for authentication. API keys exist within the context of an Ably application and each application can have multiple API keys so that you can assign different capabilities and manage access to channels and queues.

You can either create a new application for this tutorial, or use an existing one.

To create a new application and generate an API key:

1. Log in to your Ably account dashboard
2. Click the “Create New App” button
3. Give it a name and click “Create app”
4. Copy your private API key and store it somewhere. You will need it for this tutorial.

To use an existing application and API key:

1. Select an application from “Your apps” in the dashboard
2. In the API keys tab, choose an API key to use for this tutorial. The default “Root” API key has full access to capabilities and channels.
3. Copy the Root API key and store it somewhere. You will need it for this tutorial.
   
   
   

Creating an Integration Rule for a Webhook

Integrations are scalable services to trigger events and stream data from Ably’s pub/sub channels. Creating an integration rule will allow your serverless functions or your own servers to be invoked following any events on Ably.

1. Log into your app dashboard
2. Go to your Ably Dashboard
3. Choose the “Integrations” tab
4. Click “New Integration Rule” button
5. Click the “Choose” button under “rule” type

Choose the “IFTTT” service integration option

On the resulting form we’ll need an IFTTT key to connect Ably to IFTTT with webhooks.

1. Click the “open IFTTT Webhook Settings” button (this will take you to the IFTTT web app)
2. On the resulting page click “Documentation”
3. Copy your key from the top of the documentation page
4. Go back to your Ably integrations rule settings
5. Paste the key into the “IFTTT Webhook key” input.
6. Give the Webhook event a name (eg channel_message_published)
7. Set up a channel filter if necessary
8. Click “Create”

You have now set up a rule that will be triggered by events published on your Ably channel, but we’ll also need to create an Applet on IFTTT for it to trigger.

Creating an IFTTT Applet

1. Visit https://ifttt.com/ (log in if you have not already)
2. Click “Explore” in the top right hand corner
3. Scroll until you find the “Create your own” button (or visit https://ifttt.com/create)
4. Search for “webhooks” in the searchbox
5. Click the “Webhooks” button
6. Click the “Receive a web request” section
7. Add the name for the Webhook event that you created earlier (eg channel_message_published)

Next we will need to choose a service that we want to hook our published message up to. In this case we’re going to choose Slack, but you could use any number of services that IFTTT connects to.

1. Click the “+ That” which should now be presented to you
2. Search for “slack”
3. Click “Slack”
4. Click “Connect”
5. Log in to your Slack workplace in the resulting popup
6. Allow the requested permissions

The final stage of our setup will be choosing an action to trigger in Slack. The IFTTT Slack service allows you to post to channels, to private groups or to send direct messages. For the purpose of this tutorial you’ll send direct messages to your own Slack handle in your chosen Slack channel (for the sake of not filling your Slack channels with messages!).

We’ll be sending the body of the message that was published to your Ably channel to Slack, so for this tutorial we’re only going to send one value as the message body, but you could customize this as much as you like.

1. Click “Post to channel”
2. In the resulting form, under “Which channel”:
   1. select Direct Messages
   2. select your own Slack handle
3. Under “Message”:
   1. delete the content in the textbox
   2. Click “Add ingredient”
   3. Add “Value1”
4. Under “Title URL” add “Captain Picard” (or the captain name of your choice!)
5. You can even add a thumbnail avatar of your captain if you’d like by pasting a url to your chosen image
6. Click “Create Action”
7. Click “Finish”

You have now set up your Ably channel to post to Slack using IFTTT! Next up, we need to publish some data to our Ably Channel. For the purposes of this tutorial, we will create a game which will generate data to publish to your channel, if you already have a channel with data being published then you can skip the use of the game, but you will need to take a look at how the game publishes messages.

Building the Game

To get you up and running quickly, we’ve made the code for the game available via Glitch. You can remix or clone this repository. Press the Remix to Edit button in the top right hand corner of the page. We’ll need to edit the code a little to add in your Ably API key.

How the game works

The game is a web app, created with Glitch. It uses Node.js and Express. Instructions on how the game works can be read at in the readme.md. We’re using the game to generate data to send to our Ably channel, if you already have data going to an Ably channel then you will not need the game at all! The game generates 10 ‘moves’ for the player to take and publishes them, one by one, to an Ably channel as the player completes previous moves.

How does the game publish messages?

The game publishes game move “commands” to an Ably channel using the Ably Realtime API. Take a look at the ablyConnector.js file in the root, you’ll see some code like this:

  const ably = require('ably');

  const client = new ably.Realtime(process.env.ABLY_API_KEY)
  const channel = client.channels.get('space-game');

  channel.publish('ably-space-game', jsonBody);
}...

This code uses the Ably Realtime JavaScript client library to publish the status.hint (which is our move command) to a channel called “space-game”.

First of all we require the library which will allow us to manage our connection to and management of our Ably channel.
Then we will create a client and authenticate with Ably using our API key (we’ll add our key in the next step of the tutorial). This can then attach to our space-game channel.

Finally we publish our message to the space-game channel, it is important to note that IFTTT requires the data it receives to be in the following JSON format:

{"value1":"foo", "value2":"bar", "value3":"baz"}

This is why we are sending { value1: status.hint } as the body of the message.

Without this format, it is still possible to trigger an event, but not to send customized messages. In the case of this game, we’re sending only value1, as we have no need to use value2 or value3, but you could use these to send further data; to add flavor text to the commands or perhaps a sign-off from your ‘captain’.

Configuring the game

In order to publish messages, the game will need to have your Ably API key. We store this in a .env file to keep it secure. Do not commit your .env files to github, you can add an exclusion in your .gitignore file to make sure that it doesn’t get committed (Glitch does this for you automatically).

Open the ./env file in the root of the game and add the following line.

Using your API key is the basic authentication method to authenticate with Ably. While this is simple and easy to use for this demo, in reality, we always recommend that you use Token authentication in production level apps. Tokens expire at regular intervals and expect the clients to request new ones, thus ensuring better security as the API key is never directly exposed in the client-side code.

ABLY_API_KEY = "YOUR_API_KEY"

Add your Ably API key in between the quotation marks and you’re all done!

Congratulations! You can now play the Ably Space game by clicking on the Show button in your glitch project.
May the Realtime Data be with you 🚀

Next Steps

1. Take a look at the Webhooks documentation for further details about what was described in this tutorial.
2. Find out more about Ably Integrations.
3. Learn more about Ably features by stepping through our other Ably tutorials
4. Gain a good technical overview of how the Ably realtime platform works
5. Get in touch if you need help