Xamarin Forms & Azure Mobile Services

Después del éxito que ha tenido la última entrega de las 4sessions de Techdencias voy ha ampliar un poco la explicación del ejemplo que utilizamos y compartir los materiales para que todo el mundo pueda jugar un poco ;-)

El Juego de Quien es Quien !!!

Este ejemplo es un sencillo juego de quien es quien utilizando Xamarin Forms con animaciones, que utiliza Azure Mobile Services para validar las preguntas realizadas por el jugador y poder descubrir que personaje de los Simpson está oculto tras la bolsa de papel.

El resultado del juego seria este:

Juego

 

1. Back-end en AZURE

Lo primero que necesitamos es hacer la parte de Back-end de la forma más sencilla posible y para eso tenemos los Mobile Services de AZURE.

1.1 Primero de todos creamos un nuevo servicio

MobileService

1.2 Creamos dos Tablas para utilizar en la lógica del juego:

  • Simpson: El personaje de los Simpson y las caracteristicas que utilizaremos para poder reconocer al personaje, como si tiene el pelo azul, si es niño, etc.
  • Question: La lista de preguntas y la referencia a la característica del personaje que estamos buscando.

MobileServiceData

1.3 Crearemos una Custom API: nuestra consulta no es solo acceder a los datos de las tablas, tenemos que tener un algoritmo que nos confirme si el simpson oculto coincide con la pregunta que estamos realizando y nos responda si es verdader o falso. Por eso creamos una API personalizada para poder tener esta funcionalidad.

CustomApi

1.4 Script con el algoritmo: finalmente modificamos el scritp para validar si el Simpson oculto tiene la característica que se pregunta desde la APP.

Script

2. El juego con Xamarin.Forms

Para realizar el juego me he basado en un ejemplo ya existente que me pareció perfecto como base para mi juego.  Xuzzle

Lo primero que hay que hacer es bajarse la librería cliente de AZURE Mobile Service que por suerte ya la tenemos en PCL para utilizar sin tantos problemas desde Xamarin Forms.

MobileS

Esto instalará las librerías necesarias en todas las plataformas para su correcto funcionamiento.

Una cosa importante es que hay que ir a cada plataforma y inicializar la librería para que funcione.

Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init();

  • Android: en el MainActivity 
  • iOS: en el AppDelegate
  • WP: No es necesario.

Luego simplemente creamos una clase para utilizar el servicio en el proyecto PCL donde en el constructor configuramos el cliente con los datos del servicio que hemos creado en AZURE.

    private readonly MobileServiceClient _client;
    public AzureMobileService()
    {
        _client = new MobileServiceClient("https://w-w.azure-mobile.net/",
            "PRDEWjvMXLFUSOFCqRkRWlxDpAXUdP72");
    }

Finalmente creamos la función donde se consulta al servicio si el personaje cumple con la pregunta seleccionada.

     public async Task<string> IsQuestion(string questionId, int player)
     {
         var request = new Dictionary<string, string>
         {
             {"QuestionId", questionId},
             {"SimpsonId", player.ToString()}
         };
        var result = await _client.InvokeApiAsync<Answer>("simpson", System.Net.Http.HttpMethod.Get, request);

        return (result.Result) ? "SI" : "NO";
    }

Una vez Creado el servicio la puedo consumir desde cualquier parte de la APP. Lo ideal sería utilizar un ViewModel para esto, pero eso lo dejaremos para futuros ejemplos. Por el momento lo consumo directamente desde el click del botón.

    btn.Clicked += async (sender, args) =>
      {
          lblResult.Text = "--";
          lblResult.Text = await service.IsQuestion(list.SelectedIndex.ToString(), Player);
      };

 

Como habéis comprobado consumir un AZURE Mobile Service desde Xamarin Forms es un juego de niños ;-)

Os dejo el material de la charla para que juguéis un poco.      PPT  Material

 

Anuncios

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