Kiro：即时财务与费用跟踪

Source: Dev.to

一个使用 Kiro 构建的轻量级财务与预算计算器，旨在帮助用户在瞬间快速计算支出、跟踪预算并了解自己的财务状况。

该项目刻意保持简洁和适合初学者，非常适合学习 Kiro、构建演示或展示 Kiro 的基于聊天的智能如何驱动实际应用。

📌 概览

管理财务并不一定需要复杂的会计软件。许多用户只需要一种快速的方式来：

• 输入预算
• 添加支出
• 查看已花费的金额
• 知晓剩余的资金

Kiro – Simple Finance & Budget Calculator 正好通过简洁的用户界面和 Kiro 的 AI 驱动聊天助手来解决这个问题。

✨ 功能

• 预算输入 – 输入总预算或收入
• 费用跟踪 – 添加带有名称和金额的多项费用
• 即时计算
  • 总费用
  • 剩余余额
• 超支检测 – 当费用超出预算时发出警报
• Kiro 聊天界面 – 用自然语言提问财务相关问题
• 简约清晰的 UI – 对所有用户都易于理解

🛠️ 技术栈

• Kiro – AI 助手和聊天逻辑
• JavaScript / HTML / React
• Node.js
• Python

注意：本项目侧重于逻辑简洁，而非繁重的后端架构。

⚙️ 安装与设置

1️⃣ 前置条件

• Node.js（建议 v16 以上）
• npm 或 yarn
• Kiro 账户

2️⃣ 安装 Kiro

按照官方 Kiro 入门指南操作：
🔗

3️⃣ 克隆仓库

git clone https://github.com/Shreya111111/tracker-kiro

▶️ 工作原理

1. 用户输入 预算金额。
2. 用户添加 单项支出。
3. 应用程序即时处理数据并计算：
   • 总支出
   • 剩余余额
4. 结果清晰地显示在屏幕上。

Kiro 如何帮助

• 理解用户意图
• 精确执行计算
• 提供简洁、易读的答案

💬 使用 Kiro Chat 与 Spec 进行设计与实现阶段

Kiro Chat 在整个项目中被用作 设计思维和实现助理，一步步指导从概念到可运行的财务与预算计算器的开发。

开发并未一次性编写所有逻辑或 UI，而是遵循 使用 Kiro Chat 的分阶段指导，正如 Kiro 官方工作流方法所推荐的那样。

Kiro Spec 的核心组成部分

Kiro 通常为每个新功能或项目生成三个主要的 markdown 文件，以确保需求与代码之间的一致性：

• requirements.md – 捕获用户故事和验收标准，常使用 EARS（Easy Approach to Requirements Syntax）记法。
• design.md – 记录技术架构，包括序列图（使用 Mermaid）和数据流模型。
• tasks.md – 提供详细、可追踪的实现计划。Kiro 将设计拆分为离散任务，供代理逐一执行。

🧠 第1阶段：问题理解与范围定义

第一步是明确应用程序应该做什么、不应该做什么。

Kiro Chat 使用示例（示例提示）

• Help me define a finance and budget calculator for beginners
• What features should a basic budget calculator include?
• What should I avoid to keep the app simple?

结果

• 明确的范围定义
• 没有复杂的金融规则
• 仅关注预算、支出和余额

这与 Kiro 的指导相一致，即在实现之前先明确目标。

🎨 第2阶段：UI / UX 设计协助

Kiro Chat 协助完成了 基本 UI 规划。

Kiro Chat 使用示例（提示）

• Suggest a UI layout for a budget calculator
• What input fields are required for this app?
• How should results be displayed clearly?

结果

• 预算输入字段
• 支出名称 + 金额输入字段
• 用于合计的汇总部分
• 简约、清晰的布局

Kiro 将功能需求转化为 简易 UI 组件。

🧩 第三阶段：逻辑与计算设计

在编码之前，使用 Kiro Chat 验证了计算逻辑。

Kiro Chat 使用示例（示例提示）

• How to calculate total expenses and remaining budget?
• What happens if expenses exceed the budget?
• Explain the logic in simple steps

结果

• 清晰的计算流程
• 已定义超支条件
• 易于实现的逻辑

此阶段在实现之前减少了错误。

💻 第4阶段：实现支持

在开发过程中，Kiro Chat 充当了 实时编码助手。

Kiro Chat 使用（示例提示）

• Help me write simple logic for adding expenses
• How to update total dynamically when a new expense is added?
• Explain this code in simple terms

成果

• 更快的实现
• 更简洁的逻辑
• 对每一步有更好的理解

💬 第5阶段：基于聊天的用户交互

Kiro Chat 也被集成为一个 面向用户的功能。

示例用户查询

• 我的总支出是多少？
• 剩余预算是多少？
• 我是否超支？
• 总结我的支出

Kiro 解释这些查询，并以简洁的语言返回计算结果。

🔁 第六阶段：审查与完善

最终，Kiro Chat 被用于：

• 审查应用流程
• 识别缺失的边缘情况
• 提出小幅的用户体验改进

示例提示

• Review my budget calculator flow
• Identify edge cases for expense entry
• Suggest UX tweaks for the summary section

---

有什么改进可以让它更友好？

✅ 符合 Kiro 最佳实践

正如 Kiro 官方文档和指南 所引用的，这一阶段性方法遵循：

• 明确的问题定义
• 迭代式设计
• 增量式实现
• 使用聊天进行持续验证

Kiro Chat 证明其不仅在编码方面有效，而且在 思考、设计和完善 整个应用的端到端过程中同样有效。

📸 截图

附加的截图：

• 预算输入界面
• 支出录入界面
• 支出汇总
• Kiro 聊天互动

📂 项目结构

kiro-finance-budget-calculator/
├── kiro.
├── vscode/
├── index.html
├── script.js
├── styles.css
└── README.md

🔗 GitHub 仓库

仓库链接

🎯 用例

• 个人月度预算
• 学生支出跟踪
• Kiro 学习项目
• 演示或黑客马拉松提交
• AI 驱动计算器的概念验证

🚀 新增功能

• 支出类别（食品、租金、旅行等）
• 月度历史跟踪
• 可视化图表
• 移动友好 UI

🤝 贡献

欢迎贡献！

1. Fork 代码仓库
2. 创建功能分支
3. 提交你的更改
4. 发起 Pull Request

如果你觉得这个项目有用，请 ⭐ 仓库并分享你的反馈！