eMOBIQ Service Manager

Steps to create a new package:

1. Open your terminal.
2. Create a new folder for the package to be created.
3. Move to that folder.
4. Login with your eMOBIQ Service Manager account by entering “emobiq login”.
5. Initialize the project by entering “emobiq plugin init”, to generate the necessary files.
6. Using terminal or any IDE, open 'platforms/client/common/editor/index.json' and write your code.
   This is where you create the editor related codes, sample codes below:
   Notes:
   • The "type" defines whether it is a "function" or a "component".
   • The "attributes.value.default" entry is the component's default attribute.
   • The "attributes.custom" entry will be reflected in properties tab.
   • The "events" entry will be reflected in the platform event flow selection of event.

   [
     // Sample code for function
     {
       // function | component
       "type": "function", 
       "name": "myFunction", 
       "parameters": [ 
         { 
           "name": "value", 
           // string | integer | number | boolean | functionList
           "type": "string" 
         },
         { 
           "name": "callback", 
           // string | integer | number | boolean | functionList
           "type": "functionList" 
         }
       ] 
     },
     // Sample code for component
     {
       "type": "component",
       "name": "MyLabel",
       "attributes": { 
         "value": { 
           "default": {
             "width": "50%"
           }
         }, 
         "custom": [
           { 
             "name": "name", 
             "title": "Name",
             // string
             "type": "string"
           }
         ] 
       }, 
       // Default: click, scrollBottom, scrollTop, onScroll,
       // press, longPress, sortRelease.
       // Custom: user can define whatever event they want, but they need to enable the logic for it, see tap example.
       "events": [
         "tap"
       ]
     }
   ]
   							

7. Using terminal or any IDE, open 'platforms/client/common/preview/index.js' and platforms/client/cordova/app/index.js' then write your code.
   This is where you create the preview/app related codes, sample codes below:
   Notes:
   • Preview refers to the emulator within the platform.
   • App refers to the build project from the platform.
   • The 'platforms/client/common/preview/index.js' usually same as 'platforms/client/cordova/app/index.js'.

    // Function
   // The "function myFunction(...)" is the created function in the editor.
   function myFunction(parameters) {
     // Do a hello world to the value passed
     let welcome = "Hello, " + parameters.value + "!";
     
     // cordova-plugin-dialogs
     // The "navigator.notification.alert" is an implementation of a plugin function.
     navigator.notification.alert(
       welcome,          // message
       function(){},     // callback
       'Welcome',        // title
       'Okay'            // buttonName
     );
     
     // Helper function to access component through id or name.
     // @param {string} identifier - the component id or name,
     //                              it will prioritize id before name.
     let component = pluginGetComponent("componentName");
     
     // Helper function to trigger callback function.
     // @param {object} element - main object/caller (make sure this is from the root caller)
     // @param {functionList} functionList - the callback to be triggered
     // @param {object} parameters  - the additonal data that are passed through the callback
     // @param {any} parameters.input - the data to be passed to input field
     // @param {any} parameters.extra - the data to be passed to extra field
     let self = this;
     pluginCallback(self, parameters.callback, {input: welcome});
     
     return welcome;
   }
   	
   // Component
   // The "MyLabel" is the created component in the editor.
   let MyLabel = {
     // The "createElement" function lets user define how the component is going to be created.
     createElement: function() {
       var element = document.createElement("label");
       element.innerHTML = 'My Label - Plugin';
       
       let self = this;
       element.onclick = function() {
         // Helper function to attach event based action.
         // @param {object} element - main object/caller
         // @param {string} eventName - the component event name, only works if it is defined
         // @param {object} parameters  - the additonal data that are passed through the callback
         // @param {any} parameters.input - the data to be passed to input field
         // @param {any} parameters.extra - the data to be passed to extra field
         pluginEvent(self, "tap", {
           input: "Plugin"
         });
       };
   
       return element;
     }
   };
   							

8. Using terminal or any IDE, open 'platforms/client/cordova/plugin/index.json' then write your code.
   This is where you include all the plugins to be included, sample codes below:
   Notes:
   • The "name" is the name of the plugin that will be installed.

   [
     {
       "name": "cordova-plugin-dialogs"
     }
   ]
   							

9. To build the package that you created, enter in the command line emobiq plugin build”. The built files will be generated in a "dist" folder.
10. Enter in the command line “emobiq plugin test” to test if the codes written are valid.
11. Enter in the command line emobiq plugin version (patch|minor|major)” to increase the version number.
12. Enter in the command line emobiq plugin publish” to publish it on the server and make it accessible to the eMOBIQ platform.
13. Your package is now successfully created/updated and published.