构建数字标牌内容管理系统：挑战与旅程

# Web 开发# JavaScript# 编程# 初学者

构建数字标牌内容管理系统：挑战与旅程

最近，我为一家专门从事数字信息亭业务的媒体公司完成了一项激动人心的代码挑战。任务是什么？创建一个**数字标牌内容管理系统**，使用 WebSockets 将**Web 应用程序**与**桌面显示应用程序**连接起来进行通信。

项目概况

挑战需要构建具有以下核心功能的系统：

Web 仪表板功能

  • 一个使用 Fabric.js 添加文本、图像和基本布局的简单内容创建界面。
  • 内容预览功能。
  • 可选的内容调度功能。
  • 带有状态指示符（例如草稿、已发布）的内容列表。
  • 使用文件夹或类别来组织基本内容。
  • 连接的显示应用程序的设备状态监控。

    • 电子显示应用

  • 全屏内容显示，支持文本和图像。
  • 带有状态指示器的手动同步按钮。
  • 自动同步切换选项，实现无缝更新。
  • 离线内容播放的可靠性。
  • 用于管理应用程序的系统托盘控件。
  • WebSocket 服务器的连接状态指示器。
  • 基本错误通知。

    • 离线功能

  • 本地内容存储，可供离线播放。
  • 内容缓存可确保在没有互联网连接的情况下顺利运行。
  • 连接恢复时自动内容同步。
  • 离线状态指示器，以提高可见性。

    • 解决实施问题

    我面临的第一个重大挑战是**设计实现**。我多次重启该项目，最初专注于**Electron 应用程序**。然而，经过大量研究和实验，我意识到从**Web 应用程序**开始，然后将其连接到 Electron 显示应用程序是更好的选择。这让我能够在处理使用 WebSockets 的通信层之前建立内容管理的核心功能。

    对于这个项目，我选择了 Next.js，因为它与 Vercel 集成得更好，使得部署和扩展应用程序变得非常容易。

    从头学习 Fabric.js 和 Electron

    最大的障碍之一是学习 **Fabric.js** 和 **Electron**，这两个工具我以前从未使用过：

  • Fabric.js：这个功能强大的画布库可以创建文本、图像和形状等交互式内容。但是，它的文档对初学者不太友好，所以我花了大量时间观看教程并尝试示例。
  • Electron：我很欣赏 Electron 详尽的“快速入门”指南，它让我能够快速构建桌面应用程序。它帮助我了解如何将 Web 应用程序包装到桌面环境中并实现离线功能。

    • WebSocket 挑战

    WebSocket 功能尤其棘手。我成功构建了一个 **WebSocket 服务器**，使 Electron 应用能够复制 Web 应用的内容。然而，两个应用之间的实时更新被证明是一个挑战。虽然我无法让它在这个版本中完美运行，但我计划重新审视并改进它，以实现完全实时同步。

    经验教训

    这个项目既具有挑战性又很有收获。我获得了以下方面的宝贵经验：

  • 使用 Fabric.js 构建具有复杂画布交互的 Web 仪表板。
  • 使用 Electron 创建跨平台桌面应用程序。
  • 实现离线优先功能并处理内容同步。
  • 使用 WebSockets 实现 Web 应用程序和桌面应用程序之间的通信。
  • 使用 Next.js 和 Vercel 部署现代应用程序。

    • 当我提交项目时，我很高兴能够进一步改进它，添加缺失的功能，并优化实时功能。

    检查项目

    如果您感兴趣的话，您可以在这里实时查看该项目或为其发展做出贡献：

  • 已部署的 Web 应用程序：https://signage-content-web-app.vercel.app/
  • GitHub 存储库：https://github.com/HTSagara/signage-content-app

    • 我正在将这个项目**开源**，并希望开发人员能够合作、探索和改进它。无论您有兴趣**改进实时功能**、**优化 Electron 应用**，还是**添加新功能**，我们都欢迎您做出贡献！

    最后的想法

    这个项目挑战了我走出舒适区，探索新的工具、框架和设计方法。它提醒我，开发是一个充满学习机会的迭代过程。我期待继续这个项目，随着时间的推移不断改进它，并在此过程中分享更新。🚀