Create|Migrate|Publish native script plugins and consume in an MDK App

Introduction

In one of  the recent customer projects, as we were assessing the potential changes for migrating to MDK(Mobile Development Kit) 6.x version, it came to our notice that the project used few native script plugins from npm registry some of which weren’t maintained proactively making it incompatible with the  latest native script 8 version.
In this blog post, I would like to share my experience with

• Creating a hello world Native Script plugin
• Migrating an existing Native Script plugin
• Publishing Native Script plugin to npm registry
• Using a  Native Script plugin in MDK application

Creating a simple Native Script plugin

Native script provides detailed documentation on how to create a native script plugin to create a native script plugin which can be published to npm repository and install it by

npm i <plugin-name> (or in case of MDK, referencing it in MDKProject.json)

https://github.com/NativeScript/plugin-seed provides a  powerful template. It comes with the entire project structure configured making it very easy to create, test and migrate plugins. So let’s begin.

Let’s create a hello world plugin which logs hello world to the console.

1. Click on  “Use this template” button in https://github.com/NativeScript/plugin-seed
2. Follow GitHub instructions (set repo name, visibility, description) & clone your new repo
3. Now that we have the template in our local, execute the command

           npm run setup

to set up the workspace

4. Configure your npm scope by executing the command,

           npm run config

5. Since we are planning to publish it as a user scope package, name the scope with your npm repository user name
6. Provide the rest of the details and we will get our workspace configured with the new scope.
7. Now we need to add a new package, i.e the folder within which our actual plugin will reside
8. Execute the command,

           npm run add

9. Let us name the package hello-world-toast.We can see that a new folder named hello-world-toast is created within the packages folder.
10. Now let’s add a generic function in common.ts which can be used by Android or iOS platform, wherever we have the plugin used

    export class HelloWorldToastCommon extends Observable {
    
        static sayHello(){
            console.log("hello world!")
        }
    }
    ​

     

    Note: You may also refer https://v7.docs.nativescript.org/plugins/plugin-reference  to have a look at the basic structure of a plugin.

11. Now that we have the functionality set for our plugin, let’s test it. The template has already taken care of the basic framework for tests. Within the tools/demo/hello-world-toast folder we have a file named index.ts where our plugin is already imported.
12. Replace the contents of the testit() function within index.ts file as below

    import { DemoSharedBase } from '../utils';
    import {HelloWorldToast  } from '@adilek/hello-world-toast';
    
    export class DemoSharedHelloWorldToast extends DemoSharedBase {
    testIt() { 
        HelloWorldToast.sayHello();
      }
    }
    ​

13. Now, we can test the implementation. On the plugin root folder runnpm start

14. Select apps.demo.android (since we are testing on an android emulator) 

15. On click of “test hello world toast” the console logs hello world
16. Now that we have the plugin, we can deploy it
17. Navigate to the hello-world-toast folder in packages
18. Execute npm publish –access public
19. This will ask you to login with your npm user id
20. Once logged in, the package will get published

Migrating an existing nativescript plugin

Some of the steps below might be specific to this plugin, but it will give an overall idea about the process and hurdles on the way.
We used  nativescript-background-fetch plugin (https://github.com/transistorsoft/nativescript-background-fetch/tree/master/src) for some of the tasks within our custom MDK project. But unfortunately since this plugin wasn’t migrated to latest native script /java versions, we decided to give it a try manually.
We used the native script-seed template as in the above hello-world example to bootstrap the process. Once the initial set up was done and the scope  configured with the npm user name, we followed the below steps.

1. Create a new package fetch-task
2. Copy the below files from within the src folder of the native script-background-fetch  git repo to the src folder of fetch-task package.

3. Copy the below files from within the src folder of the native script-background-fetch  git repo to the src folder of fetch-task package.
4. Execute the command,

           ns migrate  (this command helps us migrate the library dependencies)

4. Open the aar file in the previous version of the plugin in android studio and change the java versions and targetsdk versions, build and create a new aar file
5. Add the aar file in platforms/android/libs folder in the fetch-task package

6. Change the two entries in package.json as below

7. Make changes as in the original native script-background-fetch plugin demo folder in the apps/demo/src folder
8. Execute npm run start and run the package in android to check if the plugin is working properly
9. Navigate to the fetch-task folder in packages

Publish NativeScript plugin to npm registry

1. Execute npm publish –access public
2. This will ask you to login with your npm user id
3. Once logged in, the package will get published

You will be able to install it as @npmusername/package-name as in https://www.npmjs.com/package/@adilek/fetch-task
in any native script projects and for MDK, we can have it add adding it in NSPlugins section of  MDKProject.json

Use NativeScript plugin in MDK application

Detailed blogs are available  around adding native script extensions in MDK such as  https://developers.sap.com/tutorials/cp-mobile-dev-kit-nativescript-geolocation.html

Summary

This is one such experience to create native script plugin based on our business logic in-case the provided MDK controls does not  support your business requirements and UX designs.

Also you can try  integrate any such view extension into MDK application. Please leave questions and suggestions, if any 🙂