【0编码】我使用Trae AI开发了一个【随手记账单格式化工具】

使用Trae AI开发随手记账单格式化工具的历程

引言

作为一个热衷于个人财务管理的程序员,我一直使用随手记APP来记录日常收支。然而,将微信和支付宝的账单导入随手记时,总是需要手动调整格式,这个过程既繁琐又容易出错。为了解决这个问题,我决定开发一个账单格式化工具,而Trae AI成为了我的得力助手,大大加速了开发过程。

需求分析

在开始开发之前,我明确了以下需求:

  1. 自动处理微信和支付宝账单 :将CSV格式的账单文件转换为随手记可导入的Excel格式
  2. 智能分类 :根据交易描述自动匹配支出/收入分类和账户信息
  3. 账单合并 :支持将微信和支付宝的账单合并为一个文件
  4. 配置管理 :允许用户自定义分类规则和关键词匹配
  5. 跨平台支持 :至少支持Windows系统

技术选型

在Trae AI的帮助下,我选择了以下技术栈:

  • 前端 :HTML, CSS, JavaScript(原生)
  • 后端 :Node.js, Express.js
  • 桌面应用框架 :Electron
  • 数据处理 :ExcelJS, csv-parser, fast-csv, xlsx
  • 其他工具 :iconv-lite(编码转换), jschardet(编码检测) 这个技术栈的优势在于:
  1. 统一的JavaScript生态系统 :前后端使用同一种语言,减少上下文切换
  2. Electron的跨平台能力 :可以轻松打包为Windows、macOS和Linux应用
  3. 丰富的数据处理库 :Node.js生态系统提供了强大的Excel和CSV处理能力

开发过程

1. 项目结构设计

在Trae AI的指导下,我设计了清晰的项目结构:

bash 复制代码
├── main.js              # Electron主进
程
├── preload.js           # 预加载脚本
├── renderer.js          # 渲染进程脚本
├── server.js            # Express后端服
务
├── index.html           # 主界面
├── config.html          # 配置管理界面
├── css/                 # 样式文件
├── js/                  # 前端
JavaScript
├── configs/             # 配置文件存储
├── uploads/             # 上传文件临时存
储
├── processed/           # 处理后文件存储
└── assets/              # 图标等资源

2. 后端服务开发

Trae AI帮助我快速实现了Express后端服务,主要功能包括:

  • 文件上传处理 :使用multer中间件处理文件上传
  • 编码检测与转换 :使用jschardet和iconv-lite处理不同编码的CSV文件
  • 数据解析与转换 :解析CSV内容,提取交易信息
  • 智能分类匹配 :根据关键词匹配交易分类和账户
  • Excel文件生成 :使用ExcelJS生成标准格式的Excel文件 其中,微信账单处理的核心代码如下:
javascript 复制代码
// 处理微信账单
app.post("/api/process-wechat", upload.
single("wechatFile"), (req, res) => {
  // 加载依赖
  loadDependencies();
  
  // 处理函数 - 根据文件类型选择不同的处理方法
  const processWechatFile = () => {
    return new Promise((resolve, 
    reject) => {
      // 判断文件类型
      if (fileExt === '.xlsx') {
        // 处理Excel文件
        const tempWorkbook = new 
        ExcelJS.Workbook();
        tempWorkbook.xlsx.readFile
        (filePath)
          .then(() => {
            // 获取第一个工作表
            const worksheet = 
            tempWorkbook.getWorksheet
            (1);
            // 查找表头行
            // 处理数据行
            // ...
          })
          .catch(reject);
      } else {
        // 处理CSV文件
        // 读取CSV文件内容
        // 检测文件编码
        // 转换编码为UTF-8
        // 解析CSV行
        // ...
      }
    });
  };
});

3. 前端界面开发

Trae AI帮助我设计了简洁直观的用户界面:

  • 主界面 :包含微信账单处理、支付宝账单处理、处理结果和文件管理四个卡片
  • 配置界面 :支持管理支出分类、收入分类和账户分类的树形结构 前端使用原生JavaScript实现了与后端API的交互:
javascript 复制代码
async function processWechatBill(e) {
  if (e) {
    logger.info("微信账单处理开始", { 
    fileName: e.name, fileSize: e.
    size });
    var t = new FormData();
    t.append("wechatFile", e);
    try {
      showStatus("wechatStatus", "处理
      中...", "");
      var a = await fetch(API_BASE_URL 
      + "/api/process-wechat", { 
      method: "POST", body: t }),
          s = await a.json();
      // 处理响应...
    } catch (e) {
      // 处理错误...
    }
  } else {
    // 未选择文件...
  }
}

4. Electron应用打包

Trae AI指导我使用electron-builder配置应用打包:

json 复制代码
"build": {
  "asar": true,
  "compression": "maximum",
  "appId": "com.formatsuishouji.app",
  "productName": "随手记格式化工具",
  "extraResources": [
    {
      "from": "server.js",
      "to": "."
    },
    // 其他资源...
  ],
  "win": {
    "target": [
      "nsis"
    ],
    "icon": "assets/formatter.ico"
  }
}

功能实现

1. 微信和支付宝账单处理

工具可以处理两种格式的微信账单:

  • CSV格式 :传统的微信账单导出格式
  • XLSX格式 :新版微信账单导出格式 处理流程包括:
  1. 上传文件并检测编码
  2. 解析文件内容,提取交易信息
  3. 根据交易描述匹配分类和账户
  4. 格式化备注信息
  5. 生成Excel文件,包含收入和支出两个工作表

2. 智能分类系统

工具使用关键词匹配算法实现智能分类:

javascript 复制代码
// 根据关键字匹配分类
function matchCategory(text, 
configData, defaultCategory) {
  if (!text || !configData || !Array.
  isArray(configData)) return 
  defaultCategory;

  for (const level1 of configData) {
    if (level1.children && Array.isArray
    (level1.children)) {
      for (const level2 of level1.
      children) {
        if (level2.keywords) {
          const keywords = level2.
          keywords.replace(/,/g, ",").
          split(",");
          for (const keyword of 
          keywords) {
            if (keyword && text.includes
            (keyword.trim())) {
              return { category: level1.
              name, subcategory: level2.
              name };
            }
          }
        }
      }
    }
  }

  return defaultCategory;
}

3. 账单合并功能

工具支持将处理后的微信和支付宝账单合并为一个文件:

javascript 复制代码
// 合并账单
app.post("/api/merge-bills", (req, res) 
=> {
  // ...
  
  // 处理并合并文件
  Promise.all([
    wechatFile ? processFile
    (wechatFile) : Promise.resolve({ 
    income: [], expense: [] }),
    alipayFile ? processFile
    (alipayFile) : Promise.resolve({ 
    income: [], expense: [] })
  ])
    .then(([wechatResults, 
    alipayResults]) => {
      // 合并收入结果
      const mergedIncome = [...
      wechatResults.income, ...
      alipayResults.income];

      // 合并支出结果
      const mergedExpense = [...
      wechatResults.expense, ...
      alipayResults.expense];

      // 按日期排序
      mergedIncome.sort((a, b) => new 
      Date(a[1]) - new Date(b[1]));
      mergedExpense.sort((a, b) => new 
      Date(a[1]) - new Date(b[1]));

      // 添加到工作表并保存
      // ...
    })
});

4. 配置管理系统

工具提供了灵活的配置管理系统,支持自定义:

  • 支出分类 :如餐饮、交通、购物等
  • 收入分类 :如工资、兼职、投资等
  • 账户分类 :如储蓄卡、信用卡、虚拟账户等 每个分类都支持设置关键词,用于智能匹配交易记录。

使用Trae AI的优势

在开发过程中,Trae AI提供了以下帮助:

  1. 代码生成 :快速生成符合最佳实践的代码,减少了手动编码时间
  2. 问题解决 :遇到技术难题时,Trae AI提供了准确的解决方案
  3. 代码优化 :帮助识别性能瓶颈并提供优化建议
  4. 文档生成 :自动生成用户手册和技术文档

结论

通过使用Trae AI,我成功开发了一个功能完善的随手记账单格式化工具,大大提高了个人财务管理的效率。这个项目不仅解决了我自己的实际需求,也让我体验到了AI辅助编程的强大能力。

希望这篇博客能够帮助更多对AI辅助编程感兴趣的开发者,也欢迎大家使用和改进这个工具!

工具已开源:

参考资源

  • Electron官方文档
  • ExcelJS文档
  • Express.js文档
  • Trae AI官方网站
相关推荐
前端小趴菜056 分钟前
React - createPortal
前端·vue.js·react.js
晓131330 分钟前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo1 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴1 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7892 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼3 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原3 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf3 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
爱编程的喵3 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
每天吃饭的羊4 小时前
react中为啥使用剪头函数
前端·javascript·react.js