API Mashup Series: Part II

In the previous post we already explored the basics behind the API MASH .

In the second post of the series we will study more details of the Univision Starter Kit, and we will check its technical details to help you develop similar apps.

This app was developed with C# and XAML. Unlike some of the other API MASH kits, it is not waiting for a JSON package from the API. The expected response is a XML package that, as we will see below, eases the parsing and binding of the data.

               For an overview of the APIMASH Starter Kits and their architecture see this article .

Web Cast series

If you want more details about different starter kits check the following webcasts that will dig deeper in the structure of the APIs and the apps we created around them. We will be answering questions live and will try to give you a solid start for your next app: 

You can download all the
starter kits following this link: https://github.com/apimash/StarterKits.

Check and study the starter kits and let us know if you are interested in other public APIs, or let us know about the ideas you have around our current examples.

Features

• Invokes the Univision API, which gives you access to a big repository of news and article in Spanish.
• Demonstrates how to display with XAML the results of multiple API queries.
• Provides a baseline for a Windows 8 Phone Store App.

Requirements

In the first article of this series, API Mashup Series: Part I , we offered a detailed guide on how to execute this starter kit, but here is a reminder of basic requirements:

• Windows 8
• Visual Studio 2012 Express for Windows 8 or higher.
• WintRT XAML Toolkit ( https://winrtxamltoolkit.codeplex.com/ )
• Mashery.com developer account ( https://developer.mashery.com/ )
• Univision API developer key ( https://developer.univision.com/r/go/home )

Setup

You can find a more detailed guide in the first article, API Mashup Series: Part I , but these are the general steps:

• Register at Mashery.com ( https://developer.mashery.com/ )
• Request a developer key for the Univision API ( https://developer.rottentomatoes.com/ )
• Download the .zip file with all the API MASH starter kits ( https://apimash.github.io/StarterKits/ )
• Open your favored kit in Visual Studio
• Add your developer key in the file Globals.cs (each example may have additional steps like installing Newtonsoft JSON.NET)
• Compile and Run

At this point you may have seen that the app allows you to perform searches in its main page and the results will be displayed this way:

When you select any results tile the app will display the entire list of articles related with the term you searched, and selecting one article will display its detailed information. 

Main Files

The best way to understand this starter kit is getting your hands dirty and customizing it. But to ease the entire process we will give you more information about some important classes in the Project.

ItemsPage

The files ItemsPage.xaml and ItemsPage.xaml.cs take care of displaying the results of the user searches in the first page:

You may see that every time you perform a new search more tiles are added to the list, and this is a result of using the Grid Template, that is explained in more detail in this article.

To perform the search we added the method Button_Click that is called when the user fills the test box and clicks the search button. This method starts the calls to 2 different Univision API channels: entertainment and news.

If you explore the API documentation or use Mashery to experiment with the API, you may see that Univision offers access to a wide variety of information channels. Modifying the values found in the file Globals.cs and the queries started in this Button_click method you can tune how many and which channels you can see with the. A good idea woud be to check the information returned by the different radio stations that belong to Univision.

The method Button_Click calls the method Add_Feed, also found in the file ItemsPage.xaml.cs:

This method takes the search term entered by the user and creates the necessary URL to contact the API. The developer key and the queried cannel are included in the URL and are needed to get a valid response from Univision.

FeedData

In the file FeedData.cs you will find the needed code to connect with the Univision API and to process the response of each search.

The most important method in this file is GetFeedAsync that takes care of querying the API and then parsing the XML response filling the variable FeedData. Part of the information received should include the search title, the sub title, and the number of articles found, the publication date and the raw information of each article.

It is possible that the search returns zero articles, in this case the variable FeedData will only include the search title.

Customization

If you want to modify this starter kit, the best way is to start with the two files mentioned above: ItemsPage.xaml.cs and FeedData.cs. These files allow you to consult different channels in Univision or easily change the consulted API, giving you access to different data.

You can take a look to the .xaml files to modify and tweak the user interface and make a more impressive display of the obtained data.

Finally we recommend to check the other starter kits found in the API MASH  to fin done that suits your needs and to learn how to mash information obtained in two or more APIs.