Windows 10 – Universal Windows Platform – Groove

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once done start your favourite Web Browser such as Microsoft Edge and navigate to azure.microsoft.com/marketplace and search for Microsoft Groove API

2015-groove-web-marketplace

Step 3

Select Microsoft Groove API Data Service, then tap on Sign Up, then on Microsoft Groove API data details page tap the Sign up button on that page

2015-groove-web-signup

Step 4

You will be prompted to Sign in with your Microsoft Account details, if you don’t have one can sign up for one during this process, once done View Publisher Offer Terms and View Publisher Privacy Policy then if Agree to the Terms and Privacy Policy then confirm by selecting Sign Up

2015-groove-web-confirm

Step 5

Once done select My Account then Developers then Register. Then on the Register your application page enter a unique Client ID you will need this later, also enter a Name, then select and copy the Client secret as you will also need this later, then enter the Redirect URI as http://www.example.org and then enter a Description and then select Create

2015-groove-web-application

Step 6

This will add that to the Registered Applications which completes the process for signing up for Microsoft Groove API, so return to Visual Studio Community 2015

2015-visual-studio

Step 7

Return to or start Visual Studio Community 2015 then select File, then New, then Project… from the Menu.

2015-file-new-project

Step 8

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 9

Once done select from the Menu, Project, then Add New Item…

2015-project-add-new-item

Step 10

From the Add New Item window select Visual C# from Installed and select Code then select Code File from the list, then type in the Name as Library.cs before selecting Add to add the file to the Project

2015-add-new-item-library

Step 11

Once in the Code View for Library.cs the following should be entered:

using System;
using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using Windows.UI.Xaml.Controls;
using Windows.Web.Http;

public class Item
{
    public string Link { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public string SmallImageUrl { get { return ImageUrl != null ? ImageUrl + "&w=64&h=64" : ImageUrl; } }
}

public class Tracks
{
    public List<Item> Items { get; set; }
}

public class Browse
{
    public Tracks Tracks { get; set; }
}

public class Library
{
    private const string clientId = "ClientID";
    private const string clientSecret = "ClientSecret";

    private const string service = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
    private const string uri = "https://music.xboxlive.com//1/content/music/catalog/tracks/browse";
    private const string param = "?orderBy=MostPopular&maxitems=10&accessToken=Bearer+";
    private const string scope = "http://music.xboxlive.com";
    private const string grant = "client_credentials";
    private const string regex = ".*\"access_token\":\"(.*?)\".*";

    private HttpClient client = new HttpClient();
    private HttpResponseMessage response = new HttpResponseMessage();
    private Browse browse = new Browse();

    private async Task<string> token()
    {
        Dictionary<string, string> request = new Dictionary<string, string>()
        {
            {"client_id", clientId }, {"client_secret", clientSecret },
            { "scope", scope }, { "grant_type", grant }
        };
        response = await client.PostAsync(new Uri(service),
            new HttpFormUrlEncodedContent(request));
        return System.Net.WebUtility.UrlEncode(
            Regex.Match(await response.Content.ReadAsStringAsync(),
            regex, RegexOptions.IgnoreCase).Groups[1].Value);
    }

    public async void Init(ListView display)
    {
        response = await client.GetAsync(new Uri(uri + param + await token()));
        byte[] json = Encoding.Unicode.GetBytes(await response.Content.ReadAsStringAsync());
        using (MemoryStream stream = new MemoryStream(json))
        {
            browse = (Browse)new DataContractJsonSerializer(typeof(Browse)).ReadObject(stream);
        }
        display.ItemsSource = browse?.Tracks?.Items;
    }
}

While still in the Code View for Library.cs change “ClientID” to be the ClientId from the Azure Marketplace e.g. “GrooveTutorial” and change “ClientSecret” to be the Client Secret that was generated, similar to e.g. R3Jvb3ZlVHV0b3JpYWxDbGllbnRTZWNyZXQ=, it should then appear as such:

2015-groove-library

Step 12

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 13

Select from the Menu, View then Designer

2015-view-designer

Step 14

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<ListView Name="Display">
	<ListView.ItemTemplate>
		<DataTemplate>
			<StackPanel Orientation="Horizontal">
				<Image Margin="10" Height="64" Width="64" Source="{Binding SmallImageUrl}"/>
				<HyperlinkButton Content="{Binding Name}" NavigateUri="{Binding Link}" 
					VerticalAlignment="Center"/>
			</StackPanel>
		</DataTemplate>
	</ListView.ItemTemplate>
	<ListView.ItemContainerStyle>
		<Style TargetType="ListViewItem">
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
		</Style>
	</ListView.ItemContainerStyle>
</ListView>

It should appear as such:

2015-groove-mainpage-xaml

Step 15

Select from the Menu, View then Code

2015-view-code

Step 16

Once in the Code View below the public MainPage() { … } the following should be entered:

public Library Library = new Library();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	Library.Init(Display);
}

It should then appear as such:

2015-groove-mainpage-code

Step 17

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 18

Once the Simulator has started the Application should then appear showing the Top 10 most played tracks on Groove Music in the Application

2015-groove-simulator-run

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 20

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 21

Once the Emulator has started the Application should then appear showing the Top 10 most played tracks on Groove Music in the Application

2015-groove-emulator-ran

Step 22

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Advertisements

One thought on “Windows 10 – Universal Windows Platform – Groove

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s