Week 2 Notes
Ping Me and I'll Ping You Back
In this week, we'll get the basics building blocks of a text messaging app up and running. Ready?
First of all, you're going to need an email address for your application. Let's
use Gmail - it's free, easy to use and supports POP. You can sign up for a email account
at http://gmail.com. Try to choose an email address that's easy to type on a phone
(e.g. my_first_texting_app_is_great@gmail.com would be a bad choice). If you can't think
of anything great, don't worry - you can always create a cooler / better / easier to
remember email address (e.g. sms@txtmonkey.com) and have that forward to this gmail account.
Set up your Gmail account for POP mail. Once you log into Gmail click "Settings" ->
"Forwarding and POP" and then select "Enable POP only for mail that arrives from now on" and
set "When messages are accessed with POP..." to "delete Gmail's copy" (see below).
Now, download the Week 2 Code Kit by clicking
here. In this folder you find six files. We really only need four of them to get up and running:
+ popper.pl (the perl popper - this is the code that grabs + parses incoming emails)
+ logic.php (this is where all the php magic that drives your application will live)
+ include_libmail.php (allows us to send outgoing photo messages)
+ include_tech_nyu.php (contains the database connection tools + some php functions we'll us using)
You'll need to edit the popper.pl and logic.php files to match your NYU netid and the
username / password for the Gmail account you just created. Let's do that now - you
can edit these files using BBEdit, TextWrangler, Homesite, Dreamweaver, etc.
First, let's look at popper.pl. There's three sets of variables we need to change: Gmail settings,
NYU settings and Debugging settings.
Under Gmail settings, make sure to add your new Gmail username / password. You don't need to change
the "pop.gmail.com" settings. Remember, make sure you are using a brand new Gmail account and
not your everyday Gmail account The last thing you want to do is accidentially delete all the
emails from your friends and family sent to your real email address.
Under NYU settings, you'll need to replace my NetID (dc788) with yours. Also, we'll need to
tell the popper where to find the "logic.php" file and "tmp" and "img" folders. We haven't
uploaded these files yet (or created these folders), but for now let's imagine that we're going
to put them in a folder called 'ubicomp07" (btw, feel free to call the folder anything you want)
Under Debugging settings, we have three variables: $delete_messages, $print_output, and $hit_url.
For now, we want to set all of these to "1" (1 = on, 0 = off). When these variables are on, every
time we run the popper it'll grab and parse the messages in our inbox, show us what was
parsed ("printing" data this to the screen) and then pass the variables to our "logic.php" script.
In the future, you may want to turn some of these off for debugging purposes (but we'll get
into that later).
Next, let's look at logic.php. There are really only two variables we'll need to set here.
Simply change the the name and email address of your application. The name can be anything
(RestaurantFinder, Dennis Test App, etc.), but the name is what will show up on the "From:"
line when you send messages to mobile phones. The email address should match whatever you are
using as a Gmail inbox (this is address your users will reply to when they receive messages)
Also, if you scroll way to the top of logic.php you'll see the $send_email variable. This is
another one you may want to edit as you start to play with the popper, etc. Leave it to 1 for now
(1 = on = send emails) but if you ever get tired of your phone buzzing every time you go to
test your app, you can always set it to 0.
Now let's upload these files. Open your favorite FTP program (Fetch, Transmit, etc.) and connect
to itp.nyu.edu (you may need to tell your FTP app to use SFTP or Secure FTP). We'll need to
create a new folder to put our files in (remember the "ubicomp07" folder from above?). If
you haven't created that folder yet, do so and then copy our include + logic + popper files into
that new folder.
Once those files are copied, we'll need to make two more folders: "tmp" and "img". These
will be to store any camera phone images we send / receive during class.
When all is said and done, your "ubicomp07" folder should look like:
Now, let's connect to itp.nyu.edu and use the command line to test the popper. We'll
need to open an SSH connection to itp.nyu.edu. On a Mac the best way to do this is with the
"Terminal" program (Application -> Utilities -> Terminal.app... add it to your dock!)
When the window opens you'll need to type "ssh <your netid>@itp.nyu.edu" to connect. Like this:
Once you get to the "[dc788@itp ~]$ " style prompt, you're all set (of course, it'll be your NetID and not mine)
Now, let's navigate to our ubicompmobile folder. If you're not familiar with Unix / Linux commands,
here's a few to get your started.
ls "list" - shows all the files in a folder
cd "change directory" - use to move into a new folder (e.g. "cd ubicomp07")
pwd "print working directory - tells you what folder you're in (in case your forget)
cd .. used to move back a directory
To get to our "ubicomp07" folder we'll need to type in "cd public_html" [RETURN] and then "cd
ubicomp07" [RETURN]. Like this:
If you type "ls" once you're there, you should also get a list of files (the same ones
we uploaded just a few minutes ago).
Real quick, let's make sure that everything was uploaded okay - specifically we want to check
to make sure whatever editor we were using (TextWrangler, BBEdit, etc) did not mess up the line
breaks. We can do this by using an editor called "nano". So, type "nano popper.pl" into
the command line.
If your file looks like this - basically one long line of code instead of code with nice, neat
line breaks - then you may need to re-upload your files. Double check your editor to make
sure that you are saving / uploading files w/ "UNIX" line breaks instead of "Mac" line breaks.
So now we need to set the permissions on the file - basically, changing the files we
uploaded so that they can be "viewed" by the outside world (and not just us). To do this,
we need to "chmod" them (chmod = "change mode" = re-set the permissions). In this case,
we're goign to chmod them with the value "755" (which means while you can do anything to your
files, though others can only read or execute them). To do this type "chmod 755 *" (the *
refers to "everything" in that folder". Like this:
Great! And once everything is chmod'ed, let's take the popper for a test drive. How
do we do this? Easy! Just type "./popper.pl" and the popper will run! With any luck you'll
see this...
... since no messages have been sent to the popper. But that's boring - so let's send a message
on over! From your phone, send a text message to whatever Gmail address you are using, like this:
And then go check your Gmail account - you should see the email you sent waiting for you.
Don't open it... we'll let the popper do that. Go back to your terminal window and run the popper
again (type "./popper.pl", remember?). We should see the popper at work parsing the message (and
showing us the URL it's forwarding to).
And if we were to copy + paste that URL back into a browser window, you'll be able to see exactly
what the logic.php script is doing. Like this:
And that's pretty much it. I'm hoping that you're phone buzzed at least once during the
last 30 seconds of this tutorial (the result of the logic.php replying to the message you
sent to the popper).
Once you've got this basic "Ping Me and I'll Ping You Back" interaction working, try experimenting
with changing some of the PHP code in the logic.php file. Remember how we had it set up to
tell you the sound a cat / dog / monkey makes? Well, switch it up a bit! Maybe instead of sending
in the name of an animal, you send in the name of a movie and a snippit of a review is returned.
Or maybe you text in an ingredient (e.g. chicken) and a recipe is returned. Whatever you do,
as long as you start to explore what you can do w/ the "Ping Me and I'll Ping You Back" setup
and start to think about what you eventually want to build in class you'll be in good shape.
Debugging Tips and Tricks
One of the best parts about this popper.pl -> logic.php setup is that it makes it super easy to
*simulate* sending text messages through the browser window. If you *copy* URL
that the popper is passing to the logic and then *paste* it into a browser window, you can
see exactly what the logic.php file is doing. You can also start to tweak the contents of the message
by changing the querystring variables in the URL. If you are designing a multi-user app, you
can simulate sending from multiple users by changing the "&from=" part of the string. If you are designing a city-guide app, you can
tweak the entry the user may have sent by change the "&body=" part of the string.