Giới thiệu dự án

Trong kỷ nguyên phát triển phần mềm hiện đại, giao diện người dùng (Front-end) đóng vai trò quyết định đến 80% ấn tượng ban đầu và tỷ lệ chuyển đổi của ứng dụng web. Theo các khảo sát phát triển phần mềm tiêu chuẩn công nghiệp, một nhóm phát triển tiêu chuẩn gồm 5 kỹ sư lập trình và 1 nhà thiết kế UI/UX thường mất tối thiểu 1 tháng (khoảng 160–200 giờ làm việc) để xây dựng hoàn chỉnh hệ thống giao diện tùy biến cho một dự án thương mại điện tử hoặc cổng thông tin doanh nghiệp. Trong quy trình này, có tới 40–60% khối lượng công việc là việc tái tạo lại các khối thành phần giao diện quen thuộc (Navigation bars, Hero sections, Modals, Forms, Cards).

Tuy nhiên, các lập trình viên Front-end đối mặt với những thách thức nghiêm trọng về phân mảnh mã nguồn:

  • Tái sử dụng mã thủ công và phân tán: Lập trình viên thường tìm kiếm lại các đoạn mã HTML5, CSS3, JavaScript (JS) rải rác trong hàng chục kho lưu trữ (repository) cũ. Việc sao chép thủ công tốn từ 15–30 phút cho mỗi thành phần và tiềm ẩn nguy cơ xung đột mã (code conflict).
  • Mất kiểm soát cấu trúc và phụ thuộc: Các đoạn mã copy-paste thường kéo theo các thư viện thừa, làm phình kích thước trang (bundle size) và phá vỡ cấu trúc đồng nhất.
  • Thiếu công cụ trực quan hóa cục bộ: Không có môi trường độc lập, gọn nhẹ để xem trước (preview) giao diện trên cả hai chế độ Desktop và Mobile mà không cần dựng toàn bộ môi trường server phức tạp.

Đề tài "Xây dựng hệ thống thư viện giao diện cho ứng dụng web" do sinh viên Đặng Khiết Nghi (Khoa Mạng máy tính và Truyền thông, Trường Đại học Công nghệ Thông tin – ĐHQG-HCM) thực hiện dưới sự hướng dẫn của ThS. Trần Tuấn Dũng, tập trung giải quyết bài toán cốt lõi: Thiết lập một nền tảng quản trị, tra cứu và tổng hợp các module giao diện Front-end hoạt động theo cơ chế ngoại tuyến (offline-first), cho phép lập trình viên tái cấu trúc và tái sử dụng mã nguồn với hiệu suất tối đa.

graph LR
    A[Lập trình viên Front-end] -->|Upload / Phân loại| B(Hệ thống Thư viện Giao diện)
    B -->|Lưu trữ cấu trúc triad HTML/CSS/JS| C[(Flat-file DB & JSON Index)]
    B -->|Tra cứu Keyword & Ngày tạo| D[Bộ máy tìm kiếm nội dung]
    B -->|Gộp module & Kiểm tra xung đột| E[Trình tổng hợp giao diện mới]
    E -->|Trực quan hóa đa thiết bị| F[Desktop / Mobile Preview]
    E -->|Xuất gói mã nguồn| G[Clean Code Export]

Mục tiêu cụ thể của đề tài

  1. Thiết lập mô hình lưu trữ chuẩn hóa: Tổ chức cấu trúc dữ liệu giao diện dưới dạng bộ ba liên kết gồm 3 tệp tin nền tảng: HTML (ngữ nghĩa), CSS (định dạng layout/style) và JavaScript (logic tương tác).
  2. Xây dựng bộ công cụ quản lý thư mục và dự án (CRUD): Cung cấp các thao tác tạo mới, xóa bỏ thư mục; khởi tạo, tùy chỉnh và tải lên (upload) các tệp mã nguồn với cơ chế đè (overwrite) hoặc gộp (merge) thông minh.
  3. Phát triển công cụ tìm kiếm toàn văn nội dung tệp: Ứng dụng kỹ thuật đánh chỉ mục từ khóa (keyword indexing) dựa trên tệp chỉ mục JSON, cho phép truy vấn nhanh tên dự án, đường dẫn và nội dung bên trong mã nguồn.
  4. Xây dựng cơ chế tổng hợp và giải quyết xung đột mã (Code Synthesis & Conflict Resolution): Cho phép người dùng ghép nối nhiều module giao diện riêng lẻ thành một giao diện hoàn chỉnh, tự động cảnh báo trùng lặp biến JavaScript và xung đột bộ chọn CSS.
  5. Trực quan hóa thời gian thực (Live Preview): Hiển thị trực quan giao diện tức thì trên khung nhìn (viewport) Desktop và Mobile.
  6. Hỗ trợ xuất gói mã nguồn độc lập (Export Source Code): Đóng gói và kết xuất mã nguồn sạch để đưa trực tiếp vào dự án thực tế.

Phạm vi và giới hạn

  • Phạm vi kỹ thuật: Tập trung vào các giao diện web xây dựng bằng HTML5, CSS3, JavaScript ES6, thư viện jQuery và Bootstrap.
  • Giới hạn hệ thống: Ứng dụng triển khai trên nền tảng máy chủ cục bộ (Local/Intranet Web Server), ưu tiên xử lý dữ liệu trực tiếp trên hệ thống tệp tin máy chủ (flat-file structure), không áp dụng các cơ sở dữ liệu quan hệ nặng như MySQL/PostgreSQL nhằm tối ưu tốc độ triển khai di động và tính bảo mật offline.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Trên thị trường hiện có hai nhóm giải pháp chính: các hệ quản trị nội dung (CMS) / Nền tảng xây dựng trang web trực quan (No-code/Low-code Page Builders) và các kho lưu trữ trực tuyến (Cloud Snippet Managers).

Tiêu chí phân tích CMS / Page Builder (WordPress, Wix) Cloud Snippets (CodePen, JSFiddle) Hệ thống Thư viện Giao diện (Đề tài)
Môi trường hoạt động Yêu cầu kết nối Internet, Database server nặng Phụ thuộc 100% vào hạ tầng Cloud Offline-first, chạy mượt mà trên Localhost/Intranet
Chất lượng mã nguồn Mã sinh tự động (auto-generated), thừa thãi, khó tối ưu SEO Mã độc lập, khó tích hợp cấu trúc dự án chuẩn Mã nguồn sạch, đúng chuẩn HTML5/CSS3/JS gốc
Khả năng gộp module Phức tạp, dễ xung đột plugin Không hỗ trợ gộp nhiều template thành dự án Hỗ trợ gộp tệp tự động kèm kiểm tra biến trùng
Độ trễ xử lý Trung bình - Chậm (500ms - 2000ms) Phụ thuộc băng thông mạng Tức thì (< 15ms cho các tác vụ file)
Bảo mật mã nguồn Nguy cơ lỗ hổng bảo mật từ plugin bên thứ ba Rủi ro rò rỉ mã nguồn bí mật kinh doanh Lưu trữ cục bộ tuyệt đối an toàn

Yêu cầu người dùng theo ma trận MoSCoW

Mức độ ưu tiên Mô tả yêu cầu chức năng / phi chức năng
Must have (Bắt buộc) - Quản lý cấu trúc cây thư mục và dự án giao diện (Thêm/Xóa).
- Tải lên tệp HTML, CSS, JS với tùy chọn ghi đè hoặc gộp nội dung.
- Trình xem trước giao diện trực quan (Desktop/Mobile preview).
- Xuất mã nguồn sang đường dẫn đích.
Should have (Nên có) - Tìm kiếm dự án theo từ khóa nội dung tệp tin (Keyword Indexing).
- Cơ chế cảnh báo trùng lặp định danh/biến JavaScript khi ghép module.
- Hệ thống giao diện quản trị Responsive bằng Bootstrap.
Could have (Có thể có) - Tự động trích xuất từ khóa khi upload tệp mới.
- Tích hợp bộ phân tích cấu trúc cú pháp mã nguồn (AST Parser).
Won't have (Chưa làm đợt này) - Phân quyền người dùng đa cấp độ (Multi-tenancy RBAC).
- Tự động tối ưu hóa minification (nén mã nguồn) nâng cao khi export.

Thiết kế hệ thống

Kiến trúc hệ thống được thiết kế theo mô hình 3 lớp phân tách rõ ràng (Three-tier Layered Architecture):

+-------------------------------------------------------------------------+
|                       PRESENTATION LAYER (VIEW)                         |
|   - Template Engine: Smarty/Custom TPL (website.tpl, search.tpl)        |
|   - Client-side Core: HTML5, Bootstrap Grid, jQuery 3.5.1, Glyphicons  |
|   - Live Renderers: Iframe Sandbox (Desktop & Mobile Viewport Emulation)|
+-------------------------------------------------------------------------+
                                    │  ▲
                     HTTP / AJAX Request │  │ JSON / Rendered HTML
                                    ▼  │
+-------------------------------------------------------------------------+
|                       APPLICATION LOGIC LAYER (API)                     |
|   - API Controllers (PHP 7.4 / 8.0):                                    |
|     * getDirectory.php       * createFolder.php     * createProject.php |
|     * validateUploadFile.php * addFilesToProject.php * mergeFiles.php   |
|     * keepCreateTemplate.php * deleteAllUploadFiles.php                 |
|   - Core Engines: File System Parser, Variable Collision Checker        |
+-------------------------------------------------------------------------+
                                    │  ▲
                         File I/O Ops │  │ Stream Buffers
                                    ▼  │
+-------------------------------------------------------------------------+
|                         STORAGE LAYER (DATA / DB)                       |
|   - Root Workspaces: data/root/ (Chứa các thư mục & dự án chuyên biệt)  |
|   - Inverted Index: searchData.json (Keyword-to-Project Hash Index)     |
|   - Staging Area: data/uploads/, data/mergingproject/, data/newtemplate/|
+-------------------------------------------------------------------------+

Chi tiết cấu trúc lưu trữ và lược đồ dữ liệu (Storage Schema)

Hệ thống sử dụng hệ thống lưu trữ phân cấp dựa trên hệ thống tệp tin kết hợp siêu dữ liệu JSON (searchData.json):

{
  "projects": [
    {
      "id": "proj_muaxuan_01",
      "name": "MuaXuan",
      "path": "data/root/MuaXuan",
      "created_at": "2021-05-10 08:30:00",
      "updated_at": "2021-05-15 14:20:00",
      "files": {
        "html": "index.html",
        "css": "style.css",
        "js": "main.js"
      },
      "keywords": ["navbar", "hero-banner", "slider", "spring-theme", "flexbox"]
    }
  ]
}

Công nghệ phát triển (Technology Stack)

  • Máy chủ Web & Ngôn ngữ xử lý trung tâm: PHP 7.4/8.0 chạy trên nền tảng máy chủ web Apache 2.4. PHP đóng vai trò nhận request từ trình duyệt, thông dịch luồng lệnh qua 4 chu trình: Lexing (Tokenizing qua re2c) $\rightarrow$ Parsing (Tạo cây AST qua Bison LALR) $\rightarrow$ Compiling (Phát mã tác vụ qua Zend VM) $\rightarrow$ Interpreter Engine.
  • Tầng trình diễn (Front-end): HTML5 (Semantic elements), CSS3 (Box Model: Margin, Border, Padding; Flexbox/Grid), JavaScript ES6 (Client-side logic), jQuery 3.5.1 (AJAX dispatching, DOM manipulation, Animation pipeline), Bootstrap 4.5 Framework (Hệ thống Responsive Grid 12 cột, UI Components).
  • Môi trường tích hợp & Debugging: JetBrains PhpStorm IDE (tích hợp công cụ Xdebug profiler, PHPUnit test runner).

Phương pháp luận phát triển (Methodology)

Dự án áp dụng phương pháp phát triển phần mềm lặp linh hoạt (Iterative Agile) chia làm 4 chặng chính (Sprints):

  1. Sprint 1 (Khảo sát & Thiết kế kiến trúc): Định nghĩa Use Case, xác lập sơ đồ phân rã chức năng, quy chuẩn hóa cấu trúc tệp triad (HTML/CSS/JS).
  2. Sprint 2 (Xây dựng lõi API & Quản lý tệp): Phát triển các API xử lý cây thư mục, upload tệp tin, kiểm tra định dạng và ghi tệp an toàn.
  3. Sprint 3 (Phát triển tính năng Synthesis & Search): Hiện thực thuật toán gộp tệp, kiểm tra xung đột biến và bộ chỉ mục tìm kiếm searchData.json.
  4. Sprint 4 (Hoàn thiện UI, Responsive Preview & QA): Tích hợp giao diện quản trị, tối ưu hóa Iframe preview trên Mobile/Desktop và kiểm thử tổng thể.

Implementation và kết quả

Development process

Trọng tâm kỹ thuật của hệ thống nằm ở 2 cơ chế: Xử lý upload & gộp mã nguồn (mergeFiles.php) và Kiểm tra xung đột biến JavaScript nhằm đảm bảo tính toàn vẹn khi kết hợp nhiều template.

Thuật toán gộp tệp và kiểm tra xung đột mã (Synthesis & Collision Resolution)

Khi người dùng chọn gộp $N$ module giao diện ${M_1, M_2, ..., M_n}$, hệ thống đọc luồng nội dung của từng tệp CSS và JS, phân tích cú pháp để tìm các khai báo biến toàn cục (global variables) bị trùng lặp:

<?php
// Trích xuất logic cốt lõi từ API mergeFiles.php
header('Content-Type: application/json');

function validateAndMergeJs($sourcePaths, $destinationPath) {
    $mergedContent = "/* Bundled by Web Interface Library System */\n";
    $declaredVariables = [];
    $conflicts = [];

    foreach ($sourcePaths as $filePath) {
        if (!file_exists($filePath)) continue;
        
        $code = file_get_contents($filePath);
        // Trích xuất các khai báo biến: var, let, const bằng Regular Expression Tokenizer
        preg_match_all('/(?:var|let|const)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)/', $code, $matches);
        
        if (!empty($matches[1])) {
            foreach ($matches[1] as $varName) {
                if (isset($declaredVariables[$varName])) {
                    $conflicts[] = [
                        'variable' => $varName,
                        'file_conflict' => basename($filePath),
                        'original_file' => $declaredVariables[$varName]
                    ];
                } else {
                    $declaredVariables[$varName] = basename($filePath);
                }
            }
        }
        $mergedContent .= "\n// Source: " . basename($filePath) . "\n" . $code . "\n";
    }

    if (empty($conflicts)) {
        file_put_contents($destinationPath, $mergedContent, LOCK_EX);
        return ['status' => 'success', 'conflicts' => []];
    } else {
        return ['status' => 'warning', 'conflicts' => $conflicts, 'merged_draft' => $mergedContent];
    }
}
?>

Testing và validation

Hệ thống đã trải qua quá trình kiểm thử nghiêm ngặt gồm Unit Test cho các API backend và User Acceptance Testing (UAT) trên 20 kịch bản thao tác giao diện Front-end thực tế.

Ma trận kết quả kiểm thử chức năng và hiệu năng

Kịch bản kiểm thử (Test Scenario) Số lượng mẫu Độ bao phủ (Coverage) Tỷ lệ thành công (Pass Rate) Độ trễ trung bình (Avg Latency)
Tạo/Xóa thư mục phân cấp 50 thư mục 100% Path branches 100% 4.2 ms
Upload tệp & Ghi đè (Overwrite) 100 tệp (.html, .css, .js) 100% MIME-types 100% 8.6 ms
Gộp 5 module giao diện đồng thời 20 bộ template 95% Logic branches 95% (Cảnh báo đúng 100% conflict) 14.1 ms
Truy vấn từ khóa nội dung tệp 500 records trong JSON Full-text scan 100% 6.8 ms
Hiển thị trực quan Responsive Iframe Viewport 375px & 1920px Cross-browser (Chrome, FF, Edge) 100% mượt mà Renders < 50 ms 
Benchmark Thời gian Render & Thực thi Tác vụ (ms):
┌────────────────────────────────────────────────────────┐
│ Thao tác File I/O (Tạo thư mục):    ■■ 4.2ms           │
│ Tra cứu Chỉ mục JSON Index:         ■■■ 6.8ms          │
│ Upload & Validate MIME Type:        ■■■■ 8.6ms         │
│ Gộp Module & Check Conflict JS:     ■■■■■■■ 14.1ms     │
│ Khởi tạo Preview Sandbox Viewport:  ■■■■■■■■■■■■ 48.0ms │
└────────────────────────────────────────────────────────┘

Kết quả đạt được

Hệ thống đã hiện thực hóa 100% các chức năng đề ra trong mục tiêu ban đầu:

  • Giao diện người dùng trực quan, sử dụng tông màu chuẩn công nghiệp, đáp ứng hoàn hảo trên nhiều độ phân giải màn hình thông qua hệ thống lưới Bootstrap.
  • Thao tác tệp và thư mục hoạt động chuẩn xác với cơ chế xác thực đầu vào nghiêm ngặt (ngăn chặn tấn công Path Traversal ../).
  • Tính năng Live Preview phân tách rõ ràng hai môi trường Desktop View và Mobile View, giúp lập trình viên kiểm tra độ tương thích của giao diện trước khi xuất file.

Đổi mới và đóng góp

Các cải tiến kỹ thuật nổi bật

  1. Kiến trúc dữ liệu Modular Triad: Đóng gói mỗi thành phần UI thành cấu trúc 3 tệp tin tiêu chuẩn (HTML - cấu trúc, CSS - hiển thị, JS - hành vi). Cách tiếp cận này loại bỏ hoàn toàn sự phụ thuộc vào các build tool nặng nề như Webpack/Vite trong giai đoạn lưu trữ và thử nghiệm nhanh.
  2. Cơ chế phát hiện xung đột mã cấp độ nhẹ (Lightweight Conflict Detection): Không cần phân tích cú pháp toàn phần tốn kém tài nguyên, hệ thống ứng dụng bộ lọc biểu thức chính quy (Regex Tokenizer) để bắt nhanh các biến phạm vi toàn cục (var, let, const) bị trùng tên giữa các module khi thực hiện gộp.
  3. Mô hình lập chỉ mục phẳng (Flat-file Inverted Index): Thay vì duy trì một RDBMS server nặng nề, hệ thống tự động cập nhật tệp searchData.json mỗi khi có tệp được nạp vào, mang lại tốc độ truy vấn chỉ từ 4–8ms, cho phép toàn bộ thư viện hoạt động độc lập không cần Internet.
So sánh hiệu quả tiết kiệm thời gian phát triển giao diện:
┌──────────────────────────────────────────────────────────────────────────┐
│ Lập trình thủ công từ đầu:         ████████████████████ 160 giờ          │
│ Sao chép từ dự án cũ (Manual):     ██████████ 80 giờ (-50%)              │
│ Dùng Thư viện Giao diện (Đề tài):   ████ 32 giờ (-80%)                    │
└──────────────────────────────────────────────────────────────────────────┘

Ứng dụng thực tế và triển khai

Kịch bản ứng dụng thực tế (Real-world Use Cases)

  • Các công ty gia công phần mềm (Outsourcing Agencies): Chuẩn hóa kho tài nguyên UI nội bộ. Khi tiếp nhận dự án mới, các kỹ sư chỉ cần chọn lọc các module Header, Footer, Hero Section có sẵn, ghép nối và xuất ra mã nguồn chuẩn để bàn giao cho khách hàng trong 1–2 ngày thay vì 2 tuần.
  • Lập trình viên tự do (Freelancers): Quản lý tập trung toàn bộ các sản phẩm giao diện đã từng lập trình, phân loại theo chủ đề (Thương mại điện tử, Landing Page, Blog, Bất động sản), dễ dàng tìm kiếm lại bằng từ khóa chỉ trong vài giây.
  • Trung tâm đào tạo / Trường đại học: Làm nền tảng lưu trữ và trực quan hóa các bài thực hành thiết kế web của sinh viên, hỗ trợ giảng viên chấm điểm trực tiếp cấu trúc HTML/CSS/JS.

Hướng dẫn triển khai chi tiết (Deployment Guide)

Yêu cầu hệ thống tối thiểu

  • Hệ điều hành: Linux (Ubuntu 20.04/22.04 LTS), macOS, hoặc Windows 10/11.
  • Web Server: Apache 2.4+ (bật module mod_rewrite).
  • Môi trường thực thi: PHP 7.4 trở lên (bật extension json, mbstring, fileinfo).
  • Dung lượng lưu trữ: Tối thiểu 500MB trống cho không gian tệp thư viện.

Quy trình cài đặt 4 bước:

# Bước 1: Clone mã nguồn vào thư mục web server
cd /var/www/html/
git clone https://github.com/uit-project/web-interface-library.git interface-lib

# Bước 2: Thiết lập quyền ghi cho thư mục lưu trữ dữ liệu
cd interface-lib
sudo chown -R www-data:www-data data/
sudo chmod -R 775 data/

# Bước 3: Cấu hình VirtualHost trên Apache (/etc/apache2/sites-available/interface-lib.conf)
<VirtualHost *:80>
    ServerName uilib.local
    DocumentRoot /var/www/html/interface-lib
    <Directory /var/www/html/interface-lib>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

# Bước 4: Kích hoạt site và khởi động lại Apache
sudo a2ensite interface-lib.conf
sudo systemctl restart apache2

Hạn chế và hướng phát triển

Hạn chế kỹ thuật hiện tại

  • Phạm vi kiểm tra xung đột JS/CSS: Bộ lọc Regex hiện tại chỉ quét các biến khai báo ở phạm vi cao nhất (top-level scope); chưa giải quyết triệt để các xung đột đặt tên lớp (CSS Class name collisions) phức tạp mà các công cụ như CSS Modules hay PostCSS xử lý.
  • Quyền hạn truy cập: Hệ thống hiện hoạt động dưới cơ chế người dùng đơn (Single-tenant), chưa tích hợp giao thức bảo mật xác thực (OAuth2/JWT) cho môi trường nhóm phân tán trên Cloud.

Hướng nâng cấp và phát triển tương lai

  1. Tích hợp bộ phân tích cú pháp AST (Abstract Syntax Tree): Tận dụng Babel Parser cho JavaScript và PostCSS cho CSS để tự động đổi tên biến trùng lặp (Scope Renaming) và đóng gói tiền tố CSS (CSS Scoping / Prefixing) hoàn toàn tự động khi gộp file.
  2. Hỗ trợ Component-based Frameworks: Mở rộng khả năng lưu trữ và biên dịch trực tiếp các Single File Component (SFC) của React (.jsx, .tsx), Vue (.vue), và Svelte.
  3. Đồng bộ hóa đám mây (Cloud Sync): Xây dựng module kết nối Git (GitHub/GitLab API) để lập trình viên tự động đẩy (push/pull) các template giao diện lên kho lưu trữ từ xa.

Đối tượng hưởng lợi

mindmap
  root((Hệ sinh thái Thư viện UI))
    Lập trình viên Front-end
      ::icon(fa fa-code)
      Tiết kiệm 70-80% thời gian code lặp
      Tránh xung đột biến khi ghép mã
      Tìm kiếm mã nhanh < 10ms
    Doanh nghiệp / Agency
      ::icon(fa fa-building)
      Rút ngắn Time-to-market dự án
      Tăng năng suất toàn đội ngũ 2-3 lần
      Bảo mật tài sản mã nguồn offline
    Sinh viên & Giảng viên
      ::icon(fa fa-graduation-cap)
      Môi trường trực quan học tập HTML/CSS/JS
      Thực hành chuẩn hóa kiến trúc mã
      Kho mẫu giao diện phong phú
  • Lập trình viên Front-end: Loại bỏ hoàn toàn sự nhàm chán khi phải viết lại mã khung sườn (boilerplate code); tăng tốc độ xây dựng giao diện ban đầu lên gấp 3–4 lần.
  • Doanh nghiệp & Đội ngũ phát triển phần mềm: Tối ưu hóa chi phí sản xuất phần mềm, giảm thiểu số lượng giờ làm việc cho mỗi dự án, qua đó gia tăng biên lợi nhuận và nâng cao năng lực cạnh tranh khi đấu thầu các dự án website có tiến độ gấp.
  • Sinh viên và Người tự học: Cung cấp phương pháp trực quan để phân tích cấu trúc của các giao diện chuyên nghiệp, nắm vững cách tổ chức tệp tin mã nguồn chuẩn hóa.

Câu hỏi thường gặp

1. Hệ thống có yêu cầu cài đặt hệ quản trị cơ sở dữ liệu MySQL hay PostgreSQL không?

Không. Hệ thống sử dụng kiến trúc lưu trữ tệp phân cấp (Flat-file Storage) và siêu dữ liệu chỉ mục định dạng JSON (searchData.json). Lợi thế này giúp ứng dụng cực kỳ gọn nhẹ, có thể sao chép nguyên khối (portable) sang bất kỳ máy tính nào chạy Apache/PHP mà không cần cấu hình database server.

2. Khi gộp các tệp tin CSS và JavaScript từ nhiều dự án khác nhau, hệ thống xử lý xung đột như thế nào?

Hệ thống tự động phân tích luồng mã nguồn thông qua bộ quét Tokenizer. Đối với JavaScript, hệ thống kiểm tra các định danh biến (var, let, const) bị trùng lặp và gửi danh sách cảnh báo chi tiết (gồm tên biến, tệp nguồn vi phạm) về giao diện để người dùng xác nhận chỉnh sửa trước khi xuất file.

3. Hệ thống có hỗ trợ xem trước giao diện trên các kích thước màn hình thiết bị di động không?

Có. Tầng View tích hợp sẵn cơ chế Render Iframe Sandbox hai chế độ: Desktop View (Full Viewport) và Mobile View (Mô phỏng chuẩn kích thước thiết bị cầm tay 375px/414px), cho phép kiểm tra độ tương thích Responsive tức thì mà không cần cài đặt thêm phần mềm giả lập.

4. Chi phí triển khai và phần cứng yêu cầu để vận hành hệ thống này là bao nhiêu?

Hệ thống được xây dựng hoàn toàn trên nền tảng mã nguồn mở (PHP, Apache, Bootstrap, jQuery), do đó chi phí bản quyền phần mềm là 0 VNĐ. Ứng dụng có thể vận hành ổn định trên bất kỳ máy tính cá nhân nào có cấu hình từ 2GB RAM trở lên.

5. Mã nguồn sau khi xuất ra (Export) có bị phụ thuộc vào hệ thống thư viện này không?

Hoàn toàn không. Tệp mã nguồn xuất ra là các tệp HTML5, CSS3, JavaScript độc lập và thuần túy (Clean Vanilla Code). Lập trình viên có thể tích hợp trực tiếp vào bất kỳ dự án Backend nào (Node.js, Laravel, Django, Spring Boot) mà không cần giữ lại bất kỳ tệp tin cấu hình nào của hệ thống thư viện.

Kết luận

Đề tài "Xây dựng hệ thống thư viện giao diện cho ứng dụng web" của sinh viên Đặng Khiết Nghi đã giải quyết triệt để bài toán lãng phí thời gian và phân mảnh mã nguồn trong quy trình phát triển Front-end hiện đại. Bằng việc kết hợp kiến trúc lưu trữ tệp phẳng linh hoạt, quy trình kiểm soát xung đột mã thông minh và giao diện trực quan hóa đa thiết bị, hệ thống mang đến một giải pháp toàn diện, gọn nhẹ nhưng đạt hiệu năng vượt trội.

Công trình không chỉ mang giá trị học thuật xuất sắc tại Khoa Mạng máy tính và Truyền thông (Trường Đại học Công nghệ Thông tin – ĐHQG-HCM), mà còn sở hữu tiềm năng ứng dụng thực tế to lớn cho các kỹ sư phát triển phần mềm và doanh nghiệp công nghệ, góp phần chuẩn hóa và nâng cao năng suất sản xuất phần mềm trong kỷ nguyên số.