[Evento WPSUG] Servicios de almacenamiento en Windows Phone

Introducción

Volvemos a la carga en WPSUG, grupo de usuarios hispanos de Windows Phone,
con un nuevo Hangout sobre desarrollo en Windows Phone. En esta
ocasión, trataremos un punto interesante de cara al desarrollo en
nuestras aplicaciones Windows Phone. En muchas de ellas, necesitamos
sincronizar datos entre distintas aplicaciones, necesitamos realizar
copias de seguridad, acceder a información alojada en algun
almacenamiento remoto, etc. Las opciones a utilizar son muchas y
variadas desde Windows Phone. En este Hangout vamos a analizar los
principales servicios de almacenamiento que podemos utilizar en nuestros
desarrollos:

  • Dropbox
  • Onedrive
  • Box
  • Azure Storage

El evento

El próximo Miérocles 26 de Marzo, a las 19:00 (GMT+1)  tendra lugar Hangout en el que nos reuniremos Josué Yeray, Rafael Serna, Santiago Porras, Quique Martínez, Roberto Luis Bisbé y un servidor para analizar múltiples servicios de almacenamiento que podemos utilizar en nuestras apps Windows Phone.

¿Te apuntas?

Más información

Windows Phone. MyToolkit, conjunto de controles y utilidades

Introducción

El SDK de Windows Phone 8 es bastante versátil y nos proporciona una
fuente bastante extensa de controles como para realizar una interfaz de
usuario rica y atractiva en nuestras aplicaciones. Sin embargo, en
determinadas ocasiones podemos echar de menos más controles. Si ese es
tu caso, en la entrada actual vamos a analizar las posibilidades que nos
brinda MyToolkit, ¿te apuntas?

¿MyToolkit?

MyToolkit ess un paquete de controles y utilidades gratuito
disponible tanto en Codeplex como utilizando Nuget. Podremos obtener
tanto los archivos binarios como el código fuente. Además también hay
documentación e incluso proyectos de ejemplo (WinRT y Windows Phone)
haciendo uso de los controles.

Como obtenerlo

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 “mytoolkit”:

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:

¿Qué aporta?

El Toolkit aporta un conjunto de controles, converters, helpers y extensiones.

Controles

  • DataGrid (WinRT): Nos permite crear un Grid de solo lectura aunque con posibilidades interesantes como las opciones de navegación.
<Controls:DataGrid  ItemsSource="{Binding Items}"
                SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"
            Navigate="OnNavigate" DefaultOrderIndex="0">
     <Controls:DataGrid.Columns>
          <Controls:DataGridTextColumn
               Width="200"
           Binding="{Binding Text01}"
           Style="{StaticResource BodyTextStyle}" />
          <Controls:DataGridTextColumn
               Width="200"
           Binding="{Binding Text02}"<br />
               Style="{StaticResource BodyTextStyle}"  />
     </Controls:DataGrid.Columns/>
</Controls:DataGrid />
  • DatePicker (WinRT) Permite la selección de fechas.
  • ExtendedListBox (WP, WinRT): Control ListBox  con eventos interesantes como scrolling o detectar si se llega al final del scroll.
  • ExtendedListPicker
    (WP), Nos permite usar ObservableCollection<T> en lugar de
    exclusivamente ObservableCollection<object> como lo haría el
    ListPicker.
  • HtmlTextBlock
    (WP, WinRT): Nos permite mostrar contenido HTML sin los problemas
    encontrados en el control WebBrowser (gestión de color de fondo, etc).
  • ImageButton (WinRT), Facilita la creación de botones con imagen. Cuenta con propiedad Content, ContentPressed y IsTiltEnabled.
  • NavigationList (WP, WinRT): ListBox con eventos de navegación (incluye el elemento seleccionado como parámetro)
  • PanAndZoomImage (WP) Facilita la manipulación de imágenes mediante gestos.
  • Pivot
    (WinRT): Permite ofrecer la experiencia de un Pivot típico de Windows
    Phone en una aplicación Windows Store. Muy sencillo de utilizar:
<Controls:Pivot>
     <Controls:PivotItem Header="uno">
     </Controls:PivotItem>
     <Controls:PivotItem Header="dos">
     </Controls:PivotItem>
</Controls:Pivot>
  • TextButton (WinRT), muestra un icono  (obtenido utilizando un caracter de la fuente Segoe UI) y una cabecera.
  • YouTubeButton
    (WP, WinRT): Botón que muestra una previsualización del video a
    reproducir junto al icono Play. Una vez pulsado el botón reproduce el
    video. Es uno de los controles mas usados que aporta el Toolkit:
<Controls:YouTubeButton YouTubeID="YouTube Id" Click="OnButtonClick" />

Converters

  • ChainedConverter
  • ColorConverter
  • DateTimeConverter
  • EqualityConverter
  • NotConverter
  • Etc

Helpers

  • VisibilityManger,
    (WinRT), Muy útil para mostrar u ocultar controles en XAML dependiendo
    del ancho de la pantalla (portrait, landscape, snapped, etc)
  • TextBinding, (WP) Propiedad adjunta que permita actualizar inmediantamente lo bindeado en controles  TextBox y PasswordBox.
  • Popups, Helpers que nos ayudan a implementar popups con una apariencia igual a la de los popups del sistema en Windows Phone y WinRT.
  • TiltEffect, Efecto tilt similar al usado en Windows Phone Toolkit para WinRT.
  • Etc

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 reproducir videos de YouTube con
gran facilidad o como mostrar contenido HTML por ejemplo. Permaneced
atentos!

Más información

Usar fuentes pesonalizadas en Apps Windows Phone y Windows Store

Introducción

La interfaz de usuario de las aplicaciones
Windows Phone y Windows Store se basa en el uso del lenguaje Modern UI
donde el correcto uso de fuentes obtiene un gran peso permitiendo
otorgar un aspecto espaciado y ordenado facilitando el uso de la
aplicación.

Segun las guías de estilo de ambas plataformas existen
una serie de recomendaciones en cuanto al uso de fuentes que afectan al
tipo de fuente, tamaño y espacio donde la fuente Segoe
tiene un peso especial. Estas guías nos facilitan en muchas ocasiones
el conseguir un aspecto adecuado con un correcto uso de las fuentes. Sin
embargo, en ocasiones tenemos la necesidad de usar alguna fuente en
concreto por diversos motivos:

  • La fuente en cuestión en base
    de la identidad corporativa de la aplicación que estamos desarrollando
    por lo que necesitamos usarla.
  • La fuente es ya usada en otros entornos como por ejemplo en aplicaciones para otros sistemas.
  • La fuente otorga un beneficio en la interfaz de usuario que queremos crear.

Sea por el motivo que sea, en ocasiones, nuestra aplicación tiene la necesidad de usar alguna fuente en concreto.

¿Cómo lo conseguimos?

Fuentes personalizadas

Tanto
en el desarrollo de aplicaciones Windows Phone como en aplicaciones
Windows Store tenemos acceso a una gran variedad de fuentes a las que
podemos acceder utilizando la propiedad FontFamily en elementos de texto. Por defecto tenemos acceso a una gran variedad de fuentes:

  • Arial
  • Arial Black
  • Arial Unicode MS
  • Calibri
  • Cambria
  • Cambria Math
  • Comic Sans MS
  • Candara
  • Consolas
  • Constantia
  • Corbel
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Segoe UI
  • Symbol
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Wingdings
  • Wingdings 2
  • Wingdings 3

Como
podemos ver la variedad es alta pero… ¿y si la fuente que necesitamos
utilizar no esta entre las fuentes disponibles?, ¿y si nuestra fuente
(TTF) no se encuentra en el sistema?

¿Cómo usar fuentes personalizadas?

El
trabajo con fuentes personalizadas en aplicaciones Windows Phone y
Windows Store es sumamente sencillo. Comenzamos con el archivo o
archivos de fuente en extesión .ttf. Para poder trabajar con las fuentes
debemos tenerlas disponibles en nuestro proyecto.

NOTA: En este ejemplo vamos a utilizar la fuente Cheddar Jack disponible en el siguiente enlace.

Añadir la fuente a la solución

Incluimos el archivo TTF en una carpeta llamada Fonts dentro de los Assets de nuestra aplicación:

Tras añadir la fuente, en sus propiedades, estableceremos la propiedad Build Action a Content y la propiedad Copy to Output Directory a Copy if newer:

Para poder utilizar la fuente necesitamos además de saber la ruta y
nombre del fichero, el nombre de la fuente (no es igual al nombre del
fichero).

Obtener el nombre de la fuente

Para obtener el nombre de la fuente bastará con realizar doble clic sobre el fichero TTF:

En nuestro caso el nombre de la fuente es Cheddar Jack.

Utilizando la fuente

Añadimos un TextBlock en el contenido del Grid principal de nuestra aplicación y le añadimos en la propiedad FontFamily:

<TextBlock
     FontFamily="/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

¿Qué significado tiene el texto que hemos indicado?

NOTA: Podemos renombrar el archivo TTF a por
ejemplo CheddarJack.ttf y todo seguira funcionando correctamente. Sin
embargo, la última parte, el nombre de la fuente, debe reflejar
exactamente el nombre de la fuente incluidos espacios.

NOTA:
Hay fuentes con problemas de compatibilidad. En estos casos si la
fuente se llama Gothan Medium por ejemplo y tenemos problemas a la hora
de acceder a la misma debemos quedarnos solo con la primera palabra, es
decir, Gothan. Solo necesitamos realizar esta acción ante determinadas
fuentes con problemas de compatibilidad.

Podéis descargar el ejemplo a continuación:

Extra

Ya
hemos visto lo realmente sencillo que es trabajar con fuentes
personalizadas en aplicaciones Windows Phone y Windows Store pero hay
algunos detalles interesantes a comentar.

Acceso a la fuente en runtime

Podemos utilizar una fuente personalizada en runtime utilizando la propiedad FontFamily de un control de texto:

textBlock.FontFamily = new FontFamily("/Assets/Fonts/cheddar_jack.ttf#Cheddar Jack");

Trabajo organizado

Cuando toda nuestra aplicación accederá a
fuentes personalizadas no debemos colocar la propiedad FontFamily
continuamente con la ruta, nombre del fichero y nombre de la fuente.
Debemos hacer un uso adecuado de la potencia disponible en XAML
utilizando recursos y estilos.

Podemos crearnos un diccionario de
recursos llamado Fonts. Dentro del archivo de recursos podremos
organizar las fuentes de la siguiente forma:

<!-- Fonts -->
<FontFamily x:Key="LightFontFamily">/Fonts/Font-Light.ttf#Font Light</FontFamily>
<FontFamily x:Key="MediumFontFamily">/Fonts/Font-Medium.ttf#Font Medium</FontFamily>
<FontFamily x:Key="BlackFontFamily">/Fonts/Font-Black.ttf#Font Black</FontFamily>

Incluimos el diccionario de recursos entre los recursos de la aplicación:

<Application.Resources>
     <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="/Themes/Fonts.xaml"/>
          </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
</Application.Resources>

Y desde cualquier control de texto bastara con:

<TextBlock
     FontFamily="{StaticResource LightFontFamily}"
     FontSize="32"
     Text="Usando la fuente Cheddar Jack!" />

Fácil y muy cómodo, ¿cierto?.

Más información

[Windows Phone] Añadir Flurry Analytics en tus Apps

Introducción. La importancia de las métricas

Una vez publicada una aplicación en la Store recibir feedback sobre
la misma es sumamente útil. El Dev Center nos facilita información como
el número de descargas totales, descargas por países, fallos de la
aplicación, etc. Esta información es muly útil para saber en que
mercados esta teniendo más éxito nuestra aplicación y donde debemos
aplicar más esfuerzo con traducciones o que partes de la aplicación
fallan y debemos corregir. Pero… ¿es suficiente?. Como casi todo en la
vida, depende. A algunos les sobra con dicha información y para otros es
muy escasa. Sería interesante saber información como cuanto tiempo
estan los usuarios con nuestra aplicación, por que páginas navega, por
donde nunca pasa el usuario, desde que dispositivos accede, etc. Con
esta información podemos sacar muchas conclusiones como detectar
problemas de UX, añadir un mayor esfuerzo en zonas de la aplicación
donde el usuario pasa la mayor parte del tiempo, esforzarnos por
facilitar y promover el acceso a zonas apenas accedidas, corrección de
bugs, etc.

¿Cómo podemos obtener toda esa información?

Flurry Analytics

El agende de Flurry Analytics para Windows Phone permite de manera
gratuita conseguir analíticas de uso y comportamiento de nuestras
aplicaciones.

Para comenzar a utilizar Flurry Analytics comenzaremos realizando el registro en: flurry.com.

Tras registrarnos y validar nuestras credenciales creamos una
aplicación para obtener un application key válido que nos permita
integrar Flurry en nuestra aplicación.

Elegimos de que tipo de aplicación deseamos obtenemos analíticas:

Tras elegir plataforma, rellenamos la información básica de la aplicación, nombre y categoría:

Por último, tendremos nuestra aplicación creada y todo listo para
comenzar a integrar Flurry en nuestra aplicación Windows Phone:

Descargamos el archivo comprimido con todo lo necesario:

  • Documentación
  • La librería a utilizar en nuestra aplicación Windows Phone
  • El Application Key

Flurry SDK

Descomprimimos el contenido del archivo comprimido:

Integración en nuestra App

Vamos a realizar un ejemplo práctico donde integrar Flurry Analytics. Creamos un nuevo proyecto.

Añadimos la referencia a la librería FlurryWP8SDK.dll que teníamos disponible en el archivo descomprimido previamente.

En el archivo de manifiesto, WMAppManifiest.xml, para que todo funcione correctamente añadimos las siguientes capacidades:

  • ID_CAP_NETWORKING
  • ID_CAP_IDENTITY_DEVICE

NOTA: En todo proyecto Windows Phone la primera
de las capabilities viene macada por defecto. Sin embargo, la segunda
capability debemos marcarla para que las analíticas de Flurry funcionen
correctamente.

En el evento Application_Launching añadimos:

private void Application_Launching(object sender, LaunchingEventArgs e)
{
     FlurryWP8SDK.Api.StartSession("FLURRY_API_KEY");
}

Y en el evento Application_Activated:

private void Application_Activated(object sender, ActivatedEventArgs e)
{
     FlurryWP8SDK.Api.StartSession("FLURRY_API_KEY");
}

Y listo!

¿Ya?, ¿de verdad?. Pues si, con tan solo los pasos anteriores
conseguimos una gran cantidad de información relacionada con nuestra
aplicación. Información como:

  • Dispositivos usados
  • Número de usuarios
  • Idiomas usados
  • Versiones
  • Zonas geográficas
  • Frecuencia de uso
  • Tiempo que cada usuario permanece en la aplicación
  • Etc

Tracking Avanzado

Una parte importante a tener en cuenta cuando publicamos una
aplicación en la Store, es su correcto funcionamiento bajo cualquier
entorno y circunstancia. Por lo tanto, tener constancia de cuantos
errores tenemos en nuestra aplicación y de que tipo nos da una gran
ventaja a la hora de resolver los errores y garantizar la calidad
exigida e nuestra aplicación.

¿Cómo podemos sacar beneficio de las analíticas de nuestra aplicación para ello?

Con las analíticas de errores. Podemos registrar las excepciones de nuestra aplicación utilizando el método LogError:

FlurryWP8SDK.Api.LogError(String message, Exception exception)

NOTA: Flurry capturara los 10 últimos errores registrados por sesión con un máximo de 256 carácteres  en el mensaje por error.

De esta forma podemos controlar excepciones de una manera muy
sencilla. Ante casos no esperados, la aplicación se cerrará entrando en
última instancia en el método Application_UnhandledException de App.xaml.cs.

Por lo tanto, podemos capturar toda expceción no controlada facilmente:

private void Application_UnhandledException ( object sender, ApplicationUnhandledExceptionEventArgs e)
{
     if (System.Diagnostics.Debugger.IsAttached)
          System.Diagnostics.Debugger.Break ();
 
     FlurryWP8SDK.Api.LogError ( "Application_UnhandledException" , e.ExceptionObject);
}

Otro factor de interés del que tener analíticas más exactas es de los eventos que suceden en nuestra aplicación. Usaremos el método LogEvent
para añadir analíticas de eventos pudiendo registrar no solo un evento
sino los parámetros que recibe. Gracias a este tipo de analíticas
podemos saber por ejemplo que secuencias de acciones suele realizar la
mayoría de usuarios o cuales apenas se realizan por ejemplo.

FlurryWP8SDK.Api.LogEvent(string eventId, bool timed, List<Parameter> parameters)

NOTA: Tenemos una limitación de 10 parámetros por
evento. Además nuestra aplicación no puede superar los 300 eventos
registrados. Aun asi, en la mayoría de ocasiones, son valores muy altos
que nos permiten tener unas trazas muy exactas de lo que sucede en
nuestra aplicación.

Otras analíticas

Dentro del SDK de Flurry Analytics tenemos otros métodos que nos permiten registrar analíticas de más tipos como por ejemplo:

  • Registrar vistas utilizando el método LogPageView:

FlurryWP8SDK.Api.LogPageView()

  • Edad de los usuarios utilizando el método SetAge:

FlurryWP8SDK.Api.SetAge(int age)

  • Género de los usuarios utilizando el método SetGender:

FlurryWP8SDK.Api.SetGender(Gender gender)

  • Localización exacta del usuario con información del GPS utilizando el método SetLocation:

FlurryWP8SDK.Api.SetLocation(double latitude, double longitude, float accuracy)

  • Etc.

Además tenemos la posibilidad de controlar cuando se registra la información desde que sucede.

Podéis descargar un ejemplo utilizando Flurry Analytics a continuación:

NOTA: Debéis introducir vuestro Flurry API Key propio para poder probar el ejemplo.

Como hemos podido ver, añadir Flurry Analytics es un proceso rápido y
sencillo que nos aporta una gran cantidad de analíticas sobre el uso de
nuestra aplicación que podemos debemos utilizar para gestionar las actualizaciones de nuestra aplicación acorde a las necesidades y usos de la misma.

Más información