Preface:

My star repO has more than 100, one day I looked through the list, I remembered there were a lot of things I don’t know why the original star… However, I personally think that there are usually the following items on Github star:

  • This project is used in the current or future projects, in case I forget to find it later (such as a pile of NPM packages used in the front end).
  • Study and peruse the source code implementation of the project (Vue, React, etc.)
  • Practical projects (such as SS, Lantern, and some driving projects…)
  • Open source books and documents
  • Other reasons, such as out of the encouragement of the author, or following the famous star, or people who know each other as fans…

Forking someone else’s project usually means you have to make some changes and then fork the changes into the original project, so there’s no need to go into the details

The main reasons for my STAR project are the first three, but many of my star staff have forgotten, and I feel bad about this, so I want to write a client to facilitate my own management of the STAR project

As it happens, I haven’t written much about desktop applications, which is also a practical exercise. The project address is github.com/ZEROKISEKI/…

Technology selection:

The desktop web can generally use electron as support, and the front end is vUE, so there is a corresponding support for electron-vue, but generally we know that the interaction with the system API is provided by electron or node.js. And then messaging through ipc or something like that. Since I’ve been learning Golang recently, I was wondering if I could use front-end code to write user representation and golang as system API interaction support. Then I found the project go-Astilectron:

Thanks to go-astilectron build cross platform GUI apps with GO and HTML/JS/CSS. It is the official GO bindings of astilectron and is powered by Electron.

Go and Javascript can deliver messages via interfaces such as sendMessage and OnMessage, followed by front-end options such as parcel, Vuetify, and Pouchdb, which are used for the first time:

Vue2 + VuE-Router + Vuex + VUE-I18N + Parcel UI Framework Vuetify is an evolutionary Material Design framework Pouchdb Network Request: Axios code highlighting and Markdown Rendering: Github – Markdown – CSS

Project Construction:

First you have to have Golang installed and set upVariables such as GOPATH can be referenced if they have not been configuredbuild-web-application-with-golangTutorial configuration

If the above parts are already configured, then install the Go-Astilectron-related dependencies:

$ go get -u github.com/asticode/go-astilectron
$ go get -u github.com/asticode/go-astilectron-bundler/...
$ go get github.com/ZEROKISEKI/go-astilectron-bootstrap
Copy the code

In China, the above get process will probably encounter this error

unrecognized import path "golang.org/x/ ..."
Copy the code

This error can be resolved using Golang’s Github image library if it cannot be resolved:

$ mkdir -p $GOPATH/src/golang.org/x $ cd $GOPATH/src/golang.org/x $ git clone https://github.com/golang/crypto.git $ git  clone https://github.com/golang/net.git $ git clone https://github.com/golang/sys.gitCopy the code

If you haven’t installed a parcel yet, install it all the way to your desktop. If you haven’t installed a parcel yet, you can use the bundler command to build a desktop executable.

yarn global add parcel-bundler

or 

npm install parcel-bundler -g
Copy the code

To build:

$ cd src
$ yarn or npm install
$ npm run build
Copy the code

Now you can use bundler:

$ cd ..
$ astilectron-bundler -v
Copy the code

The above step will download Astlectron and electron. For Chinese, there will probably be problems again. It is the lack of download speed or too slow that leads to failed.

First, create a folder for the current project, such as cache_astilectron_bundler, and add a line of code to bundller. json:

“cache_path”: “cache_astilectron_bundler”

It can then be found at github.com/electron/el… Find the corresponding version of Electron 1.8.1 for your system, place it in cache_Astilectron_bundler, and rename it as follows:

Electron - Windows-amd64-1.8.1. zip(Windows OS) Electron - Darwin -amd64-1.8.1.zip(OSX OS) Electron - Linux - amd64 -, version 1.8.1.zip (Linux)Copy the code

In github.com/asticode/as… Download version 0.20.0 of Astilectron, also in cache_Astilectron_bundler, renamed to:

Astilectron - 0.20.0. ZipCopy the code

Of course, if you want to bundler three systems versions on the same PC at the same time, download the corresponding electron 1.8.1 versions and rename them all in cache_astilectron_bundler. Then add the following code to bundler.json:

"environments": [
    {"arch": "amd64", "os": "darwin"},
    {"arch": "amd64", "os": "linux"},
    {"arch": "amd64", "os": "windows"}
],
Copy the code

Bundler should now be able to generate the corresponding binary executable. The default build address is in the output folder of the current project

Project Demo:

Login can be in English or Chinese:

After logging in with OAuth, you’ll see that you’ve starred the repo by category (by language):

The code files and markdown files are rendered and a directive is written to prevent loading such as **./ XXX,.. / XXX,# XXX **

Having researched some of the source code for Octotree, I have written a component of my own to view the project code tree:

Custom classification:

Previously loaded files can be viewed in offline environment:

Postscript:

First use of parcel, so-called zero configuration to build is not cover, but in the process of using or there is a problem, mainly vuetify. CSS/vuetify. Min. Some of the CSS styles used such as * * display: – its – box; -webkit-box-orient: vertical; **, which is deprecated in Autoprefixer and csSNano for CSS compression, will simply remove such code, while Parcel’s build uses CSsnano by default and the only way not to use it is –no-minify, In this case, all files are not compressed, and the js files packaged are several m in size (but still use file path, so it doesn’t matter).

Go-astilectron loads the file path file for Github oauth, mainly by new a window whose address is Github oauth Authorize, Then listen webcontents. Will. Navigate and webcontents. Get. Redirect. Request the two events, will return to the request code to request token, again carries on the message to the main window, After sending message to the front-end token, the main window completed the oauth process. However, go-Astilectron did not support these two events, so it proposed a PR to add support for these two events, and also wrote a demo. There are still a lot of unfinished things in Go-Astilectron, so I’m not sure what will happen (if any).

Check the offline state (mainly to avoid the case of request when offline). The initial plan is to use navigator.online, but it will be fine if it returns false, and it will not be able to access the Internet if it is true (for example, you have enabled VMware Network). Therefore, I used Go to write a DIAL for TCP connection with api.github.com to detect the offline state. There is no problem in MAC, but cannot read Webcontents of undefined will appear in Windows, and this problem needs to be corrected

It feels like every time you use something new, it’s a step in the hole. If you are interested, welcome star