Development Practice of Zhuli Life Automatic Bookkeeping Tool
开发背景
校园生活中的水费、接水及洗衣支出呈现零碎且频繁的特点。住理生活 App 目前缺乏直观的财务统计功能。手动记录此类微小支出效率低下。本项目旨在利用浏览器端技术实现消费记录的自动化提取与分析。
核心特性
图像识别录入
系统集成 OCR 技术。用户上传消费记录长截图即可完成数据采集。无需手动输入金额与时间。
本地化隐私保护
所有图像识别逻辑均在浏览器本地运行。数据存储于客户端 IndexedDB。信息不上传至任何服务器。隐私安全性得到底层保障。
多维度数据可视化
系统提供月度账单汇总。消费时段热力图展示生活规律。GitHub 风格的贡献图直观反映消费频次。
技术架构
前端框架
选用轻量级的 Alpine.js。逻辑层级清晰。适合小型单页应用的快速开发。
文字识别
集成 Tesseract.js 引擎。在浏览器端实现高性能 OCR 识别。支持复杂长图的文本解析。
数据持久化与可视化
利用 IndexedDB 实现大容量本地存储。确保页面刷新后数据不丢失。采用 Chart.js 绘制动态统计图表。
操作流程
- 获取截图：在住理生活 App 中截取消费记录长图。
- 上传解析：将截图上传至记账助手界面。
- 查阅报表：系统自动解析并生成统计图表。
- 数据导出：支持导出 CSV 或 JSON 格式文件进行二次分析。
注意事项
- 建议使用 PC 端浏览器以获得更佳的体验。
Project Online Address: Zhuli Life · Bookkeeping Assistant
Open Source Repository: Tokisaki-Galaxy/statistics-zhulishenghuo
Development Context
Expenses such as water fees, water fetching, and laundry in campus life are often fragmented and frequent. The Zhuli Life App currently lacks intuitive financial statistical features. Manually logging these micro-expenses is inefficient. This project aims to leverage browser-side technology to achieve automated extraction and analysis of consumption records.
Core Features
Image Recognition Entry
The system integrates OCR technology. Users can complete data collection by uploading long screenshots of consumption records. No manual entry of amounts or times is required.
Localized Privacy Protection
All image recognition logic runs locally within the browser. Data is stored in the client-side IndexedDB. Information is not uploaded to any server. Privacy security is guaranteed at a fundamental level.
Multi-dimensional Data Visualization
The system provides monthly bill summaries. A heatmap of consumption periods reveals lifestyle patterns. A GitHub-style contribution chart intuitively reflects consumption frequency.
Technical Architecture
Frontend Framework
The lightweight Alpine.js is chosen. Its logic hierarchy is clear, making it suitable for rapid development of small-scale single-page applications.
Text Recognition
The Tesseract.js engine is integrated to achieve high-performance OCR recognition on the browser side, supporting text parsing from complex long images.
Data Persistence and Visualization
IndexedDB is utilized for high-capacity local storage, ensuring data persists after page refreshes. Chart.js is employed to render dynamic statistical charts.
Operation Workflow
- Obtain Screenshot: Capture a long screenshot of the consumption record within the Zhuli Life App.
- Upload & Parse: Upload the screenshot to the Bookkeeping Assistant interface.
- Review Reports: The system automatically parses the data and generates statistical charts.
- Data Export: Supports exporting files in CSV or JSON formats for secondary analysis.
Notes
- It is recommended to use a PC browser for an optimal experience.