Chức năng Giấy Chứng Nhận

Tổng quan công nghệ

• Frontend: Angular 20, Canvas API và jsPDF để dựng/ xuất chứng nhận.
• Backend: ASP.NET Core 8.
• Phạm vi: pipeline giấy chứng nhận – từ tạo template, lưu config, cấp phát tới render ở FE.

1. Quy trình tạo Template

TemplateConfig mẫu

{
  "fields": [
    {
      "key": "TenTNV",
      "label": "Tên TNV",
      "x": 600,
      "y": 360,
      "fontSize": 48,
      "fontFamily": "Times New Roman",
      "color": "#1d1d1f",
      "align": "center",
      "fontWeight": "bold"
    },
    {
      "key": "TenSuKien",
      "label": "Tên sự kiện",
      "x": 600,
      "y": 460,
      "fontSize": 28,
      "fontFamily": "Roboto",
      "color": "#444444",
      "align": "center",
      "fontWeight": "normal"
    },
    {
      "key": "ThoiGian",
      "label": "Thời gian",
      "x": 600,
      "y": 520,
      "fontSize": 22,
      "fontFamily": "Roboto",
      "color": "#666666",
      "align": "center",
      "fontWeight": "normal"
    }
  ]
}

Editor FE làm gì?

• availableFields định nghĩa các trường (TenTNV, TenSuKien, TenToChuc, …) + sample data để preview.
• Drag & drop thay đổi x/y, chỉnh font, màu, align; canvas preview dựa vào kích thước ảnh nền để không méo.
• Khi lưu, component gửi { templateConfig, backgroundImage, width, height } lên API → ghi vào bảng MauGiayChungNhan.

Code: components/certificate-template-editor/certificate-template-editor.ts.

2. Cấp giấy & snapshot dữ liệu

Thông tin lưu cùng chứng nhận:

• BackgroundImage: tên file trong /wwwroot/uploads.
• CertificateData: JSON chứa value cho mọi field – bảo toàn ngay cả khi dữ liệu gốc thay đổi.
• Width/Height: kích thước canvas phục vụ FE và backend.

3. API trả về & mapping field

GET /api/certificate/samples/{maMau}

{
  "data": {
    "maMau": 12,
    "tenMau": "Mùa Hè Xanh 2024",
    "backgroundImage": "a8f5-2024.png",
    "templateConfig": "{...}",
    "width": 1920,
    "height": 1080,
    "isDefault": false
  }
}

POST /api/certificate

{
  "maGiayChungNhan": 345,
  "maMau": 12,
  "maTNV": 77,
  "tenTNV": "Nguyễn Văn A",
  "maSuKien": 55,
  "tenSuKien": "Chiến dịch Mùa Hè Xanh",
  "tenToChuc": "HSV Việt Nam",
  "ngayCap": "2024-12-01T09:12:00"
}

GET /api/certificate/{id}

{
  "data": {
    "maGiayChungNhan": 345,
    "backgroundImage": "a8f5-2024.png",
    "certificateData": "{\"fields\":[{\"key\":\"TenTNV\",\"value\":\"Nguyễn Văn A\",\"x\":600,...}]}",
    "width": 1920,
    "height": 1080
  }
}

Các key khả dụng: TenTNV, TenSuKien, TenToChuc, NgayCap, ThoiGian, DiaChi, MaChungNhan, NgayBatDau, NgayKetThuc.

4. Hiển thị & export FE

CertificateViewerComponent đọc certificateId từ route, gọi GET /api/certificate/{id} rồi vẽ Canvas:

1. Parse certificateData → fields.
2. Load ảnh nền (${baseUrl}/uploads/<file>), set canvasWidth/Height.
3. Vẽ từng field bằng ctx.fillText.
4. Cho phép tải PNG (canvas.toBlob) và PDF (jsPDF + chuyển px → mm).

drawFields(ctx: CanvasRenderingContext2D, fields: TemplateField[]): void {
  fields.forEach(field => {
    if (!field.value) return;
    ctx.font = `${field.fontWeight === 'bold' ? 'bold' : 'normal'} ${field.fontSize}px ${field.fontFamily}`;
    ctx.fillStyle = field.color;
    ctx.textAlign = field.align as CanvasTextAlign;
    ctx.textBaseline = 'top';
    ctx.fillText(field.value, field.x, field.y);
  });
}

Code thực tế: components/certificate-viewer/certificate-viewer.ts (hàm loadCertificate, drawCanvas, downloadImage, downloadPDF).

5. Luồng end-to-end

1. Tạo mẫu: upload ảnh + lưu TemplateConfig → MauGiayChungNhan.
2. Cấp phát: chọn TNV/sự kiện → IssueCertificate/bulk → lưu snapshot CertificateData, ảnh nền, kích thước.
3. Thông báo: gửi push/notification cho TNV.
4. Xem & tải: FE gọi GET /api/certificate/{id} → vẽ Canvas → user tải PNG/PDF hoặc share link.

6. Database

Khi một giấy chứng nhận phát hành, snapshot (CertificateData + BackgroundImage) được lưu cùng record. Việc chỉnh sửa template sau đó không ảnh hưởng các chứng nhận đã cấp.