simple-electron-nodejs-flutter-web

一个简单的 Electron 应用程序，使用 NodeJS 中间件与 Flutter Web 和 Dart。

该项目名称为 wapui (web application platform for ui)。

Electron 发布到 MacOS、Linux 和 Windows (electron: 版本 21)
支持 npm 管理脚本 (npm: 版本 8)
集成 Node.js 中间件 (node: 版本 16)
集成 Flutter Web (flutter: 版本 3)
支持国际化 (flutter: en, ko)
支持加载旋转动画和状态 (electron: index.html)
支持隐藏 Electron 菜单 (electron: index.html)
设置中的调试模式 (flutter web)
将基本信息和状态复制到剪贴板 (flutter web)
将日志记录到浏览器控制台日志并传输到 nodejs 中间件 (flutter web)
将日志记录到指定日志文件 (nodejs middleware)
支持 restful API (nodejs middleware)
集成 sqlite3 数据库 (nodejs middleware)
等等

该项目向您展示了以下内容。

Flutter Web 与 Node.js 中间件之间的交互方式
Payload 如何在 Flutter Web 的 WebSocket 和 Node.js 中间件的串行端口之间传递
Payload 如何使用 Node.js 中间件中的 localbus 在 WebSocket 模块和串行模块之间进行发布/订阅
如何使用 Flutter Provider 模式在 Flutter Web 中使用静态数据和流数据
如何暴露中间件中的 restful API 并在 Flutter Web 中使用 API
如何在 Flutter Web 中使用计时器和动画显示处理步骤
如何在 Flutter Web 中显示从 CSV 格式数据转换的图表
如何读取和显示 pubspec.yaml 和 package.json 中的版本
如何在中间件或 Flutter Web 中进行调试和日志记录
如何在中间件中使用 sqlite3 本地数据库

截图

架构

Flutter 框架

- /lib                  # flutter web
- /lib/main.dart        # main of webapp
- /lib/home.dart        # home page
- /lib/process.dart     # process pages (scenario example)
- /lib/reports.dart     # reports page
- /lib/settings.dart    # settings page
- /lib/data.dart        # data to serial, config/websocket
- /lib/api.dart         # request api/response to cache

Electron 框架

- /web                 # electron framework
- /web/index.html      # html page to loading flutter web and loading animation
- /web/index.js        # electron main to loading nodejs middleware

中间件 (使用 NodeJS 的 Electron 框架)

- /web/middleware               # integrate to nodejs
- /web/middleware/index.js      # (middleware module: http/websocket listen to 8090)
- /web/middleware/knexfile.js   # sqlite3 local database info

- /web/middleware/db              # DB migration/seeding
- /web/middleware/db/data.sqlite3 # DB file
- /web/middleware/db/index.js     # (DB module)
- /web/middleware/db/migrations   # create to initial tables
- /web/middleware/db/seeds        # insert to initial values

- /web/middleware/server          # api/ws server
- /web/middleware/server/index.js # (server module)

- /web/middleware/server/api           # restful api expose and localbus service
- /web/middleware/server/api/index.js  # (api/ws module)
- /web/middleware/server/api/serial.js # api to serial port list/manage to port
- /web/middleware/server/api/config.js # api to key/value configs
- /web/middleware/server/api/ws.js     # api to websocket between flutter web and serial port

- /web/middleware/server/models            # query service
- /web/middleware/server/models/index.js   # (model module)
- /web/middleware/server/models/query.js   # model query to table
- /web/middleware/server/models/configs.js # query to configs table

发布

要构建生产版本，请先运行 npm run release。

检查 dist/ 输出目录。

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Build release to dist/
% npm run release

日志记录

默认情况下，日志写入以下位置

在 Linux 上: ~/.config/wapui/logs/main.log
在 macOS 上: ~/Library/Logs/wapui/main.log
在 Windows 上: %USERPROFILE%\AppData\Roaming\wapui\logs\main.log

API

# Check to middleware
% curl https://:8090/hello
Welcome!

自定义

Flutter Web (CanvasKit)

默认情况下，Flutter Web 的渲染器是 html。如果您想要 CanvasKit，只需禁用此行。

window.flutterWebRenderer = "html";  // in web/index.html

Electron 应用 (应用程序菜单)

默认情况下，Electron 的默认菜单已被移除。如果您想显示菜单，只需禁用此行。

Menu.setApplicationMenu(null);  // in web/index.js

Electron 应用 (窗口大小)

默认情况下，Electron 应用的大小固定为 800 x 600。如果您想将大小更改为原始屏幕分辨率的 75% 的比例，只需将此行 recalc = true;。

const recalc = false, ratio = 0.75; // in web/index.js

中间件 (默认语言)

默认情况下，语言是 en。如果您想更改为首选语言，例如 'ko' 是韩语。

 // in web/middleware/db/seeds/001_config_seed.js
{
  key: 'locale',
  value: 'en' // 'ko' --> korean
},

调试指南

运行 Electron 应用

基本上，中间件在运行 Electron 应用时会自动运行。

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run app:build
# Run the app
% npm run app

您还可以在 Electron 应用中检查中间件。

# Check to middleware
% curl https://:8090/hello

使用中间件和您的浏览器 (Edge, Chrome 或 Safari)

在浏览器中打开应用: https://:8090

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run build
# Run the server
% npm run middlware

启动 VSCode 进行编码和调试

启动 VSCode。

在 lib/main.dart 中启动调试 (F5 键) Flutter Web。

最好在 web/ 中编辑中间件的源文件，例如 index.js、index.html。

# Clone this repository
% git clone https://github.com/ilshookim/simple-electron-nodejs-flutter-web.git
# Go into the repository
% cd simple-electron-nodejs-flutter-web
# Install dependencies
% npm install
# Install flutter dependencies
% npm run release
# Launching the vscode
% code .

最好在 vscode 中打开 JavaScript 调试终端: ctrl+`，然后检查 vscode 终端菜单右侧的 + 按钮。

# Run the middleware in debugging mode
% npm run mw

开发信息

基本上，构建和发布需要 flutter、npm 和 node，还需要代码和 git 进行编辑和调试。

macOS 上的开发环境

检查版本

# Flutter/Dart
% flutter --version
Flutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision eb6d86ee27 (3 days ago) • 2022-10-04 22:31:45 -0700
Engine • revision c08d7d5efc
Tools • Dart 2.18.2 • DevTools 2.15.0

# Npm/NodeJS
% npm --version
8.5.0

% node --version
v16.9.1

# VisualStudioCode
% code --version
1.72.0
64bbfbf67ada9953918d72e1df2f4d8e537d340e
x64

# Git
git --version
git version 2.37.0 (Apple Git-136)

CentOS7 上的开发环境

安装指南

# install snap
$ sudo yum update
$ sudo yum install -y epel-release
$ sudo yum install -y snapd
$ sudo systemctl enable --now snapd.socket
$ sudo ln -s /var/lib/snapd/snap /snap

# install flutter
$ sudo snap install flutter --classic
# if 'flutter command not found' you should ssh reconnection with a new session

# upgrade git version 1 to version 2
$ sudo yum install -y http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-1.noarch.rpm
$ sudo yum remove -y git
$ sudo yum install -y git

# CXXABI_1.3.8' not found: https://github.com/TryGhost/node-sqlite3/issues/1610
$ wget http://mirror.ghettoforge.org/distributions/gf/el/7/gf/x86_64/gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm
$ sudo rpm -Uvh gcc10-libstdc++-10.2.1-7.gf.el7.x86_64.rpm
$ echo 'export LD_LIBRARY_PATH=$PATH:/opt/gcc-10.2.1/usr/lib64' >> ~/.bashrc
$ source ~/.bashrc

# firewall 8090 (if necessary)
$ sudo firewall-cmd --zone=public --add-port=8090/tcp --permanent
$ firewall-cmd --reload

检查版本

$ cat /etc/redhat-release 
CentOS Linux release 7.9.2009 (Core)

$ flutter --version
Flutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision eb6d86ee27 (10 days ago) • 2022-10-04 22:31:45 -0700
Engine • revision c08d7d5efc
Tools • Dart 2.18.2 • DevTools 2.15.0

$ npm --version
8.12.1

$ node --version
v16.15.0

$ git --version
git version 2.31.1

$ sudo snap --version
snap    2.55.3-1.el7
snapd   2.55.3-1.el7
series  16
centos  7
kernel  3.10.0-1160.66.1.el7.x86_64

Windows 上的开发环境

安装指南

在 cmd 中

# install git
C:\> winget install git

# install vscode
C:\> winget install vscode

# install nodejs
C:\> winget install -e --id OpenJS.NodeJS

在 Powershell (管理员模式) 中

# install choco
C:\> "Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))"

# install flutter
C:\> choco install flutter --pre 
C:\> git config --global --add safe.directory C:/tools/flutter

检查版本

C:\> ver

Microsoft Windows [Version 10.0.22000.1098]

C:\> git --version
git version 2.38.1.windows.1

C:\> node -v
v18.11.0

C:\> npm -v
8.19.2

C:\> code -v
1.72.2
d045a5eda657f4d7b676dedbfa7aab8207f8a075
x64

C:\> flutter --version

Flutter 3.4.0-17.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 9833838839 (5 weeks ago) • 2022-09-20 18:12:36 -0500
Engine • revision 9b2472da99
Tools • Dart 2.19.0 (build 2.19.0-146.1.beta) • DevTools 2.16.0

GitHub

查看 Github

一个简单的 Electron 应用程序，使用 NodeJS 与 Flutter Web 和 Dart

simple-electron-nodejs-flutter-web

截图

架构

发布

日志记录

API

自定义

Flutter Web (CanvasKit)

Electron 应用 (应用程序菜单)

Electron 应用 (窗口大小)

中间件 (默认语言)

调试指南

运行 Electron 应用

使用中间件和您的浏览器 (Edge, Chrome 或 Safari)

启动 VSCode 进行编码和调试

开发信息

macOS 上的开发环境

CentOS7 上的开发环境

Windows 上的开发环境

GitHub

一个冥想应用，具有正常冥想应用的基本功能

一款源自 Dribble 设计的 Flutter 新闻应用用户界面

simple-electron-nodejs-flutter-web

截图

架构

发布

日志记录

API

自定义

Flutter Web (CanvasKit)

Electron 应用 (应用程序菜单)

Electron 应用 (窗口大小)

中间件 (默认语言)

调试指南

运行 Electron 应用

使用中间件和您的浏览器 (Edge, Chrome 或 Safari)

启动 VSCode 进行编码和调试

开发信息

macOS 上的开发环境

CentOS7 上的开发环境

Windows 上的开发环境

GitHub

一个冥想应用，具有正常冥想应用的基本功能

一款源自 Dribble 设计的 Flutter 新闻应用用户界面

您可能还会喜欢……

订阅 Flutter Awesome