🌍基于 KendoReact、Twilio 和 Gemini 的 AI 驱动型灾难救援仪表盘

这是KendoReact 免费组件挑战赛的参赛作品。

我建造的

我构建了一个灾害救援资源仪表盘——一个 React Web 应用程序，旨在帮助非政府组织、志愿者和援助协调员更有效地管理灾害应对行动。

该应用程序解决了灾难应对过程中的三个关键问题：

1. 资源跟踪 → 管理食物、水、药品和住所等关键资源，并保持库存水平最新。

2. 志愿者排班 → 注册志愿者并将其分配到班次和地点，并集成通知系统（通过 Twilio 短信）。

3. 影响可视化 → 使用交互式图表可视化资源分配、援助进展和整体救济影响。

🔮 额外功能：基于 Google Gemini 和 KendoReact 对话式用户界面的上下文相关 AI 助手小部件。该 AI 助手可以回答以下问题：

• “我们还剩下多少份食品包？”
• “明天哪些志愿者有空？”
• “我们目前的资源储备中最大的缺口是什么？”

该助手利用上下文信息（选定的灾害类型 + 可用资源）提供更准确、更具操作性的答案。

该项目演示了如何使用 KendoReact 免费组件 + AI 集成来解决灾害管理中的实际问题。

演示

GitHub链接
实时网址

以下是该应用的一些用户界面流程图。

这是显示我们所有页面的仪表板，您也可以在这里查看可用的资源。

此用户界面负责添加灾难

这是志愿者页面，可以在这里添加志愿者，系统会使用 Twilo 通过短信实时向他们发送通知。

这是短信已发送至真实号码的证据。

分析面板有助于分析和查看志愿者图表以及资源。

由 Gemini 提供支持的 AI 用户界面能够根据上下文提供答案，并可根据用户的提示更新页面。例如，我可以告诉它在灾难或所有灾难情况下增加资源数量，或者我也可以告诉它其他情况。

使用的 KendoReact 组件

我使用了大量的 KendoReact 组件（远远超过要求的 10 个）：

1. 网格 → 资源管理表。
2. 下拉列表 → 按类别筛选资源。
3. 数字文本框 → 更新库存数量。
4. 上传 → 上传送货证明文件。
5. 按钮 → 保存操作并触发更新。
6. 调度员 → 将志愿者分配到不同的班次/地点。
7. 表格 → 注册新志愿者。
8. 日期选择器 → 分配班次/日期。
9. 图表（柱状图/折线图）→ 按地区分布。
10. 饼图 → 按类别划分的援助明细。
11. 卡片 → 快速救援统计。进度条 → 显示援助目标的进展情况。

【可选：更智能而非更努力地编写代码奖项类别】人工智能编码助手使用情况

我使用了 GitHub Copilot 和 KendoReact AI 扩展来加快开发速度。

• Copilot 为每个页面（资源、志愿者、分析）生成了初始代码。
• 我提供了提示信息，以便让 AI 助手了解具体情况，确保它始终能够读取所选的灾害类型和可用资源。
• AI 助手是以浮动小部件的形式构建的，使用了 Copilot 生成的样板代码，并用 Kendo UI 组件进行了完善。

这节省了大量时间，让我能够专注于逻辑和集成，而不是从头开始编写每个组件。

[可选：白手起家奖类别] Nuclia 集成

❌ 未集成（我尝试过 Nuclia RAG，但由于账户设置限制而无法继续）。✅
目前，我使用 Google Gemini 作为 AI 后端，这样 AI 助手小部件就能在不使用 RAG 的情况下正常工作并具备上下文感知能力。

感谢阅读