Blog

- June 22, 2015

Most of the time, web APIs are designed to wait for HTTP requests from clients and then reply around “CRUD” operations — Create / Read / Update / Delete. But how can we make such APIs interact with systems that are not designed to call them? It’s actually pretty easy, and I thought I would come up with an example.

The concept we’ll use here is called a webhook. Essentially, a webhook is a way to let an application or API be notified by a third-party service, through a web request, when some particular event happens. For instance, with Zapier, you can connect Twitter to a Webhook, and have your API be notified when you’ve favorited a tweet. This is exactly what I’ve done, and I’d like to guide you through that!

First of all, you’ll need an account on Zapier, as well as on APISpark, if you haven’t one already! For the purpose of this example, you’ll also need a Twitter account, and be ready to favorite some tweets you’ll want to store through your API. Next, we’ll create a new “Zap” — that’s a “recipe” combining two services together to let them interact and add value through their combination. We’ll connect Twitter and the Webhook together:

webhook-zapier-1

First, choose a Twitter account:

webhook-zapier-2

Select the webhook:

webhook-zapier-3

Then, set up a filter: only the favorite tweets for the account:

webhook-zapier-4

Then, let’s point point the outbound webhook call to the API on APISpark! A JSON payload with the text, user name, creation date, and direct link of the tweet, will be posted to my API:

{
   "user_name": "apievangelist",
   "link_to_tweet": "https://twitter.com/@glaforge/status/612292351013171200",
   "text": "Initial Thoughts Around Monetization For An API Deployment Service - http://t.co/Hq8HeUuMd1 via @apievangelist",
   "created_at": "Sat Jun 20 16:14:06 +0000 2015"
}

Here’s how to configure your “zap” to send such a payload:

webhook-zapier-5

Although not shown in the screenshot above, in the form, you’ll also need to specify your credentials (that you’ll find in APISpark when clicking on the endpoints in the Web API view), so that Zapier can contact your API with Basic Auth.

You’ll be able to test this “zap”, give it a name and save it, and later be able to view it on your Zapier dashboard.

Now that we’ve covered the first part, let’s have a look at our API in APISpark now.

From the APISpark dashboard, click on the little magic wand in the upper right hand corner, to launch the quick start wizard to create your API.

webhook-zapier-6

In the data store cell, you’ll create the entity structure corresponding to the JSON payload that will be received from the Zapier webhook:

webhook-zapier-7

Next, deploy this cell: go to the associated Web API cell, click on the “Synchronize” button in “Settings > Imports” to get the latest schema of your data store, and finally click the “Deploy” button in the top right hand corner to make your API live.

Your API is now live, you can start favoriting some tweets, and either wait for Zapier to find out about those favorites, or (to test faster) directly invoke the “zap”, and you’ll be able to see some tweets appearing in the data browser of your data store cell:

webhook-zapier-8

Note that we’ve used for this example a Full -Stack Entity Store”, which is the data store built in APISpark, but we could have also used a Google Sheets wrapper instead, which you could have also used as an input for other “zaps”, to continue the chain with other useful integrations! Last year, Kin Lane was mentioning how you could actually leverage Google Sheets, Zapier and APISpark already, with a Google Sheets wrapper.

Voila! Your APISpark hosted API is more connected through the world (here with Twitter). But imagine all the other possibilities? Zapier offers so many channels that you can bind to your API. What about connecting your API with your CRM (SugarCRM), your payment provider (Stripe), your newsletters (MailChimp), your customer relationships (Intercom), your web forms (TypeForms), your Github repositories, your bug tracker, you continuous integration server (Jenkins)… What can you do once you bind those services to your API? Your imagination is the limit.