使用智能花园构建直观的用户界面

在 2022 年 5 月至 2022 年 8 月期间，我有幸与 智能花园仪表板 团队下 政府科技的 SIOT 分配。我们的团队正在为我们的合作伙伴开发一个网络仪表板 滨海湾花园 管理他们的智能物联网装置，包括环境传感器、人群监控设备和智能灯柱。

Our dashboard provides access to real-time sensor data from installations at Gardens by the Bay. Additionally, the Manual Sensor feature (pictured above) gives users the ability to record and analyze data from non-IoT enabled devices as well.

前端速成课程

作为一名前端开发实习生，我负责实现和测试仪表板上的功能，以供设施管理人员使用 滨海湾花园 .这个过程通常从团队讨论开始，我们在其中确定所需功能的范围。在此之后，我要么创建基本的线框来布局用户流程，要么参考我们的 UX 设计师制作的现有线框，然后在 React 中对功能进行原型设计。最后，我们的项目经理会将新功能发送给滨海湾花园的设施管理团队进行测试和收集反馈。

My typical workflow when developing new features with the team

我工作的主要组件之一是 手动传感器输入 特征。该服务允许公园工作人员记录和分析来自未启用物联网的装置的数据。例如，为了监控新植物装置的生长情况，园艺团队的用户将在仪表板上创建一个新的虚拟“传感器设备”。指定测量参数后，用户可以随后将数据和图像上传到设备以进行跟踪。

学习经历

我在 Smart Gardens 团队工作的几个月让我能够更好地理解 Web 开发的复杂性。我观察到的一个挑战是可用性设计的难度。虽然我们的团队可以快速交付功能性网页，但我们发现滨海湾花园的用户经常难以理解我们功能的工作流程。那么问题是：我们如何简化我们的设计，让从未见过它们的用户直观？我发现的一种方法是减少网页的交互性。虽然一开始这似乎违反直觉，但我意识到将完成任务所需的点击次数降至最低可能对用户体验有益。我还被提醒要不断寻求用户和团队成员的反馈，使设计成为一个迭代过程。

在编程层面上，我的收获是永远记住面向对象的编程原则。在构建复杂功能时，它有助于将页面分解为单个元素（容器、弹出窗口、按钮等）的层次结构。此后，状态的分配和传递对程序员来说变得更加清晰。 OOP 原则还促进了代码的可重用性并提高了我们的 React 脚本的可读性，后者在团队环境中工作时至关重要。

实习津贴

除了在仪表板上工作外，我非常感谢作为 GovTech 实习生提供给我的其他学习机会。我特别喜欢 棕色包会议 由 YTPO 组织，来自整个 GovTech 主机会议的开发人员涵盖了应用程序开发等主题。我也参加了 快字节 由 SIOT 主持的会议，这是快速的午餐会议，SIOT 成员与同事分享他们自己的项目。这两项活动让我对科技行业的发展有了更深入的了解，并为我与其他实习生和员工提供了富有成效的交流机会。

最后的想法

Me (center) with the Smart Gardens Dashboard Team

总而言之，我在 智能花园仪表板 团队。我很感激有机会在这样一个协作和充满活力的空间中提高我的 UI 开发技能。我要特别感谢我的团队负责人 Chin Hiong 和导师 Yi Ning 在我实习期间的持续支持。对于任何有抱负的开发者希望在行业中有所作为，我想不出比这更好的地方了 政府科技 SIOT .

本文链接：https://www.qanswer.top/15590/20160510