Building the next Facebook/Twitter/etc.

FB_Messages_www_printpackaging

©Facebook – used with permission https://www.facebookbrand.com/

The tools to build the next billion-user app (like Facebook, Twitter, YouTube, GMail, etc.) are more easily within reach than ever before – in fact, perhaps they’re within reach for the first time, ever. Just ten years ago (2003), there was no Facebook (it first went online in 2004), no Twitter (2006), no YouTube (2005), and, no GMail (2004).

Never before in history has a person with an idea been able to connect with over a billion people in under a decade. And, the barriers to this goal are getting lower all the time – the tools necessary to connect a billion people are all within reach of anyone willing to learn: HTML, JavaScript, PHP, MySQL, CSS, a domain name, some web hosting.  The students in my CSCI 3000 Web Programming course this semester have built their own web apps in their own hosted domains for a little over $50, plus a lot of sweat, study, and determination.

The apps above (Facebook: 1.4 Billion users; Twitter: 0.55 Billion users; YouTube: 1.1 Billion users/month; GMail: 0.45 Billion users) have several things in common – perhaps above all, they CONNECT people. The epitomes of social media are social because they gain value as more people connect with the service. They allow multiple modes of interaction for convenience and stickiness (desktop, mobile, email; facebook and twitter even support SMS), allowing us to incorporate them into our daily lives wherever we are.

In one of our final projects for CSCI 3000, we’re going to add the ability for our sites/apps to interact with the user – we’ve just added outbound email in lab 10 (https://ttdtd.com/apps/lab10/). Now it’s time to handle inbound emails – like replying to a Facebook message just by hitting reply in the email notification. We’ll learn how to set up Vanity URL’s (like facebook.com/yourname) to connect more personally with users. We’ll even see how to apply a simple hack to allow two-way SMS (text message) interaction. Cool? Of course!

Non-programmers, you can use sites like Codecademy.com and references like w3schools.com to gain the necessary skills to use this tutorial. Or, maybe even better, email me and I’ll connect you with one of my students to do the work for/with you, at the right hourly rate : ).

Mega-Tutorial on PHP/MySQL-to-Email-to-SMS-to-PHP/MySQL

Here are the files you’ll need for this mega-tutorial: /apps/emailPHPsms.zip
And, if you’re in my CSCI 3000 course, you can use this mega-project in your term projects, and learn how to build “the next big thing” in the process. You can invent something game-changing with the skills you’ve acquired this semester in PHP/HTML/CSS/MySQL/JavaScript/server-config/mobile/etc.; now is as good a time as any, if not better, because innovation is happening at a faster pace than ever before – it took 11 years to sell the first 4 million television sets (1939-1950) [ref.], 3 daysto sell 4 million of the iPhone 4S, one day to sell 4 million iPhone 5S!!! (and 3 days to sell 9 million) [ref.]; and, none of the web innovations mentioned in the opening paragraphs above started out with massive funding, just an idea, some server space, and some creative programming and user interface work.

The treasure trove of tutorial files

/apps/emailPHPsms.zip

There are seven files in this tutorial – just seven files needed, along with some setup on your HostGator (or any other Apache server) accounts, to build a fully functional PHP-to-Email-to-SMS/text messaging-to-daily reminder web site with user-friendly URLs for user profiles (https://bodyreminder.com/Bryson for a demo). For my CSCI 3000 class at the University of North Georgia, each piece of functionality counts toward Project 5 (extra credit for SMS and automated “cron” reminders).

PHP-to-Email-to-PHP and PHP-to-SMS-to-PHP files:

index.php 
reminder.php 
tasks.sql

Place index.php in the web root for your site/project (you’ll also need a config.php file that stores your MySQL database host, database name, username, and password information), place reminder.php in your server root (“/” in FTP, /home/username in HostGator), and run the SQL script tasks.sql to create the table needed for everything that follows in your phpMyAdmin or other MySQL interface. Important: You’ll need to set the permissions for reminder.php to 755 so that this script can be executed when emails come in.

Next, we need to do some server config. Set up an email forward to “pipe” email to your /home/username/reminder.php script by going to the cPanel in HostGator, under Mail select Forwarders, Add Forwarder, type an email address like “reminder@” your domain, click Advanced Options, Pipe to a Program, and enter /home/username/reminder.php with your HostGator username substituted. Click the Add Forwarder button. Now anytime an email goes to reminder@yoursite.com, it’ll get processed by reminder.php – you can edit reminder.php to make it do anything, but right now it updates tasks based on the email sent there.

It’s also set up to handle SMS text messages forwarded by Google Voice (see the tutorial at https://sudocode.net/article/190/receiving-incoming-smstext-messages-from-google-voice-in-php/ for more detailed instructions).

The index.php file creates the task reminder and either emails or text messages the user, and displays the most recent 10 completed tasks. The SMS portion of the form has most US and European carriers, but more can be added from the list at https://en.wikipedia.org/wiki/List_of_SMS_gateways.

Dynamic user directories, or Vanity URLs: yoursite.com/username

.htaccess
handler.php
user.php

You probably know that when you go to facebook.com/username, or twitter.com/username, youtube.com/username, etc., that facebook/twitter/youtube didn’t really create a folder on their web server just for you. They’re parsing your username out of the URL, searching their database, then showing your user profile/home whenever you use that address.

Vanity URL’s are a slick, professional, clever way to make users feel connected to the site – people even use those addresses as their “home pages” on business cards, email signatures, etc. It’s like your users are a part of your site when you enable dynamic user home pages like this, and this exercise will show you how to treat your users as well as the big guys do.

I used three files to make dynamic user directories. First, we’ll do the server config piece. Either place the .htaccess file into your site/project root OR copy the last line of the file:

ErrorDocument 404 /handler.php

and append it to your existing .htaccess file. This line redirects all 404 (page not found) errors to a script called handler.php – think about it: the page yoursite.com/myusername doesn’t actually exist, so it should normally trigger a 404 error. But, in this case, I want to be able to see if myusername exists in the site’s database, and if it does, show the user’s home page rather than a 404 error. Doing this via .htaccess is the simplest way to make this happen, and leaves the URL intact in the browser’s address bar, so they can bookmark (and share) yoursite.com/myusername. Cool, huh?

Place handler.php in the site/project root, and it’ll need access to your config.php database config file just like index.php does above. The handler file just splits out the URL, throws away everything before the slash, and looks for either /user/username or just /username. It then looks in the database for the user, and if it finds it, it calls the user.php file. Otherwise, you still get the familiar old 404 error, but with a link to the main page.

The user.php file is just a modified version of the index.php home page, customized for a single user. It takes the global $user variable passed from handler.php and uses that username to pre-fill the form and pull all that user’s tasks from the database. Easy enough?

Cron jobs – automating daily/hourly reminders

send_reminders.php

The final step is adding the ability to set recurring reminders in the future. To do this, you again need one piece of server config. In your HostGator cPanel, go to Advanced, Cron jobs, and set a cron job to fire every day (or every hour, if you wish), and set the command to /home/username/send_reminders.php, substituting your HostGator username in the path. Put send_reminders.php in your server root, just like reminder.php in the first section above, and change its file permissions to 755 to make it executable. The first line in both these scripts tells the script where to find the php interpreter to execute the code, if you were wondering what  #!/usr/bin/php -q meant.

Pursue and extend

I’ve left the buildout of send_reminders.php as an exercise (I had to leave something to be built by you ;) ), but it will work similarly to the index.php and user.php files, except that this script gets executed every day or every hour based on your preference, and should query the database for all recurring reminders that need to be sent for that time period, then loop through those results and send email or SMS reminders.

To accomplish the full vision, you’ll need either extra fields in your table, or preferably a new table for repeating tasks. You’ll need to modify the index.php and user.php forms to allow folks to set recurring reminders (remind me every day or every week on the following days: M/T/W/Th/F/S/Su, and maybe even remind me at specific times), and update send_reminders.php to handle the recurring reminders, generate new tasks and send the reminders.

Let me know what you think!

All in all, this app (see a functional demo at https://bodyreminder.com ) has the foundations of a highly social app with some of the hallmark conveniences of Facebook, Twitter, etc. Email me at professorpayne [at] gmail.com or comment below if you put together a good concept using these source files. I’d love to hear about it!

 

About Bryson Payne

Author of Teach Your Kids to Code, TEDx Speaker, and Professor of Computer Science at the University of North Georgia.

View all posts by Bryson Payne

One Response to “Building the next Facebook/Twitter/etc.”

  1. Corey Says:

    Great tutorial article, Dr. Payne. I have been experimenting with Web Development for years now, including some social-oriented websites and couldn’t agree more that these tools are more than every easily available. For example, with the click of a few buttons, you can have a fully-functional social networking site for free using WordPress using BuddyPress. I will have to experiment with your files attached, and would love to take your web class as soon as possible!

    Reply

Leave a Reply