Bài 17. Dự án: Hệ thống Sổ Đầu Bài Điện Tử
Mục tiêu dự án: Xây dựng một ứng dụng Web (Web App) thay thế hoàn toàn sổ đầu bài giấy. Giáo viên lên lớp dùng smartphone/laptop để nhập liệu. Hiệu trưởng và giám thị có thể xem tình hình các lớp theo thời gian thực (Real-time).
1. Thiết lập Cấu trúc Google Sheets (Database)
Tạo một file Google Sheets và đổi tên các trang tính (Sheet) như sau:
- Sheet 1:
DM_Lop (Danh mục Lớp). Cột A: Tên lớp (VD: 10A1, 10A2, 11B1...).
- Sheet 2:
SoDauBai. Gồm các cột:
A (Thời gian ghi), B (Ngày dạy), C (Lớp), D (Tiết), E (Môn học), F (Tên bài dạy), G (Xếp loại), H (Giáo viên).
2. Viết mã Back-end (Code.gs)
Trong môi trường Apps Script, chúng ta cần 3 hàm chính: Lấy danh sách lớp (cho Dropdown), Lấy dữ liệu của ngày hôm nay (cho Bảng), và Ghi dữ liệu mới vào Sheet.
function layDanhSachLop() {
let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DM_Lop");
return sheet.getRange(2, 1, sheet.getLastRow() - 1, 1).getValues();
}
function luuTietHoc(formObj) {
let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SoDauBai");
let timeStamp = new Date();
let ngayDay = Utilities.formatDate(timeStamp, Session.getScriptTimeZone(), "dd/MM/yyyy");
let rowData = [
timeStamp, ngayDay, formObj.lop, formObj.tiet,
formObj.mon, formObj.baiDay, formObj.xepLoai, formObj.giaoVien
];
sheet.appendRow(rowData);
return "Đã lưu thành công!";
}
💡 Giải thích chi tiết: Ở hàm luuTietHoc, ta tạo ra 2 cột thời gian. timeStamp (Cột A) lưu cả ngày giờ phút giây chính xác để làm bằng chứng giáo viên đã nhập sổ lúc mấy giờ. Còn ngayDay (Cột B) chỉ lưu ngày/tháng/năm dưới dạng chuỗi (String) để thuật toán tìm kiếm và lọc dữ liệu (hiển thị theo ngày) hoạt động dễ dàng và nhẹ nhàng hơn.
3. Giao diện và Xử lý Front-end (Index.html)
Thực hành Giao diện Mô phỏng: Sổ Đầu Bài Điện Tử
(Giao diện dưới đây minh họa cách Web App thực tế hoạt động. Dữ liệu sẽ tự động làm mới ngay sau khi bấm Lưu).
Mã nguồn JavaScript xử lý tương tác UI
<script>
window.onload = function() {
google.script.run.withSuccessHandler(doDuLieuLop).layDanhSachLop();
taiDuLieuBang();
};
function submitFormSDB(formObj) {
google.script.run
.withSuccessHandler(function() {
document.getElementById("formSoDauBai").reset();
taiDuLieuBang(true);
})
.luuTietHoc(formObj);
}
</script>
💡 Nhấn mạnh: Chìa khóa để ứng dụng không bị tải lại trang (chớp màn hình) là gọi lại hàm taiDuLieuBang() bên trong withSuccessHandler. Khi Apps Script ghi xong vào Sheet, nó phản hồi về Client, lúc này Client ra lệnh "Xóa form" và "Kéo data mới nhất về vẽ lại bảng". Toàn bộ thao tác diễn ra ngầm.