LAPRO.VN

Ứng Dụng Quản Lý Tài Chính Cá Nhân Với NodeJS và Chart.js

30/03/2026 · P T P · Chung

Tại sao cần một ứng dụng quản lý tài chính cá nhân?

Khi cuộc sống ngày càng bận rộn, việc quản lý chi tiêu, thu nhập và các khoản tiết kiệm trở nên quan trọng hơn bao giờ hết. Nhiều người vẫn ghi chép bằng sổ tay hoặc Excel, nhưng điều này thường mất nhiều thời gian và khó tổng hợp. Một ứng dụng quản lý tài chính cá nhân giúp bạn tự động hóa quy trình, hiển thị trực quan các khoản thu chi, từ đó dễ dàng đưa ra quyết định tài chính đúng đắn hơn.

Công nghệ: NodeJS và Chart.js

NodeJS là một runtime JavaScript bên server, cho phép xây dựng backend nhanh chóng và mở rộng. Kết hợp với Chart.js – một thư viện vẽ biểu đồ mạnh mẽ trên frontend – bạn có thể tạo ra một ứng dụng web đầy đủ tính năng, dễ sử dụng và trực quan.

Xây dựng ứng dụng từng bước

1. Thiết lập môi trường

Trước tiên, bạn cần cài đặt NodeJS và npm. Tạo một thư mục dự án, khởi tạo package.json và cài đặt các thư viện cần thiết:

mkdir finance-app
cd finance-app
npm init -y
npm install express ejs body-parser

2. Thiết kế cấu trúc dữ liệu

Sử dụng một mô hình đơn giản để lưu trữ các giao dịch tài chính:

class Transaction {
  constructor(id, date, type, category, amount, note) {
    this.id = id;
    this.date = date;
    this.type = type; // 'income' hoặc 'expense'
    this.category = category;
    this.amount = amount;
    this.note = note;
  }
}

3. Xây dựng API với Express

Tạo một server với các route cơ bản:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();


app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');



let transactions = [];



app.get('/', (req, res) => {
  res.render('index', { transactions });
});



app.post('/add', (req, res) => {
  const { date, type, category, amount, note } = req.body;
  const id = Date.now();
  transactions.push(new Transaction(id, date, type, category, parseFloat(amount), note));
  res.redirect('/');
});



app.listen(3000, () => console.log('Server running on port 3000'));

4. Giao diện và Chart.js

Trong file views/index.ejs, hiển thị danh sách giao dịch và biểu đồ:

<!DOCTYPE html>
<html>
<head>
  <title>Quản lý tài chính</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h2>Quản lý tài chính cá nhân</h2>
  <form method="POST" action="/add">
    <input type="date" name="date" required>
    <select name="type">
      <option value="income">Thu nhập</option>
      <option value="expense">Chi tiêu</option>
    </select>
    <input type="text" name="category" placeholder="Danh mục" required>
    <input type="number" step="0.01" name="amount" placeholder="Số tiền" required>
    <input type="text" name="note" placeholder="Ghi chú">
    <button type="submit">Thêm</button>
  </form>


<h3>Danh sách giao dịch</h3>
  <table border="1">
    <tr>
      <th>Ngày</th><th>Loại</th><th>Danh mục</th><th>Số tiền</th><th>Ghi chú</th>
    </tr>
    <% transactions.forEach(t => { %>
    <tr>
      <td><%= t.date %></td>
      <td><%= t.type %></td>
      <td><%= t.category %></td>
      <td><%= t.amount.toLocaleString() %></td>
      <td><%= t.note %></td>
    </tr>
    <% }) %>
  </table>



<h3>Biểu đồ thu chi</h3>
  <canvas id="chart"></canvas>
  <script>
    const labels = ['Thu nhập', 'Chi tiêu'];
    const data = [
      <%= transactions.filter(t => t.type === 'income').reduce((a, b) => a + b.amount, 0) %>,
      <%= transactions.filter(t => t.type === 'expense').reduce((a, b) => a + b.amount, 0) %>
    ];
    new Chart(document.getElementById('chart'), {
      type: 'pie',
      data: { labels, datasets: [{ data, backgroundColor: ['#28a745', '#dc3545'] }] }
    });
  </script>
</body>
</html>

Tối ưu và mở rộng

Để ứng dụng hoạt động ổn định hơn, bạn có thể:

– Lưu trữ dữ liệu vào file JSON hoặc database (MongoDB, SQLite).
– Thêm tính năng xóa, sửa giao dịch.
– Phân loại chi tiêu theo tháng/quý/năm.
– Tích hợp Chart.js với nhiều loại biểu đồ (đường, cột, tròn) để so sánh xu hướng.
– Tối ưu responsive cho mobile.

Kết luận

Với NodeJS và Chart.js, bạn có thể nhanh chóng xây dựng một ứng dụng quản lý tài chính cá nhân đơn giản nhưng hiệu quả. Không chỉ giúp bạn nắm bắt tình hình tài chính, ứng dụng còn giúp hình thành thói quen ghi chép và phân tích chi tiêu. Hãy bắt đầu từ những tính năng cơ bản, sau đó nâng cấp dần theo nhu cầu thực tế của bản thân.

#chinh #dung #nhan #nodejs #quan
Chia sẻ:
← Trước
NodeJS cho hệ thống phân tích dữ liệu thời gian thực: Tối ưu tốc độ và hiệu năng
Sau →
NodeJS Cách Mạng Voice Assistant: Bí Mật Từ Nhà Phát Triển

Bài viết tương tự

Bình luận

Chưa có bình luận. Hãy là người đầu tiên!