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.