Mini Game - Quay số trúng thưởng

Mở bát đầu năm là bài toán lỳ xì mà không muốn mỗi người là như nhau (trong khi tài chính eo hẹp - nhưng cũng muốn mọi người ai cũng vui vẻ). Đó là lý do vì sao tôi muốn thiết lập một game mini, phần này rất phù hợp với anh em khi thiết lập việc rút thăm hay chọn người khuân vác nước, thôi vào việc.

Bước 1: Xác định các yêu cầu cần phải thực hiện (Khúc này bạn có thể tùy biến, nhưng lưu ý là nếu thay đổi logic thì code cũng sẽ phải thay đổi)  

• Người chơi có thể quét QR hoặc nhập tên trực tiếp để đăng ký tên của mình
• Có trang admin để quản lý danh sách người chơi, được dùng để chốt và quay số
• Khi đủ số lượng người thì được quay số và hiệu ứng đẹp mắt
• Dự kiến có 3 hạng mục giải, và tổng là có 6 giải 

Bước 2: Nắm bắt được bức tranh tổng thể trước khi làm

2.1. Website tĩnh và Website có server:

Trước khi đụng vào code, bạn cần hiểu một khái niệm nền tảng. Có 2 loại website:

• Website tĩnh (static) — giống như một tờ giấy in sẵn. Bạn viết HTML, đưa lên mạng, ai mở cũng thấy giống nhau. Nó không "nhớ" được gì cả. Nếu người A nhập tên trên điện thoại, người B trên máy tính không thấy được.
• Website có server (dynamic) — giống như có một "người quản lý" ngồi phía sau. Khi người A gửi tên lên, server nhận, lưu lại, rồi gửi cho người B xem. Đây là loại chúng ta cần.

Vấn đề: Hầu hết hosting miễn phí (như Antigravity, GitHub Pages, Tiiny.host...) chỉ hỗ trợ website tĩnh. Chúng không chạy được server.

Giải pháp: Uhm, cũng vì tài chính và cũng vì muốn ứng dụng cây nhà lá vườn, tôi dùng Firebase — một dịch vụ database miễn phí của Google. Firebase đóng vai trò "người quản lý" thay cho server. Website tĩnh của bạn sẽ gọi đến Firebase để lưu và lấy dữ liệu.

2.2 Flow hoạt động:

• Người chơi quét QR
• Mở trang ĐĂNG KÝ (register.html) trên điện thoại
• Nhập tên → Nhấn "Đăng Ký"
• Tên được gửi lên FIREBASE (database trên cloud)
• Firebase gửi thông báo xuống trang ADMIN (admin.html)
• Admin thấy tên mới xuất hiện NGAY LẬP TỨC
• Chốt sổ → Quay thưởng

Và bạn sẽ cần 2 trang riêng biệt - Trang cho người đăng ký (your-site.com/register) và trang cho người quản trị (admin - your-site.com/admin). Cả 2 trang đều là file HTML tĩnh, nhưng bên trong có code JavaScript kết nối đến Firebase. Khi người chơi đăng ký trên điện thoại, trang admin trên máy tính của bạn sẽ tự động cập nhật — không cần cùng WiFi, không cần server riêng.

Bước 3: Danh sách các phần cần chuẩn bị:

• Một tài khoản Google (Gmail) — để tạo Firebase
• Một tài khoản GitHub — để đưa website lên mạng miễn phí
• 2 file HTML — uhm, dùng tool AI khởi tạo nha, hoặc dùng code tôi đính kèm, bạn chỉ cần dán vào
• Thời gian tốn khoảng 30 phút — cho lần đầu tiên từ đầu tới cuối (không tính thời gian đọc cái bài này vì nó dài thật)
• Note: Mọi thứ đều làm trên trình duyệt web (Chrome, Safari, Edge...). Bạn không cần cài đặt bất kỳ phần mềm nào trên máy tính.

Bước 4: Khởi tạo trên Firebase - Nơi được gọi là bộ não của con Mini game này

Firebase là nơi lưu trữ tên người chơi và đồng bộ dữ liệu giữa các thiết bị. Hãy nghĩ nó như một "bảng Google Sheets trên mây" mà website của bạn có thể đọc/ghi vào.

4.1: Tạo project Firebase

1. Mở trình duyệt, vào: https://console.firebase.google.com
2. Đăng nhập bằng tài khoản Gmail
3. Nhấn "Create a project" (hoặc "Tạo dự án")
4. Đặt tên project: quay-so-trung-thuong (hoặc tên gì bạn thích)
5. Bước Google Analytics: chọn Disable (tắt đi vì có thể bạn không cần thiết) — Hoặc không như tôi cứ bật lên rồi tracking GA4 luôn :) cũng không mất gì
6. Nhấn "Create project" → đợi khoảng 30 giây
7. Nhấn "Continue"

"Project" giống như một ngăn tủ riêng trên Firebase. Tất cả dữ liệu của sự kiện sẽ nằm trong ngăn tủ này.

4.2: Tạo Realtime Database

Đây là bước tạo "cơ sở dữ liệu" — nơi thực sự lưu trữ tên người chơi.

1. Ở menu bên trái, nhấn "Build" → chọn "Realtime Database"
2. Nhấn nút "Create Database"
3. Chọn vùng lưu trữ: Singapore (gần Việt Nam nhất, tốc độ nhanh hơn)
4. Bước tiếp theo — QUAN TRỌNG: Chọn "Start in TEST MODE"
5. Nhấn "Enable"

Test Mode là gì? Nó cho phép bất kỳ ai có link database cũng đọc/ghi được dữ liệu. Nghe "không an toàn" nhưng với sự kiện quay thưởng và dữ liệu chỉ là tên người hoặc nếu dữ liệu lớn hơn thì nên lấy theo mã nhân viên hoặc một mã mặc định để định danh (phức tạp và cần nhiều lớp hơn nên ở những phần sau tôi sẽ đào sâu thêm).

Test mode có thời hạn 30 ngày, sau 30 ngày thì Database bị khóa và không đọc hay ghi được, bạn có thể vào phần "Realtime Database" nhấp "Rules" và điều chỉnh code rồi publish để không bị giới hạn:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

4.3: Lấy thông tin cấu hình (Config)

Đây là bước lấy "chìa khoá" để website kết nối được với Firebase.

1. Nhấn biểu tượng ⚙️ bánh răng cạnh "Project Overview" (menu trái, phía trên cùng)
2. Chọn "Project settings"
3. Kéo xuống cuối trang, phần "Your apps"
4. Nhấn biểu tượng </> (hình ngoặc nhọn — nghĩa là "Web app")
5. Đặt tên app: web → nhấn "Register app"
6. Màn hình sẽ hiện ra một đoạn code. Bạn cần copy đoạn firebaseConfig (Lưu ý đoạn config trên chỉ là ví dụ. Mỗi người sẽ có một đoạn config khác nhau. Hãy dùng đoạn của chính bạn.):

const firebaseConfig = {
  apiKey: "AIzaSyD1234567890abcdefg",
  authDomain: "quay-so-trung-thuong.firebaseapp.com",
  databaseURL: "https://quay-so-trung-thuong-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "quay-so-trung-thuong",
  storageBucket: "quay-so-trung-thuong.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abc123def456"
};

🔜 Copy toàn bộ đoạn này → dán vào Notepad hoặc Notes để dùng sau.

Bước 5: Tạo GitHub Pages — Đẩy Website lên mạng (ưu tiên hàng đầu vì không tốn phí haha)

Trước mắt khi làm thì luôn hỏi tại sao phải xài Github, vì:

• Miễn phí vĩnh viễn, không giới hạn lượt truy cập
• Không cần cài phần mềm gì, làm hoàn toàn trên trình duyệt
• Tự cấp cho bạn một link dạng: username.github.io/lucky-draw/
• Hỗ trợ HTTPS (bảo mật) tự động

5.1: Tạo tài khoản GitHub

1. Vào https://github.com → nhấn "Sign up"
2. Nhập email, mật khẩu, đặt username (xài luôn cái mail bạn tạo phía trên để đăng ký)
3. Làm theo hướng dẫn xác nhận email
4. Đăng nhập vào GitHub

5.2: Tạo Repository

"Repository" (viết tắt: repo) giống như một thư mục trên mây, chứa tất cả file website của bạn.

1. Sau khi đăng nhập, nhấn dấu "+" ở góc trên phải → chọn "New repository"
2. Điền thông tin:
   • Repository name: lucky-draw (hoặc tên bạn thích)
   • Description: Quay số trúng thưởng (tuỳ chọn, có thể bỏ trống)
   • Chọn Public (bắt buộc để dùng GitHub Pages miễn phí)
   • ✅ Tick vào "Add a README file"
3. Nhấn "Create repository"

Public có nghĩa gì? Nghĩa là ai cũng có thể xem code của bạn. Nhưng đừng lo — mật khẩu admin được mã hoá (hash), không ai đọc code có thể biết mật khẩu thật. Và dữ liệu người chơi nằm trên Firebase, không nằm trong code nên yên tâm nhé.

5.3: Upload file trang đăng ký

1. Ở trang repository vừa tạo, nhấn "Add file" → "Create new file"
2. Ô tên file ở trên cùng, gõ: register/index.html
   • Khi bạn gõ dấu /, GitHub tự hiểu là tạo thư mục register bên trong
3. Ô code lớn bên dưới: dán toàn bộ code từ file register.html
4. TRƯỚC KHI LƯU — tìm đoạn firebaseConfig trong code (gần cuối) và thay bằng đoạn config của bạn đã copy ở Bước 4.3
5. Kéo xuống dưới → nhấn nút "Commit changes..." (nút màu xanh lá)

5.4: Upload file trang admin

1. Nhấn vào tên repository ở trên cùng để quay về trang chính
2. Nhấn "Add file" → "Create new file"
3. Tên file: admin/index.html
4. Dán toàn bộ code từ file admin.html
5. Thay đoạn firebaseConfig — phải giống hệt như trong file register
6. Nhấn "Commit changes..."

5.5: Bật GitHub Pages

1. Trong repository, nhấn tab "Settings" (ở thanh menu phía trên, bên phải)
2. Menu bên trái, tìm và nhấn "Pages"
3. Mục "Source":
   • Chọn "Deploy from a branch"
   • Branch: chọn main
   • Folder: chọn / (root)
4. Nhấn "Save"
5. Đợi 1-2 phút → làm mới trang (F5) - nhiều bạn bị ở khúc này, trường hợp thấy không lên thì anh em đi làm tách cafe rồi quay lại sẽ lên nhé!
6. Sẽ xuất hiện dòng: "Your site is live at: https://username.github.io/lucky-draw/"

5.6: Kiểm tra

Mở trình duyệt, truy cập 2 link:

Trang	Link (Username là của bạn nhé)	Phải thấy được
Đăng ký	https://username.github.io/lucky-draw/register/	Trang "🎉 Đăng Ký Tham Gia"
Admin	https://username.github.io/lucky-draw/admin/	Màn hình đăng nhập "🔐 Đăng Nhập Admin"

Trang đăng ký tham gia (Code bạn có thể tùy biến text để phù hợp với ngữ cảnh):

Trang đăng nhập Admin:

Trang Admin sau khi đăng nhập:

Kết quả sau khi quay số trúng thưởng:

Bước 6: Mật khẩu trang Admin

Ban đầu thì mình ko để password gì đâu, nhưng chung quy lại thì cũng nên vì đám đệ bên dưới nó rành công nghệ hơn mình 10X lần, nên thôi cũng tập tành thì tập cho trọn bộ. Trang admin có màn hình đăng nhập để không ai truy cập trái phép.

Mật khẩu mặc định

Mật khẩu mặc định là: admin123

Khi mở trang admin, bạn sẽ thấy form nhập mật khẩu. Gõ admin123 → nhấn "Đăng Nhập" → vào được dashboard.

Cách đổi mật khẩu

Mật khẩu được lưu dưới dạng "hash" — một chuỗi ký tự ngẫu nhiên. Ngay cả khi ai đó đọc code, họ cũng không thể biết mật khẩu thật.

Để đổi mật khẩu, làm 3 bước:

• Vào trang web: https://emn178.github.io/online-tools/sha256.html
• Gõ mật khẩu mới vào ô "Input" (ví dụ: matkhaubicua2026). Bên dưới sẽ hiện ra một chuỗi dài kiểu: a1b2c3d4e5f6...
• Vào GitHub, mở file admin/index.html, nhấn biểu tượng bút chì ✏️ để sửa. Tìm dòng: const PASSWORD_HASH = '240be518fabd2724ddb6f04eeb1da5967448d7e831c08c8fa822809f74c720a9';

  Thay chuỗi hash cũ bằng chuỗi hash mới vừa tạo. Nhấn "Commit changes" để lưu.

   

Hash là gì? Hãy hình dung: mật khẩu admin123 qua "máy xay" SHA-256 thành chuỗi 240be518fabd.... Quá trình này chỉ chạy một chiều — có chuỗi hash không thể "xay ngược" ra mật khẩu gốc. Vì vậy, dù ai đọc được code cũng không biết mật khẩu.

Lưu ý: Đây là bảo mật cơ bản, phù hợp cho sự kiện nhỏ. Nó ngăn người thường truy cập, nhưng không chống được hacker chuyên nghiệp. Với mục đích quay thưởng, mức bảo mật này là đủ :) (Mấy đứa đệ đọc đừng cười anh haha)

Mình sẽ cập nhật thông tin sau khi quay số trúng thưởng. Anh chị em khi thực hiện thì có thể share lại để cùng trao đổi nhé :)