Introduction to the Social Media Dashboard Sample for Windows 8/Windows Phone

[This post is the first in a series of posts about the Social Media Dashboard Sample.]

The social media dashboard sample (for Windows 8 and Windows Phone 8) consumes various social feeds and displays them in your app. It is driven from a JSON configuration file so it is very easy to adapt this sample to your needs and have this as a starting point for your application. This sample also illustrates a number of key concepts such as Search, Share, dynamic UI, animations, sharing code between Windows 8 and Windows Phone etc. A link to the sample code can be found here.

Details on how to run the app

Make sure you have the basics installed. That includes:

• Windows 8.
• Visual Studio 2012, not one of the Express versions since they don't support cross-platform development..
• Windows Phone SDK.

Download the sample and double-click on the solution. The solution consists of three projects:

• SocialMediaDashboard.PCL, which is the Portable Class Library that contains code that is used in both the Windows 8 and Windows Phone 8 projects. To learn more about Portable Class Libraries, click here.
• SocialMediaDashboard.W8, which contains the code for the Windows 8 version of the app.
• SocialMediaDashboard.WP, which contains the code for the Windows Phone 8 version of the app.

There are dependencies on a number of external libraries, these are:

• Microsoft.Bcl.Async, which gives you access to async and await keywords in a Portable Class Library.
  • NuGet: Install-Package Microsoft.Bcl.Async –Pre
• NewtonSoft.JSON, which is the standard library for parsing JSON objects.
  • NuGet: Install-Package Newtonsoft.Json
• HtmlAgilityPack, for parsing and changing HTML documents.
  • NuGet: Install-Package HtmlAgilityPack
• Microsoft Player Framework, which is a framework for displaying video. No NuGet package exists, the code can be found here. A .VSIX file as included in the Project as well, for convenience.

Now, set your startup project to either Windows 8 or Windows Phone and press F5 to run the app. The sample app gives you information about Windows Phone development. I’m guessing you might be interested in something else, in that case you can look up The Config.json in the Assets folder. This is the definition of the content for this app. Play around with it. A later post will detail the format of this configuration file.

Here are some screenshots from the Windows app:

 

And some screenshots from the Windows Phone app:

          

 

       

This post introduces a series of blog entries with more details about this sample. These are:

• Using Portable Class Library to write for both Windows 8 and Windows Phone.
• The anatomy of the Social Media Dashboard.
• Implementing search.
• Animating using the DispatcherTimer class.
• Displaying HTML content in a rich TextBlock.
• Using the WebView.
• Definition of the configuration JSON file format.
• Using styles to get a common look and feel.
• Adding live tiles.
• Adding About/Privacy Policy flyouts.
• Implementing an extended splash screen.

 

A home page with more information about this code sample and the blog entries can be found here.

For more information about Windows 8 app development, go here.

For more information about Windows Phone development, go here.

Comments

• Anonymous
  June 08, 2013
  why dont the videos work when i click on them?

• Anonymous
  June 09, 2013
  Hi Nell, I just tried and for me they work. Could you elaborate a little bit more and I will try to help you.

• Anonymous
  June 12, 2013
  It was my internet connection, but in the blog date list feed, I wanted to show the blog pics instead of the date how would I do that? Also, how do I change  the colors from say purple to red?

• Anonymous
  June 13, 2013
  For some reason the tweets aren't showing anymore?

• Anonymous
  June 16, 2013
  For some reason, the tweets aren't showing, do you know why?

• Anonymous
  June 16, 2013
  Due to the depreciation of the Twitter API 1.0 the tweets are no longer showing. We have completed the transition to the Twitter API 1.1 and we will submit the update to this sample soon.

• Anonymous
  June 16, 2013
  Can you show how to implement mobile ads in this solution?

• Anonymous
  June 16, 2013
  Also, could you do a more  detailed post on how you implemented the twitter portion?

• Anonymous
  June 17, 2013
  I was wondering when the update will be posted for the twitter fix?

• Anonymous
  June 19, 2013
  Was wondering when the twitter update will be posted?