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.