Cognitive Service Bing News Search API Using UWP With Azure, XAML And C#

Before reading this article, please go through the following article.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. How To Create Microsoft Cognitive Service Bing Search APIs On Azure Portal

Microsoft Cognitive Services (formerly Project Oxford) are a set of APIs, SDKs, and services available to developers to make their applications more intelligent, engaging, and discoverable. Microsoft Cognitive Services expands on Microsoft’s evolving portfolio of machine learning APIs and enables developers to easily add intelligent features. These services let you build apps with powerful algorithms using just a few lines of code. They work across devices and platforms, such as iOS, Android, and Windows, keep improving, and are easy to set up.

Bing Search APIs make our apps, webpages and other experiences smarter and more engaging with the Bing Search APIs. Harness the same knowledge used by hundreds of millions of people, as well as the industry’s technology leaders, today.

Bing News Search API searches the web for news articles. Results include details like authoritative images of the news article, related news and categories, provider info, article URL, and date added.

Reading this article, you can learn how to use Cognitive Service Bing News Search API in Universal Windows Apps development with Azure, XAML and Visual C#.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)
3. Cognitive Service Bing Search APIs Key (using azure How To Create Microsoft Cognitive Service Bing Search APIs On Azure Portal)

Now, we can discuss step by step app development.

Step 1

Open Visual studio 2015 -> Start -> New Project -> Select Universal (under Visual C# ->Windows)-> Blank App -> Give a suitable name for your app (UWPCogBingSearch) -> OK.



After choosing the target and minimum platform version that your app will support and the Project creates App.xaml and MainPage.xaml.



Add TextBlock control and change the name and text property for title.



Step 2

Open (double click) the file MainPage.xaml in the Solution Explorer and add the Newtonsoft.Json reference in the project. Right click your project (UWPCogBingSearch) and select "Manage NuGet Packages".



For adding Newtonsoft.Json Reference, choose Browse and search Newtonsoft.Json. Select the package and install it.



Reference is added to your project.



Step 3

Add AutoSuggestBox control and set the Name, PlaceholderText, and Text Properties.



Add a Button control,set the name, and add the search icon for Find operation.



Step 4

Add Grid Resources using the following code for GridView.

<Grid.Resources>
   <CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />
</Grid.Resources>

Add a GridView Control and set the ItemSource properties for displaying News Result,

<GridView x:Name="gridView" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="228" Margin="10,122,0,0" VerticalAlignment="Top" Width="620">

Add the following code for Grid View Data Template for News details.

<GridView.ItemTemplate>
    <DataTemplate>
        <Border Background="Green" Width="300" Height="105" Margin="8">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition/> </Grid.ColumnDefinitions>
                <Image Source="{Binding Article.ThumbnailUrl}" VerticalAlignment="Center" Margin="6" />
                <Grid Grid.Column="1" Margin="4">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition/>
                        <RowDefinition Height="auto" /> </Grid.RowDefinitions>
                    <HyperlinkButton NavigateUri="{Binding Article.Url}" Foreground="White">
                        <TextBlock TextWrapping="Wrap" Text="{Binding Article.Title}" Style="{StaticResource CaptionTextBlockStyle}" />
                    </HyperlinkButton>
                </Grid>
            </Grid>
        </Border>
    </DataTemplate>
</GridView.ItemTemplate>

Step 5

Add the Textchanged event method in Auto Suggest Box for getting suggestions for  the text from Bing



Add the Click event method for Search button



Note

Automatically the following code will be generated in XAML code view, when we are done in the design view.

<Page x:Class="UWPCogBingSearch.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCogBingSearch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />
        </Grid.Resources>
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="163,43,0,0" TextWrapping="Wrap" Text="UWP Cognitive Service Bing News Search API Demo" VerticalAlignment="Top" Foreground="#FF2B2A2A" FontWeight="Bold" />
        <AutoSuggestBox x:Name="asbBingsearch" HorizontalAlignment="Left" Margin="64,88,0,0" VerticalAlignment="Top" Height="29" Width="409" PlaceholderText="Enter search term............." TextChanged="asbBingsearch_TextChanged" />
        <Button x:Name="btnSearch" HorizontalAlignment="Left" Margin="478,88,0,0" VerticalAlignment="Top" Height="29" Width="41" FontSize="14" Click="btnSearch_Click">
<SymbolIcon Symbol="Find"/>
</Button>
        <GridView x:Name="gridView" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="228" Margin="10,122,0,0" VerticalAlignment="Top" Width="620">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border Background="Green" Width="300" Height="105" Margin="8">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition/> </Grid.ColumnDefinitions>
                            <Image Source="{Binding Article.ThumbnailUrl}" VerticalAlignment="Center" Margin="6" />
                            <Grid Grid.Column="1" Margin="4">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition/>
                                    <RowDefinition Height="auto" /> </Grid.RowDefinitions>
                                <HyperlinkButton NavigateUri="{Binding Article.Url}" Foreground="White">
                                    <TextBlock TextWrapping="Wrap" Text="{Binding Article.Title}" Style="{StaticResource CaptionTextBlockStyle}" />
                                </HyperlinkButton>
                            </Grid>
                        </Grid>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>
</Page>

Step 6

Add the following namespaces in Mainpage.xaml.cs for Bing Autosuggest,

using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json.Linq;
using System.Net;
using System.Collections.ObjectModel;

Step 7

Add the autoSuggestionClient and autoSearchclient keys, use Azure service and Generate it (For more information, please refer the article Getting Started With Microsoft Azure Cognitive Services - Bing Autosuggest API to learn how To create Microsoft Cognitive Service Bing Search APIs on Azure Portal ).

Add the following code with Azure generated key,

private static string AutoSuggestionEndPoint = "https://api.cognitive.microsoft.com/bing/v5.0/suggestions";
private static string NewsSearchEndPoint = "https://api.cognitive.microsoft.com/bing/v5.0/news/search";
private static HttpClient autoSuggestionClient {
    get;
    set;
}
private static HttpClient searchClient {
    get;
    set;
}
private List < News > latestSearchResult = new List < News > ();
public ObservableCollection < News > SearchResults {
    get;
    set;
} = new ObservableCollection < News > ();
private static void InitializeBingClients() {
        autoSuggestionClient = new HttpClient();
        autoSuggestionClient.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<Your Key>");
        searchClient = new HttpClient();
        searchClient.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<Your Key>");
    }
    //Auto Suggest
private async void asbBingsearch_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args) {
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput) {
        try {
            asbBingsearch.ItemsSource = await GetAutoSuggestResults(asbBingsearch.Text);
        } catch (HttpRequestException) {
            // default to no suggestions
            asbBingsearch.ItemsSource = null;
        }
    }
}
public static async Task < IEnumerable < string >> GetAutoSuggestResults(string query) {
        List < string > suggestions = new List < string > ();
        string market = "en-US";
        var result = await autoSuggestionClient.GetAsync(string.Format("{0}/?q={1}&mkt={2}", AutoSuggestionEndPoint, WebUtility.UrlEncode(query), market));
        result.EnsureSuccessStatusCode();
        var json = await result.Content.ReadAsStringAsync();
        dynamic data = JObject.Parse(json);
        if (data.suggestionGroups != null && data.suggestionGroups.Count > 0 &&
            data.suggestionGroups[0].searchSuggestions != null) {
            for (int i = 0; i < data.suggestionGroups[0].searchSuggestions.Count; i++) {
                suggestions.Add(data.suggestionGroups[0].searchSuggestions[i].displayText.Value);
            }
        }
        return suggestions;
    }
    //News Search
private async void btnSearch_Click(object sender, RoutedEventArgs e) {
    var news = await GetNewsSearchResults(this.asbBingsearch.Text, count: 50, offset: 0, market: "en-US");
    for (int i = 0; i < news.Count(); i++) {
        NewsArticle article = news.ElementAt(i);
        SearchResults.Add(new News {
            Article = article
        });
    }
}
public static async Task < IEnumerable < NewsArticle >> GetNewsSearchResults(string query, int count = 20, int offset = 0, string market = "en-US") {
    List < NewsArticle > articles = new List < NewsArticle > ();
    var result = await searchClient.GetAsync(string.Format("{0}/?q={1}&count={2}&offset={3}&mkt={4}", NewsSearchEndPoint, WebUtility.UrlEncode(query), count, offset, market));
    result.EnsureSuccessStatusCode();
    var json = await result.Content.ReadAsStringAsync();
    dynamic data = JObject.Parse(json);
    if (data.value != null && data.value.Count > 0) {
        for (int i = 0; i < data.value.Count; i++) {
            articles.Add(new NewsArticle {
                Title = data.value[i].name,
                    Url = data.value[i].url,
                    Description = data.value[i].description,
                    ThumbnailUrl = data.value[i].image ? .thumbnail ? .contentUrl,
                    Provider = data.value[i].provider ? [0].name
            });
        }
    }
    return articles;
}

Step 8

Deploy your app in Local Machine. The output of the UWPCogBingSearch app is given below.



After clicking the Search Button.



Summary

Now, you have successfully tested Cognitive Service Bing News Search API using Azure, XAML AND C# with UWP environment.