Introduction & Design Goals
These days, we often find ourselves at the mercy of social
networking sites. It’s a sickness. But quite often we find ourselves pacing
between browser tabs, trying futilely to keep up-to-date with everything that’s
going on, hoping to fill some void in our lives.
Hopefully you’ll rejoice on the knowledge that this
application will do nothing but enable that sort of compulsion and improve the
experience somewhat, making you more efficient at trying to read every insignificant
morsel of drivel.
Personally, I find myself doing a dance between social networking
sites in-browser. It’s a dance where I’m
essentially hitting the refresh button on each tab in turn, waiting for some
glorious post. The main aim of this
application is to aggregate all of this information onto one screen, in an
easy-to-read format, encapsulated in a soft, elegant interface design to
Companion is primarily being developed for large,
high-resolution displays with multi-touch capabilities. In aid of this, I am using vector imagery (in
XAML Canvas/SVG format) and large, high contrast typography. I’ll be taking advantage of the touch
interface to create a user-composable interface, where the user can create new
columns of information where each information source can be a Twitter list,
Facebook group or individual, Google+ circle or particular YouTube channel. I’ll be using touch-driven drag-and-drop to
Notifications will be displayed in real-time as large toast
popups from the bottom of the screen.
I’ve been working as a Software Developer for the last five
years, recently becoming a Technical Lead with my employer, focusing on
designing and building elegant, networked geospatial applications. In this time, I’ve learned a great deal about
WPF, the .NET framework, ASP.NET and web services. This has given me the skillset required to
tackle large, multi-faceted solutions.
I’ve been pouring the majority of my waking moments into
social networking sites since they opened about ten years ago and have
interfaced with Facebook in the past using OAuth and the Graph API.
Initial Feature List
The features I’m planning to tackle as part of this
competition are as follows. My intention is to publish the application, support
and build upon these features in years to come.
- Multi-touch user-composable UI - drag twitter lists,
facebook groups and youtube channels into their own column.
- A user interface built for touch navigation and high
resolution, using SVG/XAML Canvas imagery and high-contrast typography.
- Feed aggregation from YouTube, Facebook, Twitter &
Google+. Support for other networks to
be added in the future.
- Toast pop-ups upon notification.
- Built-in video & photo viewer, which supports gestures.
- 'Best of' view which displays the most popular entries in
- As-you-type search filter.
- Similar applications exist for tablet interfaces, but none
have been built specifically for a high resolution desktop environment.
Companion is being built in Microsoft Visual Studio 2012 with .NET
4.5, C# and WPF. I’m following a
standard MVVM architecture with Caliburn Micro, pulling from REST services and
pushing to the ViewModel using Reactive Extensions (Rx).
There are a handful of other NuGet packages which I’ll be
using to aid interfacing with Facebook, Twitter, Google+ & YouTube. These
are Facebook C# SDK, LinqToTwitter, Google.Apis.Plus &
Google.GData.YouTube. These are fairly
simply libraries which will perform OAuth and allow me to pull out data in JSON
For each network, I’m pulling network-specific JSON and
deserializing into network-specific model classes. These will be further abstracted by the feed
aggregator, which will expose a layer with standard text, photo & video models.
I’m using Akavache with the SQLite extension to store feed
entries, configuration and photographs (profile and user-submitted) to save
bandwidth, improve performance and so the application can continue to work in
an offline mode when disconnected from the Internet.
For the initial version, I’ll only be supporting real-time
chat for Facebook. I’m currently using
the agsXMPP Jabber/XMPP client SDK.
The diagram below should help clarify the internal structure of the application and how it connects with the outside world.
Below you’ll see the current development version of the
application. On the right, we have the real-time chat column, showing Facebook
friends. On the left, we have the full,
aggregated social network feed.
Additional tabbed elements are available for incoming messages (“to me”),
messages you’ve posted (“from me”) and notifications from all networks (“alerts”).
Additional columns are created by touching the cog at the
bottom-right, and dragging elements from the pop-up menu onto an area of the
interface. There are two modes for user-created
columns, you can either nominate a column as the most important column, which
will cause other columns to assume a fixed-width and the important column to
expand and take all of the remaining area, or; each column can be equally
important, splitting all of the available width equally between all columns.
Main Screen (Click for a larger image)
Main Screen with Two Columns (Click for a larger image)
Status & Further Work
At time of submission, I’ve successfully interfaced with
Facebook, Twitter and YouTube and I am aggregating feed entries from these
networks onto the main user interface using Reactive Extensions, Akavache
(caching) and MVVM. Next steps include developing
a better abstraction layer for the aggregation component (as per the above
Pulling & displaying photographs and videos in an interesting manner
will be the very next development task after that.
Code snippets & design diagrams will continue to be
posted as the project grows and develops.
in One (a multi-touch desktop application; not Metro/Modern UI).
4th September 2013 – Development continues. I've now integrated with Google+ and have started to refine the main view model. Have added another screenshot to demonstrate column support.
1st September 2013 – Initial Version