Cómo integrar Huawei Map Kit en Xamarin

HUAWEI Map kit proporciona un SDK para el despliegue de mapas interactivos. Cuenta con datos de mapas de más de 200 países y regiones, y soporta decenas de idiomas. Con este SDK,puedes integrar fácilmente funciones basadas en mapas en tus aplicaciones.

Los mapas de Huawei soportan más funciones que los mapas propios de Xamarin (Xamarin.Forms.Map) como mapas de tráfico, eventos de mapa, marcadores personalizados, arrastrar y soltar marcadores, dibujar líneas, dibujar círculos y mucho más…

Nota: Este artículo es una traducción de la publicación “How to implement HMS Map Kit — Xamarin” realizada por el usuario JVera en el Huawei Developer Forum.

Casos de uso frecuente

• Visualización del mapa: Muestra edificios, carreteras, sistemas de agua y puntos de interés (POI).
• Interacción de mapas: Controla los gestos y botones de interacción en el mapa.
• Dibujo del mapa: Agrega marcadores de ubicación, superposiciones y varias formas.

Preparaciones

Para utilizar HUAWEI Map Kit Xamarin SDK, necesitas instalar Visual Studio en tu equipo.

Al instalar Visual Studio, selecciona “Mobile Development with .NET” se requieren 13 GB de espacio en disco aproximadamente.

Creando las Binding Libraries para Android

Para utilizar el SDK del Kit de Mapa de HUAWEI para Xamarin, necesitas crear Binding Libraries de Android para Xamarin desde el SDK deHMS Map Kit. El siguiente proceso genera las bibliotecas Xamarin.

o Descarga y guarda todas las bibliotecas y el SDK de Map Kit para Xamarin desde este enlace.

o Extrae el SDK descargado a un directorio de tu elección.

o Abre el proyecto en Visual Studio haciendo doble clic en el archivo del proyecto en el directorio donde el Xamarin SDK fue extraído.

o Una vez que abras el proyecto para el Xamarin Map SDK, cada paquete que descargaste en el primer paso debe ir en el directorio de librería relacionado.

Dentro del Explorador de Soluciones, expande cada proyecto y repite los siguientes pasos

• Clic dereco en jars
• Clic en Add> Existing item

• Ubica el directorio donde descargaste los paquetes y selecciona el archivo .aar o .jar relacionado. Por ejemplo: agconnect-core-1.0.0.300

• Haz clic en el paquete que acabas de importar y desde la ventana de propiedades selecciona: LibraryProjectZip si el archivo es .aar ó EmbeddedJar si el archivo es .jar

• Genera la librería desde Visual Studio haciendo clic derecho en Solution y luego RebuildSolution.

• Una vez que el proceso termine, las clases generadas serán visibles en el explorador y estarán listas para usar.

Integrando las librerías de Map Kit

Antes de empezar a desarrollar una aplicación, necesitas integrar las bibliotecas necesarias en tu proyecto.

• Abre Visual Studio y crea un nuevo proyecto Android si no lo has hecho.
• Al crear el proyecto, establece la versión mínima de Android como Android 9.0 o superior. Map Kit requiere una versión mínima de Android 9.0.

Agregando las binding libraries

• Haz clic con el botón derecho en la sección Referencias y luego clic en Add Reference
• En la ventana del Administrador de referencias, haz clic en el botón Examinar en la parte inferior.
• Navega al directorio del proyecto de Biblioteca. Según tu elección del tipo de compilación (Depuración o Release), los archivos generados .dll estarán dentro del directorio .\dist.
• Selecciona todos los archivos generados.dll y haz clic en Agregar.

Todos los archivos dll se verán así:

a. Haga clic con el botón derecho en la sección Referencias y luego haga clic en Agregar referencia.

b. En la ventana del Administrador de referencias que acaba de abrir, haga clic en el botón Examinar en la parte inferior.

c. Navegue al directorio del proyecto de Biblioteca.Según su elección del tipo de compilación (Depuración o Release), los archivos generados.dll estarán dentro del directorio.\dist.

d. Seleccione todos los archivos generados.dll y haga clic en Agregar.

Todos los archivos dll de construcción se ven así:

Integrando el SDK de HMS Core

Antes de empezar a desarrollar una aplicación, integra el HMS Core SDK en tu proyecto.

• Agregua el archivo de configuración de AppGallery Connect de la aplicación a tu proyecto en Visual Studio.
• Inicia sesión en AppGallery Conectarse y selecciona My Projects.
• Busqua tu aplicación de la lista y haz clic en el nombre de la aplicación.
• Haz clic en agconnect-services.json para descargar el archivo de configuración.
• Copia el archivo agconnect-services.json al directorio de archivos de tu proyecto.

Implementando LazyInputStream para leer el archivo agconnect-services.json.

• Haz clic derecho en tu proyecto y selecciona Add -> New Item.
• En la ventana abierta, selecciona Clase y renombra la clase como HmsLazyInputStream.cs.
• En el nuevo archivo de clase, importa las siguientes bibliotecas.

1.     using System;
2.     using System.IO;
3.     using Android.Content;
4.     using Com.Huawei.Agconnect.Config;

• Crea una clase que implemente LazyInputStream

1.     class HmsLazyInputStream : LazyInputStream
2.     {
3.         ...
4.     }

• Sobreescribe el constructor que recibe un Context

1.     public HmsLazyInputStream(Context context) : base(context){
2.     }

• Sobreescribe el método GET que recupera el Context

1.     public override Stream Get(Context context){
2.         ...
3.     }

• En el método GET, lee el archivo de configuración llamando a conext.Assets.Open.

1.     public override Stream Get(Context context){
2.         try
3.         {
4.             return context.Assets.Open("agconnect-services.json");
5.         }
6.         catch (Exception e)
7.         {
8.             return null;
9.         }
10.  }

• La clase debería verse así

1.     using System;
2.     using System.IO;
3.     using Android.Content;
4.     using Android.Util;
5.     using Com.Huawei.Agconnect.Config;
6.     namespace XamarinHmsMapDemo{
7.         public class HmsLazyInputStream : LazyInputStream
8.         {
9.             public HmsLazyInputStream(Context context)
10.              : base(context)
11.              {
12.              }
13.          public override Stream Get(Context context)
14.          {
15.              try
16.              {
17.                  return context.Assets.Open("agconnect-services.json");
18.              }
19.              catch (Exception e)
20.              {
21.                  Log.Error("Hms", $"Failed to get input stream" + e.Message);
22.                  return null;
23.              }
24.          }
25.      }
26.  }

• Crea una nueva clase que herede de Content Provider y agrega el siguiente código

1.     using System;
2.     using Android.Content;
3.     using Android.Database;
4.     using Com.Huawei.Agconnect.Config;
5.     namespace HmsMapDemo{
6.         [ContentProvider(new string[] { "com.xam.demomap.XamarinCustomProvider" })]
7.         class XamarinCustomProvider : ContentProvider
8.         {
9.             public override int Delete(Android.Net.Uri uri, string selection, string[] selectionArgs)
10.          {
11.              throw new NotImplementedException();
12.          }
13.          public override string GetType(Android.Net.Uri uri)
14.          {
15.              throw new NotImplementedException();
16.          }
17.          public override Android.Net.Uri Insert(Android.Net.Uri uri, ContentValues values)
18.          {
19.              throw new NotImplementedException();
20.          }
21.          public override bool OnCreate()
22.          {
23.              AGConnectServicesConfig config = AGConnectServicesConfig.FromContext(Context);
24.              config.OverlayWith(new HmsLazyInputStream(Context));
25.              return false;
26.          }
27.          public override ICursor Query(Android.Net.Uri uri, string[] projection, string selection, string[] selectionArgs, string sortOrder)
28.          {
29.              throw new NotImplementedException();
30.          }
31.          public override int Update(Android.Net.Uri uri, ContentValues values, string selection, string[] selectionArgs)
32.          {
33.              throw new NotImplementedException();
34.          }
35.      }
36.  }

Agregando el package name

Antes de empezar a desarrollar una aplicación, debes establecer su package name.

• Haz clic derecho a su proyecto.
• Haga clic en el botón Propiedades.
• En la ventana, haz clic en la sección AndroidManifest.
• Busqua la opción llamada package name
• Selecciona Archivo ->Guardar Elementos Seleccionados en la ventana principal o presiona Ctrl+S para guardar los cambios.

Estableciendo la configuración de la firma

MapKit sólo funciona en aplicaciones firmadas, para firmar tu app sigue estos pasos

1. Haz clic derecho en tu proyecto.
2. Haz clic en el botón Propiedades.
3. Clic en la sección Firma de paquetes de Android.
4. Marca Firmar el archivo.APK usando la siguiente opción de detalles de la tienda de claves, tal como está marcado.
5. Rellena las entradas de acuerdo con el archivo de firma mencionado en la sección Obtención del SHA-256 certificate fingerprint desde el archivo de firma.
6. Selecciona Archivo -> Guardar elementos seleccionados, en la ventana principal o presiona Ctrl+S para guardar los cambios.
7. Repite el proceso para todos los tipos de compilación (Depuración y Release).

Creando un mapa

A continuación se describe cómo crear una instancia de mapa usando MapFragment.

• Agrega un MapFragment en el archivo de diseño de una actividad y configura los atributos de mapa usando el archivo XML.

1.     <fragment xmlns:android="http://schemas.android.com/apk/res/android"
2.               xmlns:map="http://schemas.android.com/apk/res-auto"
3.               android:id="@+id/mapfragment_mapfragmentdemo"
4.               class="com.huawei.hms.maps.MapFragment"
5.               android:layout_width="match_parent"
6.               android:layout_height="match_parent"
7.               map:cameraTargetLat="41.019879"
8.               map:cameraTargetLng="29.007822"
9.               map:cameraZoom="12"
10.            />

• Para utilizar un mapa en tu aplicación, necesitas implementar la API de OnMapReadyCallback.

1.     public class MainActivity : AppCompatActivity, IOnMapReadyCallback
2.     {
3.         ...
4.     }

• Carga el MapFragment en el método onCreate de tu actividad y llama a getMapAsync para registrar el callback.

1.     private MapFragment mapFragment;
2.     mapFragment = FragmentManager.FindFragmentById<MapFragment>(Resource.Id.mapfragment_mapfragmentdemo);
3.     mapFragment.GetMapAsync(this);

• Sobreescribe el método onMapReady para obtener el objeto HuaweiMap

1.     private HuaweiMap hMap;
2.     public void OnMapReady(HuaweiMap huaweiMap){
3.         this.hMap = huaweiMap;
4.     }

Corre tu aplicación para obtener la siguiente salida: