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

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

1. 系统构建第一步：创建图形界面

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

2. main.js 文件设置

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

mainWindow.webContents.openDevTools();

3. 用户界面创建

配置好 Electron 环境后，需要创建用户界面。界面由 HTML 和 JavaScript 两个文件组成。为了便于配置和修改应用，在 HTML 文件中仅定义设计元素，如按钮和标签，不填充具体信息。例如，为每种饮料设置一个圆形