Saltar al contenido

Expanda su aplicación MDK con control de mapas personalizado (usando el enfoque de metadatos)

Puede clonar un proyecto de metadatos existente desde Tienda GitHub y comience directamente con el paso 5 de este tutorial.


Para ampliar la funcionalidad o personalizar la apariencia y el comportamiento de su aplicación cliente, puede crear controles de extensión en lugar de los controles MDK incorporados existentes mientras usa NativeScript (TypeScript / JavaScript aplicable tanto para Android como para iOS)

En este tutorial, creará una extensión de mapa a través de NativeScript (en lenguaje TypeScript), verá el mapa en Apple Maps en dispositivos iOS y en Google Maps en dispositivos Android.

Paso 1: Cree un nuevo proyecto MDK en SAP Business Application Studio

Este paso implica el proyecto de crear un kit de desarrollo móvil en el editor.

  1. El espacio de desarrollo se lanzó en SAP Business Application Studio.

  2. Ir Archivo menú → clic Nuevo proyecto a partir de plantilla.

    MDK

  3. Escoger Proyecto MDK y haga clic en Hacia adelante.

    MDK

  4. I Conocimiento básico paso, seleccione o proporcione la información a continuación y haga clic en Hacia adelante:

    GortValor
    MDK template typeEscoger List Detail desde el otoño pasado
    Your project nameMDK_Maps
    Your application name

    MDK

    Más detalles sobre Plantilla MDK disponible en documentación útil.

  5. I Configuración del servicio paso, proporcione o seleccione la información a continuación y haga clic en Hacia adelante:

    GortValor
    Service File Name<Provide any name of your choice>
    OData SourceEscoger Mobile Services desde el otoño pasado
    Application IdEscoger com.sap.mdk.demo desde el otoño pasado
    DestinationEscoger com.sap.edm.sampleservice.v2 desde el otoño pasado
    Enter a path to the OData serviceDéjalo así
    Language URLDéjelo con el valor predeterminado
    Enable OfflineEscoger No

    MDK

    Ya sea que esté creando una aplicación en línea o fuera de línea, este paso es necesario para conectarse a un servicio OData. Al crear la aplicación Mobile Development Kit, se asume que el servicio OData creado y el destino que apunta a este servicio está configurado en SAP Mobile Services and Business Technology Platform.

    Dado que crea una aplicación en línea, Habilitar la tienda sin conexión la opción está desmarcada.

  6. I Colecciones de OData paso, seleccione Customers (a menos que se seleccione de forma predeterminada). Hacer clic Hacia adelante para completar la creación del proyecto.

    MDK

  7. Después de hacer clic Finalizar, el asistente generará su aplicación MDK en función de sus selecciones. Debería MDK_Maps proyecto en el explorador de proyectos. Como ya ha abierto el espacio de trabajo, no es necesario abrir el proyecto generado en un nuevo espacio de trabajo. Ignore la ventana emergente o haga clic en el icono de la cruz para ocultar la ventana.

    MDK

Hecho

Inicie sesión para responder la pregunta

Paso 2: Registrar el control de extensión

El control de extensión que está creando para ampliar la funcionalidad de su aplicación como controles básicos se puede programar usando un editor MDK.

  1. Descargar seo imagen y guárdela localmente. Esta imagen se utilizará como imagen de visualización en el editor de página para indicar el control de extensión.

  2. Arrastrar y soltar map.png archivar en Imagenes carpetas.

    MDK

  3. Botón derecho del ratón Extensiones | Seleccione MDK: Control de extensión de registro.

    MDK

  4. I Template Selection paso, seleccione Nuevo control y registro de extensiones de metadatos. Hacer clic Hacia adelante.

    MDK

  5. Proporcione la siguiente información:

    GortValor
    Control Namemdk_maps
    ModuleMyMapModule
    ControlMyMapExtension
    ClassMyMapClass
    Displayamarralo map.png expediente

    Aquí está la definición básica de las propiedades que definió anteriormente:

    Módulo: Se utiliza para identificar el control de extensión.
    La ruta al módulo de extensión está debajo <MetadataProject>/Extensions/.

    Disciplina: Nombre de archivo debajo <MetadataProject>/Extensions/<Module>/controls en el que se amplía la clase. Si no se especifica, el nombre del módulo se utilizará como valor de esta propiedad.

    Sonó: Nombre de clase para la clase de extensión personalizada. El cliente verificará esta clase en tiempo de ejecución y, si la encuentra, su extensión se agregará instantáneamente. De lo contrario, se mostrará un código auxiliar con un mensaje de error.

    mostrar: Esta propiedad se utiliza para mostrar la imagen en el editor de página para indicar el control de extensión.

    MDK

  6. I Información del esquema grado, número de datos de esquema Esquema columna y haga clic en Hacia adelante.

    {
    	"type": "object",
    	"BindType": "",
    	"properties": {
    		"Prop": {
    			"type": "object",
    			"BindType": "",
    			"properties": {
    				"City": {
    					"type": "string",
    					"BindType": ""
    				},
    				"Country": {
    					"type": "string",
    					"BindType": ""
    				},
    				"HouseNumber": {
    					"type": "string",
    					"BindType": ""
    				},
    				"LastName": {
    					"type": "string",
    					"BindType": ""
    				},
    				"PostalCode": {
    					"type": "string",
    					"BindType": ""
    				},
    				"Street": {
    					"type": "string",
    					"BindType": ""
    				}
    			}
    		}
    	}
    }
    

    MDK

    El esquema anterior agregará estas propiedades predefinidas (City, Country, HouseNumber, LastName, PostalCode, Street) en el control de extensión del mapa que le adjunta Cliente propiedades de las entidades en el siguiente paso.

  7. Hacer clic Finalizar declarar.

    Se agregan algunos archivos y carpetas adicionales al Extensiones carpeta. Aprenderá más al respecto en los siguientes pasos.

    MDK

    Puede encontrar más detalles sobre cómo registrar el control de extensiones en seo guía.

Hecho

Inicie sesión para responder la pregunta

Paso 3: use el control de extensión en los metadatos de MDK

Pondrás este control de programación en la generación Customers_Detail.page.

  1. Ir Páginas carpeta Clientes | Customers_Detail.page.

  2. Elimina la parte de la página de la página.

    MDK

  3. Arrastra y suelta el registro mdk_maps controlar el área de la página.

    MDK

    Puedes encontrar más detalles al respecto. Extensión de sección en seo guía.

  4. Sa Propiedades sección, configure el Altura hasta 600.

    MDK

  5. Adjunte las propiedades registradas de Extension Control a Clientes propiedades.

    Sobre Propiedades de extensión sección, extensión Prop{}, clickea en el conexión icono para abrir el Explorador de objetos para Ciudad propiedad. Haga doble clic en el Ciudad propiedad de la Cliente entidad para establecerlo como la frase vinculante y haga clic en Okey.

    MDK

    Repita el paso anterior y conecte otras propiedades.

    MDK

    Tenga cuidado de no vincular propiedades de Launch (ESPM.Address).

Hecho

Inicie sesión para responder la pregunta

Paso 4: implementar una extensión con un enfoque de metadatos

  1. Ir Extensiones | MyMapModule | controls | MyMapExtension.ts, reemplace el código con lo siguiente.

    import * as app from 'tns-core-modules/application';
    import { IControl } from 'mdk-core/controls/IControl';
    import { BaseObservable } from 'mdk-core/observables/BaseObservable';
    import { EventHandler } from 'mdk-core/EventHandler'
    
    export class MyMapClass extends IControl {
        private _observable: BaseObservable;
        private _mapView: any;
        private _geo: any;
        private _gMap: any;
        private _marker: any;
        private _customerInfo = {
            lastName: "",
            houseNumber: "",
            street: "",
            city: "",
            country: "",
            postalCode: "",
            latitiude: "",
            longitude: ""
        }
    
        public initialize(props: any): any {
            super.initialize(props);
    
            //Access the properties passed from Customers_Detail.page to the extension control.
            //in this tutorial, you will be accessing the customer's last name and address
            if (this.definition().data.ExtensionProperties.Prop) {
                var property = this.definition().data.ExtensionProperties.Prop;
                this._customerInfo.lastName = property.LastName;
                this._customerInfo.houseNumber = property.HouseNumber;
                this._customerInfo.street = property.Street;
                this._customerInfo.city = property.City;
                this._customerInfo.country = property.Country;
                this._customerInfo.postalCode = property.PostalCode;
            }
    
            if (app.android) {
                //You will display the Google Maps in a MapView.For more details on Google Maps API for android, visit
                //https://developers.google.com/android/reference/com/google/android/gms/maps/package-summary
    
                this._mapView = new com.google.android.gms.maps.MapView(this.androidContext());
                var localeLanguage = java.util.Locale;
    
                //GeoCoder is required to convert a location to get latitude and longitude
                this._geo = new android.location.Geocoder(this.androidContext(), localeLanguage.ENGLISH);
                this._mapView.onCreate(null);
                this._mapView.onResume();
    
                //when mapview control is used, all the lifecycle activities has to be frowaded to below methods.
                app.android.on(app.AndroidApplication.activityPausedEvent, this.onActivityPaused, this);
                app.android.on(app.AndroidApplication.activityResumedEvent, this.onActivityResumed, this);
                app.android.on(app.AndroidApplication.saveActivityStateEvent, this.onActivitySaveInstanceState, this);
                app.android.on(app.AndroidApplication.activityDestroyedEvent, this.onActivityDestroyed, this);
                var that = this;
    
                //A GoogleMap must be acquired using getMapAsync(OnMapReadyCallback).
                //The MapView automatically initializes the maps system and the view
    
                var mapReadyCallBack = new com.google.android.gms.maps.OnMapReadyCallback({
                    onMapReady: (gMap) => {
                        console.log("inside onMapReady function");
                        that._gMap = gMap;
                        var zoomValue = 6.0;
                        that._gMap.setMinZoomPreference = zoomValue;
                        var customerAddress = that._customerInfo.houseNumber + ' ' + that._customerInfo.street + ' ' + that._customerInfo.city + ' ' +
                            that._customerInfo.country + ' ' + that._customerInfo.postalCode;
                        var data = that._geo.getFromLocationName(customerAddress, 1);
                        var latLng = new com.google.android.gms.maps.model.LatLng(data.get(0).getLatitude(), data.get(0).getLongitude());
                        that._gMap.addMarker(new com.google.android.gms.maps.model.MarkerOptions().position(latLng).title(this._customerInfo.lastName +
                            "'s " + "location"));
                        that._gMap.moveCamera(new com.google.android.gms.maps.CameraUpdateFactory.newLatLng(latLng));
                    }
                });
                this._mapView.getMapAsync(mapReadyCallBack);
            }
    
            if (app.ios) {
    
                /*initiating Apple Maps
                For more details on the Apple Maps visit
                https://developer.apple.com/documentation/mapkit */
                this._mapView = MKMapView.alloc().initWithFrame(CGRectMake(0, 0, 1000, 1000));
            }
        }
    
        private onActivityPaused(args) {
            console.log("onActivityPaused()");
            if (!this._mapView || this != args.activity) return;
            this._mapView.onPause();
        }
    
        private onActivityResumed(args) {
            console.log("onActivityResumed()");
            if (!this._mapView || this != args.activity) return;
            this._mapView.onResume();
        }
    
        private onActivitySaveInstanceState(args) {
            console.log("onActivitySaveInstanceState()");
            if (!this._mapView || this != args.activity) return;
            this._mapView.onSaveInstanceState(args.bundle);
        }
    
        private onActivityDestroyed(args) {
            console.log("onActivityDestroyed()");
            if (!this._mapView || this != args.activity) return;
            this._mapView.onDestroy();
        }
    
        //In case of iOS you'll use CLGeocoder API to convert a address to get latitude and longitude.
        //NOTE - API getlatlang is called only on ios devices
    
        private getlatlang(customerAddress) {
            const that = this;
            return new Promise((resolve, reject) => {
                var latLng = new CLGeocoder();
                latLng.geocodeAddressStringCompletionHandler(customerAddress, function (placemarks, error) {
                    if (error === null && placemarks && placemarks.count > 0) {
                        var pm = placemarks[0];
                        var cordinates = {
                            latitiude: "",
                            longitude: ""
                        }
                        cordinates.latitiude = pm.location.coordinate.latitude;
                        cordinates.longitude = pm.location.coordinate.longitude;
                        resolve(cordinates);
                    } else {
                        reject();
                    }
                });
            });
        }
    
        public view() {
            this.valueResolver().resolveValue([this._customerInfo.houseNumber, this._customerInfo.street, this._customerInfo.city, this._customerInfo
                .country, this._customerInfo.postalCode, this._customerInfo.lastName
            ], this.context)
                .then((address) => {
    
                    this._customerInfo.houseNumber = address[0];
                    this._customerInfo.street = address[1];
                    this._customerInfo.city = address[2];
                    this._customerInfo.country = address[3];
                    this._customerInfo.postalCode = address[4];
                    this._customerInfo.lastName = address[5];
    
                    var customerAddress = address[0] + ' ' + address[1] + ' ' + address[2] + ' ' + address[3] + ' ' + address[4];
                    console.log("customer's address = " + customerAddress);
    
                    if (app.ios) {
                        return this.getlatlang(customerAddress)
                            .then((cordinates) => {
                                /* below code is for the apple maps */
                                var latlong = CLLocationCoordinate2DMake(cordinates.latitiude, cordinates.longitude);
                                var annotation = MKPointAnnotation.alloc().init();
                                annotation.coordinate = latlong;
                                annotation.title = this._customerInfo.lastName + "'s" + " location";
                                this._mapView.centerCoordinate = latlong;
                                this._mapView.addAnnotation(annotation);
                            });
                    }
                });
    
            if (app.android) {
                return this._mapView;
            }
            if (app.ios) {
                return this._mapView;
            }
        }
    
        public viewIsNative() {
            return true;
        }
    
        public observable() {
            if (!this._observable) {
                this._observable = new BaseObservable(this, this.definition(), this.page());
            }
            return this._observable;
        }
    
        public setContainer(container: IControl) {
            // do nothing
        }
    
        public setValue(value: any, notify: boolean, isTextValue?: boolean): Promise<any> {
            // do nothing
            return Promise.resolve();
        }
    }
    

    En su función de importación, si ve errores relacionados tns-core-modules o mdk-core, puede ignorarlos. Actualmente, no hay ninguna referencia a dichas bibliotecas en el editor MDK.

  2. Salva el MyMapExtension.ts expediente.

Paso 5: usa la aplicación

Hasta ahora, aprendió a crear una aplicación MDK en el editor de SAP Business Application Studio. Ahora aplicará esta definición de aplicación a los servicios móviles.

  1. Botón derecho del ratón Application.app y seleccione MDK: Implementación.

    MDK

  2. Seleccione un destino de implementación como Servicios móviles.

    MDK

    Debería ver Implementación exitosa mensaje.

    MDK

Hecho

Inicie sesión para responder la pregunta

Paso 6: Obtenga la clave de API para usar el SDK de Maps para Android (obligatorio solo para el cliente de Android)

Dado que mostrará la dirección del cliente en Google Maps en un dispositivo Android, deberá proporcionar una clave API en un proyecto MDK generado (paso 8).

  1. Visita el Consola de Google Cloud Platform.

  2. Haga clic en el menú desplegable y seleccione o cree el proyecto al que desea agregar una clave API.

    MDK

  3. Hacer clic Explore y habilite las API.

    MDK

  4. Hacer clic Habilitar APIS y SERVICIOS.

    MDK

  5. Hacer clic SDK de Maps para Android API.

    MDK

  6. Hacer clic INVERSIÓN.

    MDK

  7. Abierto Consola de credenciales, haga clic en CREAN CREDENCIALES y haga clic en Clave API.

    MDK

  8. Copie esta clave de generación y guárdela localmente. Esto será necesario en el paso 8.

Hecho

Inicie sesión para responder la pregunta

Paso 7: Cree su cliente de marca MDK (obligatorio solo para Android)

Para Android, pasa la clave API al cliente MDK, no hay forma de que un cliente de tienda pública pueda acceder a ella, por lo que creará un cliente de marca utilizando MDK SDK. Siga los pasos 1 a 4 de este tutorial.

Para iOS, puede utilizar el cliente de la tienda de aplicaciones. Continúe con el siguiente paso.

Hecho

Inicie sesión para responder la pregunta

Paso 8: Ejecute el cliente MDK

Asegúrese de seleccionar la pestaña de plataformas de dispositivo correcta arriba.

En este paso, ejecutará la aplicación en un dispositivo Android.

  1. Ir /DemoSampleApp.mdkproject/App_Resources/Android/app.gradle.

    MDK

  2. Proporcione la información a continuación al final de este archivo.

    dependencies { implementation 'com.google.android.gms:play-services-maps:17.0.0' }
    

    MDK

  3. Ir /DemoSampleApp/app/App_Resources/Android/src/main/AndroidManifest.xml.

    MDK

  4. Proporcione la información a continuación application etiqueta final.

     <meta-data android:name="com.google.android.geo.API_KEY" android:value="Enter your API Key generated in step 6" />
    

    MDK

  5. Conecte el dispositivo a su máquina Mac o Windows y ejecute tns device android comando para imprimir una lista de dispositivos conectados.

    MDK

    Garantizar Elección del desarrollador y Depuración USB la opción está habilitada en un dispositivo Android.

  6. Copia el Identificador de dispositivo el valor de su dispositivo.

  7. En una ventana de terminal o línea de comandos, navegue hasta la carpeta del nombre de la aplicación DemoSampleApp (en MDClient_SDK ruta) y uso tns run android --device <device identifier> Ordene al cliente MDK que se ejecute en un dispositivo Android.

    MDK

    Una vez que el comando anterior se ejecute con éxito, verá un nuevo cliente MDK ejecutándose en un dispositivo Android.

    MDK

  8. Sconna CONVENIO en el Acuerdo de licencia de usuario final.

  9. En la pantalla de bienvenida, toque COMIENZO para conectar un cliente MDK a SAP Business Technology Platform (BTP).

    MDK

  10. Ingrese sus credenciales para iniciar sesión en SAP BTP y toque Acceso autenticar.

    MDK

  11. Elija un código de acceso con al menos 8 caracteres para desbloquear la aplicación y toque Próximo.

    MDK

  12. Confirme el código de acceso y toque HACER.

    MDK

    Alternativamente, puede habilitar la toma de huellas digitales para un acceso más rápido a los datos de la aplicación.

    MDK

  13. Sconna Okey para actualizar nuevos metadatos MDK para el cliente.

    MDK

  14. Sconna CLIENTES para navegar a la lista de clientes.

    MDK

  15. Toque cualquiera de los registros del cliente para navegar a la página de datos.

    MDK

  16. En la página Detalles del cliente, verá que la dirección del cliente se carga en Google Maps.

    MDK

  1. SAP Business Application Studio tiene una función para generar un código QR para una aplicación integrada.

    Haga doble clic en el Application.app para abrirlo en MDK Application Editor y haga clic en Código QR de la aplicación icono para incluir el código QR.

    MDKMDK

    Una vez escaneado y cargado con la URL incorporada, se recordará. Cuando cierre la sesión y vuelva a subir a bordo, se le pedirá que continúe usando la aplicación actual o que escanee un nuevo código QR.

  2. Inclinarse estos pasos para abordar el cliente MDK.

  3. Cuando acepte la actualización de la aplicación, toque Clientes para navegar a la lista de clientes.

    MDK

  4. Toque cualquiera de los registros del cliente para navegar a la página de datos.

    MDK

  5. En la página Detalles del cliente, verá que la dirección del cliente se carga en Apple Maps.

    MDK

¡Felicidades! Has terminado Crear controles de extensión en el kit de desarrollo de aplicaciones móviles (MDK) misión.

Hecho

Inicie sesión para responder la pregunta