[Windows Phone] Integrando los servicios de Xbox Music

XboxMusicLogoXbox Music

Xbox Music es un servicio digital que cuenta con más de 30 millones de canciones disponibles con aplicaciones disponibles para Xbox 360, Windows Store, Windows Phone, IOS y Android. Recientemente también tenemos disponible el servicio vía web desde la siguiente URL: music.xbox.com

Cuenta con las capacidades necesarias para realizar búsquedas por artista, canción o álbum ademas de poder crear y guardar listas de reproducción o escuchar música sin conexión a internet entre otras funcionalidades.

Los servicios de Xbox Music

Recientemente Microsoft ha dejado disponible una API de Xbox Music basada en servicios web RESTful que permite de una manera muy sencilla conectar desde una página web o una aplicación con los servicios de música de Xbox.

Mediante el uso de la API de Xbox Music podemos:

  • Obtener los detalles de un álbum, artista o canción.
  • Buscar cualquier álbum, artista o canción.
  • Obtener las canciones top.
  • Obtener la información relacionada con nuevos álbums.
  • Obtener imágenes de un artista.
  • Obtener la carátula de un álbum.
  • Etc.

Xbox Music

Integrándo los servicios en nuestra App

Sin duda pinta bien y nos abre un mundo de posibilidades en nuestras aplicaciones. Vamos a integrar en nuestra aplicación los servicios de Xbox Music.

Para ello, lo primero que debemos hacer es obtener un API Key para poder tener acceso en la API. Accedemos a la siguiente URL: music.xbox.com/developer

Obtener un API Key de Xbox Music

Obtener un API Key de Xbox Music

Pulsamos el botón “Get Started” y realizamos la petición del API Key.

Tras obtener el API Key tendremos una suscripción activa al servicio Xbox Music:

Suscripción a Xbox Music

Suscripción a Xbox Music

Para poder desarrollar aplicaciones que utilicen los servicios de Xbox Music debemos crear una aplicación. Nos dirigimos al apartado desarrolladores y creamos una aplicación:

Nueva aplicación

Nueva aplicación

Lo único que necesitamos es indicar nuestro clientId. Tanto el clientId como el clientSecret generado seran necesarios en nuestro código para pdoer acceder al servicio.

Como solemos hacer, vamos a crear una Aplicación de ejemplo para utilizar y ver las posibilidades de Xbox Music:

Creamos un proyecto desde la plantilla más básica para concentrar nuestra atención en Xbox Music. La API se basa en servicios Restful, podríamos hacer peticiones web con las credenciales para realizar las búsquedas que necesitemos con facilidad. Sin embargo, podemos trabajar con los servicios de Xbox Music de una manera aun más fácil si cabe gracias a un Wrapper disponible en NuGet creado por Robert McLaws.

El Wrapper lo tenemos disponible en NuGet por lo que podemos instalarlo usando Nuget Package Manager. Podemos instalarlo ejecutando la siguiente línea de comandos: Install-Package Xbox.Music -Pre

Tras instalar la librería portable podemos comenzar a trabajar con ella. Comenzamos por la interfaz. Vamos a realizar una búsqueda genérica en Xbox Music obtiene los resultados posibles:

  • Artistas
  • Discos
  • Canciones

NOTA: Al escribir este artículo la librería alcanza la definición RC.

Vamos a añadir una simple caja de texto con un botón para permitir obtener todos los resultados posibles segun la búsqueda:

<Grid>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <TextBox Text="{Binding SearchParam, Mode=TwoWay}"/>
     <Button Grid.Column="1" Content="Buscar" Command="{Binding SearchCommand}"/>
</Grid>

Al buscar los resultados los mostraremos en un LongListSelector.

RECUERDA: El control LongListSelector es como un control ListBox avanzado que puede mostrar dos listas, una  plana y otra agrupada. Ayuda a los usuarios a navegar a través de largas listas, le permite saltar entre las diferentes secciones de la lista mediante una rejilla que se superpone a la lista cuando el usuario selecciona uno de los encabezados.

Nuestro objetivo es mostrar la información agrupada por sistema operativo. De esta forma el usuario podrá pulsar sobre las cabeceras del LongListSelector (los distintos tipos que obtenemos, si es un album, un artista o una canción) y así poder acceder al conjunto de elementos pertenecientes a un grupo de manera rápida y efectiva.

<phone:LongListSelector />

Con la interfaz definida, pasamos a la lógica de la aplicación. Organizamos nuestra aplicación bajo el patrón MVVM. Comenzamos definiendo el modelo de nuestra aplicación, lo que se mostrará en el LongListSelector:

public enum XboxMusicItemType
{
     Artist,
     Album,
     Track
}

public class XboxMusicItem
{
     public string Title { get; set; }
     public string Image { get; set; }
     public string Link { get; set; }
     public XboxMusicItemType Type { get; set; }
}

Simple. La propiedad fundamental es Type que marcará de que tipo es el elemento, necesario para organizar los elementos en el LongListSelector. Centrandonos en laViewModel, necesitaremos una propiedad de tipo string donde recibir el texto introducido en el TextBox por el usuario, un comando donde ejecutar la búsqueda del botón y una propiedad de tipo colección donde volcar la información recibida.

Definimos una propiedad donde almenar el texto de búsqueda introducido por el usuario:

public string SearchParam
{
     get { return _searchParam; }
     set
     {
          SetProperty(ref _searchParam, value);
     }
}

Definimos una colección de objetos XboxMusicItem:

public List<Group<XboxMusicItem>> Items
{
     get
     {
          return _items;
     }
     set
     {
          SetProperty(ref _items, value);
     }
}

Definimos el comando a ejecutar al pulsar el botón:

private ICommand _searchCommand;

public ICommand SearchCommand
{
     get { return _searchCommand = _searchCommand ?? new DelegateCommand(SearchCommandDelegate); }
}

public async void SearchCommandDelegate()
{

}

Nos centramos en la lógica del delegado del comando:

_client = new MusicClient(ClientId, ClientSecret);
var result = await _client.Find(SearchParam);

Utilizamos el wrapper de Xbox Music para Windows Phone para acceder a los servicios. Creamos un objeto de tipo MusicClient pasándole en el constructor el ClientId y el ClientSecret que obtuvimos al registrar una nueva aplicación en el portal. Tenemos disponible el método Find que espera una cadena por la que realizará una búsqueda de todos los resultados posibles en el servicio.

En la colección obtenida tenemos un listado de discos, cantantes, canciones con objetos internos de la librería. Cada uno de estos objetos cuenta con una cantidad interesante de propiedades relacionadas con el objeto en cuestión además de métodos para obtener otro tipo de información. Asi podemos obtener entre otra información:

Álbum

  • Artistas relacionados
  • Fecha de publicación
  • Canciones Top
  • Artistas relacionados
  • Géneros
  • Canciones
  • Portada

Cantante

  • Artistas relacionados
  • Canciones Top
  • Artistas relacionados
  • Géneros
  • Foto

Canción

  • Álbum al que pertenece
  • Duración
  • Número de canción
  • Cantantes
var items = result.Albums.Items.Select(album => new XboxMusicItem
{
     Title = album.Name,
     Image = album.GetImage(100, 100),
     Link = album.GetDeepLink(),
     Type = XboxMusicItemType.Album
}).ToList();

items.AddRange(result.Artists.Items.Select(artist => new XboxMusicItem
{
     Title = artist.Name,
     Image = artist.GetImage(100, 100),
     Link = artist.GetDeepLink(),
     Type = XboxMusicItemType.Artist
}));

items.AddRange(result.Tracks.Items.Select(track => new XboxMusicItem
{
     Title = track.Name,
     Image = track.GetImage(100, 100),
     Link = track.GetDeepLink(),
     Type = XboxMusicItemType.Track
}));

IEnumerable<Group<XboxMusicItem>> groupList = from item in items
     group item by item.Type into g
     orderby g.Key
     select new Group<XboxMusicItem>(g.Key.ToString(), g);

Items = groupList.ToList();

Accedemos a la colección obtenida de discos, cantantes, canciones y las añadimos a nuestra colección agrupandola por tipo.

Ya solo falta preparar nuestro LongListSelector para mostrar la información agrupada. Continuamos contruyendo la interfaz de usuario. Nos centramos en el archivo MainPage.xaml.

Vamos a definir las distintas plantillas que debemos utilizar en el LongListSelector y que ya hemos analizado previamente. Comenzamos con la plantilla GroupHeaderTemplate que definirá el aspecto de las cabeceras de cada grupo:

<DataTemplate x:Key="XboxMusicGroupHeaderTemplate">
     <Border Background="Transparent" Padding="5">
          <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="462"
          Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
               <TextBlock Text="{Binding Type}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="24" Padding="6"
               FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
          </Border>
     </Border>
</DataTemplate>

La siguiente plantilla, ItemTemplate, define el aspecto de cada elemento de la lista:

<DataTemplate x:Key="XboxMusicItemTemplate">
     <Grid>
          <Grid.ColumnDefinitions>
               <ColumnDefinition/>
               <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Margin="10"/>
          <TextBlock Grid.Column="1" Text="{Binding Title}" TextWrapping="Wrap" FontSize="24"/>
     </Grid>
</DataTemplate>

Podemos definir ya el control LongListSelector:

Si compilamos y probamos podemos observar que algo no va bien… ¿que ocurre?

Al pulsar sobre una de las cabeceras no ocurre nada. Debería de superponerse una rejilla con cada uno de los grupos de modo que permitan posicionar al usuario al inicio del grupo en la lista plana.

¿Cómo lo solucionamos?

Utilizamos la propiedad JumpListStyle para ello. Con esta propiedad indicaremos como se comporta el LongListSelector al pulsar cabeceras.

NOTA: Si no definimos la propiedad IsGroupingEnable a True la lista aparecería sin agrupar, al igual que veríamos en un ListBox.

Lo primero que haremos será utilizar dos Converters disponibles en el SDK para determinar fuente y fondo de cada grupo que aparecerá en la rejilla que superpones al pulsar una cabecera (si aparece pero con otro color o no, etc):

<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

A continuación, definimos el estilo JumListStyle:

<Style x:Key="XboxMusicJumpListStyle" TargetType="phone:LongListSelector">
     <Setter Property="GridCellSize"  Value="480,113"/>
     <Setter Property="ItemTemplate">
     <Setter.Value>
          <DataTemplate>
          <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="480" Height="113" Margin="6">
               <TextBlock Text="{Binding Type}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="24" Padding="6"
               Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
          </Border>
          </DataTemplate>
     </Setter.Value>
     </Setter>
</Style>

De modo que finalmente nuestro LongListSelector quedaría así:

<phone:LongListSelector
     Grid.Row="1"
     Background=" Transparent"
     IsGroupingEnabled="True"
     LayoutMode="List"
     ItemsSource="{Binding Items}"
     JumpListStyle="{StaticResource XboxMusicJumpListStyle}"
     GroupHeaderTemplate="{StaticResource XboxMusicGroupHeaderTemplate}"
     ItemTemplate="{StaticResource XboxMusicItemTemplate}"/>

Podéis ver el resultado a continuación:

El resultado

El resultado

Podéis descargar el ejemplo realizado del siguiente enlace:

NOTA: Para probar el ejemplo necesitaréis introducir vuestro propio ClientId y ClientSecret.

Más información

Un pensamiento en “[Windows Phone] Integrando los servicios de Xbox Music

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s