Saltar al contenido

Agregar complementos de NativeScript en la aplicación MDK

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


Para ampliar la funcionalidad, o personalizar la apariencia y el comportamiento de su aplicación cliente, puede usar complementos de NativeScript existentes como nativescript-geolocation, nativescript-nfc, etc., agregar esto al cliente y hacer referencia a él desde la regla.

En este tutorial, utilizará el complemento de geolocalización nativescript de NativeScript para capturar la ubicación del dispositivo: latitud y longitud.

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

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

  2. Hacer clic Empezar desde la plantilla en la página de bienvenida.

    MDK

    Si no ve la página de bienvenida, puede acceder a ella a través de Ayuda menú.

  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 Empty desde el otoño pasado
    Your project nameMDK_Geolocation
    Your application name

    MDK

    El es Proyecto vacío MDK crea una plantilla de acción de cierre de sesión, acción de cierre de página, regla y página vacía (Main.page). Después de usar esta plantilla, puede concentrarse en crear sus páginas, otras acciones y reglas necesarias para su aplicación. Más detalles sobre Plantilla MDK disponible en documentación útil.

  5. Después de hacer clic Hacia adelante, el asistente generará su aplicación MDK en función de sus selecciones. Debería MDK_Geolocation proyecto en el explorador de proyectos.

Hecho

Inicie sesión para responder la pregunta

Paso 2: crea una nueva regla para capturar la ubicación del dispositivo

En el editor MDK, creará un nuevo archivo JavaScript llamado GetCoordinates.js para capturar la ubicación del dispositivo: latitud y longitud.

Puedes encontrar más detalles al respecto. Escribe una regla.

  1. Haga clic derecho en el Normas carpeta MDK: Nuevo archivo de reglas | Seleccione Regla JS vacía.

    MDK

  2. Ingrese el nombre de la regla GetCoordinates, haga clic en Hacia adelante y ahora Finalizar en la etapa de declaración.

    MDK

  3. Reemplace el botón generar con el siguiente código.

    import * as geolocation from "nativescript-geolocation";
    import { Accuracy } from "tns-core-modules/ui/enums";
    export default function GetCoordinates(context) {
        var logger = context.getLogger();
        console.log("Current Log Level: " + logger.getLevel());
        // check if geolocation is not enabled
        if (!geolocation.isEnabled()) {
            // request for the user to enable it
            geolocation.enableLocationRequest();
        }
        // Get current location with high accuracy
        return geolocation.getCurrentLocation({
            desiredAccuracy: Accuracy.high, //This will return the finest location available
            updateDistance: 5, //Update distance filter in meters.
            timeout: 11000 //How long to wait for a location in ms.
        }).then(function (loc) {
            if (loc) {
                console.log(loc);
                console.log('nCurrent Location: (' + loc.latitude + ',' + loc.longitude + ')');
                logger.log(loc.toString());
    
                var locMessage = '(' + "Latitude:" + loc.latitude + ',' + "Longitude:" + loc.longitude + ')';
                logger.log('Current Location: ' + locMessage, 'INFO');
                return locMessage;
            }
        }, function (e) {
            logger.log(e.message, 'ERROR');
        });
    }
    
  4. Guarde sus cambios en el GetCoordinates.js expediente.

Hecho

Inicie sesión para responder la pregunta

Paso 3: mostrar las coordenadas en una página

Colocará este control de registro en la página de Celda de formulario.

  1. Haga doble clic en el Main.page, arrastrar y soltar Valor de clave estática control de contenedor al área de la página.

    MDK

  2. I Propiedades | Diseño, cambio NumberOfColumns a 1.

    MDK

  3. Arrastrar y soltar Elemento de valor clave al contenedor.

    MDK

  4. Por favor provea la siguiente información:

    PropiedadValor
    KeyNameCoordinates
    ValueAdjuntarlo a una regla GetCoordinates.js

    MDK

Hecho

Inicie sesión para responder la pregunta

Paso 4: enumere los módulos NPM para referencia externa

I GetCoordinates.js archivo, usted hizo referencia nativescript-geolocation y tns-core-modules/ui/enums. Ahora necesita enumerar estos módulos como referencias externas en la configuración de BAS para que cuando estén empaquetados, el editor MDK no sepa que no debe preocuparse por estas referencias.

  1. Navegar Archivo menú Ajustes | Opciones abiertas.

    MDK

  2. Búsqueda por mdk, haga clic en Editar en settings.json.

    MDK

  3. Incluya referencias a continuación MDK.bundlerExternals y guarde los cambios.

    "nativescript-geolocation",
    "tns-core-modules/ui/enums"
    

    MDK

Hecho

Inicie sesión para responder la pregunta

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

  3. Seleccione la aplicación de Servicios móviles.

    MDK

    Debería ver Implementación exitosa mensaje.

    MDK

Hecho

Inicie sesión para responder la pregunta

Paso 6: agregue el complemento NativeScript y las dependencias externas en su .mdkproject local

Para utilizar el complemento NativeScript existente en un cliente MDK, primero deberá instalarlo .mdkproject y luego cree su cliente de marca MDK.

  1. Asegúrese de haber completado los pasos 1 a 3 de este tutorial.

  2. Abierto MDKProject.json a continuación y agregue el contenido existente a continuación:

    {
      "AppName": "DemoSampleApp",
      "AppVersion": "1.0.0",
      "BundleID": "com.sap.mdk.demo",
      "Externals": ["nativescript-geolocation","ui/enums"],
      "NSPlugins": ["nativescript-geolocation"],
      "UrlScheme": "mdkclient"
    }
    

MDK

Hecho

Inicie sesión para responder la pregunta

Paso 7: agregue googlePlayServicesVersion en los recursos de la aplicación de Android (obligatorio solo para clientes de Android)

Le Servicios de Google Play, su aplicación puede aprovechar las últimas funciones impulsadas por Google, como Maps, Google+ y muchas más.

  1. Ir /DemoSampleApp.mdkproject/App_Resources/Android y crea un nuevo archivo before-plugins.gradle.

    MDK

  2. Proporcione la siguiente información:

    android {  
      project.ext {
          googlePlayServicesVersion = "16+"
      }
    }
    

Paso 8: crear y ejecutar el cliente MDK

  1. Siga los pasos 4 y 5 de este tutorial para crear su cliente MDK de marca y ejecutarlo en su dispositivo.

  2. Una vez que acepte la actualización de la aplicación, permita que su aplicación acceda a su sitio.

    MDK

    En la página principal, verá la ubicación actual del dispositivo.

    MDK

  1. Siga los pasos 4 y 5 de este tutorial para crear su cliente MDK de marca y ejecutarlo en su dispositivo.

  2. Una vez que acepte la actualización de la aplicación, permita que su aplicación acceda a su sitio.

    MDK

    En la página principal, verá la ubicación actual del dispositivo.

    MDK

¡Felicidades! Aprendió cómo capturar la ubicación actual del dispositivo en la aplicación MDK y ahora está listo para expandir su aplicación MDK con control de mapa personalizado (usando el enfoque de metadatos).

Hecho

Inicie sesión para responder la pregunta