Để tạo một ứng dụng web đơn giản sử dụng Google Apps Script và Google Sheets, bạn có thể làm theo các bước sau. Dưới đây là hướng dẫn cơ bản để xây dựng một ứng dụng web kết nối với Google Sheets, giúp bạn có thể hiển thị và thao tác dữ liệu từ Sheets thông qua một giao diện web.
Bước 1: Tạo Google Apps Script Project
- Mở Google Sheets của bạn.
- Vào Extensions > Apps Script.
- Tạo một dự án mới bằng cách chọn New Project.
Bước 2: Viết Script để Xử lý Dữ liệu
Trong Google Apps Script, bạn có thể viết mã để lấy dữ liệu từ Google Sheets và xử lý chúng. Dưới đây là một ví dụ đơn giản về cách lấy dữ liệu từ Google Sheets và hiển thị nó trong một ứng dụng web.
// Hàm này sẽ lấy dữ liệu từ Google Sheet và trả về dưới dạng JSON
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
// Hàm để lấy dữ liệu từ Google Sheet
function getSheetData() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
const data = sheet.getDataRange().getValues(); // Lấy tất cả dữ liệu trong bảng tính
return data; // Trả về dữ liệu dưới dạng mảng
}
Bước 3: Tạo HTML File cho Giao Diện Web
Tạo một file HTML mới trong dự án Apps Script của bạn để hiển thị dữ liệu từ Google Sheets. Đây là ví dụ về cách tạo giao diện cơ bản.
- Trong dự án Apps Script, chọn File > New > HTML và đặt tên là
Index. - Dán mã HTML dưới đây vào file
Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>Danh sách dữ liệu từ Google Sheets</h1>
<table id="data-table">
<tr>
<th>STT</th>
<th>Tên</th>
<th>Tuổi</th>
</tr>
</table>
<script>
// Lấy dữ liệu từ Apps Script
function loadData() {
google.script.run.withSuccessHandler(displayData).getSheetData();
}
// Hiển thị dữ liệu trong bảng HTML
function displayData(data) {
const table = document.getElementById('data-table');
data.forEach(function(row, index) {
let tr = document.createElement('tr');
row.forEach(function(cell) {
let td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
}
// Gọi hàm loadData khi trang web được tải
window.onload = loadData;
</script>
</body>
</html>
Bước 4: Triển khai Ứng dụng Web
- Quay lại cửa sổ Google Apps Script.
- Vào Deploy > Test deployments > Select type > Web app.
- Thiết lập các thông số:
- Description: Mô tả ứng dụng của bạn.
- Execute as: Chọn "Me" (Người dùng hiện tại).
- Who has access: Chọn "Anyone" (Bất kỳ ai, nếu bạn muốn chia sẻ công khai).
- Nhấn Deploy.
Sau khi triển khai thành công, bạn sẽ nhận được một liên kết URL, nơi bạn có thể truy cập và xem ứng dụng web của mình.
Bước 5: Thêm Dữ liệu vào Google Sheets
- Mở Google Sheets và nhập dữ liệu của bạn vào Sheet1. Ví dụ:
| STT | Tên | Tuổi |
|---|---|---|
| 1 | John | 25 |
| 2 | Alice | 30 |
| 3 | Bob | 22 |
Bước 6: Xem kết quả
Truy cập vào URL mà bạn đã nhận được sau khi triển khai ứng dụng web. Bạn sẽ thấy dữ liệu từ Google Sheets được hiển thị trên trang web dưới dạng một bảng.
Kết luận
Ứng dụng này là một ví dụ đơn giản về cách sử dụng Google Apps Script để xây dựng một ứng dụng web kết nối với Google Sheets. Bạn có thể mở rộng nó để thêm tính năng như chỉnh sửa dữ liệu, thêm, xóa, hay lọc dữ liệu, v.v.
Gợi ý: a. Thêm tính năng để chỉnh sửa và cập nhật dữ liệu trong Google Sheets trực tiếp từ giao diện web. b. Tối ưu mã HTML và JavaScript để xử lý dữ liệu tốt hơn hoặc thực hiện tìm kiếm trong bảng.
0 Reviews
Your rating