Dans le première partie de ce fil rouge Windows 8 Metro, vous avez installé les outils et créé votre premier projet à partir du template « Navigation App »:

Windows Metro – Clouder! (1) – Préparation de l’espace de travail et création du projet

Dans cette seconde partie, on va commencer directement à travailler avec l’API SoundCloud pour afficher une première liste de titres.

Inscription à l’API SoundCloud

Pour pouvoir faire des demandes à l’API SoundCloud, vous devrez avoir un compte développeur ainsi qu’une clé de développement par application. Cette clé peut être obtenue gratuitement sur leur site (sans quota):

https://soundcloud.com/login?return_to=%2Fyou%2Fapps

Pour ces tutoriaux, je vais utiliser un ID développeur que j’ai créé pour l’occasion mais pensez bien à utiliser le votre car mon compte temporaire sera supprimé tôt ou tard :).

Une fois inscrit, rendez-vous dans « Register a new application », donnez-lui un nom puis sur la page « OAuth2 », notez votre « Client ID »:

On va commencer par faire un petit test avec l’application de test nommée « API Console »:

http://dev.soundcloud.com/console

Rendez-vous dans « Tracks » puis « tracks (GET) » et vous verrez que l’URL qui s’affiche est:

https://api.soundcloud.com/tracks.json

Si vous cliquez « GET », vous allez bien obtenir la réponse JSON car l’API Console ajoute votre identifiant développeur automatiquement. Ouvrez plutôt cette URL dans un nouvel onglet et vous allez obtenir:

{"errors":[{"error_message":"401 - Unauthorized"}]}

A toutes les requêtes, vous devrez passer un paramètre en GET : « client_id »:

https://api.soundcloud.com/tracks.json?client_id=2e601fddcc4a07954c3da7077f81a1e1

Vous avez à nouveau votre liste de tracks au format JSON. Si vous le voulez, vous pouvez vous essayer à l’API Console pour découvrir les différentes ressources à votre disposition.

Maintenant que vous sachez faire des requêtes à l’API SoundCloud, on va faire les mêmes en XHR dans notre application Windows 8

Réaliser un appel XHR avec WinJS sous Windows 8 Metro

Une application W8 Metro tourne dans un Internet Explorer 10 un peu modifié mais qui garde la majeure partie de ses fonctionnalités. Vous pourriez donc faire des appels XHR avec jQuery comme vous en avez l’habitude si vous faites des applications web.

Dans le cadre de ce tutorial, on va utiliser les APIs fournies par Microsoft par l’intermédiaire du framework WinJS, cela permettra de se faire la main.

Si vous regardez ce qui a été créé par Visual Studio avec le template « Navigation », vous avez un fichier default.html qui contient un composant « PageControlNavigator » dont la page de démarrage est /pages/home/home.html. Cette page « home » est constituée de 3 fichiers (HTML / JS / CSS).

Allons donc dans /pages/home/home.js qui contient un code minimaliste pour définir une « page » dans Windows 8:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        }
    });
})();

Pour l’instant, on va se servir de la fonction « ready » pour faire nos tests. Voici la documentation de WinJS.xhr:

WinJS.xhr function

Si vous avez l’habitude de $.ajax, vous ne serez pas trop perdu. On va faire simple et faire un appel à notre URL puis afficher le résultat dans la console:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            WinJS.xhr({ url: "https://api.soundcloud.com/tracks.json?client_id=2e601fddcc4a07954c3da7077f81a1e1" }).done(
            function fulfilled(result) {
                if (result.status === 200) {
                    console.log(result.responseText);
                }
            });
        }
    });

Lancez votre application (« > Debug » dans la barre d’outils) puis revenez sur Visual Studio et vous aurez un message dans la console:

Un bon début, cela fonctionne. A noter qu’il y a plusieurs manières de gérer les OK / erreurs sur les Xhr, là on fait au plus simple.

Conclusion

Encore un « petit » tutorial pour se mettre en jambe et se familiariser avec l’API SoundCloud. Maintenant que l’on a vu comment interroger l’API SoundCloud depuis notre application Windows 8, on va afficher les résultats dans une liste avec le composant ListView.