Partage de code entre WP8 et Windows 8 – Accès API Xbox Music

Xbox-Music-LogoUne question qui revient très souvent lors du développement d’applications Windows Phone 8 et Windows 8 est la question du partage de code.  Tout développeur souhaite se simplifier la vie notamment quand on effectue les mêmes actions à différents endroits. Beaucoup d’applications Windows Phone 8 et Windows 8 sont basées sur un même Web Service et bénéficient des mêmes fonctionnalités à part quelques particularités de l’OS. Dans cet article, nous allons voir comment mutualiser tout cela dans un élément Portable Class Library et l’utiliser au sein de nos applications avec comme exemple l’API Xbox Music.

Introduction

L’API Xbox Music  vient d’être dévoilée récemment par Microsoft et nous permet d’interagir en REST avec une base de données complète dédiée à la musique. On retrouve en matière de fonctionnalités :

  • Recherche d’artistes, d’albums et de singles via mots clés
  • Détails des artistes, albums et singles
  • Couvertures des albums
  • Images des artistes
  • Deep Link pour rediriger vers les applications officielles Xbox Music
  • Affiliation : générer des revenus via Xbox Music (Pour chaque utilisateur de votre application qui achètera de la musique vous toucherez un pourcentage.)

Comme toute bonne API, afin d’y accéder vous devez vous inscrire ici , souscrire à l’abonnement (gratuit) Xbox Music Platform API et créer une application afin d’obtenir un client secret.

WAM-CréationAppli

Attention, cette application doit être créée dans “Mon Compte” > “Développeurs” > “Enregistrer”; et non dans “Applications” qui regroupe les applications utilisables de Windows Azure Marketplace. Vous allez ainsi obtenir un client ID et un client Secret a utilisé plus tard au sein de notre projet.

Maintenant que nous avons souscris à l’abonnement Xbox Music API et que nous avons créé une application pour y accéder, nous allons passer au code et proposer la recherche via mots-clés des albums, artistes et des singles.

Le code-source du projet est disponible en bas de page.

Création du projet

Organisation

pclLa première étape de notre projet sera la création d’une Portable Class Library qui nous permettra de générer une assembly portable fonctionnant sur plusieurs plateformes .Net. Il faut garder en tête que la PCL étant le socle commun entre toutes les plateformes, toutes les fonctionnalités de chaque plateforme ne peuvent être utilisées. Si vous souhaitez plus d’informations sur la Portable Class Library, voici le bon lien MSDN.

PCL-Platforms

Après avoir sélectionné le type de projet “Portable Class Library”, nous pouvons choisir les plateformes que cibleront notre projet. Vous pouvez remarquer que l’assistant nous prévient que même en n’ayant sélectionné que WP8 et Windows 8.1, l’assembly sera aussi compatible .Net Framework 4.5 et Windows 8.0. La seconde étape est de créer un nouveau projet pour chaque plateforme que l’on souhaite cibler et de référencer notre PCL au sein de ces projets. Troisième étape, ajouter les paquets NuGet (détails sur NuGet ici par Didier Menut) HttpClient et Json Newtonsoft à la PCL ce qui nous permettra d’effectuer des appels Http vers l’API et de désérialiser les résultats.

Modèles de classe

Pour la génération des classes, j’utilise un outil très pratique : json2csharp. C’est un outil web qui nous permet de copier/coller du JSON et lui s’occupera de générer les classes et modèles associés. A noter que Visual Studio 2012 intègre maintenant cette fonctionnalité en natif via le menu Edit > Past Special > Past JSON As Classes. Ces classes seront les objets que nous partagerons entre nos deux applications et notre PCL, elles doivent donc être rajoutées dans notre projet PCL. Au sein de l’API Xbox Music, la documentation MSDN propose un retour JSON type et il nous reste plus qu’à le copier et le coller dans json2csharp ou directement dans Visual Studio afin de générer nos classes.

Pour rappel, l’ensemble des sources est disponible en bas d’article.

Maintenant que nous avons nos classes, passons au service.

Création du service

Authentification

L’API Xbox Music étant un produit du Windows Azure Marketplace, son utilisation nécessite d’être authentifié et d’obtenir les droits pour l’utiliser, pour cela vous avez dû créer précédemment une application au sein du Windows Azure Marketplace et obtenir un client ID et un client Secret.

Fichier de configuration au sein de la PCL :


    public static class Configuration
    {
    public const string service = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
    public const string clientId = "ClientIDDeVotreApplicationAuSeinDeWAM";
    public const string clientSecret = "leClientSecretDel'Application";
    public const string grantType = "client_credentials";
    public const string scope = "http://music.xboxlive.com";
    }

    

Ensuite j’ai écrit un service dédié aux appels vers l’API Xbox Music qui regroupera toutes les méthodes associées à cette API, XboxMusicService.cs.


    public static string token;
    public async static Task<bool> Auth()
    {
    var requestData = new Dictionary<string, string>();
    requestData["client_id"] = Configuration.clientId;
    requestData["client_secret"] = Configuration.clientSecret;
    requestData["scope"] = Configuration.scope;
    requestData["grant_type"] = Configuration.grantType;
    HttpClient _myClient = new HttpClient();
    HttpContent content = new FormUrlEncodedContent(requestData);
    var response = await _myClient.PostAsync(Configuration.service, content);
    if(response != null && response.StatusCode == System.Net.HttpStatusCode.OK)
    {
    var responseString = await response.Content.ReadAsStringAsync();
    token = Regex.Match(responseString, ".*\"access_token\":\"(.*?)\".*", RegexOptions.IgnoreCase).Groups[1].Value;
    return true;
    }
    else
    return false;
    }

    

Nous construisons une requête POST qui pointe sur l’authentification Windows Azure Marketplace en fournissant les informations nécessaires sur ce que l’on souhaite exploiter (music.xboxlive.com). Dans une string “token” est stocké le token retourné par l’authentification et qui sera ajouté à chaque requête vers l’API Xbox Music. Vous êtes maintenant correctement connecté, voyons comment exploiter la recherche.

Effectuer une recherche

Toujours dans notre classe XboxMusicService, nous allons rajouter la méthode de recherche par mots clés :


    public async static Task<RootObject> Search(string query)
    {
    if(token == null)
    {
    await Auth();
    }

    HttpClient _myClient = new HttpClient();
    string service = "https://music.xboxlive.com/1/content/music/search?q=" + query + "&accessToken=Bearer+";
    var response = await _myClient.GetAsync(new Uri(service + Uri.EscapeDataString(token)));
    RootObject myobj = null;
    if(response != null && response.StatusCode == System.Net.HttpStatusCode.OK)
    {
    myobj = JsonConvert.DeserializeObject<RootObject>(await response.Content.ReadAsStringAsync());
    }
    return myobj;
    }

    

A noter, l’importance de “Uri.EscapeDataString(token))” qui permet d’échapper tout caractères; l’API vous retournera une erreur si le token n’a pas été correctement formaté.

Le contenu obtenu est lit sous forme de string JSON puis désérialiser en type d’objet RootObject qui correspond à une collection d’artistes, d’albums et de singles.

Détails d’une ressource particulière


    public async static Task<RootObject> GetResourceById(string IdQuery)
    {
    if (token == null)
    {
    await Auth();
    }

    HttpClient _myClient = new HttpClient();
    string service = String.Format("https://music.xboxlive.com/1/content/{0}/lookup?accessToken=Bearer+",IdQuery) ;
    var response = await _myClient.GetAsync(new Uri(service + Uri.EscapeDataString(token)));
    RootObject myobj = null;
    if (response != null && response.StatusCode == System.Net.HttpStatusCode.OK)
    {
    myobj = JsonConvert.DeserializeObject<RootObject>(await response.Content.ReadAsStringAsync());
    }
    return myobj;
    }

    

Cette méthode permet de récupérer en détail des informations sur une ressource grâce à son ID (obtenu par exemple par la recherche).

Maintenant que nous avons créé nos méthodes d’appels à l’API voyons l’utilisation de ce service au sein de nos applications clientes.

Coté applications

Je ne reviendrais pas sur le pattern MVVM qui n’est pas le sujet de cet article, mais si vous souhaitez  découvrir ou en apprendre plus, vous pouvez lire l’article de Sébastien Ferrand sur MVVM et Windows Forms  qui permet d’appréhender MVVM pour Windows Forms mais son application sur Windows Phone ou Windows 8 est identique.

Le partage ou non des ViewModels entre Windows Phone 8 et Windows 8 est souvent sujet à débat, pour ma part je préfère les séparer afin de pouvoir gérer tout cas particulier dépendant de la plateforme.


    public class MainPageViewModel : BindableBase
    {
    private RelayCommand _searchCommand;
    public ICommand SearchCommand { get { return _searchCommand; } }

    private string _query;

    public string Query
    {
    get { return _query; }
    set { _query = value; OnPropertyChanged("Query"); }
    }

    private bool _isBusy;

    public bool IsBusy
    {
    get { return _isBusy; }
    set { _isBusy = value; OnPropertyChanged("IsBusy"); }
    }
    private ObservableCollection<Item2> _albums;

    public ObservableCollection<Item2> Albums
    {
    get { return _albums; }
    set { _albums = value; OnPropertyChanged("Albums"); }
    }

    private ObservableCollection<Item> _artist;

    public ObservableCollection<Item> Artists
    {
    get { return _artist; }
    set { _artist = value; OnPropertyChanged("Artists"); }
    }

    private ObservableCollection<Item3> _tracks;

    public ObservableCollection<Item3> Tracks
    {
    get { return _tracks; }
    set { _tracks = value; OnPropertyChanged("Tracks"); }
    }

    public MainPageViewModel()
    {
    _searchCommand = new RelayCommand(Search);
    }

    private async void Search()
    {
    IsBusy = true;
    int nbItems = 5;
    RootObject data = await XboxMusicService.Search(Query);
    Albums = new ObservableCollection<Item2>(data.Albums.Items.Take(nbItems));
    Artists = new ObservableCollection<Item>(data.Artists.Items.Take(nbItems));
    Tracks = new ObservableCollection<Item3>(data.Tracks.Items.Take(nbItems));
    IsBusy = false;
    }

    }

    

Voici donc le ViewModel de ma page principale Windows Phone sur laquelle un bouton est relié via une commande à la méthode Search. Cette méthode appelle le service XboxMusicService qui renverra une liste de nos Albums, Artists et Tracks.

XboxMusicAPIWindows8

Et voici des screenshots pour chaque plateforme (Windows 8.1 / Windows Phone 8). Je ne reviendrais pas sur l’intégration et le design des applis dans cet article, le but premier étant de montrer la création d’une couche d’accès à l’API et sa redistribution aux différents clients.

Conclusion

Avec ces différentes méthodes, vous pouvez maintenant vous connectez à l’API Xbox Music et récupérer des informations des musiques et ce sur les deux plateformes Windows Phone 8 et Windows 8. Le code source de ce projet est disponible sur mon Skydrive, il reprend l’authentification et la recherche par mots clés, et l’intégration des résultats au sein d’une application Windows Phone 8 et d’une application Windows 8.1.

filedownload

Sources du projet

Nombre de vue : 79

COMMENTAIRES 1 commentaire

  1. […] Pour lire l’intégralité de l’article : un clic ici […]

AJOUTER UN COMMENTAIRE