A Silverlight Bing API Web Application: Working with JSON (Part 1)
icrosoft.com/en-us/library/dd251056.aspx). To be honest I have never used Silverlight to develop an application before (typically web applications: ASP.net and desktop client applications: Win-Forms). After viewing some of the Silverlight video tutorials I decided to dive straight into development. After viewing some of Microsoft Bing if you haven’t heard of it is Microsoft’s search engine site, in many ways similar to Google.
This is part 1 of a 2 part post about developing a Silverlight application using the Bing API.
User requirements:
- Allow user to search for any given term
- Provide search function for search categories: Images/Videos/Web
- Provide interactive search experience
The Microsoft Bing API
Since REST uses HTTP the Bing API is able to support the following protocols:
-
JavaScript Object Notation (JSON)
-
XML
-
SOAP
JavaScript Object Notation
I decided to use JavaScript Object Notation (JSON) since I had never used it before and tended to always stick with XML or SOAP. My first area of research took me to the official JSON website, here I found a detailed specification about the protocol:
JSON is built on two structures:A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
JSON Object
-
An unordered set of name/value pairs.
-
Begins with { (left brace) and ends with } (right brace)
-
Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
E.g.
{
"widget": {
"debug": "on",
"window": {
"title": "Sample Konfabulator Widget",
"name": "main_window",
"width": 500,
"height": 500
},
"image": {
"src": "Images/Sun.png",
"name": "sun1",
"hOffset": 250,
"vOffset": 250,
"alignment": "center"
},
"text": {
"data": "Click Here",
"size": 36,
"style": "bold",
"name": "text1",
"hOffset": 250,
"vOffset": 100,
"alignment": "center",
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
}
}}
In the above example the Object is called ‘widget’.
Array
-
ordered collection of values
-
begins with [ (left bracket) and ends with ] (right bracket)
-
Values are separated by , (comma)
E.g.
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}
In the above example the array is called ‘menuitem’, as indicated via the square [] brackets, which contains the associated values.
Value
- Primitive types such as string (“the string”) or number (11) or boolean (true) or object or array.
Example of Microsoft Bing API result:
JSON Class
I found out on MSDN that there is a .NET JSON class available, this helped me greatly with parsing the API results in the JSON format.
| JsonArray .gif) | Ordered sequence of zero or more JsonValue objects |
| JsonObject.gif) | Unordered** **collection of zero or more key/value pairs |
| JsonPrimitive.gif) | Represents a JSON primitive type |
| JsonValue.gif) | Abstract base class for JSON |
General Microsoft Bing API usage
Before we are able to interact with the Bing API an application id is needed. This application id is a way in which a user/developer using the API can be uniqually identified and also authenticated. Application id’s are free to obtain but you need a Live/Hotmail account and are available here.
In the next couple of examples I’ll be using a fictional app id.
As mentioned earlier the API uses a REST style architecture, and so to use simply create a HTTP request with the search parameters inside the HTTP request URL.
e.g.
http://api.bing.net/json.aspx?AppId=jfjsk2fjfklfka&Query=apple&
Sources=web&Sources=image&Sources=video&Web.Offset=50&
Image.Offset=50&Video.Offset=50&Image.Count=50&Web.Count=50&Video.Count=50
So lets break down the above HTTP request:
Where the API is found:
http://api.bing.net/
**Which format the results will be in returned in: **
json.aspx
For JSON:
http://api.bing.net/json.aspx
For XML:
http://api.bing.net/xml.aspx
Insert the Application id:
AppId=jfjsk2fjfklfka
So now the HTTP request URL is shaping up:
http://api.bing.net/json.aspx?AppId=jfjsk2fjfklfka
Next insert the query parameters
Query=apple
Here I am using the API to search for the term apple
Next you need to tell the API which sources it needs to search from:
Sources=web&Sources=image&Sources=video
Here I am requesting that the API search for web, images, and video items.
Again the HTTP request URL is shaping up:
http://api.bing.net/json.aspx?AppId=jfjsk2fjfklfka&Query=apple&
Sources=web&Sources=image&Sources=video&
How to restrict the number of results sent back by the API (Opional):
Web.Offset=50&
Image.Offset=50&Video.Offset=50&Image.Count=50&Web.Count=50&Video.Count=50
around 10 items for each category images/web and so on.
So the entire HTTP request URL looks something like this:
http://api.bing.net/json.aspx?AppId=jfjsk2fjfklfka&Query=apple&
Sources=web&Sources=image&Sources=video&Web.Offset=50&
Image.Offset=50&Video.Offset=50&Image.Count=50&Web.Count=50&Video.Count=50
What the web-server returns back
So once the client has sent this HTTP request to the web-server what does the server return.
Well because we requested the results to be in a JSON format earlier we should get back the
results in JSON.
Below is the actual response from the server when I searched for the term ‘apple’ with HTTP request URL in FireFox:
http://api.bing.net/json.aspx?AppId=jfjsk2fjfklfka&Query=apple&Sources=web
using the API:
When I first tried this in Firefox it told me to save the file to my hard-drive and open it from there, inside the saved file this is what was inside:
{"SearchResponse":{"Version":"2.2","Query":
{"SearchTerms":"apple"},"Web":
{"Total":150000000,"Offset":0,"Results":
[{"Title":"Apple (United Kingdom)","Description":"Official site for Macintosh
products in the UK. Products, store, support and dealer list.",
"Url":"http:\/\/www.apple.com\/uk\/",
"CacheUrl":"http:\/\/cc.bingj.com\/cache.aspx?q=apple&d=76651518509612&w=
590d19f6,37350c43",
"DisplayUrl":"www.apple.com\/uk","DateTime":"2009-09-01T13:56:27Z",
"DeepLinks":[{"Title":"iPhone",
"Url":"http:\/\/www.apple.com\/uk\/iphone\/"},
{"Title":"Mac","Url":"http:\/\/www.apple.com\/uk\/mac\/"},
{"Title":"Apple Retail Store","Url":"http:\/\/www.apple.com\/uk\/retail\/"},
{"Title":"iPod iTunes","Url":"http:\/\/www.apple.com\/uk\/itunes\/"},
{"Title":"Store","Url":"http:\/\/store.apple.com\/uk"},
{"Title":"Downloads","Url":"http:\/\/www.apple.com\/uk\/downloads\/"},
{"Title":"Support","Url":"http:\/\/www.apple.com\/uk\/support\/"},
{"Title":"iPod shuffle","Url":"http:\/\/www.apple.com\/uk\/ipodshuffle\/"},
{"Title":"MacBook Pro","Url":"http:\/\/www.apple.com\/uk\/macbookpro\/"},
{"Title":"Contact Us","Url":"http:\/\/www.apple.com\/uk\/contact\/"},
{"Title":"What’s new in iTunes","Url":
"http:\/\/www.apple.com\/uk\/itunes\/whatsnew\/"},
{"Title":"Mac mini","Url":"http:\/\/www.apple.com\/uk\/macmini\/"},
{"Title":"MacBook","Url":"http:\/\/www.apple.com\/uk\/macbook\/"}]}]}}}
As you can see Firefox does not know how to render JSON properly and simply displayed it in plain text, to display the JSON properly I installed a Firefox addon called JSONView.
Install JSONView to view JSON in Firefox
After installing JSONView the following was displayed:
{
*
-
SearchResponse: {
o Version: "2.2"
o
-
Query: {
+ SearchTerms: "apple"
}
o
-
Web: {
+ Total: 150000000
+ Offset: 0
+
-
Results: [
#
-
{
* Title: "Apple (United Kingdom)"
* Description: "Official site for Macintosh products in the UK.
Products, store, support and dealer list."
* Url: http://www.apple.com/uk/
* CacheUrl: http://cc.bingj.com/cache.aspx?
q=apple&d=76651518509612&w=590d19f6,
37350c43
* DisplayUrl: "www.apple.com/uk"
* DateTime: "2009-09-01T13:56:27Z"
*
-
DeepLinks: [
o
-
{
+ Title: "iPhone"
+ Url: http://www.apple.com/uk/iphone/
}
o
-
{
+ Title: "Mac"
+ Url: http://www.apple.com/uk/mac/
}
o
-
{
+ Title: "Apple Retail Store"
+ Url: http://www.apple.com/uk/retail/
}
o
-
{
+ Title: "iPod iTunes"
+ Url: http://www.apple.com/uk/itunes/
}
o
-
{
+ Title: "Store"
+ Url: http://store.apple.com/uk
}
o
-
{
+ Title: "Downloads"
+ Url: http://www.apple.com/uk/downloads/
}
o
-
{
+ Title: "Support"
+ Url: http://www.apple.com/uk/support/
}
o
-
{
+ Title: "iPod shuffle"
+ Url: http://www.apple.com/uk/ipodshuffle/
}
o
-
{
+ Title: "MacBook Pro"
+ Url: http://www.apple.com/uk/macbookpro/
}
o
-
{
+ Title: "Contact Us"
+ Url: http://www.apple.com/uk/contact/
}
o
-
{
+ Title: "What’s new in iTunes"
+ Url: http://www.apple.com/uk/itunes/whatsnew/
}
o
-
{
+ Title: "Mac mini"
+ Url: http://www.apple.com/uk/macmini/
}
o
-
{
+ Title: "MacBook"
+ Url: http://www.apple.com/uk/macbook/
}
]
}
]
}
}
}