[Evento WPSUG] APIs de música en Windows Phone

Introducción

A finales del año pasado nacio WPSUG, grupo de usuarios hispanos de Windows Phone
con el objetivo de ayudar en lo posible a la comunidad de
desarrolladores Windows Phone con entre otras acciones, webcasts
periódicos en castellano y con contenido pedido los propios usuarios
utilizando Google Hangouts.

Un parte importante en una gran cantidad de aplicaciones móviles se basa en el uso de música
o de información relacionada con la misma. Aplicaciones con letras,
información de artistas o conciertos entre una multitud inmensa de
posibilidades.

¿Cómo podemos obtener información relacionada con un álbum o un
artista en concreto?,  ¿puedo tener la información exacta de una canción
en concreto?, ¿que posibilidades tengo?. Si te resulta interesante el
siguiente Hangout de WPSUG te resultara muy útil.

El evento

El próximo Jueves 30 de Enero, a las 19:00 (GMT+1)  tendra lugar el segundo Hangout del gupo en el que nos reuniremos Josué Yeray, Rafael Serna, Santiago Porras y un servidor para tratar todas las posibilidades de integración de las nuevas APIs de música, Nokia Music y Xbox Music en nuestras apps Windows Phone.

¿Te apuntas?

Más información

[Windows Phone] Leer códigos de barras

Introducción

Un código de barras es una forma de representar
graficamente un conjunto de información de modo que pueda ser facilmente
leida por una máquina.

En nuestro día a día estamos acostumbrados
a ver códigos de barras por todos lados, en el último libro que leiste,
en ese CD de música que te asombro e incluso en el cartón de leche de
tu desayuno. En distintos formatos y tipos pero sin duda, son un factor
importante. El formato más comun es un conjunto de barras verticales
paralelas entre si utilizadas para identificar un producto en concreto. A
este conjunto de códigos de barras con líneas verticales se les conoce
como 1D (1 Dimensión). Tambien tenemos otro conjunto de códigos basados
en patrones geométricos diseñados para almacenar más información. Son
los conocidos como 2D (2 Dimensiones) donde el representante más
conocido es el código QR.

En este artículo vamos a aprender como generar códigos QR desde nuestra aplicación Windows Phone. ¿Te apuntas?

Windows Phone y los códigos de barras

Desde
Windows Phone 7 se pueden leer un conjunto de los códigos de barras más
importantes como EAN-13 o los códigos QR directamente con la aplicación
de búsqueda Bing Vision sin la necesidad de instalar ningun App para
ello.

ZXing.Net

Para generar códigos de barras desde nuestra aplicación Windows Phone utilizaremos la librería ZXing.Net. Esta librería es un port de la librería open spurce ZXing.

Escaneando códigos de barras

Como
solemos hacer, vamos a crear una Aplicación de ejemplo para aprender
como generar códigos de barras utilizando la librería ZXing.Net desde
Windows Phone:

Creamos un proyecto desde la plantilla más básica para concentrar
nuestra atención en la librería ZXing.NET que nos ocupa en esta entrada.

Lo
primero que debemos hacer para poder trabajar con la librería es…
obtener la librería. Para ello, en el Explorador de soluciones, hacemos
clic derecho sobre las referencias del proyecto y elegimos la opción
Manage NuGet Packages…

En la ventana que nos aparece buscaremos por la palabra “ZXing” e instalamos la opción  llamada “ZXing.Net” de las disponibles:

NOTA: También podemos instalar la librería con el Package Manager Console ejecutando el siguiente comando: Install-Package ZXing.Net

Todo listo. Comenzamos!

Los primero que necesitaremos para escanear el código de barras será… la cámara!. En Windows Phone contamos con la clase PhotoCamera
que nos da acceso a las funcionalidades de la cámara del dispositivo
incluidas opciones de flash, focus, opciones de resolución, etc. Creamos
en el constructor de la aplicación una instancia de PhotoCamera:

_phoneCamera = new PhotoCamera();

Nos suscribimos a su evento Initialized, lanzado con la inicialización de la cámara:

_phoneCamera.Initialized += cam_Initialized;

En la inicialización de la cámara haremos lo siguiente:

if (e.Succeeded)
{
Dispatcher.BeginInvoke(delegate
{
_phoneCamera.FlashMode = FlashMode.Off;
_previewBuffer = new WriteableBitmap((int)_phoneCamera.PreviewResolution.Width,
(int)_phoneCamera.PreviewResolution.Height);

_barcodeReader = new BarcodeReader { Options = { TryHarder = true } };

_barcodeReader.ResultFound += _bcReader_ResultFound;
_scanTimer.Start();
});
}

Analicemos el código anterior antes de continuar. Establecemos varias
propiedades básicas del objeto de tipo PhoneCamera como el flash por
ejemplo. Inicializamos el objeto de tipo BarCodeReader encargado
de decodificar el código capturado por la cámara. Nos suscribimos al
evento ResultFound del BarCodeReader que se lanzará cuando un código es
capturado. Por último lanzamos el Timer que inicializamos en el
constructor. Este Timer se encargará de escanear códigos de barras
constantemente. Veamos su inicialización:

 _scanTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(100) };
_scanTimer.Tick += (o, arg) => ScanForBarcode();

Como podemos ver en el código anterior cada 100 milisegundos se lanzará el método ScanForCode. El método llamado ScanForBarCode que obtendrá el resultado capturado por la cámara y se lo pasará al BarCodeReader utilizando su método Decode.
El método Decode es capaz de decodificar los siguientes formatos:
UPC-A, UPC-E, EAN-8, EAN-13, Code 39, Code 93, Code 128, ITF, Codabar,
MSI, RSS-14 (all variants), QR Code, Data Matrix, Aztec y PDF-417.

private void ScanForBarcode()
{
_phoneCamera.GetPreviewBufferArgb32(_previewBuffer.Pixels);
_previewBuffer.Invalidate();
_barcodeReader.Decode(_previewBuffer);
}

Nos suscribimos al evento ResultFound de modo que cuando se encuentre un
código de barras de cualquiera de los formatos soportados:

private void _bcReader_ResultFound(Result obj)
{
if (obj.Text.Equals(_barCode)) return;
VibrateController.Default.Start(TimeSpan.FromMilliseconds(100));
MessageBox.Show(string.Format("Código capturado!. Formato: {0}, Contenido: {1}", obj.BarcodeFormat, obj.Text));
_barCode = obj.Text;
}

Se producirá una pequeña vibración notificando al usuario junto a un
mensaje indicando el formato y el contenido del código de barras.

Podéis descargar el ejemplo a continuación:

Más información

[Windows Phone] Generar códigos de barras

Introducción

Un código de barras es una forma de representar
graficamente un conjunto de información de modo que pueda ser facilmente
leida por una máquina.

En nuestro día a día estamos acostumbrados
a ver códigos de barras por todos lados, en el último libro que leiste,
en ese CD de música que te asombro e incluso en el cartón de leche de
tu desayuno. En distintos formatos y tipos pero sin duda, son un factor
importante. El formato más comun es un conjunto de barras verticales
paralelas entre si utilizadas para identificar un producto en concreto. A
este conjunto de códigos de barras con líneas verticales se les conoce
como 1D (1 Dimensión). Tambien tenemos otro conjunto de códigos basados
en patrones geométricos diseñados para almacenar más información. Son
los conocidos como 2D (2 Dimensiones) donde el representante más
conocido es el código QR.

En este artículo vamos a aprender como generar códigos QR desde nuestra aplicación Windows Phone.

¿Te apuntas?

Windows Phone y los códigos de barras

Desde Windows Phone 7
se pueden leer un conjunto de los códigos de barras más importantes como
EAN-13 o los códigos QR directamente con la aplicación de búsqueda Bing
Vision sin la necesidad de instalar ningun App para ello.

ZXing.Net

Para generar códigos de barras desde nuestra aplicación Windows Phone utilizaremos la librería ZXing.Net. Esta librería es un port de la librería open spurce ZXing.

Generando códigos de barras

Como
solemos hacer, vamos a crear una Aplicación de ejemplo para aprender
como generar códigos de barras utilizando la librería ZXing.Net desde
Windows Phone:

Creamos un proyecto desde la plantilla más básica para concentrar
nuestra atención en la librería ZXing.NET que nos ocupa en esta entrada.

Lo
primero que debemos hacer para poder trabajar con la librería es…
obtener la librería. Para ello, en el Explorador de soluciones, hacemos
clic derecho sobre las referencias del proyecto y elegimos la opción
Manage NuGet Packages…

En la ventana que nos aparece buscaremos por la palabra “ZXing” e instalamos la opción  llamada “ZXing.Net” de las disponibles:

NOTA: También podemos instalar la librería con el Package Manager Console laejecutando el siguiente comando: Install-Package ZXing.Net

Ya
estamos preparados para trabajar con la librería. Para ello, vamos a
añadir un simple botón para que al pulsarlo se genere un código de
barras:

<Button x:Name="BtnGenerate" Content="Generar"/>

Añadimos el evento clic del botón:

<Button x:Name="BtnGenerate" Content="Generar" Click="BtnGenerate_Click" />

Y en el code-behind:

private void BtnGenerate_Click(object sender, RoutedEventArgs e)
{

}

Para generar códigos de barras, lo primero que haremos será importar el namespace:

using ZXing;

En el evento clic de nuestro botón utilizaremos la clase BarcodeWriter que será la encargada de generar el código de barras. Las propiedades fundamentales del BarcodeWriter son:

  • Format: Propiedad tipo enumeración  del tipo BarcodeFormat.
    Se pueden generar códigos de barras con los formatos UPC-A, EAN-8,
    EAN-13, Code 39, Code 128, ITF, Codabar, Plessey, MSI, QR Code, PDF-417,
    Aztec y Data Matrix.
  • Renderer: Podemos crear un WriteableBitmapRenderer o un SvgRenderer
    dependiendo del formato con el que queramos crear el código. Nos
    permite personalizar información del código como el color de fondo,
    fuente a utilizar, tamaño de la fuente, etc.
  • Options: Nos permite definir información básica del código como el tamaño, márgenes, etc.

Crearemos un método que haga uso de la clase BarcodeWriter:

private static WriteableBitmap GenerateQrCode(string content)
{
var writer = new BarcodeWriter
{
Renderer = new ZXing.Rendering.WriteableBitmapRenderer
{
Foreground = System.Windows.Media.Color.FromArgb(255, 0, 0, 0),
},
Format = BarcodeFormat.QR_CODE,
Options = { Height = 400, Width = 400 }
};

var barcodeImage = writer.Write(content);

return barcodeImage;
}

En el método utilizamos la clase BarcodeWriter para crear un código
QR de color negro, de 400×400 px con el contenido pasado como parámetro
al método. Fácil, ¿verdad?

Para concluir el ejemplo, solo nos
falta devolver el resultado a pantalla. Añadiremos en la interfaz un
control de tipo Image donde mostrar el código:

<Image x:Name="ImgQrCode" />

Por último, en el clic del botón, estableceremos la propiedad Source de
la imagen al resultado que devuelve nuestro método anterior
GenerateQrCode.

ImgQrCode.Source = GenerateQrCode("@jsuarezruiz");

El resultado es el siguiente:

Podéis descargar el ejemplo a continuación:


Más información

Cimbalino Windows Phone Toolkit

Introducción

En el desarrollo de una aplicación tenemos que
tener en cuenta muchos factores, su contenido, su diseñoo su usabilidad
entre otros factores. Pero por debajo de todo eso hay una base aun mas
importante, el código. Como desarrolladores tenemosque esforzarnos por
realizar un código de calidad acompañado de test y realizando un
esfuerzo en cumplir buenas practicas con el objetivo en mente de tener
un código facilmente ampliable, fácil de testear e incluso porque no,
fácil de portar a otras plataformas. Sin embargo, en el proceso a este
fin nos encontramos con piedras innecesarias en el camino. En el
desarrollo de una aplicación Windows Phone siguiendo elpatrón MVVM entre
otras buenas prácticas nos encontramos con que el ApplicationBar no
soporta bindings, el LongListSelector tampoco en su elemento
seleccionado, etc.

¿Y si pudieramos tener las cosas más fáciles?

Cimbalino Windows Phone Toolkit

Con
ese objetivo en mente llega Cimbalino. Es un completo conjunto de
herramientas destinadas a ahorrarnos tiempo y esfuerzo al desarrollar
aplicaciones para Windows Phone.

El Toolkit esta dividido en proyectos:

  • Cimbalino.Phone.Toolkit:
    Base del Toolkit, contiene los servicios base del patrón MVVM,
    converters, helpers y metodos extensores además de la bindable
    Application Bar.
  • Cimbalino.Phone.Toolkit.Background: Servicios para los background agents compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.Camera: Servicios para acceder a la cámara compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.Controls: Controles (se necesita el Windows Phone Toolkit).
  • Cimbalino.Phone.Toolkit.DeviceInfo: Servicios para acceder a la información del dispositivo compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.Location: Servicios para utilizar la localización compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.MediaLibrary: Servicios para acceder a la librería Media compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.PhoneDialer: Servicios para acceder a las funciones del teléfono compatibles con MVVM.
  • Cimbalino.Phone.Toolkit.UserInfo: Servicios para acceder a la información del usuario compatibles con MVVM.

NOTA: El Toolkit es compatible con Windows Phone SDK 7.1.x y Windows Phone 8.0.

Instalando el Toolkit

El Toolkit lo tenemos disponible en NuGet por lo que podemos instalarlo usando Nuget Package Manager.

En las referencias del proyecto hacemos clic derecho y seleccionamos la opción Manage NuGet Packages …

En la ventana modal que nos aparece, en la parte superior derecha donde podemos realizar una búsqueda, buscamos por “cimbalino”:

NOTA: La primera opción
incluye el Toolkit al completo. Sin embargo, como podemos apreciar en
la captura anterior, podemos descargar por partes, solo aquellos
componentes que nos interesen.

Seleccionamos el primero de los elementos y pulsamos el botón Install.
Tras un breve periodo donde se procede a descargar e incluir las
librerías en las referencias del proyecto, tendremos el siguiente
resultado:

Contenido

Acciones

  • BingMapsAction
  • BingMapsDirectionsAction
  • ClipboardAction
  • ConnectionSettingsAction
  • EmailComposeAction
  • Etc

Behaviors

  • ApplicationBarBehavior
  • MultiApplicationBarBehavior
  • SafeBehavior
  • Etc

Converters

  • BooleanToBrushConverter
  • BooleanToIntConverter
  • BooleanToStringConverter
  • BooleanToVisibilityConverter
  • NegativeBooleanConverter
  • Etc

Extensiones

  • ByteArrayExtensions
  • DependencyObjectExtensions
  • DispatcherExtensions
  • EnumExtensions
  • FrameworkElementExtensions
  • Etc

Helpers

  • ApplicationManifiest
  • MutexLock
  • NamescopeBinding
  • Etc

Servicios

  • AddressChooserService
  • ApplicationLifecycleService
  • ApplicationManifestService
  • ApplicationProfileService
  • ApplicationSettingsService
  • AsyncStorageService
  • BingMapsService
  • ClipboardService
  • ConnectionSettingsService
  • DeviceStatusService
  • EmailAddressChooserService
  • EmailComposeService
  • LauncherService
  • LockScreenService
  • MapDownloaderService
  • MapsDirectionsService
  • MapsServices
  • MarketplaceDetailService
  • MarketplaceHubService
  • MarketplaceReviewService
  • MarketplaceSearchService
  • MessageBoxService
  • NavigationService
  • PhoneNumberChooserService
  • SaveAppointmentService
  • SaveContactService
  • SearchService
  • ShareLinkService
  • ShareMediaService
  • ShareStatusService
  • VoiceCommandService
  • WebBrowserService

Lo utilizamos!

vamos a crear una Aplicación de ejemplo para utilizar y ver superficialmente las posibilidades del Toolkit:

Creamos un proyecto desde la plantilla más básica para concentrar nuestra atención en el Toolkit que nos ocupa en esta entrada.

El ApplicationBar de Windows Phone, desde sus orígenes, es un objeto que no deriva de la clase FrameworkElement.
Esto quiere decir que no soporta estilos o plantillas pero lo que es
más importante, tampoco soporta binding en sus propiedades. Esto provoca
problemas al trabajar utilizando el patrón MVVM, no podemos acceder
directamente a los comandos de la ViewModel establecida como DataContext
de la página.

Del listado anterior de contenido ya hemos visto que hay behaviors
para el ApplicationBar que nos ayudan a resolver este problema con suma
facilidad.

Vamos a utilizar el behavior. Para utilizarlo, lo primero que debemos hacer es añadir dos namespaces en nuestra vista:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cimbalinoBehavior="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"

A continuación, definimos el behavior:

<i:Interaction.Behaviors>
     <cimbalinoBehavior:ApplicationBarBehavior>
          <cimbalinoBehavior:ApplicationBarIconButton
               Text="{Binding LocalizedResources.Message, Source={StaticResource LocalizedStrings}}"
               IconUri="../Toolkit.Content/ApplicationBar.Check.png"
               Command="{Binding ShowMessageCommand}"/>
          <cimbalinoBehavior:ApplicationBarBehavior.MenuItems>
               <cimbalinoBehavior:ApplicationBarMenuItem
                    Command="{Binding ShowMessageCommand}"
                    Text="{Binding LocalizedResources.Message, Source={StaticResource LocalizedStrings}}"/>
          </cimbalinoBehavior:ApplicationBarBehavior.MenuItems>
     </cimbalinoBehavior:ApplicationBarBehavior>
</i:Interaction.Behaviors>

NOTA: El behavior puede aplicarse directamente a
un PhoneApplicationPage o a su elemento LayoutRoot (principal) para
conseguir una ApplicationBar bindeable permitiendo mantener la
consistencia en el patrón MVVM.

Podemos además de bindear el comando a ejecutar al pulsar el botón,
los textos e incluso una propiedad para controlar la visibilidad.

El comando a ejecutar a su vez puede aprovechar cualquiera de los
servicios que vimos previamente en el listado anterior. En nuestro
ejemplo, bastará con añadir la dependencia en nuestro Ioc:

_container.RegisterType<IMessageBoxService, MessageBoxService>();

Definirlo en el constructor de nuestra ViewModel:

private readonly IMessageBoxService _messageBoxService;
 
public MainViewModel(IMessageBoxService messageBoxService)
{
     _messageBoxService = messageBoxService;
}

Y por último, utilizarlo directamente:

private ICommand _showMessageCommand;
 
public ICommand ShowMessageCommand
{
     get { return _showMessageCommand = _showMessageCommand ?? new DelegateCommand(ShowMessageCommandDelegate); }
}
 
public void ShowMessageCommandDelegate()
{
     _messageBoxService.Show(Resources.AppResources.Cimbalino);
}

Como hemos podido ver a lo largo del artículo, Cimbalino es un
completo Toolkit destinado a acelerar y facilitar el desarrollo de
aplicaciones Windows Phone. Muy buenas implementaciones de una gran
cantidad de acciones, helpers, behaviors, etc. que os recomiendo probar.
Podéis descargar el ejemplo realizado del siguiente enlace:

Como hemos podido ver a lo largo del
artículo, el Toolkit es bastante amplio ofreciendo una cantidad de
opciones muy interesantes permitiendo realizar y resolver tareas muy
diversas. Retomaremos en futuras entradas este Toolkit para ver como
notificar de actulizaciones de la aplicación publicada entre otros
aspectos de interes.

Permaneced atentos!

Más información

Windows Phone Dev Fusion

Introducción

El año pasado fue un divertido año repleto de grandes eventos. Sin duda, un gran momento del año fue cuando tuvo lugar el Windows Phone Week. El Windows Phone Week fue un evento mundial donde cada MVP de la plataforma organizaba un evento de
un día entero de duración en la primera semana de Octubre con el
objetivo de dar a conocer la plataforma desde un punto de vista técnico
(más de 20 eventos a nivel mundoa).

El evento fue una ocasión
especial donde compartir conocimientos de Windows Phone, compartir
ideas, conocer a gente con los mismos intereses y en definitiva pasar un
gran dia.

Sin embargo, no todos pudieron acercarse al evento, por
tener otros compromisos ese día o por no poder acercarse al lugar donde
se realizaba. Por estos motivos  nace el sucesor natural del Windows
Phone Week, el WP Dev Fusion.

WP Dev Fusion

WP
Dev Fusion es una iniciativa creada por la propia comunidad que nace
con la idea de permitir a cualquiera desarrollador del mundo poder
disfrutar de formación relacionada con Windows Phone. Se realizarán
eventos organizados en diferentes lugares del mundo pero además se
organizarán eventos online de forma periódica que permitiran a
cualquiera seguirlos con facilidad.

El “arranque” de WP Dev Fusion

¿Cómo podría “arrancar” la iniciativa?. Pues no hay mejor forma que
con un evento online. De esta forma, el próximo 22 de Enero a partir de
lsa 18:00h (CET) podremos disfrutar de un grupo de MVPs de Windows Phone
tratando múltiples temas relacionados con la plataforma: Las charlas
serán:

Puedes mantenerte informado al respecto siguiendo @wpdevfusion en Twitter y participar utilizando el  hashtag oficial #WPDevFusion.

¿Te lo vas a perder?

Más información

[Windows Phone] Actualización Nokia Black disponible. ¿Qué hay de nuevo?

Introducción

Junto a la presentación de las últimas incorporaciones de la gama
Nokia Lumia (los phablets Nokia Lumia 1320 y 1520 junto a la Tablet
2520) nos llego la notificación de una futura actualización que fue
bautizada como Lumia Black y que traería a la gama Lumia nuevas aplicaciones como Nokia Camera, Storyteller o Beamer.

Una actualización esperada que ya ha llegado…

NOTA: Al escribir estas líneas la actualización
esta disponible para los Lumia 925 y los 1020. La actualización llegará a
toda la familia Lumia con Windows Phone 8 desde el 520 hacia arriba. El
momento preciso se desconoce pues depende de varios factores como el
país o la operadora.

Nokia Black. Las novedades

La actualización viene cargada de novedades, tanto esperadas como
Nokia Beamer o Storyteller como algunas sorpresas. Veamos el listado de
novedades:

Carpetas (App Folders). No podía comenzar por otra
novedad mayor que esta al ser una gran sorpresa. Se pueden agrupar
varias aplicaciones en un único Tile permitiendo una mayor organización
de la pantalla de inicio.

NOTA: La funcionalidad ya disponible en forma de App: http://www.windowsphone.com/en-us/store/app/app-folder/7d2e7de3-95e7-4143-8a9d-aedf8c3f901e

Nokia Beamer. Utilidad muy útil y necesaria que
permite compartir la pantalla del teléfono (documentos, presentaciones,
etc) en cualquier dispositivo compatible con HTML5, televisores,
tablets, PCs, Xbox, etc.

NOTA: Solo disponible para dispositivos con 1GB o más de RAM.

Nokia Storytealler. Esta aplicación ya disponible en
los Lumia 1520 y 2520 llega al resto de la familia Nokia Lumia con
Windows Phone 8. Esta aplicación plantea un concepto muy interesante que
permite organizar las fotos por lugar añadiendo contenido como mapas
interactivos.

Nokia Camera. Se unen las aplicaciones Nokia Pro Camera
y Smart Camera para ofrecer la mejor experiencia a la hora de tomar
fotos. Se incluyen múltiples mejores para la cámara del 920, 925 y el
1020.

Además se incluye soporte para el formato RAW DNG en el Lumia 1020 y el 1520. Una característica muy esperada.

Nokia Refocus. Herramienta que permitirá enfocar las fotos incluso tras haberlas sacadas.

NOTA: Solo disponible en dispositivos con 1GB o más de RAM.

Nokia Glance 2.0. Cualuier aplicación capaz de
enviar notificaciones podrá notificar de los eventos que ocurran en el
teléfono en modo reposo. Una gran mejora.

Recordatorio: Hasta ahora solo se podía mostrar la hora en Glance.

Bluetooth LE. Además de mejorar el consumo de batería abre la puerta a distintos accesorios Bluetooth hasta ahora no funcionales.

Tenemos disponible un resumen en video de la actualización de la mano de Nokia:

Disponibilidad

Como ya hemos comentado, la actualización esta ya disponible para los
Lumia 925 y los 1020. La actualización llegará a toda la familia Lumia
con Windows Phone 8 desde el 520 hacia arriba. Para obtener más
información puedes consultar  en http://www.nokia.com/global/support/software-update/wp8-software-update/availability-in-europe/

Más información

[Windows Phone] Integrando los servicios de Xbox Music

Xbox 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.

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

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:

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:

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:

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