Implementando un poco de JSON y MD5 con el API de Marvel Comics (Parte 3/3)

En al artículo uno de esta mini serie de artículos vimos como aprender a utilizar en nuestro favor el API de Marvel Comics y como hacer consultas a un archivo JSON sin necesidad de una aplicación. En el artículo dos de esta serie creamos las bases del proyecto así como las clases que íbamos a utilizar en nuestra aplicación. En este artículo es momento de unificarlo todo para tener un gran resultado.

Comencemos por la interfaz. Será algo sumamente sencillo, únicamente utiliza una caja de búsqueda y un control de imagen, nada más.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Marvel_Comics_Heroes.MainPage">
 
<Grid Margin="0" Background="Gray">
<SearchBox x:Name="txtSearch" HorizontalAlignment="Right" Height="35" Margin="0,50,50,0" VerticalAlignment="Top" Width="270" Tapped="txtSearch_Tapped"/>
<MediaElement HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="player"/>
<Image x:Name="imgProfile" HorizontalAlignment="Left" Height="450" Margin="50,50,0,0" VerticalAlignment="Top" Width="300"/>
</Grid>
 
</Page>

Después de esto, como puedes ver ya tienes un manejador de eventos para la caja de búsqueda, específicamente para su evento Tapped, y es ahí en donde comenzaremos con la parte lógica de la aplicación.

private void txtSearch_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
string queriedCharacter = txtSearch.QueryText;
 
Uri targetUri = new Uri(ServiceDataHelper.QueryBuilder("characters", "8", "name="+queriedCharacter));
 
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(targetUri);
try
{
request.BeginGetResponse(new AsyncCallback(ReadWebRequestCallbackCharacter), request);
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
}
}

Como puedes ver, solo debes obtener la cadena de texto del control de búsqueda y en base a ella crear la nueva URL con la que podrás hacer la consulta adecuada, para poder hacerlo usas la clase HttpWebRequest y solo debes esperar la respuesta por medio de un Callback, ese método es el siguiente.

private async void ReadWebRequestCallbackCharacter(IAsyncResult callbackResult)
{
try
{
HttpWebRequest myRequest = (HttpWebRequest)callbackResult.AsyncState;
HttpWebResponse myResponse = (HttpWebResponse)myRequest.EndGetResponse(callbackResult);
using (StreamReader httpwebStreamReader = new StreamReader(myResponse.GetResponseStream()))
{
string results = httpwebStreamReader.ReadToEnd();
JObject gettedInformation = JObject.Parse(results);
JArray characterInformation = (JArray)gettedInformation["data"]["results"];
 
foreach (var property in characterInformation)
{
character = new Character();
JObject tmp = (JObject)property;
character.Name = tmp["name"].ToString();
character.Description = tmp["description"].ToString();
character.Thumbnail = tmp["thumbnail"]["path"].ToString();
character.ThumbnailType = tmp["thumbnail"]["extension"].ToString();
}
}
 
myResponse.Dispose();
 
await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =&gt;
{
VoiceActions.ResponseAction(character.Description, player);
imgProfile.Source = ServiceDataHelper.ImagePathBuilder(character.Thumbnail, character.ThumbnailType, "portrait_uncanny");
});
}
catch (Exception e)
{
Debug.WriteLine(e);
}
}

El método puede parecer complejo pero en esencia solo obtiene la consulta recibida, la convierte en un stream y en base a clases obtenidas del paquete de NuGet de JSON podrás comenzar a crear un objeto de tipo Character, por último, ya que tienes un objeto no debes olvidar que todo lo que acabas de hacer no fue hecho en un hilo en segundo plano, lo que quiere decir que debes pasarlo al hilo de la UI y para eso utilizarás el método RunAsync de la clase Dispatcher.

Ya en el hilo de la interfaz podrás ejecutar la voz gracias a la clase VoiceActions y podrás obtener la imagen del personaje gracias al método ImagePathBuilder. Al final del día, esto es lo que obtendrás con el ejercicio (no lo puedes ver en la imagen, pero al momento de buscar al personaje la aplicación deberá darte la descripción del personaje mediante la voz).

Espero que lo disfrutes!! Ya lo sabes, cualquier duda que tengas avísame por comentarios o redes sociales. ¡Nos vemos!

Deja una respuesta Cancelar la respuesta