Animated GIFs Inside Your Inbox


Posted on

OMG_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:

  • Email gimmegif@bymail.in with your query in the subject
  • Or check out the 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:

  1. Clone the repository:
    git clone https://github.com/heitortsergent/gimmegif.git
  2. Create your local copy of the .env.example file:
    cp .env.example .env

    We’re using the dotenv library to handle env variables.

  3. 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"
  4. 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
    mx.sendgrid.net
  • 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:

http://1884d72b.ngrok.com

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:

jitsu deploy

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.


Heitor is a Developer Evangelist at SendGrid based in Sao Paulo, Brazil. Passionate about hackathons, games and entrepeneurship.

Heitor Sergent on Twitter
Have thoughts on this post?
Chat with us about it on Twitter and Google+