Click here to Skip to main content
Click here to Skip to main content

Companion - Social Aggregation

, 4 Sep 2013
Rate this:
Please Sign up or sign in to vote.
Efficiency in digesting every insignificant nugget of information.

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.

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 discourage rage.

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 achieve this.

Notifications will be displayed in real-time as large toast popups from the bottom of the screen.

Experience 

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 your feed.
  • As-you-type search filter.
  • Similar applications exist for tablet interfaces, but none have been built specifically for a high resolution desktop environment.

Technology 

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 format.

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. 

User Interface

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 design).  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. 

Contest Details 

Platform:               All in One (a multi-touch desktop application; not Metro/Modern UI).

Category:              Entertainment 

Languages:           C#  

History  

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Joe Brock
Technical Lead Sigma Seven Ltd
United Kingdom United Kingdom
I've been designing and developing software at Sigma Seven Ltd for the last five years, specializing in networked geospatial solutions. I've been lead developer on a number of high-profile enterprise solutions and am currently working on developing new products and improving core components of our existing products. My current role within the organisation is Technical Lead.
 
I hold an MSc in Software Engineering and have a huge amount of passion for C#, WPF, web services and anything that looks particularly complex and nerdy.
 
I also love to blog about beer and collect copious quantities of movies and television series, without actually bothering to watch most of them.
 
I entered the 2012 AppInnovation contest last year and passed the first round, winning an Intel SDE Ultrabook. My application, Transport Tracker, was subsequently published in the Intel AppUp store.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberVolynsky Alex5-Sep-13 0:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 4 Sep 2013
Article Copyright 2013 by Joe Brock
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid