Public account: Dusk Beilin

Q Q group: Study together using Electron to develop desktop applications

What is Electron and what does it do?

Eletron allows developers to develop desktop applications using Javascript, HTML and CSS, and is cross-platform for MAC, Linux and Windows
    1. Reduce the difficulty of development without C# QT only needs basic HTML
    • 1.1 essentially packages the Chrome kernel to render HTML
    1. Reduced maintenance costs cross-platform can be used for a set of code
    1. The community is active and Electron has joined the OpenJS Foundation
    1. Less than a point:
    • 4.1 Large packing volume
    • 4.2 Windows requires various recompiles such as Sqlite etc
    • 4.3 The Installation Interface is simple. Learn NSI AND DUI to beautify the interface

The Electron’s official website www.electronjs.org/

I did the Electron project

At present, there are several simple React AI recognition data display projects and another project with Server. Today, I will summarize the development process and problems encountered in this project

/ / the Server end

  1. Node + Express builds services
  2. Sqlite3 for data storage
  3. Multer video upload Express plugin
  4. FFMPEG captured the video cover
  5. Log4js Log records

// Web/ front-end

  1. React + Redux + React-router-dom
  2. Antd / / UI library
  3. Axios // Data communication
  4. Bizcharts // Data display
  5. Html2canvas // PDF export
  6. Zk-draw // self-encapsulated Canvas drawing library Zonkey – Draw Zonkey Beijing Zhongqing

// Package the project

  1. Shell // Use a Shell script to pack React Electron in a centralized manner
├── build#React pack ├── do # Electron pack ├─ FOLDER ├─ package.json ├─ package.json ├─ public# ├─ readme.md # ├─ release.sh # ├─ Resources # ├─ ├─ SRC # Web directory ├─ ├─ ├─ ├─ ├─ ├─ dirCopy the code

Problems encountered

Sqlite3 needs to be recompiled on Windows 2. FFMPEG package path problem 3. Obtain the local IP address. 4. Save path of uploaded files on the Server. 5Copy the code
1. Windows Sqlite3 compilation problem
Python and VS Studio dependencies cause the compile to fail. Run CMD to install Windows build-tools NPM install --global --production Windows build-tools https://www.npmjs.com/package/windows-build-tools after the install installation depends on the build packaging smooth all the wayCopy the code

2.FFMPEG path problem

Problem description: Using Fluent-FFMPEG development environment normal packaging can not use FFMPEG error path error in the packaging process to remove the ASAR compression can find a path solution to find a path in the unpackaged ASAR file// FFMPEG
const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('ffmpeg-static').replace(
    'app.asar'.'app.asar.unpacked'
);
const ffprobePath = require('ffprobe-static').path.replace(
    'app.asar'.'app.asar.unpacked'
);
ffmpeg.setFfmpegPath(ffmpegPath);
ffmpeg.setFfprobePath(ffprobePath);
Copy the code

3. The local IP address cannot be obtained

/** * @description obtains the localIp address */ localIp: _ => { let netDict = os.networkInterfaces(); for (const devName in netDict) { let netList = netDict[devName]; for (var i = 0; i < netList.length; i++) { let { address, family, internal, mac }= netList[i], isvm = isVmNetwork(mac); If (family === 'IPv4' && address! = = '127.0.0.1 &&! internal) { return address; }}}} Solution 1: Const isVmNetwork = MAC => {// Let vmNetwork = ["00:05:69", //vmware1 "00:0C:29", //vmware2 "00:50:56", //vmware3 "00:1C:42", //parallels1 "00:03:FF", //microsoft virtual pc "00:0F:4B", //virtual iron 4 "00:16:3E", //red hat xen , oracle vm , xen source, novell xen "08:00:27", //virtualbox ] for (let i = 0; i < vmNetwork.length; i++) { let mac_per = vmNetwork[i]; if (mac.startsWith(mac_per)) { return true } } return false; } Solution 2: Obtain the local IP address in broadcast modeCopy the code

4.Server files are saved incorrectly

Problem description: The application program can be installed in disk partitions such as D and E, but the Upload file can only be saved in disk C, resulting in insufficient space in disk C. This problem has not been effectively solvedCopy the code

5.Windows application compatibility

Windows10 and Windows7 compatibility problem: Package at the same time package 32&64 package "win": {"icon": "./resources/icons/icon.ico", "target": [ { "target": "nsis", "arch": ["ia32", "x64"]}]} right-click on Windows7 to open the application compatibility can be run on Windows7Copy the code

Post the final look of the client

Information Searched

To distinguish the virtual network adapter www.cnblogs.com/findumars/p… Electron www.electronjs.org/docs node nodejs.cn/api/ Electron- Builder www.electron.build/ Pin for Linux Github.com/nashaofu/di…

Write in the last

Electron can indeed facilitate the development of left applications, only a set of code can take into account both the Web and Desktop applications, only need to judge the running environment to achieve the choice of functions on the line to write the development of Electron step by step, but I feel unable to start 😈

The basic idea is to explain the development environment construction of Electron based on basic HTML. Fast development based on React front-end framework and Electron 3. Add Server functions on the previous basis and integrate them into Electron to enrich its functions 4. How to make a beautiful installation interfaceCopy the code