The source code for this blog is available on GitHub.
Note
Top

Electron App for Local Machine Management

Cover Image for Electron App for Local Machine Management
Chen Han
Chen Han

Electron

Electron is a framework that allows you to build cross-platform desktop applications using web technologies such as JavaScript, HTML, and CSS. It is based on the Chromium web browser and Node.js runtime, and allows you to build applications that can run on Windows, macOS, and Linux.

To use Electron, you will need to install it on your machine and set up a project using the Electron API. You can then use web technologies to build the user interface and functionality of your application. Electron also provides access to native system capabilities, such as the filesystem and system tray, through its API.

If you are interested in building an app for your local machine using Electron, you will need to have some knowledge of web development technologies such as HTML, CSS, and JavaScript. You will also need to be familiar with the Electron API and how to use it to access native system capabilities and build the user interface of your app.

If you want to sell your app, you will need to consider how you will distribute and market it. You can distribute your app through online platforms such as the Mac App Store or the Microsoft Store, or you can create your own website to sell the app directly to users.

As for introducing your product or potential products, it would be helpful to provide a clear and concise overview of what your product does and how it benefits users. You should also consider highlighting any unique features or differentiators that set your product apart from similar ones on the market. It may also be helpful to include examples of how your product can be used and any case studies or customer testimonials that demonstrate its effectiveness.

參考連結

https://ourcodeworld.com/articles/read/106/how-to-choose-read-save-delete-or-create-a-file-with-electron-framework

https://medium.com/jspoint/working-with-files-i-o-in-an-electron-application-b4d2de403f54

Two worlds of Electron

The "two worlds" in Electron refer to the main process and the renderer process. The main process is responsible for managing the application's lifecycle and interacting with the operating system, while the renderer process runs the web pages that make up the user interface of the application.

The main process is responsible for creating windows, handling system-level events, and interacting with the native operating system APIs. It runs on Node.js and has access to the full Node.js API.

The renderer process, on the other hand, is responsible for displaying the user interface of the application and handling user interactions. It runs in a web page and has access to the web platform APIs like the DOM, CSS, and JavaScript.

The "two worlds" concept in Electron is important to understand because it allows developers to use web technologies to build a desktop application while still having access to the underlying operating system's functionality through the main process.

Warmup Project

Project1 - Graduate DVD

This is my second project, using tools such as Nuxt and Electron. The HTML syntax used is Pug, and due to issues with installing node-sass, sass-loader, and bootstrap, this project was completed in a somewhat difficult manner.

Due to issues with using nuxt build to generate static files, specifically with regards to path reading, and because the original files were burned onto a CD in the form of a 'flash', I believe that, based on the speed of taking on this project, using electron to package it is the best approach.

Version

This project uses Nuxt + Electron

> node -v
v12.14.1

> npm -v
6.13.6

Running on Mac

electron-packager . --platform=win32 --arch=x64
electron-packager . --platform=win32 --arch=x64 --overwrite

The following is the source code of web and desktop app version. I start the project from here

Results

  • Three entry points for class photos, event photos, and e-books.
  • Class photos and event photos are grouped by class
  • Each class has a slideshow of five images.

Regrets

  • Unable to use sass, bootstrap
  • Despite successfully completing the project, there were difficulties in setting up a windows environment
  • Had to remove Vuelify which was originally installed.
© 2024 WOOTHINK. All Rights Reserved.
Site MapTerms and ConditionsPrivacy PolicyCookie Policy