8、交互式汽水分配器系统搭建指南

交互式汽水分配器系统搭建指南

1. 系统搭建前期准备

在构建汽水分配器系统时，首要任务是创建用户交互的图形界面。我们可以借助之前的示例，利用 Electron 框架在树莓派上构建一个简单的 Web 界面。具体步骤如下：
1. 在 Wyliodrin STUDIO 中创建一个新的 JavaScript 应用程序。
2. 复制之前的应用结构，其中包含一个 UI 目录，里面有 index.html 和 app.js 文件。

2. 定义 main.js 文件

main.js 是需要定义的第一个文件，它是一个 Node.js 脚本，用于启动 Electron 应用程序。由于应用的主要结构与之前相同，所以文件内容无需更改。不过，当前构建的系统更为复杂，可能会出现错误，需要进行调试。若应用仍在开发中，就需要进行调试，查看控制台消息和错误信息。对于常规的 Web 应用，可以通过鼠标和键盘与浏览器交互，启动开发控制台，但在我们的情况下，无法以交互方式控制 Electron 环境。因此，若要启动开发控制台，需在主进程中添加以下代码：

mainWindow.webContents.openDevTools();

3. 创建用户界面

在正确配置 Electron 环境后，就需要创建用户界面。用户界面由 HTML 和 JavaScript 两个文件组成。为了使应用易于配置和修改，在 HTML 文件中，我们仅定义按钮和标签等设计元素，而不填充具体