🧑‍💻 Development

Tài liệu này dành cho developer muốn hiểu, mở rộng hoặc maintain plugin Sport Plugin.

📁 Kiến trúc tổng thể

Plugin được thiết kế theo hướng modular + tách biệt logic rõ ràng:

admin/ → Xử lý giao diện & logic trong WP Admin

assets/ → Tài nguyên frontend (CSS, JS, fonts, images)

build/ → Bundle UI (iframe + template build sẵn)

customizers/ → Cấu hình từng module shortcode

classes/ → Core class xử lý (OOP)

includes/ → Hệ thống lõi (hooks, API, data)

layouts/ → Render UI (view layer)

languages/ → Đa ngôn ngữ

⚙️ Luồng hoạt động (Core Flow)

Shortcode được gọi

Load cấu hình từ customizers/

Lấy dữ liệu từ:

match-data.php

API (nếu có)

Render thông qua layouts/

Assets được load từ build/ hoặc assets/

👉 Kiến trúc gần giống:

MVC (Model: includes, View: layouts, Controller: shortcode/customizer)

🧩 Customizer System (Quan trọng nhất)

Thư mục:

customizers/
├── 6in1/
├── fixture/
├── player_board/
├── rank/
├── rate/
├── result/

Vai trò:

Định nghĩa config cho từng shortcode/module

Mapping dữ liệu → UI

Cho phép thay đổi hiển thị mà không sửa core

👉 File trung tâm:

🧠 Data Layer

Dữ liệu được xử lý tại:

includes/
├── match-data.php
├── customizer-data.php

Nhiệm vụ:

Chuẩn hóa dữ liệu từ API

Cache / xử lý business logic

Trả data cho layout

🎨 Render Layer (UI)

layouts/
├── shortcode/
├── settings/

Nguyên tắc:

Không xử lý logic nặng

Chỉ render HTML

Tách biệt hoàn toàn với data

📦 Build System

build/
├── *_iframe/
├── css/
├── assets/

Vai trò:

Chứa UI đã build sẵn (iframe-based)

Tối ưu performance (load nhanh)

Dùng cho các block như:

6in1

fixture

rank

result

🔌 Hooks & Integration

Plugin sử dụng WordPress hooks:

Có thể mở rộng bằng cách:

⚙️ Admin System

admin/
├── functions-admin.php
├── assets/

Chức năng:

Menu settings

UI cấu hình plugin

Load script riêng cho admin

🌐 API & Data Sync

File: site-api.php

Kết hợp với:

match-data.php

AJAX / cron (nếu có)

Nhiệm vụ:

Lấy dữ liệu trận đấu

Đồng bộ dữ liệu

Tracking domain (nếu có)

🌍 Internationalization (i18n)

languages/
├── .po / .mo / .json

Sử dụng:

🔐 Security

Chặn truy cập trực tiếp:

Escape output:

🧪 Debug & Dev

Bật debug:

Log:

🚀 Best Practices

Tách biệt:

Data (includes)

UI (layouts)

Config (customizers)

Không viết logic trong view

Không hardcode dữ liệu

Dùng WordPress API thay vì code thuần

📌 Extend plugin

Thêm module mới:

Tạo folder trong:

customizers/your-module/

Thêm xử lý data (nếu cần):

includes/

Tạo layout:

layouts/shortcode/

Thêm shortcode:

Thêm assets:

⚡ Performance Notes

Plugin dùng iframe + build → giảm tải server

AJAX + lazy load

Nên cache data nếu scale lớn

🧭 Định hướng phát triển

REST API thay AJAX

Gutenberg Block thay shortcode

Cache nâng cao (Redis / Transient API)

Tách API service riêng

👉 Đây là plugin có kiến trúc tốt, phù hợp cho hệ thống dữ liệu realtime và có khả năng scale cao.

dev

🧑‍💻 Development#

📁 Kiến trúc tổng thể#

⚙️ Luồng hoạt động (Core Flow)#

🧩 Customizer System (Quan trọng nhất)#

Vai trò:#

🧠 Data Layer#

Nhiệm vụ:#

🎨 Render Layer (UI)#

Nguyên tắc:#

📦 Build System#

Vai trò:#

🔌 Hooks & Integration#

⚙️ Admin System#

Chức năng:#

🌐 API & Data Sync#

Nhiệm vụ:#

🌍 Internationalization (i18n)#

Sử dụng:#

🔐 Security#

🧪 Debug & Dev#

🚀 Best Practices#

📌 Extend plugin#

Thêm module mới:#

Thêm shortcode:#

Thêm assets:#

⚡ Performance Notes#

🧭 Định hướng phát triển#

🧑‍💻 Development

📁 Kiến trúc tổng thể

⚙️ Luồng hoạt động (Core Flow)

🧩 Customizer System (Quan trọng nhất)

Vai trò:

🧠 Data Layer

Nhiệm vụ:

🎨 Render Layer (UI)

Nguyên tắc:

📦 Build System

Vai trò:

🔌 Hooks & Integration

⚙️ Admin System

Chức năng:

🌐 API & Data Sync

Nhiệm vụ:

🌍 Internationalization (i18n)

Sử dụng:

🔐 Security

🧪 Debug & Dev

🚀 Best Practices

📌 Extend plugin

Thêm module mới:

Thêm shortcode:

Thêm assets:

⚡ Performance Notes

🧭 Định hướng phát triển