← Về thư mục
📄 / / projects / corporate / GLV / seo-dashboard-app / PHASE2_IMPLEMENTATION.md

Kế Hoạch Triển Khai Giai Đoạn 2: Nâng Cấp SEO Dashboard GLV

Tổng quan

Kế hoạch này nhằm giải quyết hai vấn đề cốt lõi của bảng điều khiển SEO (Dashboard) hiện tại: lỗi không thể chọn khoảng thời gian (Date Picker) và hiển thị bảng dữ liệu dàn trải thiếu phân trang. Thay vì sử dụng giải pháp bên thứ ba như Google Looker Studio, chúng ta sẽ hoàn thiện trực tiếp ứng dụng Astro App (Giai đoạn 2) bằng công nghệ nội bộ theo đúng sở thích của CEO.

Phase 1: Xây dựng cơ sở dữ liệu (SQLite Data Layer)

Mục tiêu: Loại bỏ sự phụ thuộc vào tệp JSON tĩnh và giảm tải số lượng yêu cầu API lên máy chủ Google. * Thiết kế lược đồ cơ sở dữ liệu seo_metrics.db với hai bảng chính là gsc_metrics (Từ khóa, Trang đích) và ga4_metrics (Lưu lượng, Kênh tương tác). * Chỉnh sửa kịch bản cronjob google_api_connector.py để cập nhật dữ liệu hàng ngày (append) vào SQLite thay vì ghi đè tệp JSON. * Checklist kiểm thử: * Tệp seo_metrics.db được tạo thành công. * Dữ liệu lịch sử (60 ngày qua) được đưa vào cơ sở dữ liệu đầy đủ. * Lệnh truy vấn chéo (SQL Join) hoạt động mượt mà.

Phase 2: Phát triển API Backend (Data Retrieval)

Mục tiêu: Cung cấp dữ liệu siêu tốc cho bảng điều khiển dựa trên cơ sở dữ liệu cục bộ. * Viết lại tệp api/seo-data.js để đọc trực tiếp từ SQLite thay vì chạy kịch bản Python đồng bộ. * Bổ sung tham số truy vấn API hỗ trợ chọn ngày tùy chỉnh (Start Date, End Date). * Tích hợp thuật toán phân trang chuẩn (Limit, Offset) vào lệnh truy vấn để kiểm soát số lượng bản ghi trả về. * Checklist kiểm thử: * Thời gian phản hồi API dưới 200ms. * Trả về đúng lượng bản ghi khi yêu cầu phân trang limit=20.

Phase 3: Tích hợp Giao diện (Frontend Astro Integration)

Mục tiêu: Nâng cấp trải nghiệm tương tác với biểu đồ và bảng số liệu. * Liên kết hộp thoại Date Picker (Header.astro) với API Backend mới để cập nhật bảng điều khiển theo ngày người dùng chọn. * Thay thế toàn bộ logic thay đổi mã HTML (innerHTML) bằng trạng thái giao diện nội bộ (React State) để giữ vững liên kết sự kiện nút bấm. * Đảm bảo hai bảng "Top Queries" và "Landing Pages" hiển thị chuẩn 20 dòng mỗi trang. * Checklist kiểm thử: * Chọn khoảng ngày "Tháng trước", biểu đồ tự động vẽ lại. * Nút bấm "Trang sau (Next)" ở Bảng 04 hoạt động ổn định. * Trải nghiệm di động không bị vỡ giao diện.

Phase 4: Kiểm tra và Triển khai (QA & Deployment)

Mục tiêu: Đảm bảo hệ thống vận hành trơn tru trước khi báo cáo kết quả cuối cùng. * Phòng Grill-QA chạy chuỗi phản biện kiểm thử hiệu năng. * Chạy thử nghiệm cronjob vào nửa đêm để xác nhận dữ liệu được chèn thêm hợp lệ. * Bàn giao sản phẩm hoàn thiện. * Checklist kiểm thử: * Đạt 100% tiêu chí phản biện kỹ thuật. * Bảng điều khiển trực tiếp trên Funnel hoạt động tốt.