Saturday, July 21, 2018
Xamarin

Creando un aplicación Xamarin conectandose a la API de Unsplash

>helibertoarias helibertoarias
julio 08, 2018

En esta entrada vamos crear una aplicación Xamarin.Form que se conectará a un servicio web de Unsplash. Unsplash es un servicio 100% gratuito para compartir imágenes.  La aplicación a crear sobre Xamarin.Forms hará uso del patrón MVVM para el enlace entre la vista y código. También utilizaremos componentes cómo el SearchBar, ActivityIndicator, Frame y ListView. En la parte visual se hará uso del RelativeLayout para una adecuada ubicación de los diferente elementos visuales.

1. Características técnicas

  • Visual Studio 2017 Community Edition 15.7.4 Update 3 con Xamarin 4.10.10.2
  • Windows 10 x64
  • Versión Android 7 dispositivo físico

2. Registrarse como desarrollador en Unsplash

Para poder utilizar el Web API de Unsplash debes primero registrarte en https://unsplash.com/developers, segundo, crear una aplicación en el sitio y tercero, obtener el token o Access Key visible luego de crear la aplicación en el sitio.

 

Registro en Unsplash

Registro en Unsplash

 

Creación aplicación en Unsplash

Creación aplicación en Unsplash

 

Access Key de Unsplash

Access Key de Unsplash

 

3. Crear solución Xamarin Form en Visual Studio

El primer paso será crear una solución en blanco llamada UnsplashXamarinApp. Luego a esta solución le agregaremos un proyecto del tipo Cross-platform.

Solución en blanco

Solución en blanco

 

Agregando proyecto Xamarin Forms

Agregando proyecto Xamarin Forms

 

Aplicación en blanco

Aplicación en blanco

4. Adicionar paquetes Nuget

Adiciona a todos los proyectos Newtownsoft.json 11.0.2 y Xamarin.Form 3.0.0.482510.

5. Crear los modelos

Para hacer uso del API de  Unsplash vamos a crear las siguientes clases en la carpeta Models dentro del proyecto UnsplashApp.

 

6. Creando la conexión al servicio

Una vez tenemos nuestro modelo para consultar la información procedemos a crear el servicio encargado de consultar la información al API de Unsplash. La clase se llamará UnsplashService y se ubicará en la carpeta Services del proyecto UnsplashApp. La clase tendrá el Access Key  (creado en el paso #1) para la conexión y dos métodos, uno para realizar la búsqueda y el segundo para mostrar un detalle de la imagen seleccionada. Se ha definido una longitud de 5 caracteres para iniciar la invocación del API.

 

7. Adicionando la página SearchPage

En la carpeta Pages del proyecto UnsplashApp adicionaremos dos página de contenido. La primera se llamará SearchPage.xaml y la segunda DetailsPage.xaml. Tal como lo sugieren los nombres, la primera sirve para realizar la búsqueda y cuando el usuario seleccione alguno de los resultados se navegará a una página de detalles de la imagen.

En la página SearchPage encontraremos varios componente interesantes como el SearchBar, ActivityIndicator, Frame y ListView.  Estos componentes permiten que el usuario ingrese el texto a buscar y visualizar un loading, en caso de no encontrarse resultados se presenta un Frame en el que se informa que no hay resultados y en caso de encontrarlos los carga en el ListView. El enlace entre la pagina y el código se ha realizado usando MVVM.

 

 

SearchPage - Resultados

SearchPage – Resultados

SearchPage - Sin resultados

SearchPage – Sin resultados

8. Adicionando página DetailsPage

Cuando el usuario seleccione uno de los resultados en la búsqueda navegará al DetailsPage en la que visualizará los datos de la imagen seleccionada.

 

Recuerda editar el archivo App.xaml.cs, para que inicie en la página SearchPage, de la siguiente manera. Es común omitir el NavigationPage en la instrucción y esto genera error en la Applicación al momento de navegar a DetailsPage.

 

9. Ejecutando la aplicación

Finalmente la aplicación puede ser ejecutada en tu emulador o en tu dispositivo, para este prueba se ejecutó sobre un dispositivo físico con Android 7.0

Descargar código fuente
(Visitado 16 veces, 1 visitas hoy)
Heliberto Arias
Senior .NET Developer
Mi nombre es Heliberto Arias y vivo en Barranquilla, Colombia. Soy desarrollador de software. He estado en el desarrollo de software desde el 2007. Cree este blog en 2013 para compartir lo que voy aprendiendo cada año y en el escribo de tecnologías Microsoft principalmente en C# (y aunque he usado VB declaro que lo detesto) y SQL Server desarrollado aplicaciones y servicios web entre otros. Me gustaría mucho si te suscribes a mis redes en Youtube, Google+, Twitter, e Instagram.

Comments

No comments found!

Leave a Comment

Your email address will not be published.

5 + trece =

Login
Remember me
Lost your Password?
Password Reset
Login