Consumiendo una Web API desde una aplicación de la Plataforma Universal de Windows

En esta guía, describiremos los pasos necesarios para consumir una Web API a través de una aplicación UWP.  La aplicación será desarrollada implementado el patrón MVVM.

El siguiente enunciado describe el objetivo de la aplicación que realizaremos.

“Desarrollar una aplicación UWP que permita generar un código de invitación para participar en el entrenamiento Windows 10 Developer Readiness. La aplicación deberá solicitar el Nombre, Apellidos y Correo electrónico de la persona interesada y una vez que los datos sean proporcionados, la aplicación proporcionará a la persona interesada un código con el cual podrá participar en el entrenamiento.

Para obtener el código de invitación, la aplicación enviará los datos proporcionados por el usuario a una Web API, la Web API devolverá como respuesta el código de invitación.”

Requisitos:

Al momento de realizar esta guía, las versiones finales de Windows 10 y Visual Studio 2015 no se han liberado, por lo tanto, utilizaremos lo siguiente:

  • Windows 10 Insider Preview Build 10130. Únete al Programa Windows Insider que ofrece información privilegiada. Sigue las instrucciones para instalar Windows 10 Insider Preview en el siguiente enlace: http://insider.windows.com/

  • Microsoft Visual Studio 2015 RC. El SDK de Windows 10 y todas las herramientas, emuladores, bibliotecas, encabezados y otros archivos que necesitas para desarrollar aplicaciones para Windows 10 se incluyen en esta versión de Visual Studio. También se incluye una versión actualizada del Kit para la certificación de aplicaciones en Windows. No es necesario descargar ninguna otra herramienta para desarrollar aplicaciones para Windows 10.  Sigue las instrucciones del Programa Windows Insider para instalar las herramientas de desarrollo de Windows 10 para Visual Studio 2015 RC en el siguiente enlace: https://go.microsoft.com/fwlink/p/?LinkId=534785
  • Plantilla Template 10 Blank.  Esta es una plantilla exportada de un proyecto de Visual Studio y forma parte del proyecto Template 10. Se recomienda el uso de la plantilla Blank como base para el desarrollo de aplicaciones UWP ya que proporciona implementaciones importantes de muchos de los Patrones, entre ellos MVVM, necesarios para construir aplicaciones UWP ricas y fáciles de mantener. Para obtener la versión más reciente de esta plantilla puedes acceder al repositorio Git en la dirección: http://aka.ms/template10. La versión que utilizaremos en esta guía puedes descargarla en el siguiente enlace: Blank.

Tarea 1: Instalar la plantilla Template 10 Blank 

  1. Abre una ventana del Explorador de Archivos de Windows y navega a This PC > Documents > Visual Studio 2015 > Templates > ProjectTemplates > Visual C#.
  2. Crea una nueva carpeta llamada Template10.
  3. Abre la carpeta Template10 y copia ahí el archivo Blank.zip.
  4. Para verificar que la plantilla se haya instalado correctamente, abre Visual Studio 2015.
  5. Crea un nuevo proyecto utilizando la plantilla Blank. La plantilla se encontrará en el nodo Installed > Templates > Visual C# > Template10.

image

Tarea 2: Crear el Modelo de la aplicación

  1. La Web API que consumiremos recibe los datos a través de un objeto Student. Agrega la siguiente clase Modelo en la carpeta Models de la aplicación.

  2. public class Student
    {
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
    }

  3. La Web API que consumiremos devuelve el código de invitación a través de un objeto Token. Agrega la siguiente clase Modelo en la carpeta Models de la aplicación.
  4. public class Token
    {
        public string Value { get; set; } = string.Empty;
    }

  5. El código de acceso a datos lo pondremos en una clase Modelo que servirá de repositorio. Agrega la siguiente clase Modelo en la carpeta Models de la aplicación.
  6. public static class Repository
    {
    }

  7. En la clase Repository agregaremos un método con el código para invocar a la Web API y obtener el código de invitación.  Agrega el siguiente código para importar el espacio de nombres que tiene la clase HttpClient. A través de esta clase consumiremos la Web API.

    using System.Net.Http;

  8. La Web API recibe y devuelve el resultado en formato JSON. Para poder serializar y Deserializar la información, utilizaremos la clase JsonConvert disponible en el Framework Newtonsoft.Json. Agrega a la aplicación, la referencia al paquete NuGet Newtonsoft.Json.

    image

  9. Agrega a la clase Repository el siguiente código para importar el espacio de nombres que define la clase JsonConvert.

    using Newtonsoft.Json;

  10. Agrega el siguiente código a la clase Repository para definir el método GetToken que enviará los datos a la Web API y devolverá el Código de Invitación que obtendrá como respuesta de la llamada a la Web API.
  11. public static string GetToken(Student data)
    {
        string Token = null;

        // Definir el URL de la aplicación Web API
        string URLWebAPI = “http://mvdemos.cloudapp.net/Win10/ “;

        // Crear un objeto HttpClient para acceder a la Web API
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(URLWebAPI);

        // Especificar que estamos aceptando datos JSON
        client.DefaultRequestHeaders.Accept.Add(
            new System.Net.Http.Headers.
            MediaTypeWithQualityHeaderValue(“application/json”));

        // Serializar los datos del estudiante a formato JSON
        string StudentJSON = JsonConvert.SerializeObject(data);

        // Obtener un tipo HttpContent para pasarlo en la petición
        StringContent Content = new StringContent(StudentJSON,
            System.Text.Encoding.UTF8, “application/json”);

        // Realizar la llamada al recurso Web API y obtener la respuesta
        HttpResponseMessage response = client.PostAsync(
            “api/Win10Dev”, Content).Result;

        // Verificar si la respuesta fue exitosa
        if (response.IsSuccessStatusCode)
        {
            // Deserializar el resultado obtenido
            Token token =
                JsonConvert.DeserializeObject<Token>(
                    response.Content.ReadAsStringAsync().Result);
            // Obtener el valor del código de invitación
            Token = token.Value;
        }
        else
        {
            // La respuesta no fue exitosa. Devolver el estatus de error.
            Token = string.Format(“{0} ({1})”,
                response.StatusCode, response.ReasonPhrase);
        }
        return Token;
    }

Tarea 3: Definir el ViewModel de la aplicación

  1. Abre el archivo ViewModels\MainPageViewModel.cs.
  2. Importa el espacio de nombres de la carpeta Models.
  3. Modifica la clase MainpageViewModel para definir el ViewModel de la aplicación. La clase deberá ser similar a la siguiente.
  4. public class MainPageViewModel : Mvvm.ViewModelBase
    {
        public Student Student{ get; set; }= new Student();

        private string _Token = string.Empty;
        public string Token { get { return _Token; } set { Set(ref _Token, value); } }

        public void Send()
        {
            Token = Repository.GetToken(Student);
        }
    }

Tarea 4: Definir la Vista de la aplicación

  1. Abre el archivo Views\MainPage.xaml.
  2. En la vista XAML, remplaza el contenido del control RelativePanel para que quede de la siguiente forma.
  3. <RelativePanel Padding=”12,0,0,0″ Grid.Row=”1″
                          MaxWidth=”900″ HorizontalAlignment=”Center”>
               <Image x:Name=”Image” Source=”/Images/Windows10.PNG” MaxWidth=”900″ Margin=”10″ />
               <TextBox x:Name=”FirstName”  Margin=”10″
                        Header=”Nombre:” Width=”200″ 
                    Text=”{x:Bind ViewModel.Student.FirstName, Mode=TwoWay}”
                                RelativePanel.Below=”Image” />

               <TextBox x:Name=”LastName” Margin=”10″
                        Header=”Apellidos:” Width=”200″
                        Text=”{x:Bind ViewModel.Student.LastName, Mode=TwoWay}”
                        RelativePanel.Below=”FirstName”/>

               <TextBox x:Name=”Email” Margin=”10″
                        Header=”Correo Electrónico” Width=”300″
                        Text=”{x:Bind ViewModel.Student.Email, Mode=TwoWay}”
                        RelativePanel.Below=”LastName”/>

               <Button x:Name=”Send” Margin=”10″
                       Content=”Solicitar código”
                           Click=”Send_Click”   
                           RelativePanel.Below=”Email”
                           Background=”#0080FF” Foreground=”white”/>

               <TextBox x:Name=”Token” Margin=”10″
                        Header=”Código de invitación” Width=”300″
                        Text=”{x:Bind ViewModel.Token, Mode=TwoWay}”
                        RelativePanel.Below=”Send”
                         />
           </RelativePanel>

  4. Examina detenidamente el código XAML agregado .
    El código está utilizando un nuevo tipo de enlace conocido como Compiled Binding. Este nuevo tipo de Enlace requiere que las propiedades que se están enlazando se encuentren definidas en la clase MainPage, en otras palabras, en el code-behind. Abre el archivo code-behind MainPage.xaml.cs.
  5. Localiza la siguiente línea de código en el constructor de la clase.

    DataContextChanged += (s, e) => ViewModel = DataContext as MainPageViewModel;

    Este código, almacena en la propiedad ViewModel definida líneas más abajo en el mismo archivo, el valor del Contexto de Datos (una instancia del ViewModel) para permitir el enlace a datos compilado.

  6. En la clase MainPage, agrega el siguiente código para invocar al método Send definido en el ViewModel cuando el usuario dé Clic en el botón “Solicitar código”.
  7. private void Send_Click(object sender, RoutedEventArgs e)
    {
        ViewModel.Send();
    }

  8. Compila y ejecuta la aplicación.
    Deberá mostrarse la aplicación similar a la siguiente.

    image

  9. Proporciona tu Nombre, Apellidos, Correo y da clic en Solicitar código.
    Te será mostrado el código de invitación.

    image

Con este paso hemos finalizado la creación de la aplicación. Espero les sea útil.

 

 

 

   

 

Esta entrada fue publicada en C#, Universal Windows Platform, UWP, Windows 10. Guarda el enlace permanente.

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