Getting started with Web Requests & JSON in Windows Phone

This is a beginner level post to get you started with JSON, familiarize you with basic communication with web server and Facebook Graph API. Consider a scenario where you want to grab details of a particular Facebook page or a person’s profile in Windows Phone app. A standard practice is to use Facebook Graph API which is a social graph. To begin with you can grab JSON output of a particular page by calling the Facebook graph API end point,

https://graph.facebook.com/<PageNameHere>

Calling this Url you’ll get a JSON reply that will include the details of the particular page. For example calling Microsoft Pakistan’s Developers Facebook page would be like so,

https://graph.facebook.com/msftpk

 

You can open this file using any standard text processor. Studying this document provides a brief overview of the output attributes per pages returned.

Now here comes the interesting part; how would you parse the JSON into relevant C# objects? There are two important considerations here,

1)      To convert JSON string to corresponding C# objects you can simply visit https://json2csharp.com/ and paste JSON response grabbed from the page and click Generate. This online utility will parse the JSOn and generate POCO classes ready to be replicated in the code.

2)      To fill these objects you’ll have to make use of Newton Soft’s JSON .NET which is an open source utility available at https://json.codeplex.com/

After you have downloaded JSON .NET DLL’s and made the PCOO classes and add a reference to that in your code. Keeping the attributes in consideration for this particular app our implementation carries page looks like so.

 

Given the classes and magic of data binding, we’ll bind class level properties with text blocks on UI,

 

On the button event handler in XAML we’ll download the string from graph API using web client object, and then will deserialize the object using JSON .NET relative classes,

1)      Downloading data using WebClient.

 

 Here you download the data using webclient there is an async method so there must be a completed event for that.

 2)      Deserializing the object.

 

In the completed event we deserialize the object using JsonConvert class available as part of JSON .NET

 

Consider the last chunk of code. That’s used to display cover photo of relative page. How will we display the image from an external Url? Since ImageSource property of ImageBrush allows us to pass an external image Url so we’ll simply instantiate a ImageBrush object and assign that as stack panel’s background. Let's execute the app and call the Graph API end point to retrieve details for Microsoft Pakistan's Facebook,

 

Facebook Feed.zip