1 introduction

At the end of 2021, I first built a private cloud note-taking server with Leanote, but later I felt that the function was not powerful enough and the page was not good-looking enough. Based on Vditor component, I made a cloud server version of note-taking software for myself. However, Vditor is very versatile, but the package is a bit too big, which can’t be opened when the network is bad, and it’s a bit awkward when you need to read your notes in a hurry. Another problem is that the cloud server was bought back to do testing, it may be reinstalled one day, there is no plan to store data for a long time, but also face the embarrassment of forgetting to renew, besides, the current technical ability and time and energy are relatively limited, the security of the server is also a headache. To think about, feeling through the last experience, can make a local notes software.

2 Demand Analysis

As a standard note taking software for your own use, the current requirements are as follows:

  • 😆 nice interface, dark color. Daily use of the software is basically dark, night scene more, various switching should not be affected
  • 😛 Interact as little as possible and focus on the notes themselves. No logins, pop-ups, ads, anything. CURD is fine.
  • 🙄 supports global search, one file to manage all notes
  • 🥰 Markdown editors what you see is what you get, like Typora

3 Technology selection

According to the demand, combined with their current understanding of the technical ability, do the following selection:

  • Core components: As a Markdown note, the most important thing is the renderer,VditorIt is the best Markdown component I can find at present. Besides, I have some experience in developing cloud server version last time (There are old code can copy 🤡So all of the technology selection of the auxiliary type will revolve around this.
  • The desktop partSince the core component is already a Web front-end project, the carrier must be a browser, and there are two options at the beginning. One is to use C# development, in Winform embedded Chromium browser part – Cefsharp. This is also a relatively experienced operation, after all, using this component to develop a crawler tool. The reason why it was not selected was that the interface design could not meet personal aesthetic requirements, and the focus of the input method after Chromium was embedded in WPF development could not be fixed on the main interface, so the method was aborted directly. The second plan is the current finished plan, useElectronFramework to develop. Obviously, it works. Vditor supports Vue3, so the desktop part can be developed using Electron + Vue3.
  • The service side: According to node.js’ technical understanding of Yogurt at present, Electron can only help solve the problem of front-end effect presentation, while node.js cannot solve the problems related to operation data storage and image storage, at this time, other means need to be considered. There are currently three solutions: Python, C#, and Golang, which I’m not familiar with at all. The pros and cons of the three are also clear. Python is my main language at present, which is familiar with and fast in development, and has many packages. C# is also familiar, but the key is that the most popular lightweight NoSQL database, liteDB, only supports.net. Golang is very unfamiliar to me. I have only been in touch with it for less than 2 months, and I am at a stage of forgetting while writing. Finally, considering the convenience of installation and maintenance of desktop application running environment, as well as the focus of the development of the server, holding the mentality of learning, the final choiceGolangAs a server-side development language.
  • The database: The development focus is on desktop applications, so the primary requirement for data storage is light weight, other parts as long as meet the normal CURD is enough, a person to write notes, there is no performance bottleneck. Personal ideal is to choose a lightweight single file NoSQL database, after looking for a long time did not find the right, and finally returned to the classic database embrace —Sqlite3.

4 Development Environment

information instructions
The operating system Microsoft Windows 10 Professional Workstation 10.0.19042 64-bit
The development tools Visual Studio Code
Vditor version 3.8.10
Electron version 13.0.0
Vue version 3.0.0
The Node version 16.13.1
NPM version 8.1.2
Golang version Go version go1.17.5 Windows/amd64
Sqlite3 version 3.32.3

5 Development History

5.1 Front-end Development

At the beginning, I planned to separate Vue and Electron. I finished the Vue part first, and then used Electron to pack. But I was not familiar with Electron, so I just stopped. Vue supports Electron, then uses it

vue ui
Copy the code

Command to create a Vue project. The following plug-ins have been installed:

Runtime dependencies, that is, imported external components, are as follows:

Software functions are relatively simple, so the interface layout has been simplified.

So that’s the layout:

  • 💡 is responsible for the title bar and form control
  • 💡 Left is responsible for note navigation
  • The largest area on the right of 💡 is responsible for editing notes

UI tried the recent attention is relatively high new mimicry effect, because the interface design is relatively simple, generally speaking, the effect is good. Because it is their own development, if there is any new effect in the later period, you can try to put it inside, well, you can toss about 🤩.

Specific code, see gitee warehouse gitee.com/Yogurt_cry/…

5.2 Server Development

In addition to the development of cloud server version last time, this is the second time to use Golang to develop the project. The project is relatively simple, and the CURD of notes is the key, so the code adds up to only 290 lines. The main is to achieve: search, new, save, delete, access, that is, CURD.

So using Golang to operate SQlite3 is the key. I don’t know how to deal with it, so I refer to the operation of online God and complete the development.

References:

Golang operation sqlite3

6 Packing Experience

Compared with packaging, the development of the above actually did not spend long time, front-end development is the most time is the shadow of the new mimics, debugging for a long time to come out of their more satisfactory effect.

For desktop development used to Visual Studio’s F5 running test, F6 compiler solution for me, making a package will also be a variety of strange Electron is really a little strange.

I thought there was only one:

npm run electron:build
Copy the code

It took me more than 5 hours to deal with various exception errors.

6.1 Electron Packing Configuration

This is the first unexpected problem. It won’t start after the first packing. To be exact, it started, but couldn’t get into the project, just a black screen. It is the same as if Vue was packaged and not configured through Nginx.

Finally, after searching for information in many ways, I realized that using THE UE – CLI-plugin-electron – Builder originally needed to write configuration files… I thought I had it all figured out.

References:

Brief: Two ways to package or generate an application with Electron: Build under VUe-cli-plugin-electric-Builder

Brief: electron- Builder packages specified resources to the installation directory

CSDN: How does Electron use Webpack to pack preload files in webView tags

Vue Cli: Vue Cli plug-in Electron Builder

Electron – Builder: Any Windows Target

6.1.1 There is no output problem of preload.js during Electron packaging

Well, it’s also a matter of packaging configuration files.

6.1.2 There is no output problem of external program during Electron packaging

Well, it’s also a matter of packaging configuration files.

The following is an example of packaging:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: 'com.ccsdesgin.note'.productName: 'Cloud Notes'.copyright: 'Copyright © 2022'.directories: {
          output: './dist_electron'
        },
        extraResources: {
          from: './server'.to: 'server'
        },
        win: {
          icon: './public/favicon.ico'.target: [{target: 'nsis'.arch: [ 'x64']]}},nsis: {
          oneClick: false.allowElevation: true.allowToChangeInstallationDirectory: true}},preload: './src/preload.js'}}}Copy the code

6.2 Child_process Failed to start child processes

In the beginning, Yogurt was stored in main.js, which is Vue project’s main.js. I kept reporting that I couldn’t find the file. The latter is also because of the solution to the problem introduced by external files, it is really solved.

The background service needs to be started before the main form starts. It should be placed in main.js, but it fails several times. Main. js is the main program script in the Vue project, and it cannot obtain the path of external programs or operate external programs after packaging. Background. js is the main program script of Electron, and only it can operate system files through Node.

References:

Digging gold: Start other exe programs via electron

Node.js: node.js v16.13.2

Nodejs: How to play child_process

6.3 The absolute path of Golang Project

Since the Golang compiled server requires a subprocess call via Electron, the startup directory is not the expected path, and I thought it would be possible to start using./ (because it is ok to use go run./main.go for development). Note. Db was installed directly into the Electron root directory, and then the /Static folder was inaccessible. However, after some testing, I found that both Golang path run and build actually return to the path of the development folder, which was a bit confusing. Finally, after searching for information, I solved the problem:

func main(a) {
    appPath, _ := os.Executable()
    currentFolderPath = filepath.Dir(appPath)
    println(currentFolderPath)
}
Copy the code

References:

Zhihu: Completely solved the problem of Golang getting the absolute path of the current project

7 afterword.

The above is all the development process, using spare time, spent 3 weeks in front and back, put this tool out, or very sense of achievement. In addition to gaining a note-taking tool of my own, I also gained the experience of exposure to new technology, which is a good start for future development and a new option for developing desktop level applications.

By the way, this article was written using this tool.