Trong bài viết này, chúng ta sẽ cùng xây dựng một ứng dụng Quản lý học viên đơn giản sử dụng Vite kết hợp PWA (Progressive Web App).
Mục tiêu là tạo ra một web app tốc độ cao, có thể cài đặt như ứng dụng, và hoạt động offline – phù hợp cho các hệ thống quản lý nội bộ tại trung tâm đào tạo hoặc doanh nghiệp.

Mô hình này hiện đang được dcsofttech áp dụng trong nhiều dự án web doanh nghiệp và hệ thống quản lý chuyên biệt, nơi hiệu năng và trải nghiệm người dùng là yếu tố then chốt.

Tổng quan dự án Quản lý học viên

Chức năng chính (ví dụ)

Ứng dụng Quản lý học viên sẽ bao gồm các chức năng cơ bản:

• Danh sách học viên
• Thêm / sửa / xoá học viên
• Xem chi tiết thông tin học viên
• Hoạt động khi mất kết nối Internet (offline)
• Có thể cài đặt lên thiết bị như ứng dụng native

Công nghệ sử dụng

• Vite – công cụ build frontend hiện đại
• React (có thể thay bằng Vue hoặc Svelte)
• vite-plugin-pwa – tích hợp Progressive Web App
• LocalStorage / IndexedDB – demo lưu dữ liệu offline

👉 Tham khảo:

• Vite chính thức: https://vitejs.dev/
• Tổng quan PWA từ Google: https://web.dev/progressive-web-apps/

Bước 1: Khởi tạo dự án Vite

Tạo mới một dự án Vite với React:

npm create vite@latest student-management -- --template react
cd student-management
npm install
npm run dev

Sau khi chạy, bạn sẽ có một ứng dụng React chạy trên nền Vite với dev server cực nhanh – ưu điểm lớn khi phát triển dự án quản lý quy mô vừa và lớn.

Bước 2: Cấu trúc thư mục cơ bản

Gợi ý cấu trúc cho dự án Quản lý học viên:

src/
├── components/
│   ├── StudentForm.jsx
│   ├── StudentList.jsx
│   └── StudentItem.jsx
├── pages/
│   └── Home.jsx
├── services/
│   └── studentService.js
├── App.jsx
├── main.jsx
└── registerSW.js

Cách tổ chức này giúp dự án dễ mở rộng, dễ bảo trì, phù hợp với các hệ thống quản lý mà dcsoft thường triển khai cho doanh nghiệp.

Bước 3: Xây dựng chức năng Quản lý học viên cơ bản

Service xử lý dữ liệu học viên (offline)

// src/services/studentService.js
const KEY = 'students';

export function getStudents() {
  return JSON.parse(localStorage.getItem(KEY)) || [];
}

export function saveStudents(students) {
  localStorage.setItem(KEY, JSON.stringify(students));
}

Hiển thị danh sách học viên

// src/components/StudentList.jsx
import { getStudents } from '../services/studentService';

export default function StudentList() {
  const students = getStudents();

  return (
    <ul>
      {students.map((s, index) => (
        <li key={index}>
          {s.name} – {s.email}
        </li>
      ))}
    </ul>
  );
}

Ở giai đoạn này, ứng dụng đã có thể hoạt động hoàn toàn phía client.

Bước 4: Cài đặt PWA cho dự án Vite

Cài plugin tích hợp PWA:

npm install -D vite-plugin-pwa

👉 Tài liệu chính thức: https://vite-pwa-org.netlify.app/

Bước 5: Cấu hình PWA trong Vite

Mở file vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Quản lý học viên',
        short_name: 'HocVien',
        description: 'Ứng dụng quản lý học viên hoạt động offline',
        theme_color: '#2563eb',
        start_url: '/',
        display: 'standalone',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

Cấu hình này giúp ứng dụng:

• Có manifest để cài đặt
• Tự động đăng ký Service Worker
• Tự cập nhật khi có build mới

Bước 6: Đăng ký Service Worker phía client

Tạo file src/registerSW.js:

import { registerSW } from 'virtual:pwa-register'

registerSW({
  onOfflineReady() {
    console.log('Ứng dụng đã sẵn sàng hoạt động offline')
  }
})

Import vào main.jsx:

import './registerSW'

Bước 7: Build và kiểm tra PWA

npm run build
npm run preview

Kiểm tra:

• Chrome DevTools → Application
• Manifest ✔
• Service Worker ✔
• Offline mode → reload

👉 Nếu dữ liệu vẫn hiển thị → PWA hoạt động đúng.

Bước 8: Mở rộng cho dự án thực tế

Trong các dự án do dcsofttech triển khai, mô hình này thường được mở rộng thêm:

• Background Sync (đồng bộ khi online)
• IndexedDB thay cho LocalStorage
• Phân quyền người dùng
• Push Notification cho hệ thống quản lý

Bước 9: Deploy dự án Vite + PWA lên Hostinger

Bước 9.1: Build production

npm run build

Sau khi build xong sẽ có thư mục dist/.

Bước 9.2: Upload lên Hostinger

• Đăng nhập Hostinger hPanel
• Vào File Manager
• Mở thư mục public_html/
• Upload toàn bộ file bên trong dist/

⚠️ Không upload cả thư mục dist.

Bước 9.3: Bật HTTPS (bắt buộc cho PWA)

• Security → SSL
• Bật Free SSL (Let’s Encrypt)
• Truy cập website bằng https://

Bước 9.4: Kiểm tra PWA sau deploy

• DevTools → Application
• Bật Offline → reload
• Kiểm tra Install App

👉 Ứng dụng chạy offline → deploy thành công.

Tổng kết

Quy trình hoàn chỉnh:

1. Khởi tạo dự án với Vite
2. Xây dựng hệ thống Quản lý học viên
3. Tích hợp PWA
4. Build production
5. Deploy Hostinger + HTTPS
6. Kiểm tra offline & cài đặt app

Giải pháp này rất phù hợp cho:

• Hệ thống quản lý học viên / đào tạo
• Web app nội bộ
• Doanh nghiệp cần web nhanh như app

📞 CTA – Tư vấn & triển khai hệ thống Quản lý học viên

Bạn đang cần:

• Hệ thống quản lý học viên / đào tạo
• Web App hoạt động offline
• Giải pháp Vite + PWA chuẩn doanh nghiệp

👉 dcsofttech sẵn sàng hỗ trợ:

• Tư vấn kiến trúc hệ thống
• Thiết kế & phát triển Web App
• Triển khai PWA & deploy thực tế

🔗 Liên hệ tư vấn ngay: https://dcsofttech.com/lien-he