Curso Básico de Xamarin: iOS, Android y UWP nativo en Xamarin con DependencyService

En este tutorial aprenderás a implementar funcionalidad específica de plataforma en Xamarin por medio de DependencyService.

NOTA: El código fuente de este proyecto está disponible en mi repositorio de GitHub

Paso 1. Abre Visual Studio 2019 y selecciona Crear un nuevo proyecto.

Paso 2. Busca el tipo de proyecto Mobile App (Xamarin.Forms), selecciónala y da clic en Siguiente:

Paso 3. En el nombre de proyecto escribe DemoDS, asegúrate de seleccionar una ruta corta para la ubicación de tu solución y da clic en Crear:

Paso 4. Selecciona la plantilla Blank (proyecto vacío), selecciona las plataformas que deseas probar y da clic en OK:

Paso 5. Espera a que se genere la solución con los proyectos .NET Standard y el de cada plataforma. Ahora, da clic derecho en el proyecto DemoDS y agrega 4 carpetas: Interfaces, Services, Models, ViewModels y Views.

Paso 6. Crea la clase LocationAddress en la carpeta Models con el código siguiente:

Paso 7. En la carpeta Interfaces genera la interfaz IReverseGeocode, con la siguiente definición de un solo método:

Paso 8. Comenzaremos ahora a implementar el código específico de cada plataforma para obtener la dirección de una coordenada geográfica. En primer lugar, Android. Para ello, agrega una carpeta llamada Dependency en el proyecto DemoDS.Android y dentro crea la clase ReverseGeocodeAndroid, con el código siguiente, que permite obtener la dirección de una ubicación geográfica:

Paso 9: También tenemos que habilitar algunos permisos en el AndroidManifest; edítalo directamente agregando los siguientes elementos:

Paso 10. Ahora vamos con la implementación del código para iOS. En el proyecto DemoDS.iOS crea la carpeta Dependency y la clase ReverseGeocodeiOS en ella. El código para obtener la dirección a partir de una ubicación geográfica se muestra a continuación:

Paso 11: El archivo Info.plist del proyecto DemoDS.iOS debe contener la llave NSLocationWhenInUseUsageDescription para que la app pueda acceder a la ubicación del dispositivo. Abre el archivo, selecciona la llave y coloca una descripción, por ejemplo:

Paso 12. Finalmente, implementaremos el código para obtener la dirección de una coordenada geográfica en el proyecto DemoDS.UWP, en el cual crearás la carpeta Dependency y la clase ReverseGeocodeUWP dentro de ella. Su código se muestra a continuación:

NOTA IMPORTANTE: Al final de la publicación se explica cómo obtener una llave para utilizar los servicios de geolocalización con el proveedor Bing Maps. Esta llave se asigna por supuesto a MapService.ServiceToken del código anterior.

Paso 13. Por supuesto, hay que dar los permisos necesarios a este proyecto. En este caso son 2: Internet y Location. Asígnalos dando doble clic en Properties (del proyecto DemoDS.UWP), luego clic en Package Manifest… y en la sección Capabilities activa estos dos permisos.

Paso 14. En UWP hay que realizar un paso adicional. En el archivo App.xaml.cs del proyecto DemoDS.UWP debes registrar la clase con la dependencia después de Forms.Init en el evento OnLaunched:

Paso 15: Ya que tenemos todas las implementaciones de plataforma, vamos a consumir los servicios de dependencias. Para ello, en la carpeta Servicios del proyecto DemoDS crea la clase LocationService con el código mostrado a continuación:

Paso 16: En la carpeta ViewModels genera la conocida clase BaseViewModel con la siguiente implementación:

Paso 17. También crea una clase llamada LocationViewModel en la misma carpeta; su código es:

Paso 18. Finalmente, vamos con LocationView, que es un ContentPage creado en la carpeta Views. Solo necesitamos escribir código XAML para definir la interfaz que mostraremos al usuario. El código es:

Paso 19. Sólo nos resta indicar en la clase App.xaml.cs (del proyecto DemoDS) que LocationView es la página inicial:

Paso 20. Probemos la aplicación en cada plataforma para verificar su correcto funcionamiento. Comenzamos con Windows:

Paso 21. Ahora vamos a probar la app en un dispositivo Android. IMPORTANTE: Si vas a probarlo en el emulador, tal vez necesites instalar Google Apps (PlayStore) y Google Maps para que los servicios de geolocalización funcionen correctamente. Y también deberás activar el sensor GPS del emulador.

Paso 22. Finalmente, damos paso a la prueba en iOS:

Paso 23. En el Paso 12 mencionamos que explicaría cómo obtener una llave para utilizar los servicios de mapas y geolocalización en una app de Windows. Primero accede a Bing Maps Developer Center.

Paso 24. Inicia sesión y da clic en el menú My account, seleccionando My Keys.

Paso 25. Ahora crea una nueva llave.

Paso 26. Ingresa los datos solicitados. El más importante es el tipo de aplicación. Debes seleccionar Windows Application.

Paso 27. Por último, muestra y copia la llave generada. Reemplázala en el código del paso 12.

En este tutorial aprendiste a implementar DependencyService en una app de Xamarin.Forms. Se requieren pasos muy concretos, pero el beneficio es que puedes implementar prácticamente cualquier funcionalidad nativa en tu aplicación cross-platform.

Espero que esta publicación haya sido de utilidad para tí.

Sin más por el momento, me despido. ¡Nos vemos en la próxima entrega!

¡Gracias por tu visita!

Luis