Cơ bản về việc tạo 1 Web App cho nhiều người cùng nhập liệu vào 1 file Google sheets (4 người xem)

Maika8008 · Hôm nay lúc 20:53

Bạn cần nhiều nhân viên đồng thời nhập dữ liệu kế toán - kho vào bảng dữ liệu chung mà vẫn bảo đảm tính toàn vẹn dữ liệu, không tranh chấp vùng ghi, không bị ghi đè dữ liệu giữa các người nhập. Google Apps Script làm được điều đó dễ dàng vì đó là sinh ra để làm như vậy. Bạn không cần lập trình cao siêu, tất cả đã được trang bị trong Google Apps Script qua vài dòng lệnh.

Giả sử bạn cần 10 người cùng nhập một biểu mẫu sau:

để dữ liệu ghi vào một vùng trong Google Sheets như thế này:

Thì đây là quy trình để thực hiện:

1. Tạo Google Sheet
- Vào Google Drive, chuyển đến thư mục cần tạo → Mới → Google trang tính.
- Đặt tên file, ví dụ: User Data.
- Đổi tên sheet đang có trên file thành Data (hoặc tên khác, nhưng phải khớp với code bên dưới).
(*) Không cần nhập tiêu đề thủ công, vì code sẽ tự động thêm hàng tiêu đề khi lần đầu ghi dữ liệu (muốn thay đổi, thêm bớt -> chỉ sửa 1 lần trong code)

2. Tạo dự án Apps Script
- Trong Google Sheets, chọn Tiện ích → Apps Script.
- Một dự án mới sẽ mở ra.

3. Đổi tên cái trang chứa code từ "TenGiDo.gs" thành Code.gs rồi chép dán code bên dưới đè vào nội dung có sẵn.

JavaScript:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function saveData(formData) {
  var lock = LockService.getScriptLock();
  lock.tryLock(30000); // giữ khoá tối đa 30 giây

  try {
  var sheet = SpreadsheetApp.openById('[B]Spreadsheet_ID[/B]').getSheetByName('[B]Data[/B]');
 
// Nếu sheet chưa có tiêu đề, thêm tiêu đề vào hàng đầu tiên
  if (sheet.getLastRow() === 0) {
    sheet.appendRow(["Họ và tên", "Địa chỉ email", "Số điện thoại", "Địa chỉ", "Nội dung", "Thời gian"]);
  }

// Ghi dữ liệu mới vào cuối bảng
  sheet.appendRow([
    formData.name,
    formData.email,
    formData.phone,
    formData.address,
    formData.message,
    new Date()
  ]);
  return "Dữ liệu đã được lưu thành công!";
} finally {
    lock.releaseLock(); // mở khoá sau khi ghi xong
  }
}


function testSaveData() {
  var dummy = {
    name: "Nguyen Van A",
    email: "abc@example.com",
    phone: "0123456789",
    address: "Da Nang",
    message: "Test ghi dữ liệu"
  };
  var result = saveData(dummy);
  Logger.log(result);
}

(*) Đảm bảo thay đúng Spreadsheet_ID bằng chuỗi trong URL giữa /d/ và /edit). Và tên sheet đúng như ở mục 1 đã nói là Data

4. Tạo file index.html
- Trong giao diện Apps Script, bấm dấu +

Chọn HTML → đặt tên là index

- Dán nội dung bên dưới đè vào nội dung có sẵn:

JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: Arial, sans-serif; margin: 40px; }
      input, textarea, button { margin: 8px 0; padding: 8px; width: 300px; }
      textarea { height: 100px; }
      button { background: #4CAF50; color: white; border: none; cursor: pointer; }
      button:hover { background: #45a049; }
      #result { margin-top: 15px; font-weight: bold; }
      .success { color: green; }
      .error { color: red; }
    </style>
  </head>
  <body>
    <h2>Form nhập thông tin</h2>
    <form id="myForm" oninput="clearMessage()">
      <input type="text" id="name" placeholder="Họ và tên" required><br>
      <input type="email" id="email" placeholder="Email" required><br>
      <input type="text" id="phone" placeholder="Số điện thoại" required><br>
      <input type="text" id="address" placeholder="Địa chỉ" required><br>
      <textarea id="message" placeholder="Nội dung" required></textarea><br>
      <button type="button" onclick="submitForm()">Gửi đi</button>
    </form>
    <p id="result"></p>

    <script>
      // Hàm tự động xóa thông báo khi người dùng nhập lại
      function clearMessage() {
        var result = document.getElementById("result");
        result.innerText = "";
        result.className = "";
      }

      function submitForm() {
        var formData = {
          name: document.getElementById("name").value,
          email: document.getElementById("email").value,
          phone: document.getElementById("phone").value,
          address: document.getElementById("address").value,
          message: document.getElementById("message").value
        };

        google.script.run
          .withSuccessHandler(function(response) {
            var result = document.getElementById("result");
            result.innerText = response;
            result.className = "success"; // màu xanh lá khi thành công
            document.getElementById("myForm").reset();
          })
          .withFailureHandler(function(error) {
            var result = document.getElementById("result");
            result.innerText = "Có lỗi xảy ra: " + error.message;
            result.className = "error"; // màu đỏ khi lỗi
          })
          .saveData(formData);
      }
    </script>
  </body>
</html>

5. Cấp quyền
- Trong Editor, chạy thử hàm testSaveData() để hệ thống yêu cầu cấp quyền.

- Chấp nhận quyền để script có thể ghi dữ liệu vào Sheet (nếu bạn đã thiết lập xác minh 2 bước thì có thể sẽ phải cần đến điện thoại hoặc mã dự phòng đã xác lập).

6. Triển khai (Deloy) Web App

- Chọn Triển khai → Tuỳ chọn triển khai mới (New deployment) → bấm biểu tượng bánh răng chọn Ứng dụng Web (Web app).
- Có 3 thông tin cần nhập: Điền mô tả, để nguyên lựa chọn: Tôi (Me), lựa chọn: Bất kỳ ai
- Execute as: Me (bạn).
- Who has access: Anyone with the link (hoặc giới hạn trong tổ chức nếu muốn).
- Nhấn Triển khai → chép URL dạng https://script.google.com/macros/s/.........../exec.

7. Gửi URL cho người nhập liệu
- Copy URL /exec bên trên gửi cho mọi người.
- Khi họ mở link, form sẽ hiện ra, nhập dữ liệu và bấm Gửi → dữ liệu sẽ được ghi vào sheet Data của bạn đã nói bên trên.
- Gửi xong sẽ có thông báo bên dưới nút gửi là thành công hay lỗi.
- Nếu thành công, muốn gửi tiếp thì chỉ cần bấm vào các hộp nhập để nhập dữ liệu mới.

Lưu ý quan trọng
- Mỗi lần thay đổi code HTML hoặc GS:
-> Bạn phải vào Deploy → Quản lý các tuỳ chọn triển khai (Manage deployments) → bấm biểu tượng cây bút để chỉnh sửa → Bắt buộc bạn phải chọn "Phiên bản mới" thì mới có tác dụng. Người nhập liệu vẫn dùng link cũ để làm việc. Còn phiên bản trước đó, để tránh nhầm lẫn thì bạn bấm vào biểu tượng Lưu trữ tuỳ chọn triển khai để (xem như) xoá nó đi.
-> Hoặc đơn giản là bạn tạo lại Triển khai mới và gửi link mới cho người dùng

ongke0711 · Hôm nay lúc 21:19

Nếu 2 người đồng thời cùng sửa 1dòng dữ liệu thì như thế nào bác?

Maika8008 · Hôm nay lúc 21:25

ongke0711 đã viết:
Nếu 2 người đồng thời cùng sửa 1dòng dữ liệu thì như thế nào bác?

Hi hi, đâu đã nghĩ tới. Việc đó chắc phải dùng tới phân quyền nhập trực tiếp trên sheet

ongke0711 · Hôm nay lúc 21:31

Tôi nghĩ chắc nó cũng dùng cơ chế như lúc ghi dữ liệu nhưng không biết qui trình nó làm như thế nào . lock.TryLock(3000)

Cơ bản về việc tạo 1 Web App cho nhiều người cùng nhập liệu vào 1 file Google sheets (4 người xem)

Người dùng đang xem chủ đề này

Maika8008

Thành viên gạo cội

File đính kèm

ongke0711

Thành viên gắn bó

Maika8008

Thành viên gạo cội

ongke0711

Thành viên gắn bó

Bài viết mới nhất

Thành viên có số lượng bài viết cao nhất tháng

Thành viên có điểm tương tác cao nhất tháng

Thời gian đếm ngược.