Thiết kế khung website tổng quát cho công ty giới thiệu sản phẩm và dịch vụ bằng Golang CMS

Ngày cập nhật: 20-04-2022 | Số lần xem: 4042 | Số từ: 646 | Phân loại: Xây dựng website

Tôi đang sử dụng golang kết hợp với React Ant Design Pro để phát triển một website nội bộ nhằm giới thiệu giải pháp IoT dành cho doanh nghiệp. Website này được thiết kế để hoạt động trên cả máy tính lẫn điện thoại di động.

Tuy nhiên, một yêu cầu khẩn cấp từ khách hàng đã xuất hiện: họ muốn có thể quét mã QR trên điện thoại để trực tiếp truy cập vào phần giới thiệu sản phẩm. Ban đầu tôi có ý định xây dựng một ứng dụng WeChat Mini Program, nhưng vì phải đảm bảo khả năng tương thích với thị trường quốc tế, tôi quyết định chọn phương án sử dụng H5 – hỗ trợ hai ngôn ngữ là tiếng Trung và tiếng Anh.

Vấn đề phát sinh ở đây chính là việc sao chép code hiện tại sang dự án mới sẽ khiến nhiều thành phần cần điều chỉnh như:

• Logo công ty
• Tên doanh nghiệp
• Số giấy phép đăng ký mạng
• Thông tin liên hệ (có thể nhiều số)
• Giới thiệu ngắn gọn về công ty
• Các banner quảng cáo (có thể kèm mô tả và đường dẫn chuyển hướng)
• Cài đặt đa ngôn ngữ

Nếu để các cấu hình này nằm trong file code thì việc bảo trì sau này sẽ rất khó khăn, đặc biệt khi cần tạo thêm các phiên bản khác nhau cho nhiều khách hàng. Tôi bắt đầu suy nghĩ đến việc xây dựng một hệ thống giống như WordPress của PHP – nơi mà ta có thể tái sử dụng nhiều theme khác nhau chỉ bằng cách thay đổi cấu hình, đồng thời không làm rò rỉ dữ liệu giữa các trang web.

Những cấu hình chung có thể trừu tượng hóa

Dưới đây là những thông tin có thể tách riêng ra khỏi logic code để quản lý tập trung:

• Logo doanh nghiệp
• Tên công ty
• Số đăng ký website
• Danh sách số điện thoại liên hệ (có thể nhiều số)
• Giới thiệu ngắn gọn về công ty
• Các banner (kèm mô tả và đường dẫn liên kết)
• Cấu hình đa ngôn ngữ (chuyển đổi giữa tiếng Trung và tiếng Anh)

Giải pháp triển khai các giao diện theo doanh nghiệp và lĩnh vực kinh doanh

Tham khảo cách WordPress thực hiện, tôi quyết định tổ chức các template dưới dạng thư mục themes tại gốc dự án. Mỗi theme sẽ chứa đầy đủ các template cho trang chủ, chi tiết sản phẩm, v.v.

Để quản lý hiệu quả, cần tuân thủ một số quy tắc nhất định:

• Người dùng có thể chọn theme mong muốn qua giao diện quản trị, thông tin sẽ được lưu trữ trong cơ sở dữ liệu
• Tên các file template phải tuân theo chuẩn như: index.html, detail.html
• Mỗi theme sẽ có một file CSS riêng
• File JS cũng nên được gói lại thành một file duy nhất, tối ưu và nén khi build
• Cho phép tùy chỉnh CSS theo từng theme, lưu trữ trong database. Ví dụ: nếu logo có kích thước khác nhau, có thể thêm đoạn CSS tùy chỉnh chiều cao, chiều rộng cho phù hợp

Công nghệ sử dụng trong dự án

• Backend: Sử dụng Golang vì tốc độ xử lý nhanh và không bị cản trở bởi vấn đề versioning phức tạp như PHP
• Giao diện quản trị: Áp dụng kiến trúc Frontend - Backend tách biệt, sử dụng React Ant Design Pro V5
• Template HTML: Sử dụng hệ thống template tích hợp sẵn của Golang, hiện tại hoàn toàn đáp ứng nhu cầu
• CSS: Dùng Tailwind CSS để xây dựng giao diện nhanh chóng và linh hoạt
• Lưu trữ hình ảnh: Tải lên CDN Qiniu để tăng tốc độ load và giảm tải server

Kết luận

Việc xây dựng một hệ thống website linh hoạt, có thể tùy chỉnh dễ dàng theo từng khách hàng là điều rất cần thiết trong bối cảnh hiện nay. Mô hình CMS được thiết kế theo hướng module hóa, phân tách rõ ràng giữa nội dung và cấu hình giúp tối ưu hóa cả quá trình phát triển lẫn bảo trì. Với sự kết hợp giữa Golang và React, cùng các công cụ mạnh mẽ như Tailwind CSS và CDN Qiniu, tôi tin rằng hệ thống này có thể đáp ứng tốt nhu cầu của nhiều doanh nghiệp khác nhau.