Want to bring a smile to your face? Try sending yourself an animated GIF. Once a sign of Web 1.0, these graphics are now such a form of expression that there’s a startup just to search them. In this post, I’ll show you how to use an API to find GIFs and the SendGrid Inbound Parse Webhook to request specific search terms. The end result, of course, are animated GIFs inside your inbox.
The demo application uses Giphy to search for animated GIFs. Before I show the technology behind the application, try it out using either the email or web interface:
The application is built on Node.js and hosted on Nodejitsu. Below are some details you can use to run your own copy.
Run Your Own Copy
You can use the hosted versions of GimmeGIF as much as you want to bring an animated smile to your inbox. However, if you’d like to see how to use the Parse Webhook in step with Node.js and/or Nodejitsu, this sample app can be a great way to learn.
The code for GimmeGIF is open source and hosted on GitHub. Assuming you have git and node installed, perform the following steps:
- Clone the repository:
git clone https://github.com/heitortsergent/gimmegif.git
- Create your local copy of the .env.example file:
We’re using the dotenv library to handle env variables.
cp .env.example .env
- Edit the contents of .env, changing the variables SENDGRID_USER and SENDGRID_PASSWORD to your SendGrid credentials. The GIPHY_API_KEY is a public key they have available over at their repository. They have instructions for getting a private key for production in there.
SENDGRID_USER=your_sendgrid_username SENDGRID_PASSWORD=your_sendgrid_password GIPHY_API_KEY="dc6zaTOxFJmzC"
- With the changes made, you’re ready to test the app:
npm install node server.js
Hook in the Parse Webhook
In order to receive email within your application, we’ll use SendGrid’s Parse Webhook. For an introduction, follow this tutorial. What you’ll have to do is basically:
- Point your domain’s MX record to
- Add an entry for the domain in your parse API settings
You’ll have to change the applicationReplyUrl variable inside
server.js for the user to receive back the email with the GIF.
var applicationReplyUrl = "http://yourappurl.jit.su/reply";
You can easily test the inbound webhook locally, without deplying, by using ngrok:
node server.js ngrok 3000
Once ngrok is connected, you should have a URL similar to this:
For local testing, that’s the URL you should set up inside your SendGrid parse API settings.
Deploy to Nodejitsu
You can easily deploy the app by using Nodejitsu.
First of all, open package.json and change the domains and subdomains to the URL you want to use.
"subdomain": "yoururl", "domains": [ "yoururl.com", "www.yoururl.com" ],
After that, create a Nodejitsu account, install the jitsu CLI and log in. For the SendGrid email to be sent back, after the user requests it through the Inbound Parse Webhook, you need to set the env variables inside nodejitsu:
jitsu env set SENDGRID_USER your_sendgrid_username jitsu env set SENDGRID_USER your_sendgrid_password jitsu env set GIPHY_API_KEY your_giphy_api_key
And finally run:
With that, you’re able to search animated GIF from your own installation of GimmeGIF. Or, alter the application to suit your needs.
For more details on the feature behind this tool, download the Parse Webhook Guide for free now.