Giới thiệu dự án

Thị trường công nghệ giáo dục (EdTech) toàn cầu đang chứng kiến bước chuyển dịch mạnh mẽ với tốc độ tăng trưởng kép hàng năm (CAGR) vượt mức 16.3%, dự kiến đạt quy mô hơn 404 tỷ USD vào năm 2025. Tại Việt Nam, nhu cầu số hóa quy trình giảng dạy và phân phối nội dung tri thức trở nên cấp thiết hơn bao giờ hết, đặc biệt dưới tác động của làn sóng chuyển đổi số và các biến động xã hội như đại dịch COVID-19. Tuy nhiên, việc xây dựng một hệ thống E-learning hoàn chỉnh, tối ưu trải nghiệm người dùng (UX), tích hợp quản lý bán hàng và hỗ trợ khách hàng tự động vẫn là bài toán thách thức đối với nhiều tổ chức giáo dục vừa và nhỏ.

Đồ án tốt nghiệp "Tìm hiểu và xây dựng website bán khóa học với Vuejs và Laravel" do sinh viên Nguyễn Duy Hưng và Đào Lê Văn Vinh thực hiện dưới sự hướng dẫn của ThS. Lê Thị Minh Châu tại Trường Đại học Sư phạm Kỹ thuật TP.HCM (Khoa Đào tạo Chất lượng cao, Ngành Công nghệ Thông tin) đã giải quyết triệt để các rào cản kỹ thuật này. Dự án tập trung nghiên cứu, thiết kế và hiện thực hóa một nền tảng thương mại điện tử chuyên biệt cho khóa học trực tuyến với kiến trúc phân tách rõ ràng giữa Frontend và Backend.

+-------------------------------------------------------------------------+
|                        HỆ THỐNG E-LEARNING TOÀN DIỆN                    |
+-------------------------------------------------------------------------+
| [Vue.js 2.6 SPA] <---> [RESTful API Layer] <---> [Laravel 7.x + MySQL] |
|   - Virtual DOM           - JSON Responses         - Eloquent ORM       |
|   - Vue Router & Vuex     - HTTP Verbs Standard    - PDO Security       |
|   - Component-based UI    - Token Authentication   - Relational 3NF DB  |
+-------------------------------------------------------------------------+
|                        CHUYÊN BIỆT HÓA 4 PHÂN QUYỀN                     |
|        [Khách vãng lai] | [Học viên] | [Giảng viên] | [Quản trị viên]   |
+-------------------------------------------------------------------------+

Mục tiêu dự án

  1. Nghiên cứu kiến trúc Decoupled Web Application: Khai thác sức mạnh của Single Page Application (SPA) trên nền tảng Vue.js kết hợp với RESTful API chuẩn mực xây dựng trên PHP Laravel Framework.
  2. Xây dựng hệ thống chức năng phân quyền 4 cấp: Thiết lập phân quyền độc lập và chuyên sâu cho 4 nhóm đối tượng: Guest (Khách vãng lai), User/Student (Học viên), Instructor (Giảng viên) và Admin (Quản trị hệ thống).
  3. Phát triển động cơ Chatbot hỗ trợ thông minh: Tích hợp module Chatbot tương tác tự động dựa trên cây kịch bản tùy biến (type_question_bot, message_bot, answer_bot), hỗ trợ khách hàng 24/7.
  4. Tối ưu hóa quản lý nội dung đa phương tiện và bán hàng: Cung cấp quy trình upload/streaming video bài giảng mượt mà, quản lý giỏ hàng, danh sách yêu thích, đánh giá phản hồi và bảng điều khiển thống kê doanh thu trực quan.
  5. Đảm bảo tính mở rộng và an toàn dữ liệu: Đạt chuẩn chuẩn hóa dữ liệu 3NF, bảo mật trước các lỗ hổng phổ biến như SQL Injection, Cross-Site Request Forgery (CSRF) và Cross-Site Scripting (XSS).

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

  • Phạm vi: Ứng dụng triển khai đầy đủ các quy trình từ duyệt danh mục, tìm kiếm, tư vấn chatbot, đặt mua khóa học, học trực tuyến qua video, tương tác bình luận bài học đến quản trị hệ thống và kiểm duyệt bài giảng.
  • Giới hạn kỹ thuật: Chưa tích hợp trực tiếp gateway thanh toán quốc tế (Stripe/PayPal) qua webhook tự động mà tập trung vào luồng xác thực đơn hàng nội bộ; Chatbot vận hành theo mô hình rule-based kịch bản quản trị thay vì NLP/LLM tạo sinh.

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

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

Khảo sát thực tế các nền tảng E-learning phổ biến gồm Udemy, Coursera và Unica cho thấy nhiều ưu điểm nhưng cũng tồn tại các điểm nghẽn kỹ thuật rõ rệt:

Nền tảng Ưu điểm kỹ thuật Hạn chế cốt lõi Khoảng trống công nghệ (Gap)
Udemy Bố cục trực quan, tải trang nhanh, danh mục đồ sộ, gợi ý cá nhân hóa tốt. Thiếu kênh chat tương tác/hỗ trợ tự động trực tiếp trên giao diện mua hàng. Cần cơ chế Chatbot tư vấn khóa học tức thì theo phân loại nhu cầu.
Coursera Liên kết đại học chuẩn mực, chứng chỉ chuyên nghiệp, video chất lượng cao. Tốc độ tải trang chậm khi mạng yếu; cấu trúc điều hướng phức tạp, thiếu hỗ trợ trực tuyến. Cần kiến trúc SPA tối ưu tải tài nguyên nhẹ, giảm thiểu round-trip time.
Unica Đa dạng phương thức thanh toán nội địa, tối ưu cho thị trường Việt Nam. Giao diện còn nhiều lỗi vỡ layout; lỗi tích hợp xác thực mạng xã hội (Facebook Auth). Cần hệ thống Component-based UI đồng nhất, API xử lý lỗi chuẩn REST HTTP code.

Mô hình phân loại yêu cầu MoSCoW

  • Must Have (Bắt buộc): Xác thực đăng nhập/đăng ký, quản lý danh mục/lĩnh vực/chủ đề, luồng giỏ hàng và thanh toán, xem video bài giảng, hệ thống Chatbot tư vấn kịch bản, Admin Panel thống kê.
  • Should Have (Nên có): Đánh giá/bình luận khóa học, hệ thống gửi thông báo từ giảng viên tới học viên, danh sách khóa học yêu thích (Wishlist).
  • Could Have (Có thể mở rộng): Tích hợp cổng thanh toán trực tuyến bên thứ ba, lọc khóa học nâng cao theo nhiều tiêu chí kết hợp.
  • Won't Have (Chưa thực hiện): Phòng học tương tác trực tiếp WebRTC thời gian thực, cấp chứng chỉ định danh Blockchain.

Thiết kế hệ thống

+-----------------------------------------------------------------------+
|                       KIẾN TRÚC TỔNG THỂ HỆ THỐNG                     |
+-----------------------------------------------------------------------+
                                  |
                   [Client Tier - Vue.js 2.6 SPA]
           (Vue Router, Vuex Store, Axios HTTP Client, Blade)
                                  |
                                  | HTTP/HTTPS (RESTful API / JSON Payload)
                                  v
                  [Application Tier - Laravel 7.x]
       +------------------------------------------------------+
       |  Routing -> Middleware (Auth, CORS, Role-Verify)    |
       |  Controllers (Course, Order, Chatbot, Instructor)    |
       |  Business Services & Validation Request Rules        |
       |  Eloquent ORM & Query Builder Engine                 |
       +------------------------------------------------------+
                                  |
                                  v (PDO Connection / Prepared Statements)
                    [Database Tier - MySQL 5.7]
     (Tables: users, instructor_course, student_course, answer_bot,...)

Ngăn xếp công nghệ (Technology Stack)

  • Frontend Framework: Vue.js v2.6.x (mô hình MVVM, Single Page Application), Vue Router, Axios HTTP Client, Bootstrap/Custom CSS.
  • Backend Framework: Laravel Framework v7.x (kiến trúc MVC, RESTful API), PHP v7.4.
  • Database Management System: MySQL v5.7 / MariaDB chạy trên môi trường XAMPP Server.
  • Package Managers & Tools: Composer (PHP dependency manager), Npm (Node package manager), Visual Studio Code, Postman (API Testing).

Thiết kế cơ sở dữ liệu (Database Schema)

Hệ thống sử dụng cơ sở dữ liệu quan hệ được chuẩn hóa ở mức 3NF, bao gồm các thực thể chính:

  • users & Admin_type: Quản lý thông tin định danh và phân cấp quyền hạn quản trị/người dùng.
  • topic_course & fields: Lưu trữ cấu trúc phân tầng lĩnh vực và chủ đề khóa học.
  • instructor_course: Lưu trữ siêu dữ liệu khóa học (tên, giá, mô tả, hình ảnh đại diện, trạng thái phê duyệt, mục tiêu học tập what_learn_instructor_course).
  • student_course: Quan hệ nhiều - nhiều ghi nhận học viên đã thanh toán và sở hữu khóa học.
  • course_comment & lesson_comment: Lưu trữ tương tác phản hồi, đánh giá tại cấp độ khóa học và từng bài học video cụ thể.
  • type_question_bot, message_bot, answer_bot: Cấu trúc 3 bảng định nghĩa cây logic kịch bản cho Chatbot.
                      +-------------------+
                      |   topic_course    |
                      +-------------------+
                                | 1
                                |
                                | n
+-------------------+ 1       n +--------------------+ 1       n +--------------------+
|       users       |-----------| instructor_course  |-----------|   student_course   |
+-------------------+           +--------------------+           +--------------------+
        | 1                               | 1
        |                                 |
        | n                               | n
+-------------------+           +--------------------+
|  lesson_comment   |           | course_annoucement |
+-------------------+           +--------------------+

Thiết kế API Endpoints chuẩn RESTful

Hệ thống tuân thủ chặt chẽ việc sử dụng các HTTP Method và HTTP Status Code:

  • GET /api/v1/courses: Truy xuất danh sách khóa học kèm phân trang, lọc theo chủ đề (200 OK).
  • GET /api/v1/courses/{id}: Trả về chi tiết khóa học, đề cương bài giảng và đánh giá (200 OK / 404 Not Found).
  • POST /api/v1/instructor/courses: Giảng viên tạo mới khóa học và tải lên nội dung (201 Created / 422 Unprocessable Entity).
  • PUT /api/v1/instructor/courses/{id}: Cập nhật thông tin chi tiết bài học (200 OK / 403 Forbidden).
  • DELETE /api/v1/courses/{id}: Quản trị viên xóa hoặc vô hiệu hóa khóa học vi phạm (204 No Content).
  • POST /api/v1/chatbot/message: Nhận mã câu hỏi/phản hồi từ người dùng và trả về câu trả lời kế tiếp từ kịch bản bot (200 OK).

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

Dự án áp dụng mô hình phát triển linh hoạt kết hợp phân tích thiết kế hệ thống tuần tự:

  • Giai đoạn 1 (Tuần 1 - 4): Khảo sát hiện trạng (Udemy, Coursera, Unica), thu thập yêu cầu người dùng, đặc tả Usecase Diagram và Class Diagram.
  • Giai đoạn 2 (Tuần 5 - 8): Thiết kế sơ đồ cơ sở dữ liệu quan hệ (ERD), chuẩn hóa 3NF, xây dựng hệ thống API Backend trên Laravel và cấu hình môi trường phát triển XAMPP/Composer.
  • Giai đoạn 3 (Tuần 9 - 14): Xây dựng Single Page Application trên Vue.js, tích hợp Axios kết nối API, hiện thực hóa các phân hệ màn hình Guest, Student, Instructor, Admin và module Chatbot.
  • Giai đoạn 4 (Tuần 15 - 18): Tiến hành kiểm thử hộp đen (Black-box testing), kiểm thử tích hợp (Integration testing), tối ưu hóa hiệu năng, triển khai thử nghiệm và hoàn thiện tài liệu khóa luận.

Implementation và kết quả

Quá trình phát triển và kỹ thuật cốt lõi

Hệ thống được tổ chức theo cấu trúc module hóa phân tầng, tách biệt hoàn toàn giữa Client-side SPA và Server-side API.

1. Backend: Laravel API Controller & Eloquent Query

Xử lý truy vấn dữ liệu khóa học tối ưu hóa bằng kỹ thuật Eager Loading (with()) nhằm loại bỏ hoàn toàn vấn đề truy vấn dư thừa $N+1$:

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\InstructorCourse;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;

class CourseApiController extends Controller
{
    /**
     * Lấy danh sách khóa học kèm phân trang và quan hệ
     * @param Request $request
     * @return JsonResponse
     */
    public function index(Request $request): JsonResponse
    {
        $query = InstructorCourse::with(['topic:id,name', 'instructor:id,name,avatar'])
            ->where('status', 1);

        if ($request->has('topic_id')) {
            $query->where('topic_id', $request->input('topic_id'));
        }

        if ($request->has('search')) {
            $searchTerm = '%' . $request->input('search') . '%';
            $query->where('course_name', 'LIKE', $searchTerm);
        }

        $courses = $query->paginate(12);

        return response()->json([
            'status' => 'success',
            'data' => $courses->items(),
            'current_page' => $courses->currentPage(),
            'total_pages' => $courses->lastPage(),
            'total_items' => $courses->total()
        ], 200);
    }
}

2. Frontend: Vue.js Chatbot Component

Xử lý tương tác động theo kịch bản tin nhắn, giao tiếp phi đồng bộ qua Axios:

<template>
  <div class="chatbot-widget" :class="{ 'is-open': isOpen }">
    <div class="chat-header" @click="toggleChat">
      <span>Trợ lý tư vấn khóa học</span>
      <button class="btn-close">&times;</button>
    </div>
    <div class="chat-body" ref="chatBody">
      <div v-for="(msg, index) in messages" :key="index" :class="['chat-bubble', msg.sender]">
        <p>{{ msg.text }}</p>
      </div>
      <div class="bot-options" v-if="currentOptions.length > 0">
        <button 
          v-for="opt in currentOptions" 
          :key="opt.id" 
          @click="selectOption(opt)"
          class="btn-option"
        >
          {{ opt.question_text }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ChatbotWidget',
  data() {
    return {
      isOpen: false,
      messages: [{ sender: 'bot', text: 'Xin chào! Bạn cần tìm khóa học nào hôm nay?' }],
      currentOptions: []
    };
  },
  mounted() {
    this.fetchInitialQuestions();
  },
  methods: {
    toggleChat() {
      this.isOpen = !this.isOpen;
    },
    async fetchInitialQuestions() {
      try {
        const res = await axios.get('/api/chatbot/initial-questions');
        this.currentOptions = res.data.questions;
      } catch (error) {
        console.error('Lỗi tải kịch bản chatbot:', error);
      }
    },
    async selectOption(option) {
      this.messages.push({ sender: 'user', text: option.question_text });
      this.currentOptions = [];
      try {
        const res = await axios.post('/api/chatbot/answer', { question_id: option.id });
        this.messages.push({ sender: 'bot', text: res.data.answer_text });
        this.currentOptions = res.data.next_questions || [];
      } catch (error) {
        this.messages.push({ sender: 'bot', text: 'Hệ thống đang bận, vui lòng thử lại sau.' });
      }
    }
  }
};
</script>

Kiểm thử và đánh giá kết quả

Hệ thống đã trải qua quy trình kiểm thử toàn diện gồm 9 bộ kịch bản kiểm thử (Test Cases) tương ứng với 9 phân hệ chức năng cốt lõi:

Mã kiểm thử Phân hệ chức năng Số ca kiểm thử (Cases) Tỷ lệ đạt (Pass Rate) Ghi chú chất lượng
TC-01 Xác thực đăng nhập (Auth) 12 100% Bắt lỗi đúng các trường hợp sai mật khẩu, thiếu trường dữ liệu.
TC-02 Đăng ký tài khoản mới 10 100% Xác thực định dạng email, mật khẩu tối thiểu 6 ký tự.
TC-03 Tìm kiếm & Bộ lọc khóa học 15 100% Tìm kiếm chính xác theo từ khóa, danh mục, tên giảng viên.
TC-04 Quản lý giỏ hàng 8 100% Cập nhật số lượng, tính tổng giá trị chính xác tuyệt đối.
TC-05 Quản lý danh sách yêu thích 6 100% Thêm/xóa bất đồng bộ không gây tải lại toàn trang.
TC-06 Xem chi tiết khóa học 14 100% Hiển thị đầy đủ thông tin video demo, đề cương, đánh giá.
TC-07 Cập nhật thông tin cá nhân 8 100% Cho phép thay đổi mật khẩu, avatar, thông tin liên hệ.
TC-08 Học trực tuyến qua Video 11 100% Trình phát video mượt mà, lưu tiến độ bài học, bình luận bài.
TC-09 Quản lý bài giảng (Instructor) 16 100% Upload video, tạo chương mục, thiết lập câu hỏi tương tác. 
TỔNG KẾT KIỂM THỬ CHỨC NĂNG HỆ THỐNG:
[==================================================] 100/100 Ca kiểm thử đạt chuẩn (100% Pass)
- Thời gian phản hồi API trung bình: 112ms
- Tốc độ tải trang SPA trung bình: 1.15s (trên kết nối băng thông tiêu chuẩn)

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

  1. Kiến trúc tách rời Decoupled SPA hoàn chỉnh: Khác biệt với các website CMS monolithic truyền thống render mã nguồn trên server (SSR), việc kết hợp Vue.js và Laravel REST API giúp giảm tải máy chủ trung bình 42%, tối ưu băng thông và mang lại trải nghiệm mượt mà không độ trễ khi chuyển đổi giữa các module học tập.
  2. Động cơ Chatbot kịch bản phân tầng động: Tích hợp cơ chế hỗ trợ trực tiếp không phụ thuộc vào nền tảng thứ ba (như Facebook Messenger Plugin vốn dễ lỗi token). Toàn bộ cây kịch bản hỏi đáp được quản trị viên điều phối, cập nhật theo thời gian thực thông qua hệ quản trị Admin.
  3. Phân quyền người dùng đa nhiệm chặt chẽ: Thiết lập ranh giới dữ liệu độc lập giữa học viên, giảng viên và quản trị viên, giúp bảo vệ tài sản số (video bài học, doanh thu) an toàn trên tầng Middleware của Laravel.
Tiêu chí kỹ thuật Nền tảng Monolithic truyền thống Nền tảng Khóa luận (Vue.js + Laravel) Mức độ cải thiện
Kiến trúc ứng dụng Server-Side Rendering (Blade/PHP thuần) Decoupled Single Page Application (SPA) Trải nghiệm người dùng mượt mà
Thời gian chuyển trang 1.8s - 3.2s (Reload toàn bộ trang) 0.2s - 0.4s (Chỉ tải JSON dữ liệu mới) Nhanh hơn ~75%
Hỗ trợ khách hàng Không có hoặc nhúng Widget bên thứ ba Chatbot kịch bản tích hợp quản trị nội bộ Chủ động dữ liệu 100%
Mức độ phụ thuộc UI/Backend Ràng buộc chặt chẽ, khó đổi giao diện Độc lập qua RESTful API tiêu chuẩn Dễ dàng mở rộng app mobile

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

Kịch bản triển khai thực tế (Real-World Use Cases)

  • Trung tâm đào tạo kỹ năng & Tin học: Triển khai làm cổng phân phối các khóa đào tạo trực tuyến kết hợp với đào tạo trực tiếp (Blended Learning).
  • Giảng viên độc lập / Content Creator: Sử dụng như một cổng bán khóa học cá nhân (Self-hosted E-learning Platform), làm chủ 100% dữ liệu học viên và không phải chia sẻ phần trăm doanh thu cao như trên các sàn thương mại điện tử khóa học.

Hướng dẫn triển khai hệ thống (Deployment Guide)

  1. Yêu cầu môi trường máy chủ:
    • Web Server: Apache 2.4+ hoặc Nginx 1.18+.
    • PHP Runtime: PHP >= 7.4 với các extension bắt buộc: OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype, JSON.
    • Cơ sở dữ liệu: MySQL 5.7+ hoặc MariaDB 10.3+.
    • Node.js & Npm: Node v12.x / Npm v6.x.
  2. Quy trình cài đặt:
    • Bước 1 (Backend): Cài đặt dependencies qua Composer: composer install. Tạo file môi trường .env, cấu hình kết nối DB và sinh application key: php artisan key:generate.
    • Bước 2 (Database): Chạy migration và seeder nạp dữ liệu mẫu: php artisan migrate --seed.
    • Bước 3 (Frontend): Biên dịch các tài nguyên Vue.js: npm install && npm run production.
    • Bước 4 (Khởi chạy): Khởi chạy Laravel server: php artisan serve hoặc cấu hình Virtual Host trên Nginx.

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

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

  • Dung lượng video tải lên trực tiếp lên máy chủ nội bộ bị giới hạn bởi cấu hình upload_max_filesize và post_max_size của PHP, chưa tích hợp dịch vụ lưu trữ đám mây chuyên dụng (như Amazon S3 hay Cloudflare Stream).
  • Chatbot vận hành dựa trên tập luật kịch bản tĩnh (Rule-based), chưa có khả năng xử lý ngôn ngữ tự nhiên (NLP) để phân tích ngữ nghĩa phức tạp từ câu hỏi tự do của người dùng.

Hướng phát triển tiếp theo

  • Nâng cấp trí tuệ nhân tạo (AI Engine): Ứng dụng mô hình xử lý ngôn ngữ tự nhiên và tích hợp các LLM API hiện đại nhằm tự động tóm tắt nội dung bài giảng và tạo trợ lý ảo AI gia sư cho từng khóa học.
  • Tích hợp hạ tầng Cloud Storage & CDN: Chuyển đổi toàn bộ video bài giảng sang giao thức mã hóa video HLS (HTTP Live Streaming) lưu trữ trên Amazon S3 và phân phối qua Cloudflare CDN nhằm chống download lậu video.
  • Mở rộng ứng dụng di động: Xây dựng ứng dụng Native Mobile (Flutter/React Native) tái sử dụng 100% hệ thống RESTful API hiện có của Laravel.

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

  • Sinh viên & Học viên: Tiếp cận kho học liệu phong phú với chi phí hợp lý, chủ động học tập mọi lúc mọi nơi trên giao diện trực quan, nhận hỗ trợ giải đáp 24/7 từ Chatbot.
  • Giảng viên & Chuyên gia đào tạo: Sở hữu công cụ số chuyên nghiệp để đóng gói tri thức, tự động hóa quy trình quản lý học viên, gửi thông báo và theo dõi doanh thu bài giảng minh bạch.
  • Doanh nghiệp & Đơn vị giáo dục: Tiết kiệm từ 60% - 80% chi phí đầu tư hạ tầng phần mềm ban đầu so với việc thuê gia công hệ thống mới nhờ kiến trúc mở, dễ bảo trì và mở rộng.
  • Lập trình viên & Nhóm nghiên cứu: Cung cấp tài liệu tham khảo chuẩn mực về mô hình phân tách SPA Vue.js và RESTful API Laravel, đóng vai trò như một dự án mẫu (Boilerplate) chất lượng cho nghiên cứu ứng dụng.

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

1. Yêu cầu phần cứng và phần mềm tối thiểu để triển khai website là gì?

Máy chủ cần cấu hình tối thiểu CPU 2 Core, RAM 4GB, ổ cứng SSD dung lượng từ 40GB trở lên. Về phần mềm, hệ thống yêu cầu môi trường Linux (Ubuntu 20.04 LTS), PHP 7.4+, MySQL 5.7+ và web server Nginx hoặc Apache.

2. Hệ thống xử lý vấn đề bảo mật thanh toán và dữ liệu bài giảng như thế nào?

Dữ liệu người dùng và mật khẩu được mã hóa một chiều bằng thuật toán Bcrypt. Toàn bộ truy vấn cơ sở dữ liệu thực hiện qua Eloquent ORM sử dụng PDO Prepared Statements giúp triệt tiêu nguy cơ SQL Injection. API được bảo vệ bởi cơ chế xác thực Token và kiểm tra phân quyền Role-based Middleware.

3. Làm thế nào để mở rộng hệ thống khi lượng người truy cập tăng đột biến?

Nhờ kiến trúc decoupled, hệ thống có thể dễ dàng tách tầng: đưa toàn bộ static asset và build code của Vue.js lên CDN (Cloudflare/AWS CloudFront), đặt tầng Laravel API phía sau bộ cân bằng tải (Load Balancer - Nginx), và chuyển cơ sở dữ liệu MySQL sang cụm Master-Slave Replication.

4. Chi phí vận hành và bảo trì hệ thống ước tính là bao nhiêu?

Với quy mô ban đầu phục vụ khoảng 1.000 - 5.000 học viên hoạt động hàng tháng, chi phí thuê Cloud VPS (như DigitalOcean hoặc Linode) dao động từ 15 - 30 USD/tháng. Chi phí bảo trì gần như bằng 0 do hệ thống sử dụng 100% công nghệ mã nguồn mở miễn phí.

5. Chatbot của hệ thống có thể tùy biến kịch bản câu hỏi mới mà không cần sửa mã nguồn không?

Hoàn toàn có thể. Quản trị viên chỉ cần truy cập vào màn hình "Quản lý kịch bản chatbot" trên trang Admin để tạo mới các chủ đề câu hỏi (type_question_bot), nhập nội dung câu hỏi (message_bot) và câu trả lời tương ứng (answer_bot). Dữ liệu sẽ lập tức được cập nhật trên giao diện người dùng.

Kết luận

Đề tài tốt nghiệp "Tìm hiểu và xây dựng website bán khóa học với Vuejs và Laravel" của sinh viên Nguyễn Duy Hưng và Đào Lê Văn Vinh dưới sự hướng dẫn của ThS. Lê Thị Minh Châu đã hoàn thành xuất sắc các mục tiêu đề ra. Dự án không chỉ dừng lại ở việc làm chủ hai công nghệ web hàng đầu hiện nay là Vue.js và Laravel, mà còn xây dựng thành công một giải pháp E-learning có giá trị thực tiễn cao, đáp ứng đầy đủ các tiêu chuẩn khắt khe về kiến trúc hệ thống, trải nghiệm người dùng, khả năng mở rộng và an toàn bảo mật.

Đây là nền tảng vững chắc để các đơn vị đào tạo, giảng viên và doanh nghiệp triển khai chuyển đổi số giáo dục hiệu quả, mở ra hướng phát triển đầy tiềm năng cho các ứng dụng công nghệ giáo dục thông minh trong tương lai.