New plug-in package

Our plug-in packages are placed in the plugins folder. If you need to develop a new plug-in package, you can create a new project named xxx in the plugins folder. The directory structure is as follows

├──plugins 
      ├─yeelight            // yeelight plug-in package
          ├─assets             // Resource folder
          │
          ├─components         // Common component library
          │
          ├─router.js          // Routing file
          │
          ├─App.vue           // Program entry vue file
          │
          ├─main.js           // Program entry file
          │
          └─views              // pagefile

The directory structure can be expanded according to the complexity of plug-ins

How do I start a plug-in package project?
After building the plug-in package directory, we can enter the root directory of zhiting professional project, and then start the plug-in package project through the following command

// xxx is the name of your plug-in package, for example, start yeelight plug-in package
// npm run plugin yeelight
npm run plugin xxx

[1] Front end source code analysis

1. Let's look at the main codes

The main function of the plug-in package is to realize the control of intelligent devices. The control of intelligent devices is mainly controlled by sending instructions through Websocket. Here we refer to the Websocket plug-in package encapsulated by zhiting ws-plugin , you can click here for instructions related to plug-in control Plug in module.

created() {
  // Get device_id parameter
  const { search, href } = window.location
  const params = search ? this.getUrlParams(search) : this.getUrlParams(href)
  this.deviceId = Number(params.device_id)
  this.lightType = params.model || 'ceiling17'
  this.token = params.token
  if (params.name) {
    this.deviceName = params.name
  }
  // Generate connection
  const self = this
  // A global ws object is generated here to communicate between the user and the backend
  this.ws = new Socket({
    url: `ws://192.168.0.84:8088/ws?token=${this.token}`,
    onOpen() {
      self.initData()
    },
    onMessage(data) {
      self.handleMessage(data)
    }
  })
}

Here are two important variables, both of which are passed in from the plug-in link

• token is the user's identity certificate, which is mainly used for permission control
• device_ Device id is the device id that you need to know which device to control when sending control instructions

When entering the page, we need to establish a long Websocket connection to send operation instructions and synchronously update the device status

2. How to control permissions?

When entering the plug-in, we should do a good job in permission control. Users without permission cannot operate on the plug-in page.

After we successfully link the Websocket, we need to send an instruction to get the user's operation permission.

The instructions are as follows:

 getDeviceState() {
      // Get initial value
      this.stateId = Number(`1${Date.now()}`)
      this.ws.send({
        id: this.stateId,
        domain: this.pluginId,
        service: 'get_attributes',
        identity: this.identity
      })
    }

After sending the command, the backend will return the user's permission information, with the following structure

{
  id,
  success,
  type,
  result: {
    device: {
      identity,
      instances: [
        {
            type,
            attributes: [
              {
                  attribute,        // Device operation properties
                  can_control,   // Device operation attribute permissions
                  id,
                  val,          // Device attribute value
                  val_type
              }
           ]
        }
      ]
    }
  }
}

We can get the user's permission according to "can_control", and then we can do the corresponding operation on the page after getting the permission information

3. How to control the equipment?

We also control the equipment by sending instructions

For example: turn on the light

this.ws.send({
        id: 1,
        domain: 'yeelight',
        service: 'set_attributes',
        identity: this.identity,
        service_data: {
          attributes: [
            {
              Attribute: 'power',
              instance_id: this.instanceId,
              Val: 'on'
            }
          ]
        }
      })

Other operations are the same, but the instructions of the operations are different

4. How to synchronize device status?

Each device has an initial state. How can we synchronize the initial state of the device

The same is sending instructions

getDeviceState() {
      // Get initial value
      this.stateId = Number(`1${Date.now()}`)
      this.ws.send({
        id: this.stateId,
        domain: this.pluginId,
        service: 'get_attributes',
        identity: this.identity
      })
    }

After the backend sends the instruction, it will return to the initial state of the device. The structure is as follows:

{
  id,
  success,
  type,
  result: {
    device: {
      identity,
      instances: [
        {
            type,
            attributes: [
              {
                  attribute,        // Device operation properties
                  can_control,   // Device operation attribute permissions
                  id,
                  val,          // Device attribute value
                  val_type
              }
           ]
        }
      ]
    }
  }
}

After we get the device, we can initialize the device

5. How to publish our plug-ins?

After the development of our plug-in package, we will package and compile our front-end and back-end files, and fill in our configuration file structure as follows:

Then upload our plug-in package on zhiting family cloud, and you can see our plug-in package after it is approved.

[2]   Plug in package integration

Package our plug-in package

// xxx is the name of your plug-in package, such as packaging yeelight plug-in package
// npm run plugin yeelight build
npm run plugin xxx build

The packaged file is in the root directory and the plugin file

The back-end file of the plug-in should also be compiled

The directory of the final plug-in package is as follows:

• The html folder is the page file of the plug-in, that is (html, js, css and other static resource files)
• Yeelight plugin is the compiled file of the plug-in backend
• config.yaml is the configuration file of the plug-in

Let's take a look at what information the plug-in's configuration file contains

This information is very important and cannot be omitted! Our plug-in can contain multiple devices, and each device has its own brand.

By adding and installing our plug-in package, zhiting users can find the devices supported by our plug-in, connect devices and operate our devices through zhiting app.