SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
Ing. Vicente G. Guzman
Consumiendo servicios RESTful en Xamarin.Forms
Introducción
Normalmente como desarrolladores nos toparemos con la parte en donde debemos de mostrar
información que provenga de algún servicio, es por eso que, en este artículo, aprenderemos cómo
consumir un servicio RESTful en una aplicación .Net Standard de Xamarin.Forms.
¿Qué son los servicios RESTful?
Representational State Transfer (REST) es un estilo arquitectónico que especifica restricciones como la
interfaz uniforme, que, si se aplica a un servicio web, induce propiedades deseables como el rendimiento,
la escalabilidad y la modificabilidad que permiten que los servicios funcionen mejor en la Web.
Comencemos
Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado
esto vamos a utilizar un servicio RESTful falso en nuestra aplicación. Para esto solo busquemos
"JsonPlaceholder" y abramos el primer enlace.
https://jsonplaceholder.typicode.com/
Ahora, tenemos que encontrar un punto final para usar en nuestra aplicación. Desplacémonos hacia abajo
en la página del marcador de posición JSON y encontraremos los recursos.
Estos son todos los puntos finales, los cuales podemos usarlos en nuestra aplicación. En este ejemplo,
vamos a usar el punto final "/posts". Por lo tanto, hagamos clic en el enlace y veamos el resultado JSON.
Posterior a esto, copiemos el enlace del punto final para usarlo en nuestra aplicación.
Ing. Vicente G. Guzman
Después de presionarlo podemos ver los resultados como se muestra a continuación:
Ahora, tenemos que convertir este JSON en clase C#. Entonces, vamos a usar una forma fácil de convertir
JSON a C# usando "Json2csharp". Abramos este enlace y peguemos el punto que copiamos con
anterioridad. Veremos que esto generará automáticamente una clase C# de JSON, como se muestra a
continuación.
Ing. Vicente G. Guzman
Ahora, copiemos el código de clase, puesto que lo vamos a usar estos en nuestra aplicación. Regresemos
a nuestro proyecto antes creado en Visual Studio.
Generemos una nueva página (ContentPage) a nivel raíz de nuestra solución, la cual denominaremos
PostRestPage y en esta peguemos el código de la clase y la URL en el code behind.
Para consumir el servicio web, debemos agregar dos paquetes a nuestro proyecto. Estos se deben de
agregar en cada proyecto de la solución.
JSON | Net.Http
Para agregar estos, debemos de hacer clic derecho en la solución -> Administrar paquetes NuGet para la
solución (Manage NuGet Packages for Solution).
Ing. Vicente G. Guzman
Ahora, busquemos Newtonsoft.Json, verifiquemos que todos los proyectos estén seleccionados e
instalemos el paquete en la solución.
De forma similar, busquemos el segundo paquete "Microsoft.Net.Http" e instálemoslo en todos los
proyectos de la solución.
Ahora, agreguemos los siguientes espacios de nombres de paquetes en la parte superior de nuestro
archivo PostRestPage.xaml.cs
using System.Net.Http; | using Newtonsoft.Json; | using System.Collections.ObjectModel;
Ing. Vicente G. Guzman
Ahora, editemos nuestro XAML para agregar una lista simple, en la cual mostraremos la lista de
publicaciones provenientes de nuestro servicio.
Lo que hicimos fue declarar una lista en la cual vinculamos el título y el cuerpo a la celda de texto.
Posteriormente editemos él .CS, e insertemos el siguiente código para obtener la lista pertinente:
public partial class PostRestPage : ContentPage
{
private const string url = "https://jsonplaceholder.typicode.com/posts";
private HttpClient _Client = new HttpClient();
private ObservableCollection<Post> _post;
public PostRestPage ()
{
InitializeComponent ();
}
protected override async void OnAppearing()
{
var content = await _Client.GetStringAsync(url);
var post = JsonConvert.DeserializeObject<List<Post>>(content);
_post = new ObservableCollection<Post>(post);
Post_List.ItemsSource = _post;
base.OnAppearing();
}
}
Ing. Vicente G. Guzman
Explicación del código línea por línea
Dentro de nuestra clase MainPage, se coloca la URL, luego se crea e inicializa el objeto de HttpClient, y
después de esto, creamos una colección observable. Esta colección se inicializa más adelante en el método
de aparición y se asigna a nuestra vista de lista que se realiza en nuestro archivo XAML.
Ahora, en el método OnAppearing, usamos el objeto de nuestro HttpClient() y pasamos la URL en él.
Después de esto, deserializamos el contenido proveniente de nuestra solicitud y luego inicializamos
nuestra colección observable. Después de esto, establecemos el origen del elemento de nuestra lista en
la colección observable.
Comprobemos que lo que realizamos funcione, por ende, ejecutemos nuestra aplicación, pero antes
editemos la vista que se va a lanzar, esto en el App.xaml.cs: MainPage = new PostRestPage();
Como vemos, aquí se muestra la lista de publicaciones provenientes de nuestro servicio, en el cual se
muestran el título y el cuerpo de todas las publicaciones.
Con esto hemos terminado, pueden descargar el código en el siguiente repositorio:
https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/RestFul_Demo

Más contenido relacionado

La actualidad más candente

proyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysqlproyecto conexion netbeans con Mysql
proyecto conexion netbeans con MysqlBrenditaLr
 
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slides
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slidesSpring - Part 2 - Autowiring, Annotations, Java based Configuration - slides
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slidesHitesh-Java
 
Criando e consumindo Web Services (REST) com o CakePHP
Criando e consumindo Web Services (REST) com o CakePHPCriando e consumindo Web Services (REST) com o CakePHP
Criando e consumindo Web Services (REST) com o CakePHP2km interativa!
 
What is component in reactjs
What is component in reactjsWhat is component in reactjs
What is component in reactjsmanojbkalla
 
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...Edureka!
 
Observer and Decorator Pattern
Observer and Decorator PatternObserver and Decorator Pattern
Observer and Decorator PatternJonathan Simon
 
The redux saga begins
The redux saga beginsThe redux saga begins
The redux saga beginsDaniel Franz
 
Create rest service in osb 12c over database table
Create rest service in osb 12c over database tableCreate rest service in osb 12c over database table
Create rest service in osb 12c over database tablecoolaboration
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
Refactorización de Aplicaciones Orientadas a Objetos a Aspectos
Refactorización de Aplicaciones Orientadas a Objetos a AspectosRefactorización de Aplicaciones Orientadas a Objetos a Aspectos
Refactorización de Aplicaciones Orientadas a Objetos a AspectosJuan Carlos Olivares Rojas
 
Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGetting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGustavo Costa
 
Вебинар «Схемы бизнес-процессов в различных нотациях»
Вебинар «Схемы бизнес-процессов в различных нотациях»Вебинар «Схемы бизнес-процессов в различных нотациях»
Вебинар «Схемы бизнес-процессов в различных нотациях»Алеся Гарасимович
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e FuturesHelder da Rocha
 

La actualidad más candente (20)

Hibernate
HibernateHibernate
Hibernate
 
proyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysqlproyecto conexion netbeans con Mysql
proyecto conexion netbeans con Mysql
 
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slides
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slidesSpring - Part 2 - Autowiring, Annotations, Java based Configuration - slides
Spring - Part 2 - Autowiring, Annotations, Java based Configuration - slides
 
Criando e consumindo Web Services (REST) com o CakePHP
Criando e consumindo Web Services (REST) com o CakePHPCriando e consumindo Web Services (REST) com o CakePHP
Criando e consumindo Web Services (REST) com o CakePHP
 
What is component in reactjs
What is component in reactjsWhat is component in reactjs
What is component in reactjs
 
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...
 
Arquitectura multicapa
Arquitectura multicapaArquitectura multicapa
Arquitectura multicapa
 
Observer and Decorator Pattern
Observer and Decorator PatternObserver and Decorator Pattern
Observer and Decorator Pattern
 
The redux saga begins
The redux saga beginsThe redux saga begins
The redux saga begins
 
Tic m6
Tic m6Tic m6
Tic m6
 
React js
React jsReact js
React js
 
Create rest service in osb 12c over database table
Create rest service in osb 12c over database tableCreate rest service in osb 12c over database table
Create rest service in osb 12c over database table
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Refactorización de Aplicaciones Orientadas a Objetos a Aspectos
Refactorización de Aplicaciones Orientadas a Objetos a AspectosRefactorización de Aplicaciones Orientadas a Objetos a Aspectos
Refactorización de Aplicaciones Orientadas a Objetos a Aspectos
 
Getting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) AngularGetting Started with NgRx (Redux) Angular
Getting Started with NgRx (Redux) Angular
 
MATERIAL.pdf
MATERIAL.pdfMATERIAL.pdf
MATERIAL.pdf
 
Вебинар «Схемы бизнес-процессов в различных нотациях»
Вебинар «Схемы бизнес-процессов в различных нотациях»Вебинар «Схемы бизнес-процессов в различных нотациях»
Вебинар «Схемы бизнес-процессов в различных нотациях»
 
Stored procedures
Stored proceduresStored procedures
Stored procedures
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e Futures
 
Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 

Similar a Consumiendo servicios Restful en Xamarin.Forms

Consumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaConsumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaVicente Gerardo Guzman Lucio
 
Aprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAbimael Desales López
 
Cliente servidor tron_27oct
Cliente servidor tron_27octCliente servidor tron_27oct
Cliente servidor tron_27octdcanales2010
 
Cliente servidor tron
Cliente servidor tronCliente servidor tron
Cliente servidor trontallarinxD
 
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)Marco Antonio Ordoñez Valverde
 
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...Ivan Petrlik
 
Linq to sql 6
Linq to sql 6Linq to sql 6
Linq to sql 6jcfarit
 
Cross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netCross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netAlberto Diaz Martin
 
CrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETCrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETAlberto Diaz Martin
 
Linq to sql 7
Linq to sql 7Linq to sql 7
Linq to sql 7jcfarit
 
Curso de Desarrollo Web 2
Curso de Desarrollo Web 2Curso de Desarrollo Web 2
Curso de Desarrollo Web 2juliocombativo
 

Similar a Consumiendo servicios Restful en Xamarin.Forms (20)

Consumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaConsumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en Alexa
 
Aprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDB
 
Ruby on Rails Workshop
Ruby on Rails WorkshopRuby on Rails Workshop
Ruby on Rails Workshop
 
Cliente servidor tron_27oct
Cliente servidor tron_27octCliente servidor tron_27oct
Cliente servidor tron_27oct
 
Cliente servidor tron
Cliente servidor tronCliente servidor tron
Cliente servidor tron
 
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)
Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)
 
Dar lab1819
Dar lab1819Dar lab1819
Dar lab1819
 
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
 
Servicios web
Servicios webServicios web
Servicios web
 
Web Services JAX-RS RESTful y SOAP
Web Services JAX-RS RESTful y SOAPWeb Services JAX-RS RESTful y SOAP
Web Services JAX-RS RESTful y SOAP
 
Linq to sql 6
Linq to sql 6Linq to sql 6
Linq to sql 6
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Cross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.netCross development - React para desarrolladores de asp.net
Cross development - React para desarrolladores de asp.net
 
CrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NETCrossDvlpu - REACT para desarrolladores de ASP.NET
CrossDvlpu - REACT para desarrolladores de ASP.NET
 
Manual De Ajax En Espanol
Manual De Ajax En EspanolManual De Ajax En Espanol
Manual De Ajax En Espanol
 
Ajax
AjaxAjax
Ajax
 
Conexión de Base de Datos
Conexión de Base de DatosConexión de Base de Datos
Conexión de Base de Datos
 
Linq to sql 7
Linq to sql 7Linq to sql 7
Linq to sql 7
 
Curso de Desarrollo Web 2
Curso de Desarrollo Web 2Curso de Desarrollo Web 2
Curso de Desarrollo Web 2
 
Ebook tutorialspringbootheroku
Ebook tutorialspringbootherokuEbook tutorialspringbootheroku
Ebook tutorialspringbootheroku
 

Más de Vicente Gerardo Guzman Lucio

Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsVicente Gerardo Guzman Lucio
 

Más de Vicente Gerardo Guzman Lucio (20)

GPPB2024 - Integrando ChatGPT en Power Automate
GPPB2024 - Integrando ChatGPT en Power AutomateGPPB2024 - Integrando ChatGPT en Power Automate
GPPB2024 - Integrando ChatGPT en Power Automate
 
Introducción a Amazon Alexa.pptx
Introducción a Amazon Alexa.pptxIntroducción a Amazon Alexa.pptx
Introducción a Amazon Alexa.pptx
 
Creando un Chatbot en C# con ChatGPT.pdf
Creando un Chatbot en C# con ChatGPT.pdfCreando un Chatbot en C# con ChatGPT.pdf
Creando un Chatbot en C# con ChatGPT.pdf
 
ChatGPT & Alexa.pptx
ChatGPT & Alexa.pptxChatGPT & Alexa.pptx
ChatGPT & Alexa.pptx
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
 
Conectando un Azure Bot con una Alexa Skill
Conectando un Azure Bot con una Alexa SkillConectando un Azure Bot con una Alexa Skill
Conectando un Azure Bot con una Alexa Skill
 
Azure DevOps y Blazor Web Assembly
Azure DevOps y Blazor Web AssemblyAzure DevOps y Blazor Web Assembly
Azure DevOps y Blazor Web Assembly
 
Desarrollo de Interfaces de Voz: Alexa Skills
Desarrollo de Interfaces de Voz: Alexa SkillsDesarrollo de Interfaces de Voz: Alexa Skills
Desarrollo de Interfaces de Voz: Alexa Skills
 
Blazor vs VUE
Blazor vs VUEBlazor vs VUE
Blazor vs VUE
 
Introducción a Blazor
Introducción a BlazorIntroducción a Blazor
Introducción a Blazor
 
Infraestructura como Código en Azure
Infraestructura como Código en AzureInfraestructura como Código en Azure
Infraestructura como Código en Azure
 
Diseño de Experiencias de Voz con Amazon Alexa
Diseño de Experiencias de Voz con Amazon AlexaDiseño de Experiencias de Voz con Amazon Alexa
Diseño de Experiencias de Voz con Amazon Alexa
 
Alexa Skill con .NETCore & AWS Lambda
Alexa Skill con .NETCore & AWS LambdaAlexa Skill con .NETCore & AWS Lambda
Alexa Skill con .NETCore & AWS Lambda
 
Skills Nights - Vol.III - Primeros Pasos
Skills Nights - Vol.III - Primeros PasosSkills Nights - Vol.III - Primeros Pasos
Skills Nights - Vol.III - Primeros Pasos
 
¿Qué es la Nube?
¿Qué es la Nube?¿Qué es la Nube?
¿Qué es la Nube?
 
La era de los Chatbots
La era de los ChatbotsLa era de los Chatbots
La era de los Chatbots
 
Android 64x con Xamarin.Forms
Android 64x con Xamarin.FormsAndroid 64x con Xamarin.Forms
Android 64x con Xamarin.Forms
 
Creando nuestra propia Skill de YouTube
Creando nuestra propia Skill de YouTubeCreando nuestra propia Skill de YouTube
Creando nuestra propia Skill de YouTube
 
Alexa Skill en 5 pasos
Alexa Skill en 5 pasosAlexa Skill en 5 pasos
Alexa Skill en 5 pasos
 
Alexa, ¿chatbot o asistente personal?
Alexa, ¿chatbot o asistente personal?Alexa, ¿chatbot o asistente personal?
Alexa, ¿chatbot o asistente personal?
 

Consumiendo servicios Restful en Xamarin.Forms

  • 1. Ing. Vicente G. Guzman Consumiendo servicios RESTful en Xamarin.Forms Introducción Normalmente como desarrolladores nos toparemos con la parte en donde debemos de mostrar información que provenga de algún servicio, es por eso que, en este artículo, aprenderemos cómo consumir un servicio RESTful en una aplicación .Net Standard de Xamarin.Forms. ¿Qué son los servicios RESTful? Representational State Transfer (REST) es un estilo arquitectónico que especifica restricciones como la interfaz uniforme, que, si se aplica a un servicio web, induce propiedades deseables como el rendimiento, la escalabilidad y la modificabilidad que permiten que los servicios funcionen mejor en la Web. Comencemos Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado esto vamos a utilizar un servicio RESTful falso en nuestra aplicación. Para esto solo busquemos "JsonPlaceholder" y abramos el primer enlace. https://jsonplaceholder.typicode.com/ Ahora, tenemos que encontrar un punto final para usar en nuestra aplicación. Desplacémonos hacia abajo en la página del marcador de posición JSON y encontraremos los recursos. Estos son todos los puntos finales, los cuales podemos usarlos en nuestra aplicación. En este ejemplo, vamos a usar el punto final "/posts". Por lo tanto, hagamos clic en el enlace y veamos el resultado JSON. Posterior a esto, copiemos el enlace del punto final para usarlo en nuestra aplicación.
  • 2. Ing. Vicente G. Guzman Después de presionarlo podemos ver los resultados como se muestra a continuación: Ahora, tenemos que convertir este JSON en clase C#. Entonces, vamos a usar una forma fácil de convertir JSON a C# usando "Json2csharp". Abramos este enlace y peguemos el punto que copiamos con anterioridad. Veremos que esto generará automáticamente una clase C# de JSON, como se muestra a continuación.
  • 3. Ing. Vicente G. Guzman Ahora, copiemos el código de clase, puesto que lo vamos a usar estos en nuestra aplicación. Regresemos a nuestro proyecto antes creado en Visual Studio. Generemos una nueva página (ContentPage) a nivel raíz de nuestra solución, la cual denominaremos PostRestPage y en esta peguemos el código de la clase y la URL en el code behind. Para consumir el servicio web, debemos agregar dos paquetes a nuestro proyecto. Estos se deben de agregar en cada proyecto de la solución. JSON | Net.Http Para agregar estos, debemos de hacer clic derecho en la solución -> Administrar paquetes NuGet para la solución (Manage NuGet Packages for Solution).
  • 4. Ing. Vicente G. Guzman Ahora, busquemos Newtonsoft.Json, verifiquemos que todos los proyectos estén seleccionados e instalemos el paquete en la solución. De forma similar, busquemos el segundo paquete "Microsoft.Net.Http" e instálemoslo en todos los proyectos de la solución. Ahora, agreguemos los siguientes espacios de nombres de paquetes en la parte superior de nuestro archivo PostRestPage.xaml.cs using System.Net.Http; | using Newtonsoft.Json; | using System.Collections.ObjectModel;
  • 5. Ing. Vicente G. Guzman Ahora, editemos nuestro XAML para agregar una lista simple, en la cual mostraremos la lista de publicaciones provenientes de nuestro servicio. Lo que hicimos fue declarar una lista en la cual vinculamos el título y el cuerpo a la celda de texto. Posteriormente editemos él .CS, e insertemos el siguiente código para obtener la lista pertinente: public partial class PostRestPage : ContentPage { private const string url = "https://jsonplaceholder.typicode.com/posts"; private HttpClient _Client = new HttpClient(); private ObservableCollection<Post> _post; public PostRestPage () { InitializeComponent (); } protected override async void OnAppearing() { var content = await _Client.GetStringAsync(url); var post = JsonConvert.DeserializeObject<List<Post>>(content); _post = new ObservableCollection<Post>(post); Post_List.ItemsSource = _post; base.OnAppearing(); } }
  • 6. Ing. Vicente G. Guzman Explicación del código línea por línea Dentro de nuestra clase MainPage, se coloca la URL, luego se crea e inicializa el objeto de HttpClient, y después de esto, creamos una colección observable. Esta colección se inicializa más adelante en el método de aparición y se asigna a nuestra vista de lista que se realiza en nuestro archivo XAML. Ahora, en el método OnAppearing, usamos el objeto de nuestro HttpClient() y pasamos la URL en él. Después de esto, deserializamos el contenido proveniente de nuestra solicitud y luego inicializamos nuestra colección observable. Después de esto, establecemos el origen del elemento de nuestra lista en la colección observable. Comprobemos que lo que realizamos funcione, por ende, ejecutemos nuestra aplicación, pero antes editemos la vista que se va a lanzar, esto en el App.xaml.cs: MainPage = new PostRestPage(); Como vemos, aquí se muestra la lista de publicaciones provenientes de nuestro servicio, en el cual se muestran el título y el cuerpo de todas las publicaciones. Con esto hemos terminado, pueden descargar el código en el siguiente repositorio: https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/RestFul_Demo