Create Dashboards from Ably queues

Ably

Ably is an enterprise-ready pub/sub messaging platform with integrated services to easily build complete realtime functionality delivered directly to end-users.

You can use Instadeq to create live dashboards, reports and make interactive analysis of your Ably data.

Step 1 - Open Ably Homepage

Go to https://ably.com and create an account if you don't have one yet, then login and go to "Your dashboard".

/galleries/guide-images/ably/1-ably-your-dashboard.png

Step 2 - Create a new Project

Select an existing project or create a new one. In this example we will call it Flickr and use geolocated data for photos uploaded to Flickr.

/galleries/guide-images/ably/2-create-project.png

Step 3 - Copy API Key

Once your project is created, you can copy your API Key to subscribe to new events.

/galleries/guide-images/ably/3-copy-key-new-project.png

If you have an existing project, you can go to API Keys and copy your Key with "Subscribe" capabilities.

/galleries/guide-images/ably/3-copy-key-existing-project.png

Step 4 - Create an Ably Card on Instadeq

Create an Ably card on Instadeq.

/galleries/guide-images/ably/4-create-an-ably-card.png

Step 5 - Configure Ably Card on Instadeq

Paste your Ably API Key.

Set your channel to "photos"

Set Event Names to "portugal"

/galleries/guide-images/ably/5-configure-ably-card.png

Step 6 - Send data to Ably

If you don't have an app producing data, you can click Try this in your browser.

/galleries/guide-images/ably/6-click-try-it.png

Step 7 - Configure your Ably JS Code

Copy and paste the following Javascript Code and Copy your Root Key that has permission to publish data to your queues.

/**
 *  Note: this example uses a demo API key. Your own API keys are available in your account dashboard: 'https://ably.com/accounts/'.
 */
const ably = new Ably.Realtime('COPY_HERE_YOUR_ROOT_KEY');

/**
 * Note: this example uses a random channel name. You can use your own channel name when running this code sample against an Ably app.
 */
const channel = ably.channels.get('photos');

$('input#publish').on('click', function() {
  const data = {
        title: "Sunset in Portugal",
        lat: 9.1393,
        lng: 38.7223,
        date: "2022/03/23 22:32:33"
  };
  channel.publish('portugal', data);
});

channel.subscribe(function(message) {
  show('⬅ Received: ' + message.data);
});

function show(status) {
  $('#channel-status').append($('<li>').text(status).css('color', 'green'));
}