Paso a paso: Windows Azure Mobile Services
Introducción
Windows Azure Mobile Services es el nuevo servicio de la plataforma Windows Azure que nos permite conectar y crear nuestras aplicaciones con un backend en Windows Azure. No solo nos proporciona la infraestructura sino que además pone a nuestra disposición todas las herramientas necesarias para hacerlo de forma muy rápida y sencilla.
Entre sus capacidades podemos encontrar:
- Alojamiento de datos estructurados en el cloud.
- Autenticación de usuarios.
- Extensión de la plataforma con scripts javascript en el lado del servidor para implementar la lógica que necesitemos.
- Notificaciones push.
- Servicio de envío de emails y SMS, para poder interactuar de forma más rica con nuestra app.
- Escalable.
Actualmente Windows Azure Mobile Services soporta 3 plataformas:
- Windows 8.
- Windows Phone 8.
- iOS (con su plataforma para envío de notificaciones push).
Además el servicio nos creara una API REST para que podamos interactuar con ella con otras plataformas.
En este paso a paso vamos a ir realizando una aplicación que haga uso las capacidades más importantes que nos proporciona el servicio y aprendamos a usarlas para nuestros proyectos.
Requisitos para realizar el paso a paso
Para poder realizar este paso a paso necesitamos tener al menos una suscripción de Windows Azure y Visual Studio 2012.
Suscripción Windows Azure
Para la suscripción de Windows podemos ver en el siguiente enlace las distintas opciones que tenemos a nuestra disposición: https://geeks.ms/blogs/dsalgado/archive/2012/11/27/probar-gratis-windows-azure.aspx
Visual Studio 2012
En cuanto a Visual Studio 2012, tenemos disponible una versión Express que podemos descargar del siguiente enlace: https://www.microsoft.com/visualstudio/eng/downloads#d-express-windows-8
Con estos dos requisitos estamos preparados para empezar.
Paso 1: Creación del servicio
Una vez tenemos dada de alta nuestra suscripción es momento de entrar en el panel de administración de Windows Azure.
Para crear nuestro servicio pulsamos abajo a la izquierda en el botón “+ Nuevo”.
Luego pulsaremos en Proceso-> Servicio Móvil -> Crear
Para terminar de crear nuestro servicio debemos introducir un nombre en el campo “Dirección URL” y los otros campos como se muestra en la siguiente imagen:
Después tendremos que crear un nuevo servidor de bases de datos donde se creará nuestra base de datos. Tendremos que introducir un “Nombre” y crear un usuario para poder acceder con su correspondiente password.
Y ya tenemos creado nuestro servicio. Una vez que haya terminado de crearlo saldrá en nuestra lista de servicios móviles.
Paso 2: Creación de la app Windows 8
Una vez tenemos el servicio creado, tenemos que proceder a configurar el servicio y crear nuestra app de Windows 8.
Para ello entramos dentro de nuestro servicio en el portal, y tendremos una pantalla como la siguiente.
Como vemos tenemos una opción que pone “> Crear una nueva aplicación de la Tienda Windows” . Le pulsamos y nos saldrán 3 sencillos pasos.
El primer paso es obtener las herramientas necesarias. Si ya hemos descargado anteriormente Visual Studio 2012, ahora solo nos quedará descargar el SDK de servicios móviles.
El segundo paso es presionar el botón de “Crear tabla TodoItem” para crear nuestra tabla en nuestra base de datos.
El tercer paso es descargar nuestro proyecto de la aplicación de Windows 8. En nuestro caso lo descargaremos en el lenguaje C# .
Si la compilamos y ejecutamos podremos ver un gestor de tareas, en el que podemos añadir tareas nuevas y marcarlas como completadas.
Entender cómo funciona
Si abrimos la aplicación y añadimos alguna tarea estás se guardarán en nuestra base de datos en Windows Azure. Si volvemos a nuestro portal de gestión de Windows Azure, dentro de nuestro servicio, vemos arriba que hay una sección que pone “Datos”:
Ahí podemos ver como tenemos nuestra tabla TodoItem, y tiene un número de registros, si entramos podemos ver los datos de esos registros.
Por otro lado la app de Windows 8 podemos ver como en App.xaml.cs hay una propiedad estática llamada MobileServices, para poder hacer uso del servicio desde cualquier parte de la aplicación.
Si entramos en MainPage.xaml.cs vemos que tenemos los distintos métodos para gestionar nuestros “TodoItem” , si vemos en el caso de insertar:
La línea “await todoTable.InsertAsync(todoItem);” lo que hace es añadir a nuestro servicio un nuevo dato. De forma muy sencilla en una sola línea.
Para sacar los datos vemos que está el método “RefreshTodoItems()” :
Este método lo que hace es sacar todos los TodoItems que no estén completos. Con “todoTable.ToCollectionView()” lo que hacemos es sacar todas los TodoItems, pero si añadimos “todoTable.Where(todoItem=> todoItem.Complete == false).ToCollectionView()” le estamos diciendo que solo queremos las que no estén completadas.
Como podéis ver con estas dos líneas ya podemos hacer la inserción de datos y la lectura de estos de nuestra base de datos mediante nuestro servicio.
Paso 3: Autenticación de usuarios
En este paso vamos a ver como poder realizar autenticación de usuarios y configurar el servicio para que solo los usuarios autenticados puedan acceder a nuestra tabla TodoItem.
Preparando el servicio
Para ello lo primero que vamos a hacer es entrar en el portal de Windows Azure, y allí ir directamente al panel de configuración de nuestro servicio móvil. Allí en la pestaña “Datos” vamos a la lista de tablas, y seleccionamos TodoItem. Ahora tenemos que ir a la sección “Permisos” y poner “Solo usuarios autenticados” a las cuatro acciones. Si quisiéramos podríamos dejar que el permiso de lectura fuera para cualquier usuario con la API key. Es decir que no hiciera falta autenticarse para leer, pero si para todo lo demás.
Preparando la aplicación
Una vez tenemos los permisos de la tabla ya guardada, si ahora ejecutamos la aplicación e intentamos añadir una nueva tarea, veremos cómo nos da un error, ya que no estamos autenticados.
Lo primero que debemos hacer para poder autenticarnos es ir a nuestro panel de desarrollador de Windows 8 .
Para ello primero tenemos que tener una cuenta de desarrollador. Una vez dentro, debemos dar a “Enviar una aplicación” en el menú de la izquierda.
Nos saldrán una serie de pasos. Solo tenemos que hacer el primero “Nombre de la aplicación” y reservar un nombre para nuestra aplicación.
Ahora volvemos a Visual Studio, y hacemos clic derecho sobre nuestro proyecto (no sobre la solución) y seleccionamos Tienda-Asociar aplicación.
Nos pedirá iniciar sesión con nuestro usuario de desarrollador de la tienda.
Una vez autenticados con nuestra cuenta, veremos una lista de nuestras aplicaciones reservadas en la tienda . Seleccionamos la que acabemos de reservar, damos a siguiente y pulsamos el botón asociar.
Esto lo tenemos que hacer para que nuestra aplicación se registre y podamos obtener unos datos para poder configurar nuestro servicio para poder autenticarnos y más adelante poder mandar notificaciones push.
El siguiente paso es ir a https://msdn.microsoft.com/es-es/live//default.aspx y ahí pulsar en “Mis aplicaciones” .
En la lista de apps que nos saldrán, seleccionamos la nuestra y damos a “Editar config” .
Vamos a la sección “Configuración de API” . De esta página tenemos que guardar los siguientes datos para luego introducirlos en el panel de nuestro servicio móvil: id. De cliente, Clave secreta de cliente y SID de paquete.
Vamos a nuestro panel del servicio móvil y allí en la sección “Identidad” , tenemos que copiar en “Configuración de la cuenta Microsoft” nuestro id de cliente que guardamos antes, y nuestra clave secreta. Y presionamos en guardar.
Ahora vamos a la sección “Inserción” y allí introducimos de nuevo nuestra clave secreta de cliente y además introducimos el SID del paquete, este paso es para las notificaciones push, pero así dejamos ya todo configurado.
Lo último que tenemos que hacer es nuestro proyecto de Windows 8, en MainPage.xaml.cs ir al método “OnNavigatedTo” y ponerlo async, y añadir la primera línea de código. Quedaría así:
Con la última línea, cuando se abra la aplicación nos pedirá que nos autentiquemos con nuestra cuenta de Microsoft.
Paso 4: Scripts del lado de servidor
Como hemos visto hasta ahora, con Windows Azure Mobile Services es muy sencillo crear el backend para nuestra aplicación. Pero no solo es una forma sencilla de hacerlo, sino que también es muy potente. Esto es gracias a la capacidad de poder ejecutar scripts en el lado de servidor cuando realicemos alguna operación CRUD( Create, Read, Update, Delete) es decir, cuando insertamos, leemos, actualizamos o borramos algún dato de la tabla, podemos interceptar antes la petición y programar un comportamiento mediante un script. Estos script están escritos en Javascript y se escriben directamente en el portal de gestión de nuestro servicio.
Esto es muy interesante para poder realizar validación de datos o como en nuestro caso, guardar el id del usuario que ha introducido la tarea.
Para ello lo primero que vamos a hacer es en nuestro proyecto, en MainPage.xaml.cs vemos que tenemos la definición de nuestra clase TodoItem. Lo que vamos a hacer es añadir un campo más que sea, UserId. El código quedaría así:
Lo que vamos a hacer ahora es crear un script en el servidor que cada vez que introduzcas un TodoItem, meta en su campo UserId, el id del usuario que lo ha añadido. Para ello tenemos que ir a “Datos” en nuestro portal de gestión de nuestro servicio móvil. Ahora entramos dentro de nuestro TodoItem. Y ahí en la sección Script. En esta sección podemos definir los scripts para cada acción sobre la tabla (Leer, Insertar, Actualizar y Borrar). Vamos a ir al script de insertar que ahora mismo tiene esto:
Lo que vamos a hacer es añadir una línea de código que sea: item.userId = user.userId;
Como hemos añadido un nuevo campo a nuestra clase TodoItem al insertarlo, el sistema detectará que ahora tiene una propiedad más y nos creara en nuestra base de datos una nueva columna. No perderemos ningún dato.
El script quedaría así:
Ahora si vamos a la sección “Examinar” dentro de datos, podremos ver, que tenemos una columna más que nos pondrá nuestro UserId.
Paso 5: Notificaciones Push
En este paso vamos a ver como poder mandar notificaciones push desde el servicio. En nuestro caso vamos a hacer, que cada vez que alguien complete una tarea, mande una notificación toast a su creador.
Lo primero que tenemos que hacer es crear una nueva propiedad en nuestra clase TodoItem que quedaría así:
Lo siguiente es, registrar el “channel” cuando insertemos un elemento. Cada cliente en una app tiene un “canal” al que se le podrán enviar las notificaciones para que le lleguen a él. Para sacar el canal lo que haremos será.
Lo que haremos será en el método insertar, vamos a añadir dos líneas de código para conseguir el canal y metérselo a nuestro TodoItem:
Ahora cada vez que insertemos un nuevo “TodoItem” llevará el “canal” de la persona que lo creo, al que se le enviarán las notificaciones si se completa.
Como ya tenemos registrado el canal de la persona que añada cada “TodoItem” , lo que vamos a hacer ahora es cuando actualicemos un objeto, mandarle una notificación a ese canal. Para ello vamos a la sección “Datos” de nuestro portal de gestión. Luego seleccionamos nuestro “TodoItem” y vamos a la sección Scripts. Marcamos el script “Actualizar” y lo dejamos así:
Y ahora cada vez que agreguemos un nuevo “TodoItem” si lo completamos veremos cómo nos salta una notificación toast avisando que ha sido completada.
Conclusión
Como vemos con Windows Azure Mobile Services podemos cubrir la mayoría de escenarios que necesitamos para una app móvil y de Windows 8, pero de una forma muy sencilla y mucho más rápida. Además con Windows Azure tenemos todas las ventajas que tiene un servicio en el cloud. Podemos escalarlo de acuerdo a nuestras necesidades y tenemos un 99.9% de disponibilidad.
Gracias a Windows Azure Mobile Services es el momento de crear el backend a nuestra aplicación. ¿A qué estás esperando?
¡Un saludo!
Adrián Fernández (@tracker086).