Skip to Content

Add NativeScript Plugins in an MDK App

test
0 %
Add NativeScript Plugins in an MDK App
Details

Add NativeScript Plugins in an MDK App

August 16, 2020
Created by
March 23, 2020
Build and run the Mobile Development Kit client with a non-visual extension functionality for Android and iOS platforms.

You will learn

  • How to reference the NativeScript Geolocation plugin from a rule
  • How to add a NativeScript plugin to your branded MDK client
  • How to build a Mobile development kit client for iOS & Android and connect to SAP Cloud Platform Mobile application
  • How to capture the device’s current location

You may clone an existing metadata project from GitHub repository and start directly with step 4 in this tutorial.


To extend the functionality, or customize the look and feel, and behavior of your client app, you can use the existing NativeScript plugins like nativescript-geolocation, nativescript-nfc etc. , add this to the client and reference it from a rule.

In this tutorial, you will use the existing NativeScript plugin nativescript-geolocation to capture the device location: latitude & longitude.

MDK
Step 1: Create a new MDK project in SAP Business Application Studio
  1. Launch the Dev space in SAP Business Application Studio.

  2. If you do not see the Welcome page, navigate to View menu → Find Command → search with Welcome to launch the Welcome page.

    MDK
  3. In Welcome page, click New project from template .

    MDK
  4. Select MDK Project and click Next.

    MDK
  5. In Basic Information step, select or provide the below information and click Next:

    Field Value
    MDK Template Type Select Empty from the dropdown
    Your Project Name MDK_Geolocation
    Your Project Name <default name is same as Project name, you can provide any name of your choice>
    MDK

    The MDK Empty Project template creates a Logout action, Close page action, rule and an empty page (Main.page). After using this template, you can focus on creating your pages, other actions, and rules needed for your application.

    More details on MDK template is available in help documentation.

  6. After clicking Next, the wizard will generate your MDK Application based on your selections. You should now see the MDK_Geolocation project in the project explorer. As you have already opened the workspace, there is no need to open the generated project in new workspace or to add it to workspace. Ignore the pop-up or click the cross icon to hide the window.

    MDK
Log on to answer question
Step 2: Create a new rule to capture the device location

In the MDK editor, you will create a new JavaScript file called GetCoordinates.js to capture the device location: latitude & longitude.

You can find more details about writing a Rule.

  1. Right-click the Rules folder | New File.

    MDK
  2. Enter the file name GetCoordinates.js, click OK.

  3. Copy and paste the following code.

    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. Save your changes to the GetCoordinates.js file.

Log on to answer question
Step 3: Display the coordinates on a page

You will add this registered control in a Form Cell page.

  1. Double-click the Main.page, drag & drop Static Key Value container control to the page area.

    MDK
  2. In Properties | Layout, change NumberOfColumns to 1.

    MDK
  3. Drag & drop Key Value Item to the container.

    MDK
  4. Provide the following information:

    Property Value
    KeyName Coordinates
    Value Bind it to GetCoordinates.js
    MDK
Log on to answer question
Step 4: List the NPM modules as external reference

In GetCoordinates.js file, you referred nativescript-geolocation and tns-core-modules/ui/enums. You now need to list these modules as external references in BAS configuration so when bundling, MDK editor knows not to worry about these references.

  1. Navigate File menu | Settings | Open Preferences.

    MDK
  2. Search with mdk, click Edit in settings.json.

    MDK
  3. Include below references in mdk.bundlerExternals and save the changes.

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

    MDK

Log on to answer question
Step 5: Deploy and activate application

So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, we deploy this application definition to Mobile Services.

  1. Right-click Application.app and select MDK: Deploy.

    MDK
  2. Verify the URL and Click Enter on your keyboard.

    MDK

    SAP Business Application Studio pre-populates the end-point of the environment it is running in. If you want to connect to a different environment, modify the API endpoint by copying it from your target SAP Cloud Platform account: SAP Cloud Platform Cockpit → Sub-account → API Endpoint

  3. Select the organisation in which you have enabled Mobile Services.

    MDK
  4. Select the space in which you have enabled Mobile Services.

    MDK
  5. Select the an application from Mobile Services.

    MDK

    Upon successful setup, you should see Deploy Succeeded message.

    MDK

    MDK editor stores deployment details in .project.json file. When you deploy to same configuration next time, you will not be asked for above details, MDK editor will pick up these details from .project.json file.

Log on to answer question
Step 6: Add NativeScript plugin and External dependencies in your local .mdkproject

In order to use the existing NativeScript plugin in MDK client, you will need to first add it in .mdkproject and then create your branded MDK client.

  1. Make sure that you have already completed steps 1 to 3 from this tutorial.

  2. Open MDKProject.json file and replace existing content with below:

    {
      "AppName": "DemoSampleApp",
      "AppVersion": "1.0.0",
      "BundleID": "com.sap.mdk.demo",
      "Externals": ["nativescript-geolocation","ui/enums"],
      "NSPlugins": ["nativescript-geolocation"],
      "UrlScheme": "mdkclient"
    }
    
MDK
Log on to answer question
Step 7: Add googlePlayServicesVersion in Android App Resources (Required only for Android client)

With Google Play services, your app can take advantage of the latest, Google-powered features such as Maps, Google+, and more.

  1. Navigate to /DemoSampleApp.mdkproject/App_Resources/Android and create a new file before-plugins.gradle.

    MDK
  2. Provide the below information:

    android {  
      project.ext {
          googlePlayServicesVersion = "16+"
      }
    }
    
Which file/folder is part of an .mdkproject?
×
Step 8: Create & Run the MDK client
  1. Follow steps 4 & 5 from this tutorial to create your branded MDK client and run it in your device.

  2. Once you have accepted the app update, allow your app to access your location.

    MDK

    In Main page, you will see device’s current location.

    MDK
  1. Follow steps 4 & 5 from this tutorial to create your branded MDK client and run it in your device.

  2. Once you have accepted the app update, allow your app to access your location.

    MDK

    In Main page, you will see device’s current location.

    MDK

Congratulations! You have learned how to capture device’s current location in an MDK app and you are now all set to Extend Your MDK App With a Map Custom Control (Using Metadata Approach).

Log on to answer question

Next Steps

Back to top