Iarfhlaith Kelly - Code agus Craic

As some of you may already know, I’m working on a web app called Footprint. Essentially it’s a business collaboration tool to help designers run their business. I’ve really enjoyed building it and I’ve learned a huge amount in the process. So in this post, I’m going to share some of that and show you how the whole system comes together.

The Tools of The Trade

At its core, Footprint has a simple, modular code architecture that I’ve slowly built up during its development. I wanted the system to make use of all the latest AJAX libraries while at the same time, failing gracefully if Javascript wasn’t turned on at the browser. So, I developed a framework using a combination of jQuery, Smarty, the SmartyValidate plugin and PHP sessions to support both synchronous and a-synchronous calls to the same script using centralised messaging and form validation.

Other key libraries include the well known PEAR library, the PHP OpenID Library by JanRain and the S3 SDK by Geoffrey Gaudreault.

The Poster

To get a better idea of how everything is organised within the app I created this poster:

(Click on the image to enlarge)

This colourful image represents all the main libraries, plugins, data stores, and communications channels used in Footprint.

The Framework Features

I’ve used an MVC architecture, built on a set of controller files. These control the flow of the app and acts as a buffer between the system’s business logic and the UI layer. Other aspects of this design that I’m very proud of are:

• Dual Support for OpenID and Standard Authentication;
• An API layer so that the app can be expanded on once it’s released;
• Support for both Synchronous and A-synchronous communications;
• Centralised Email Centre, where all email templates are held;
• All users’ binary data is stored on Amazon’s S3 Simple Storage Service;
• Built in support for multiple languages.

I created this poster to act as a reminder for myself of Footprint’s structured codebase, and to enforce a disciplined approach to code amendments and additions as the system matures and grows.

The Original

Here’s the original sketch that acted as the basis for the poster: (I kind of prefer this one! How about you?)

(Click on image to enlarge)

What Does Your Architecture Look Like?

I’d like to see more of these graphical representations from other developers. It’d be great to see in a visual way how others organise their code. I’m not exactly sure why these appeal to me so much, maybe it’s because I’m left handed and therefore a visual learner. Who knows.

If you already have a poster for your web app, I’d love to see it so please leave a comment and let me know.

I’ve always wanted to play around with the Twitter API. Everyone seems to be doing it these days. All I needed was a reasonable excuse. So, I decided on integrating relevant Twitter posts into Short.ie.

Recently I created a Twitter account for the new URL shortening service. The purpose of which was to post up new release information, engage with the users and essentially put a ‘face’ onto the service. But for this to be really effective I needed followers, and the best way to get those is to start following people yourself.

Maximising RSS

The only problem was, I needed to know who to follow. This is where Twitter Search comes in. I wanted to follow anyone who was currently using the short.ie service and Twitter Search allowed me to find them.

Getting Comfy with the Twitter API

So, to make my life easier, instead of trawling through the search results by hand and manually following each Short.ie user I decided to write a script to automatically follow everyone who posts a tweet that’s got a Short.ie link in it.

Here’s the code:

// Parse Search Feed
$rss =& new XML_RSS("http://search.twitter.com/search.rss?q=short.ie");
$rss->parse();

// Loop through all Tweets
foreach ($rss->getItems() as $item)
{
    // Get username of who posted it
    $user = substr($item['link'], 19 );
    $posi = strpos($user, '/');
    $user = substr($user, 0, $posi);

    // Follow the user via the Twitter API
    $req = new HTTP_Request('http://twitter.com/friendships/create/'.$user.'.xml');
    $req->setMethod(HTTP_REQUEST_METHOD_POST);

    $req->setBasicAuth('username', 'password');
    $response = $req->sendRequest();
}

It’s a very basic script right now, but it will form the basis of a more comprehensive solution as it matures. But, for only 10 lines of code, it’s pretty powerful!

The script has 4 main parts:

• Retrieve and parse the RSS feed for the search
• Loop through the feed
• Extract the username from the link of each tweet
• Use the Twitter API to follow the creator of the tweet

Obviously there are some issue with duplicates to be ironed out, and I think I’d like to store some of this information in a database too, but that can all come later. For now, I can say that I’ve dipped my toe into the world of the Twitter API and so far I like what I’ve seen.

Notes

To use this script, you’ll need to install and configure PEAR. I used the XML_RSS and HTTP_Request packages in this example.

Wireframes and Prototypes

The best practice for dealing with a fresh web app project is to meet with the client, map their business processes and then wireframe the solution. Often this involves an intense conversation discussing all aspects of their business, followed by shadowing their workforce or interviewing the intended users to learn exactly what they need.

After I know what the client needs, I usually start building the UI first. It’s a top down approach that focuses on the end result first rather then worrying about the internals of a project.

The Paper Prototype… On Paper

To do this I create what’s called ‘paper prototypes‘. These are mocked up screenshots of the final application as the user will see it. Up until yesterday I did this the old fashioned way with pen and paper. It was a slow process but incredibly valuable to both me the developer and the client. It set in stone the agreed features and acted as a template for building the real thing.

Now though, I’ve got something far more powerful. There’s a new software product just launched called Mockups and it’s made by the talented guys at Balsamiq. Using their new kit, paper prototypes have gone digital.

Enter Mockups: The Rapid Prototyping Tool

Mockups is a rapid prototyping application that lets you build UI screens in just a few minutes. The software lets you drag and drop all the typical objects used in modern web applications onto your design. There’s over 60 in the default set. This includes everything from scroll bars and menus to more advanced objects like tag clouds and even Apple’s cover flow.

The best thing about these mockups is that they still look hand drawn, so there’s no risk that your client will mistake it for the finished product. Often, I’ve done up prototypes in Photoshop and when I show them to the client, they get confused when I tell them it’s just a mockup, they actually thought it was real! Mockups prevents this from happening by using slightly squiggly lines. It makes for a more ‘hand drawn’ effect. Here’s an example of what’s possible:

Also, this demo should give you an idea of how important this new tool is going to be for developers. A mockup of iTunes is put together in less then three minutes:

The Mockups software is built on the Adobe AIR platform which makes it natively cross platform. So it’ll work on Windows, Macs and Linux boxes.

How Much Does It Cost?

Another great aspect of the software is its price. Balsamiq have said that they’ll give it away free to developers of open source projects. They’ve also said that if you talk about them at an event, they’ll give you two copies for free, one for you and another to give away at the event. And finally, they’ve said that if you write a convincing blog post about them, they’ll also give you a copy for free! To everyone else it costs just $79.

This software has been coming a long time, and I’m delighted I stumbled onto it. It’ll greatly speed up the prototyping phase of my web app development cycle and allow me to be more creative too.

UPDATE - As a result of writing this post I received a free license for the product. I had a suspicion I might get one, but honestly, I would have written it anyway.

Okay, so a few months ago I wrote a post about how URL shortening services could be improved. I suggested adding new features like click tracking and semantic links.

Soon afterwards Dave and Gordon got in touch with me and said they were interested in helping out. They added to the idea and suggested integrating it with Firefox and running some content analysis on the different sites people were linking to so we could recommend new content they might like. And so with these new ideas, the project began.

Short.ie went live soon afterwards, and since then we’ve been adding new services to it, building out on the original idea. Since adding the custom URL feature (two weeks ago) we’ve seen over 500 URLs shortened through the service and over 2,500 clicks. So far, here’s what we’ve got:

• Regular URL Shortening
• Custom URL Shortening
• Click Tracking
• View All Shortened Links (per user)
• Content Recommendations
• An API
• A Firefox Plugin

We’re also working on:

• Connecting people who link to the same things
• RSS feeds per registered user
• Displaying popular links on the homepage
• Displaying most influential users on the homepage (once we get avatars setup)
• Improving the content recommendation engine

This is a project we’re working on in our spare time and to be honest we’ve got absolutely no business model for it. The truth is, it’s fun to work on and it’s something we believe in. There’s no advertising on the site and we cover the costs to host it ourselves. If you feel like helping out, we’d love it if you could help spread the word. We’ve got a lot of plans for Short.ie in the future, so if you haven’t already seen it. Go take a look.