{"id":750,"date":"2013-11-01T08:07:29","date_gmt":"2013-11-01T12:07:29","guid":{"rendered":"http:\/\/brysonpayne.com\/?p=750"},"modified":"2013-11-01T11:24:25","modified_gmt":"2013-11-01T15:24:25","slug":"building-the-next-facebook","status":"publish","type":"post","link":"http:\/\/brysonpayne.com\/2013\/11\/01\/building-the-next-facebook\/","title":{"rendered":"Building the next Facebook\/Twitter\/etc."},"content":{"rendered":"<div id=\"attachment_752\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"http:\/\/brysonpayne.com\/wp-content\/uploads\/2013\/11\/FB_Messages_www_printpackaging.png\"><img aria-describedby=\"caption-attachment-752\" loading=\"lazy\" class=\"size-medium wp-image-752\" alt=\"FB_Messages_www_printpackaging\" src=\"http:\/\/brysonpayne.com\/wp-content\/uploads\/2013\/11\/FB_Messages_www_printpackaging-300x187.png\" width=\"300\" height=\"187\" srcset=\"http:\/\/brysonpayne.com\/wp-content\/uploads\/2013\/11\/FB_Messages_www_printpackaging-300x187.png 300w, http:\/\/brysonpayne.com\/wp-content\/uploads\/2013\/11\/FB_Messages_www_printpackaging.png 640w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-752\" class=\"wp-caption-text\">\u00a9Facebook &#8211; used with permission https:\/\/www.facebookbrand.com\/<\/p><\/div>\n<p>The tools to build the next billion-user app (like Facebook, Twitter, YouTube, GMail, etc.) are more easily within reach than ever before &#8211; in fact, perhaps they&#8217;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).<\/p>\n<p>Never before in history has a person with an idea been able to connect with over a <strong>billion<\/strong> people in under a <strong>decade<\/strong>. And, the barriers to this goal are getting lower all the time &#8211; 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. \u00a0The 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 <strong>$50<\/strong>, plus a lot of sweat, study, and determination.<\/p>\n<p>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 &#8211; 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.<\/p>\n<p>In one of our final projects for CSCI 3000, we&#8217;re going to add the ability for our sites\/apps to interact with the user &#8211; we&#8217;ve just added outbound email in lab 10 (<a href=\"http:\/\/ttdtd.com\/apps\/lab10\/\">http:\/\/ttdtd.com\/apps\/lab10\/<\/a>). Now it&#8217;s time to handle <strong><em>inbound<\/em><\/strong> emails &#8211; like replying to a Facebook message just by hitting reply in the email notification. We&#8217;ll learn how to set up Vanity URL&#8217;s (like facebook.com\/yourname) to connect more personally with users. We&#8217;ll even see how to apply a simple hack to allow two-way SMS (text message) interaction. Cool? Of course!<\/p>\n<p><strong>Non-programmers<\/strong>, you can use sites like <a href=\"http:\/\/Codecademy.com\" target=\"_blank\">Codecademy.com<\/a> and references like <a href=\"http:\/\/w3schools.com\" target=\"_blank\">w3schools.com<\/a> to gain the necessary skills to use this tutorial. Or, maybe even better, email me and I&#8217;ll connect you with one of my students to do the work for\/with you, at the right hourly rate : ).<\/p>\n<h2>Mega-Tutorial on PHP\/MySQL-to-Email-to-SMS-to-PHP\/MySQL<\/h2>\n<p>Here are the files you\u2019ll need for this mega-tutorial:\u00a0<a href=\"http:\/\/brysonpayne.com\/apps\/emailPHPsms.zip\"><strong>\/apps\/emailPHPsms.zip<\/strong><br \/>\n<\/a>And, if you\u2019re in my CSCI 3000 course, you can use this mega-project in your term projects, and learn how to build \u201cthe next big thing\u201d in the process.\u00a0You can invent something game-changing with the skills you\u2019ve 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 \u2013 it took 11 years to sell the first\u00a04 million television sets (1939-1950) [<a href=\"http:\/\/www.tvhistory.tv\/facts-stats.htm\">ref<\/a>.], <strong>3 days<\/strong>to sell\u00a04 million of the iPhone 4S, <strong>one day\u00a0<\/strong>to sell 4 million iPhone 5S!!! (and 3 days to sell 9 million) [<a href=\"http:\/\/money.cnn.com\/2013\/09\/23\/technology\/mobile\/apple-iphone-sales\/\" target=\"_blank\">ref<\/a>.]; 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.<\/p>\n<h3>The treasure trove of tutorial files<\/h3>\n<p><a href=\"http:\/\/brysonpayne.com\/apps\/emailPHPsms.zip\"><strong>\/apps\/emailPHPsms.zip<\/strong><\/a><\/p>\n<p>There are seven files in this tutorial \u2013 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\u00a0(<a href=\"http:\/\/bodyreminder.com\/Bryson\">http:\/\/bodyreminder.com\/Bryson<\/a>\u00a0for 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 &#8220;cron&#8221; reminders).<\/p>\n<h3>PHP-to-Email-to-PHP and PHP-to-SMS-to-PHP\u00a0files:<\/h3>\n<pre><strong>index.php <\/strong><\/pre>\n<pre><strong>reminder.php <\/strong><\/pre>\n<pre><strong>tasks.sql<\/strong><\/pre>\n<p>Place index.php in the web root for your site\/project (you\u2019ll 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 (\u201c\/\u201d 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.\u00a0<strong>Important:<\/strong>\u00a0You\u2019ll need to set the permissions for reminder.php to 755 so that this script can be executed when emails come in.<\/p>\n<p>Next, we need to do some server config. Set up an email forward to \u201cpipe\u201d 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 \u201creminder@\u201d 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\u00a0<a href=\"mailto:reminder@yoursite.com\">reminder@yoursite.com<\/a>, it\u2019ll get processed by reminder.php \u2013 you can edit reminder.php to make it do anything, but right now it updates tasks based on the email sent there.<\/p>\n<p>It\u2019s also set up to handle SMS text messages forwarded by Google Voice (see the tutorial at\u00a0<a href=\"http:\/\/sudocode.net\/article\/190\/receiving-incoming-smstext-messages-from-google-voice-in-php\/\">http:\/\/sudocode.net\/article\/190\/receiving-incoming-smstext-messages-from-google-voice-in-php\/<\/a>\u00a0for more detailed instructions).<\/p>\n<p>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\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/List_of_SMS_gateways\">http:\/\/en.wikipedia.org\/wiki\/List_of_SMS_gateways<\/a>.<\/p>\n<h3>Dynamic user directories, or <strong>Vanity URLs<\/strong>: yoursite.com\/username<\/h3>\n<pre><strong>.htaccess<\/strong><\/pre>\n<pre><strong>handler.php<\/strong><\/pre>\n<pre><strong>user.php<\/strong><\/pre>\n<p>You probably know that when you go to facebook.com\/username, or twitter.com\/username, youtube.com\/username, etc., that facebook\/twitter\/youtube didn\u2019t really create a folder on their web server just for you. They\u2019re parsing your username out of the URL, searching their database, then showing your user profile\/home whenever you use that address.<\/p>\n<p><strong>Vanity URL<\/strong>\u2019s are a slick, professional, clever way to make users feel connected to the site \u2013 people even use those addresses as their \u201chome pages\u201d on business cards, email signatures, etc. It\u2019s 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.<\/p>\n<p>I used three files to make dynamic user directories. First, we\u2019ll do the server config piece. Either place the .htaccess file into your site\/project root OR copy the last line of the file:<\/p>\n<pre><strong>ErrorDocument 404 \/handler.php<\/strong><\/pre>\n<p>and append it to your existing .htaccess file. This line redirects all 404 (page not found) errors to a script called handler.php \u2013 think about it: the page yoursite.com\/myusername doesn\u2019t 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\u2019s database, and if it does, show the user\u2019s 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\u2019s address bar, so they can bookmark (and share) yoursite.com\/myusername. Cool, huh?<\/p>\n<p>Place handler.php in the site\/project root, and it\u2019ll 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.<\/p>\n<p>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\u2019s tasks from the database. Easy enough?<\/p>\n<h3>Cron jobs \u2013 automating daily\/hourly reminders<\/h3>\n<pre><strong>send_reminders.php<\/strong><\/pre>\n<p>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\u00a0 #!\/usr\/bin\/php -q meant.<\/p>\n<h3>Pursue and extend<\/h3>\n<p>I\u2019ve left the buildout of send_reminders.php as an exercise (I had to leave something to be built by you\u00a0<img alt=\";)\" src=\"http:\/\/brysonpayne.com\/wp-includes\/images\/smilies\/icon_wink.gif\" \/>\u00a0), 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.<\/p>\n<p>To accomplish the full vision, you\u2019ll need either extra fields in your table, or preferably a new table for repeating tasks. You\u2019ll 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.<\/p>\n<h3>Let me know what you think!<\/h3>\n<p>All in all, this app (see a functional demo at\u00a0<a href=\"http:\/\/bodyreminder.com\/\">http:\/\/bodyreminder.com<\/a>\u00a0) 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\u2019d love to hear about it!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The tools to build the next billion-user app (like Facebook, Twitter, YouTube, GMail, etc.) are more easily within reach than ever before &#8211; in fact, perhaps they&#8217;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), [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7,10,4,8,6],"tags":[],"_links":{"self":[{"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/posts\/750"}],"collection":[{"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/comments?post=750"}],"version-history":[{"count":11,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/posts\/750\/revisions"}],"predecessor-version":[{"id":763,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/posts\/750\/revisions\/763"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/media\/752"}],"wp:attachment":[{"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/media?parent=750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/categories?post=750"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/brysonpayne.com\/wp-json\/wp\/v2\/tags?post=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}