This tutorial will show you how to connect a simple button to your favorite internet apps by connecting it to IFTTT.
IFTTT.com (If This Then That) is an amazing service that allows you to trigger actions on social media and other services you already use (like Facebook, Twitter, and Craigslist) from other events and services.
Don't let me loose you in the mumbo jumbo. Let's say you want to be notified by text message or email whenever the temperature falls bellow 32 degrees. You would then set up a "trigger" on IFTTT to monitor the weather and then IFTTT to connect various social media and other services. It looks for a triggering event in one service (such as a Facebook post that mentions you) and then activates another service (such as text messages, email, twitter, etc).
Arduino is open source electronics hardware (a "microcontroller") created to teach students how electronics work. It's relatively inexpensive and well-supported online.
While some more expensive Arduino models can connect to the Internet. The cheaper models require an Ethernet adapter (or in Arduino lingo an Ethernet "shield").
But connecting to the Internet is not enough--we want to interface with IFTTT so that we can access its library of great online services. We want to post to Facebook, send out our next tweet in our Buffer queue, or simply send an email.
One way to do this is through a service called Lithouse. Unfortunately, at the time of this writing Lithouse doesn't appear on IFTTT's list of apps.
So, until then, here's a work around. We will set up the Arduino to go to a webpage that we will create. The webpage will use a simple PHP script to send an email via SMTP to our Gmail account. We will then set up IFTTT to monitor that Gmail account and send a predefined email when it sees the email triggered by our button.
If all of this sounds complex, stay with me. I'll walk you through it step by step.
For a full list of what you'll need as well as the latest code my project page at BigButtonFun.com.
Step 1: Create a Triggering Webpage
First, we will create a webpage to bridge the Arduino to IFTTT. You'll need a web hosting service that has SMTP email and PHP.
If you don't have an email account that uses SMTP, you'll need to create one. On my own webhost's site this can easily be done through their control panel (cPanel).
Before creating the webpage you'll need to upload phpMail to your website. Here's a great video from my webhost that demonstrates how to do this:
Next you'll need to download our IFTTT trigger page code (trigger.php.txt) at http://bigbuttonfun.com/content/email-button-connecting-arudino-ifttt-and-beyond. Before you upload
it to your web server, you'll need to make a few edits. To do this you'll need to use notepad or some other text editor.
Here's the edits you'll need to make
A. Change the file name from trigger.php.txt to just trigger.php
B. Edit line 8 to reflect the location of class.phpmailer.php on your website.
C. Change "mail.example.com" to your SMTP mail host server name. For us it's "mail.bigbuttonfun.com".
// **Step 3** specify the SMTP mail host server:
$mail->Host = "mail.example.com";
D. Change the SMTP username to the one you use to access your email. It's probably your email address.
// **Step 4** Enter your SMTP username -- may be your email address
$mail->Username = "email@example.com";
E. Change "password" to your password.
// **Step 5** Enter your email SMTP password
$mail->Password = "password";
F. Enter a "From" email address. (Using the same address as your "sending" email address is fine.)
// **Step 6** Enter your from e-mail address
$mail->From = <a href="mailto:firstname.lastname@example.org">email@example.com</a>;
G. Change "John Smith" to your own name.
// **Step 7** Enter your name inside the quotes:
$mail->FromName = "John Smith";
H. Change the "to" email address and the "To" name to your Gmail address and name.
// **Step 8** Enter your Gmail address in the first set of quotes and your name in the second set of quotes:
$mail->AddAddress("firstname.lastname@example.org", "Big Button Fun"); // name is optional
Now upload it to your webserver and test it by going to [yourwebsite.com]/trigger.php?trigger=1
(Of course, you'll replace the "[yourwebsite.com]" with the actual name of your website minus the brackets.)
If it works, you'll get a message that says "Message has been sent".
Otherwise, it'll say: "Message could not be sent."
Then check your Gmail account to confirm that you actually received the "trigger" email.
Step 2: Setup an IFTTT.com Recipe
Now we will set up IFTTT.
If you don't already have an IFTTT account sign up for one at https://ifttt.com/join. Make sure you use the same account as the Gmail account you added to the trigger.php script in step1.
Activate the Gmail Channel
Click on the Channels link at the top right hand side of the page. Then scroll down to the Gmail channel and click on it.
Now click the Activate button and follow the prompts. It may ask you to login to Gmail or to choose which account you want to use. When it asks to "View and manage your mail," "View your email address," etc., click the Allow access button.
Create an IFTTT "Recipe."
Click the "Create" link at the top of the page.
You will then see the following statement in large letters:
Click the "this" part of the statement.
Now select Gmail as your "trigger" channel.
You will see several options, but for purposes of this tutorial select the "new email from" option.
Enter in the SMTP email address from the "$mail->From" line of the trigger.php script in step 1. The example address (which you should have replaced) was email@example.com. Just to be clear, do not enter your Gmail address here.
That will take you back to the ifthisthenthat statement. This time, click the "that."
Choose the Gmail channel.
Then choose "Send an email"--which may be the only option.
Now create the email you want to be sent when you press the email button. You can use up to 5 email addresses. If you know the email address to send a text to your phone via email, you could use that here too. You can even attach a file, if you have the URL where it's located online.
When you're done drafting the email, click "Create Action."
If you want to change the "Recipe Title" for your own reference, you may do so. Otherwise, click the "Create Recipe" button.
Now, as you did in Step 1, go to [yourwebsite.com]/trigger.php?trigger=1 (again replacing the "[yourwebsite.com]" with the name of your website.
If you get the email you created in your IFTTT recipe, then it works--and you're nearly done.
Step 3: Make the Button
For a complete list of what you'll need and where to find it all, go to http://bigbuttonfun.com/content/email-button-connecting-arudino-ifttt-and-beyond.
Attach the Ethernet Shield to the Arduino.
This is fairly simple. Place the Ethernet shield on top of the Arduino, lining up all of the pins on the underside of the Ethernet Shield with all of the holes on the top of the Arduino. Then, gently press them together.
Pull up and pull down resistors
Take a breadboard and place a 10k ohm resistor from row 5 to row 9. Then place your 100k ohm resistor from row 1 to 5. (You may find it helpful to snip off the ends a bit.) Also, unlike LEDs, you can't put a resistor in backwards. (Note: Using pull up/down resistors is generally considered good practice when using buttons with Arduino. But with this project you might be able to get away with not using them. If you skip the resistors, let me know how it turns out for you.)
Connecting the Breadboard to the Ethernet Shield
Now cut two lengths of solid hook-up wire 6 to 8 inches long and strip 1/4 inch of the insulation off each end.
Take wire 1 and place one end in row 1 of the breadboard and the other end in the ground pin hole of your Ethernet shield.
Wire 2, then, goes from row 9 of the breadboard to digital pin 2 of the Ethernet shield.
Connecting the Button
For wires 3 and 4 cut two more lengths of wire 6 to 8 inches long and strip 1/4 inch of the insulation off each end.
You may want to crimp a 3/16" female "quick disconnect" onto the end of one side of each wire. This is helpful if you have a button like the one pictured here and listed on our website.
You want to connect wires 2 and 3 to the terminals on the switch that allow electricity to pass when the button is pressed down (if you use the wrong terminals the switch may be usually on unless you press the switch or it may not work at all.)
If you don't know what terminals to use. Test the switch with the continuity setting of your micrometer.
Connect it to Your Router
Using an Ethernet cable connect the Ethernet Shield to your router.
Step 4: Program the Arduino
(If you've never uploaded a code "sketch" to an Arduino, they have a great tutorials for Windows, Mac, and Linux at: http://arduino.cc/en/Guide/HomePage.)
Get the File
Download the emailbutton_v1b.ino sketch from my resource page at:
Open it up in your Arduino desktop program. (Again, if you've never done this before see http://arduino.cc/en/Guide/HomePage.)
Edit the File
Here's the edits you'll need to make:
Change "google.com" below to the name of your domain name (e.g. "bigbuttonfun.com"). Alternatively you can use your server's IP Address. If you do this make sure to get rid of the "//" in front of the "IPAddress" line and put in front of the "char server" line instead.
//IPAddress server(74,125,232,128); // numeric IP for website (no DNS)
char server = "google.com"; // name address for website (using DNS)
Change "/trigger.php?trigger=1" as needed. For instance if your trigger.php file is in a directory called "test" in your root directory, you would change this to "/test/trigger.php?trigger=1".
client.println("GET /trigger.php?trigger=1 HTTP/1.1");
Change "google.com" in the line below to the name of your domain name or IP address.
Upload and Test
Once you've uploaded the file to your Arduino, you're ready to test the button! If it works, you should receive an email in your Gmail account as you did when you tested the trigger.php page on your website.