Create plugins based on our SDK!

Hitbim helps developers to easily initialize, configure, and build the plugins with various functionalities which later can be used to construct an app. Every app built by our platform is made by creating components and linking them together. This makes it easier for you to create different apps by re-using the same plugins! In the Plugins Dashboard you can create plugins and connect them. This documentation helps to start and walks through the steps to create your first app.


What are the plugins?

A plugin is a piece of software that acts as an add-on to a web browser and gives the browser additional functionality. A theme or skin is a preset package containing additional or changed graphical appearance details, achieved by the use of a graphical user interface (GUI) that can be applied to specific software and websites to suit the purpose, topic, or tastes of different users to customize the look and feel of a piece of computer software or an operating system front-end GUI (and window managers). Our purpose to use plugins:

  • Enable third-party developers to extend an application
  • Support easily adding new features
  • Reduce the size of an application by not loading unused features
  • Separate source code from an application because of incompatible software licenses.

Requirements

The requirements of the Bim SDK for JavaScript are as below:

  • NodeJS 10.20.x+ along with npm
  • Bim SDK 0.2.1 or later

Prerequisites

If you donโ€™t have an account, then sign up on our website Hitbim, choose your goal and start making plugins.


Tutorials

Here tutorials that can help to create a database, plugin, multiple plugins and add CMS.


Plugin Database

This document aims to create the desired table in the HITBIM DB and make it available in the plugin.

  • Hitbim database creating a table on a server
    1. Login to Hitbim.
    2. Click < > button at the bottom left to navigate to the plugin dashboard.

    3. Click + button to create a new plugin.
    4. When a new plugin is created, go to the Plugin Details page.

    5. After you set the table name, uploade SQL file and it creates a DB table based on the contents of the file. โ€ป Setting the table name on the current web page also causes the table name to be determined by the name inside the uploaded SQL file.

  • Connecting generated table with Plugins
    1. Change the value of the $B.init function in the plug-in token, pluginId from the main JS file to the Plugin ID, Key value obtained from above.

    2. The connection with DB is finished!
  • Send queries and use data
    1. 
                          var param = {
                            query:[
                             {
                              query:  'SELECT', // SELECT, INSERT, DELETE etc
                              table: 'Table_name', // Table name
                              where:{ // Where A and B
                                condition1 : uid,
                                condition2 : 'cond2'
                              }
                             }
                            ],
                            env: 'dev',
                            pluginId:"plugin-Example_pluginid" // Plugin ID from website
                        };
                        

      Define parameters for the query:

      query: sql statement to be used

      table: table name obtained earlier

      where: conditions in the form of an object

      env: environment in which query executes

      pluginId: plugin ID obtained earlier

    2. bim.db.query sends a query through a function, and receives a response.
      
                          bim.db.query(params, function (res) { // get DB response by callback
                            console.log(res[0].data)
                        });
                        
  • Query Example
    1. SELECT
      
                          var params = {
                            query:[
                                {
                                query:  'SELECT',
                                table: 'table_name',
                                where: {
                                    email: email_val,
                                    pass: password_val,
                                    username: username_val
                                    },
                                }
                            ],
                            env: 'dev',
                            pluginId: "plugin-Example_pluginid"
                        };
                        
    2. INSERT
      
                          var params = {
                            query:[
                               {
                                query:  'INSERT',
                                table: 'table_name',
                                rows:{
                                   email: email_val,
                                   pass: password_val,
                                   username: username_val,
                                   active: 1
                                   }
                                }
                            ],
                            env: 'dev',
                            pluginId:"plugin-Example_pluginid"
                        };
                        
    3. UPDATE
      
                          var params = {
                            query: [{
                                query: "UPDATE",
                                table: "table_name",
                                rows: {
                                    email: email_val,
                                },
                                where: {
                                    username: username_val,
                                    active: 1
                                    },
                            }],
                            env: "dev",
                            pluginId:"plugin-Example_pluginid"
                        }
                        
    4. DELETE
      
                          var params = {
                            query:[
                                {
                                    query:  'DELETE',
                                    table: 'table_name',
                                    where:{
                                        user_id: userid_val,
                                        active: 1
                                    }
                                }
                            ],
                            env: 'dev',
                            pluginId: "plugin-Example_pluginid"
                        };
                        
    5. SELECT FILTER
      
                          var params = {
                            query: [
                              {
                                query: "SELECT FILTER",
                                table: "table_name",
                                filter: {
                                  values: values,
                                  in: "username_val",
                                },
                                order: {
                                  field: "date",
                                  sort: "DESC",
                                },
                                limit: {
                                  start: 0,
                                  end: 10,
                                },
                                env: "dev",
                                pluginId: "plugin-Example_pluginid",
                              },
                            ],
                          };
                        
    6. INSERT IF NOT EXISTS
      
                          var params = {
                            query: [
                              {
                                query: "INSERT IF NOT EXISTS | UPDATE",
                                table: "table_name",
                                rows: {
                                  email: email_val,
                                  pass: password_val,
                                  username: username_val,
                                  active: 1
                                },
                                where: {
                                  email: email_val,
                                },
                                set: {
                                  active: 1,
                                },
                              },
                            ],
                            env: "dev",
                            pluginId: "plugin-Example_pluginid",
                          };
                        

Connecting Plugins

Say you've added the new plugin, but how do you navigate from your existing plugin to the newly created one?
This tutorial will help you by going through the basic steps for connecting plugins together!

It's easier to switch between multiple plugins if you create a tabbar. So, head to your existing plugin and add this to the js file after the plugin initialization code:


...
}).then(() => {

var shtml = `
  <bim-component data-id="component-2n52rfaA" data-type="my_tabbar">
      <div id="component-2n52rfaA" class="toolbar tabbar tabbar-labels tabbar-pos">
          <div class="toolbar-inner">
              <a href="#tab0" class="tab-link  YOUR_FIRST_PLUGIN_NAME" bim-item-iid="bim-replace-byId" style="min-width: 100.5px;"> <img bim-type="icon/image" src="ICON_FOR_FIRST_TAB" class="inactive icon-size" style="width: 30px; height: 30px;"> </a>
              <a href="#tab1" class="tab-link  YOUR_SECOND_PLUGIN_NAME" bim-item-iid="bim-replace-byId" style="min-width: 100.5px;"> <img bim-type="icon/image" src="ICON_FOR_SECOND_TAB" class="inactive icon-size" style="width: 30px; height: 30px;"> </a>
          </div>
      </div>
  </bim-component>
  `;

      

You can see that we are adding <a> tag links, which we'll use to navigate between plugins.
Then you can add this code to set and build your tab component (just right after the above code):


bim.component.set({
  id: "component-2n52rfaA",
  type: "my_tabbar",
  css: "tabbar.css",
  js: "tabbar.js",
  assets: "component/assets",
  level: "top",
  body: shtml,
});

bim.component.build({
  id: "component-2n52rfaA",
  type: "my_tabbar",
  },
  function (component) {
    $(".app-content").append(component);
  }
);         
      

We now need to associate previously added <a> tags (from tabbar) with functions. Add this to your plugin's .js file:


$(document).on("click", ".YOUR_SECOND_PLUGIN_NAME", function () {
  bim.app.storyboard.moveTo({
    page: "YOUR_SECOND_PLUGIN_NAME",
    plugin: "YOUR_SECOND_PLUGIN_NAME",
  });
});      
      

Congratulations! You have connected two plugins together! ๐Ÿ˜€

Plugin CMS

You can connect and activate a CMS for your plugin by including this to your .js file:

<script type="text/javascript" src="https://cdn.hitbim.com/v/0.2.1/sdk/bim.sdk.js"></script>

Functions

Here are the functions that can be useful throughout your plugin development:

Initialize the plugin

                  $B.init({
                    name: 'blogio',
                    load: 'template_engine',
                    device: true,
                    token: 'token'
                    pluginId: 'plugin-id',
                    framework: 'framework7'
                  });
                
Call IOS/Android Native functions

                  (A)-> hardware: String: 'qr',
                  (B)-> event: String: 'custom parameters for a native function',
                  (C)-> fn: String: 'my_callback_function_name'
                  (D)-> params: Object || String: '{myKey:true} || my_string'
                    //NOTE: Only Object with string values or boolean are accepted

                  bim.native.exec({
                    hardware: String:'gallery (A)',
                    event: String:'event_name (B)',
                    fn: String:'my_callback_function_name (C)',
                    params: Object:'my_parameters (D)'
                  });
                
How to build template

                  (A)-> Plugin id is required, use bim.plugin.id.get()
                  (B)-> Main template of the plugin, uses placeholders technique https://idangero.us/template7/#.YDYms5P7SYV
                  (C)-> Context contains the JSON Object that will populate the plugin
                  (D)-> Plugin name is required, use bim.plugin.name.get()
                  (E)-> This option if the plugin will require to request more content from the server; infinity scroll technique.
                        NOTE: *** This option is deprecated ***

                  var template = bim.app.template({
                    id: bim.plugin.id.get() (A),
                    html: feeds (B),
                    context: feeds_context (C),
                    name: bim.plugin.name.get() (D),
                    dynamic: true (E), ** deprecated **
                  });

                  // THIS RETURN A PROMISE 
                  template.then(function(template){
                    // APPEND CONTENT TO APP OR DO SOMETHING ELSE
                  });
                
How to append our content into the app

                  Insert content into current visible screen, use: 'current_screen' (String)
                  $B.append({$:'current_screen'}, all_feeds);
                  OR
                  Insert content in some section of the screen
                  $B.append({$:'.my_element'}, all_feeds);
                  // Using template variable from example above:
                  template.then(function(compiled){
                    $B.append({$:'current_screen'}, compiled);
                  });
                
How to create a new screen

                  (A)-> Name of the new screen
                  (B)-> Context to fill your template dynamically
                  (C)-> Detect in case of load automatically a language by detecting device language
                  (D)-> Template of the new screen
                        NOTE: Placeholder should match the json keyNames 
                        from context lang key
                  (E)-> Load page with animation
                  (F)-> Function to generate the new page, can be done synchronously or asynchronously

                  var page = {
                    page:{
                      name: 'login' (A),
                      context: { (B)
                        lang: 'lang/login-en',
                        detect: false (C)
                      },
                      content: 'templates/login.html' (D),
                      animate: true (E)
                    },
                  };

                  bim.app.page(page, function(){ (F)
                    console.log('trigger after opened ', this);
                  });