Cómo añadir Mobile Services de Azure a una aplicación de Windows Phone

() translation by (you can also view the original English article)

Las aplicaciones de Windows Phone que usan mosaicos dinámicos, que autentican a los usuarios con inicios de sesión únicos y comparten datos entre dispositivos y usuarios generalmente emplean servicios en la nube. La mayoría de las plataformas en la nube ofrecen herramientas de propósito general para almacenar datos y ejecutar código, pero tú tienes que agregar una gran cantidad de código de tipo infraestructura para unir estas herramientas. Mobile Services de Azure te permite agregar servicios en la nube a tu aplicación en minutos.

Introducción

Este tutorial te muestra cómo añadir un servicio back-end a una aplicación de Windows Phone usando Mobile Services de Azure. Crearás un nuevo servicio móvil y una aplicación simple de cosas pendientes por hacer que almacena sus datos en la nube usando el nuevo servicio móvil. En este tutorial aprenderás cómo:

crear un servicio móvil y añadirle tablas
actualizar la aplicación para usar el servicio móvil
probar el servicio móvil hospedado en Mobile Services de Azure

Para seguirme necesitas una cuenta de Windows Azure. Puedes registrarte para obtener una versión de prueba de Windows Azure si aún no tienes una cuenta.

1. Crea un servicio móvil

Primero necesitamos configurar un nuevo servicio móvil que pueda ser usado por la aplicación de Windows Phone. El servicio móvil que crearás en este tutorial es un servicio móvil back-end de JavaScript. Esto te permite usar JavaScript para la lógica de negocios del lado del servidor. Sigue estos pasos para crear un nuevo servicio móvil usando el Azure Management Portal (Portal de Administración de Azure).

Paso 1: Añadir un servicio móvil

Inicia sesión en el Azure Management Portal y haz clic en el botón NEW (Nuevo) de la barra de navegación. Expande Compute > Mobile Service (Computar > Servicio Móvil) y haz clic en Create (Crear).

Paso 2: Selecciona el tipo de base de datos (Database Type), la región (Region) y el entorno (Runtime).

En el asistente New Mobile Service (Nuevo servicio móvil), selecciona una base de datos SQL gratuita de 20 MB o usa alguna de tus bases de datos existentes. Selecciona JavaScript desde el menú Backend y escribe un subdominio para el nuevo servicio móvil en el cuadro de texto URL.

Select the Database Type Region and Runtime

Toma en cuenta que el nombre del servicio móvil necesita ser único. Cuando el nombre/subdominio que escribiste no esté disponible aparecerá un error cerca de URL.

Paso 3: Especifica las configuraciones de la base de datos

Cuando creas un nuevo servicio móvil, éste se asocia automáticamente a una base de datos SQL. A continuación el back-end de Mobile Services de Azure proporciona soporte integrado para permitir que aplicaciones remotas almacenen y obtengan datos de ella de forma segura, sin que tengas que escribir o implementar ningún código de servidor personalizado.

Para configurar la base de datos, escribe el nombre de la misma en el campo Name (Nombre), escribe el Server Login Name (Nombre de inicio de sesión del servidor) y Server Login Password (Contraseña de inicio de sesión del servidor) para acceder al servidor de bases de datos de SQL.

Haz clic en la casilla de verificación de la parte inferior derecha para completar el proceso. Ahora has creado un nuevo servicio móvil que puede ser usado por tus aplicaciones móviles. Antes de que puedas comenzar a almacenar datos, primero necesitas crear una tabla que pueda guardar la información de tu aplicación.

Toma en cuenta que el uso de una base de datos en una región diferente no es recomendable debido a los costos adicionales de ancho de banda y a las latencias más elevadas.

2. Agrega una tabla al servicio móvil

En este paso agregaremos una tabla llamada ToDoItem al servicio móvil, que será usada por la aplicación cliente para guardar las cosas pendientes por hacer del usuario.

Paso 1: Crea una nueva tabla

Desde la pestaña Data (Datos) en el Azure Management Portal (Portal de Administración de Azure), haz clic en Create (Crear) para añadir una nueva tabla al servicio móvil. Asigna el nombre ToDoItem a la tabla y establece un nivel de permiso para cada operación. Para la tabla ToDoItem he usado la configuración de permisos predeterminada.

Haz clic en la casilla de verificación de la parte inferior derecha para terminar el proceso de configuración de la tabla. En tan solo unos segundos has agregado la tabla ToDoItem al servicio móvil.

Paso 2: Agrega columnas a la tabla

La tabla ToDoItem ya contiene varias columnas para almacenar id, fecha de creación, estado de eliminación, fecha de actualización e información de la versión. Para hacer que la tabla sea útil para nuestra aplicación necesitamos añadir dos columnas adicionales, una para almacenar el texto de la actividad pendiente por hacer y una para almacenar el estado de la misma.

Para añadir las columnas adicionales, haz clic en Add Column (Añadir Columna) desde la pestaña Columns (Columnas) de la tabla ToDoItem. La columna text (texto) es de tipo String (Cadena) y la columna completed (terminado) es de tipo Boolean (Booleano).

Estas son las columnas de la tabla ToDoItem.

Ahora que hemos configurado nuestro servicio móvil y que le hemos añadido una tabla, tienes dos opciones: crear una nueva aplicación o conectar una aplicación existente al servicio móvil. En este tutorial vamos a modificar una aplicación de Windows Phone existente para usar el servicio móvil.

3. Configura la aplicación para usar el servicio móvil

La aplicación debe ser configurada correctamente para usar el servicio móvil. Necesitas añadir código para conectar tu aplicación a tu servicio móvil y guardar datos en la nube.

Haz clic con el botón derecho en el nombre del proyecto dentro del Solution Explorer (Explorador de soluciones) y elige Add > Connected Service (Añadir > Servicio Conectado) desde el menú. En el cuadro de diálogo Add Connected Service (Añadir servicio conectado) que aparece, elige Azure Mobile Services (Mobile Services de Azure) y haz clic en Configure (Configurar).

A continuación elige el servicio móvil que creaste anteriormente desde la lista de servicios existentes en tu cuenta. Necesitarás proporcionar tus credenciales para conectarte y listar los servicios móviles en tu cuenta de Windows Azure.

Selecciona el servicio móvil que creamos y haz clic en Add (Añadir) para terminar el proceso. El asistente agregará todas las referencias necesarias a tu proyecto. Las referencias también pueden añadirse manualmente instalando el paquete necesario usando NuGet. Haz clic con el botón derecho en tu proyecto cliente, selecciona Manage NuGet Packages (Gestionar paquetes NuGet), busca el paquete WindowsAzure.MobileServices y agrega una referencia al mismo.

Add Azure Mobile Services Package Reference

El asistente instala los paquetes NuGet requeridos, agrega una referencia a la biblioteca cliente del servicio móvil al proyecto y actualiza el código fuente del mismo. El asistente también agrega un nuevo campo estático a la clase App que se ve así:

1	public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient
2	todolistClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
3	"https://todolist.azure-mobile.net/",
4	"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

Este código proporciona el acceso a tu nuevo servicio móvil en tu aplicación usando una instancia de la clase MobileServiceClient. El cliente es creado proporcionando el URI y la clave de la aplicación del nuevo servicio móvil. Este campo estático está disponible para todas las páginas de tu aplicación. Necesitas agregar este código manualmente a App.xaml.cs si no estás usando el asistente.

4. Actualiza la aplicación para usar el servicio móvil

Necesitas actualizar tu aplicación de Windows Phone para usar el servicio móvil como un servicio back-end. Solamente necesitas hacer cambios al archivo MainPage.cs del proyecto.

Paso 1: Agrega la definición de clase `ToDoItem`

Agrega una nueva clase modelo, ToDoItem, a tu proyecto. La clase modelo contiene propiedades correspondientes a las columnas de la tabla ToDoItem que creamos anteriormente.

public class ToDoItem
    {
        public string Id { get; set; }

        [Newtonsoft.Json.JsonProperty(PropertyName = "text")]
        public string Text { get; set; }

        [Newtonsoft.Json.JsonProperty(PropertyName = "complete")]
        public bool Complete { get; set; }

        public ToDoItem() {}

        public ToDoItem(string text, bool status = false)
        {
            Text = text;
            Complete = status;
        }
    }

El método JsonPropertyAttribute se usa para definir la relación entre los nombres de las propiedades en la aplicación cliente y los nombres de las columnas en la tabla correspondiente. Es necesario agregar una referencia al paquete Newtonsoft.Json en el proyecto para que esto funcione.

Paso 2: Agrega código para insertar y obtener elementos

Agrega la siguiente instrucción using a MainPage.xaml.cs:

1	using Microsoft.WindowsAzure.MobileServices;

Añade las siguientes líneas en la parte superior de MainPage.xaml.cs para crear una colección enlazada con conocimiento de servicios móviles y una clase proxy para la tabla de la base de datos.

1	private MobileServiceCollection<ToDoItem, ToDoItem> items;
2	private IMobileServiceTable<ToDoItem> todoTable =
3	App.tutsplusdemoClient.GetTable<ToDoItem>();

A continuación crea un método InsertToDoItem para insertar un nuevo elemento a la tabla. Agrega el modificador async al método y añade el siguiente código para insertar un elemento.

public async Task InsertToDoItem(ToDoItem toDoItem)
{
    await todoTable.InsertAsync(toDoItem);
    items.Add(toDoItem);
}

Este código funciona si tu tabla tiene los permisos configurados como Anybody with an Application Key (Cualquiera con una clave de aplicación). Si cambias los permisos para mejorar la seguridad de tu servicio móvil, necesitarás añadir soporte para la autenticación de usuarios. Revisa Añadiendo Autenticación Usando Mobile Services de Azure.

Crea un método RefreshTodoItems que establezca la conexión a la colección de elementos en la tabla ToDoItem, que contiene todos los objetos ToDoItem devueltos por el servicio móvil. Mostramos un cuadro de mensaje si ocurre un problema al ejecutar la consulta.

private async Task RefreshTodoItems()
{
    MobileServiceInvalidOperationException exception = null;
    try
    {
        // Query that returns all items.   
        items = await todoTable.ToCollectionAsync();
    }
    catch (MobileServiceInvalidOperationException e)
    {
        exception = e;
    }
    if (exception != null)
    {
        await new MessageDialog(exception.Message, "Error loading items").ShowAsync();
    }
    else
    {
        ListItems.ItemsSource = items;
        this.ButtonSave.IsEnabled = true;
    }
}

Paso 3: Agrega controles a MainPage.xaml

Ahora tenemos que actualizar MainPage.xaml para mostrar las actividades pendientes por hacer y añadir la capacidad de agregar pendientes por hacer. Más adelante puedes ver cómo podría ser el código XAML para una interfaz de usuario simple que contenga un TextBox para insertar elementos y un ListView para ver los elementos por hacer.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="18,0,18,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    <TextBox Grid.Row="0" Grid.Column="0" Name="TextInput" Text="" />
    <Button Grid.Row ="0" Grid.Column="1" Name="ButtonSave" Click="ButtonSave_Click" IsEnabled="False" Margin="10, 0, 0, 0">Save</Button>
    <Button Grid.Row="1" Grid.ColumnSpan="2" Name="ButtonRefresh" Click="ButtonRefresh_Click" HorizontalAlignment="Stretch">Refresh</Button>
    <ListView  Grid.Row="2" Grid.ColumnSpan="2" Name="ListItems">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CheckBox Name="CheckBoxComplete" IsChecked="{Binding Complete, Mode=TwoWay}" Checked="CheckBoxComplete_Checked" Content="{Binding Text}" Margin="10,5" VerticalAlignment="Center"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

El método InsertToDoItem es invocado al presionar el botón Save (Guardar), e inserta el elemento por hacer en la tabla.

private async void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    var todoItem = new TodoItem { Text = TextInput.Text };
    await InsertTodoItem(todoItem);
}

El método RefreshToDoItems se invoca cuando se presiona el botón Refresh. En este método obtenemos todos los elementos de la tabla.

private async void ButtonRefresh_Click(object sender, RoutedEventArgs e)
{
    ButtonRefresh.IsEnabled = false;

    //await SyncAsync(); // offline sync
    await RefreshTodoItems();

    ButtonRefresh.IsEnabled = true;
}

5. Prueba el servicio móvil

El paso final de este tutorial es revisar los datos almacenados en el servicio móvil. En el portal clásico de Windows Azure, haz clic en la tabla ToDoItem dentro de la pestaña Data (Datos) de tu servicio móvil. Dentro la pestaña Browse (Navegar) puedes ver todos los elementos de la tabla.

Conclusión

Este tutorial demuestra los fundamentos del uso de Mobile Services de Azure como un back-end para una aplicación de Windows Phone. Crear un servicio móvil y usarlo en la aplicación para almacenar datos en la nube es fácil de implementar.

Los escenarios más complejos involucran la compatibilidad con la sincronización de datos fuera de línea. También puedes añadir soporte para la sincronización de datos fuera de línea a la aplicación siguiendo este tutorial. Puedes restringir los permisos de la tabla para permitir que solamente los usuarios que hayan iniciado sesión actualicen la tabla siguiendo este artículo de Envato Tuts+.

Siéntete libre de descargar los archivos fuente del tutorial como referencia. Recuerda configurar la aplicación para usar Mobile Services de Azure antes de implementarla.