从原型到药房仪表盘：使用 Google Gemini 扩展 AI 生成的应用
发布: (2026年3月1日 GMT+8 09:33)
8 分钟阅读
原文: Dev.to
Source: Dev.to
请提供您希望翻译的文章正文内容，我将为您翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！
项目概述
去年，一位朋友雇佣我为他的药房开发一个自定义仪表盘。当时我每天都在使用 Vue.js 和 TypeScript，但我想要一个能够加速初始实现的平台。于是我发现了 Tempo，这是一款基于 AI 的 React 设计与开发工具。
- 免费层提供了足够的每日积分让我开始工作，代码还能直接同步到 GitHub 仓库。
- 我把大部分积分花在了 bug 修复和功能实现上。
- 最终 Tempo 收紧了积分限制，并每 24 小时重置一次积分。
尽管有这些限制，我仍交付了一个可供测试的初始实现，其中包括以下功能：
核心功能
- 用户管理
- 分支管理
- 库存管理
- 月度销售报告
- 多语言支持（西班牙语和英语）
- 用于本地数据存储的 IndexedDB
由于积分限制以及仍有若干功能缺失，我将开发工作转移到了 Google Gemini，以将项目推向生产环境。
Gemini‑驱动的增强
Gemini 在修复错误、功能开发以及将数据库从本地存储迁移到 Cloud Firestore 的过程中发挥了关键作用。它还指导了部署策略，使用 GitLab Pages 和 Vercel 将项目推向可投入生产的状态。
使用 Gemini 实现的其他功能
- Dual‑Layer Inventory – 分别管理药房和仓库库存
- Daily & Weekly Sales Reporting – 每日与每周销售报告
- Inventory Search & Editing – 库存搜索与编辑
- Orders Module – 订单模块
- Daily, Weekly & Monthly Orders Reporting – 每日、每周和每月订单报告
- Daily Sales & Orders Editing – 每日销售与订单编辑
- POS Module with barcode scanner support – 支持条形码扫描的 POS 模块
- Firestore User Management – Firestore 用户管理
- Stock Alerts – 库存警报
- PDF Reports Download – PDF 报告下载
演示
我没有可公开访问的演示实例（唯一的在线版本是我的客户使用的，需要登录）。因此，我整理了截图来展示仪表板的外观。
| 部分 | 描述 |
|---|---|
| 访问与安全（登录） | 应用的入口点，已集成 Firebase Authentication 以实现安全访问。 |
| 指挥中心（仪表板） | 对药店健康的高级概览，包括库存警报和快速销售统计。 |
| 双层库存 | 管理药店与仓库之间的库存。 |
| 销售点（销售模块） | 为药剂师提供的实时界面，支持条码扫描仪，实现快速结账。 |
| 数据驱动决策（销售报告） | 每日、每周和每月的分析，帮助所有者了解收入趋势。 |
| 供应链管理（订单） | 处理药品补货和新供应的跟踪。 |
Gemini 实现的技术里程碑
1. 掌握 AI 辅助开发
- 学会编写更好、更具上下文的提示词。
- 使用 Tempo 完成初始 UI，利用 Gemini 重构自动生成的代码，将原型转变为可投入生产的系统。
2. 从 IndexedDB 到 Cloud Firestore
- 首次接触 IndexedDB 和 SQLite——学习了连接配置和 CRUD 方法。
- 发现本地存储无法在设备间同步，需要可扩展的云原生方案。
- Gemini 推荐了 Cloud Firestore；其免费层满足了所有需求。
- 获得了 Firestore 数据建模以及 Firebase Authentication 的实战经验，用于安全的用户管理。
3. 可扩展的解决方案（两个仓库）
| 仓库 | 目的 | 部署 |
|---|---|---|
| Backend API | 处理用户创建、更新和身份验证，且不终止当前管理员会话。 | 首次在 Vercel 上部署，使用 GitLab CI/CD 流水线。 |
| Frontend Application | React 仪表盘。 | 通过 GitLab Pages 部署，拥有独立的 CI 流水线。 |
4. 在 GitLab Pages 上解决 SPA 路由问题
- 刷新 SPA 路由时出现 404 错误。
- 查阅 GitLab 文档并与 Gemini 合作，配置正确的回退路由，确保 SPA 路由在生产环境中正常工作。
5. 使用 gcloud 模拟器进行本地开发
- 在部署前本地测试 Firestore 安全规则和数据结构。
- 将工作流记录在专门的文章中，因为它非常有价值。
Google Gemini 反馈
使用 Gemini 对本项目来说是一次改变游戏规则的体验，但和任何强大的工具一样，它也有学习曲线。
做得好的方面
| 方面 | 为什么有效 |
|---|---|
| 指导 | 当我询问具体技术栈（例如，从 IndexedDB 迁移到 Firestore）时，提供了具体的答案。 |
| 重构 | 在我分享代码片段并解释所需业务逻辑后，给出了精准的建议。 |
| 问题解决 | 帮助调试 GitLab Pages 上的 SPA 路由问题，并配置 Vercel 的 CI/CD 流水线。 |
待改进的方面
| 问题 | 建议改进 |
|---|---|
| 仓库集成 | Gemini 目前难以一次性分析整个仓库。直接与 GitHub 或 GitLab 仓库集成将显著提升生产力。 |
| 上下文持久化 | 在长时间会话（例如多步骤迁移）中保持上下文的连续性可以更顺畅。 |
| 代码执行反馈 | 提供模拟执行结果或 lint 检查反馈，可更快验证建议的更改。 |
感谢您审阅我的提交。希望这份简洁、结构化的概览能够展示 Gemini 为项目带来的价值，并凸显进一步工具改进的机会。
- **Understand the full codebase context.**
- **IDE Extension:** While the web interface is great, having a more integrated experience directly within the code editor (beyond simple autocomplete) would reduce the friction of switching back and forth.
- **Accuracy & Verification:** AI responses are not always 100% accurate. I quickly learned that you must always review and test suggested changes before merging them, as some suggestions can inadvertently break existing module logic.