Google Sheets là một công cụ phổ biến và thuận tiện để chia sẻ dữ liệu dạng bảng. Bạn có thể dùng Google Sheets để xử lí những cơ sở dữ liệu đơn giản.
Bài viết này hướng dẫn cách lấy dữ liệu từ Google Sheets và hiển thị lên trang web.
Ý tưởng chính:
Dùng công cụ Google Apps Script tạo một Web app. Web app này vừa lấy dữ liệu từ file Google Sheets vừa dựng table hiển thị dữ liệu. Sau đó nhúng link của web app vào trang web.
Bước 1: Tạo file Google Sheets
Ví dụ file chứa dữ liệu là các câu thần chú của Harry Potter, xem tại tại đây.
Bước 2: Tạo Google Apps Script
Vào Google Drive > Bấm nút New > More > Google Apps Script.
Ở cột bên trái, chọn Editor
> Bấm dấu + trong mục Services
> Trong hộp thoại hiện ra, chọ mục Google Sheets API > Bấm nút Add.
Chọn file Code.gs ở cột trái rồi copy paste đoạn code này vào, nhớ thay giá trị các biến tương ứng.
function doGet[] {
return HtmlService.createTemplateFromFile['Index'].evaluate[].setXFrameOptionsMode[HtmlService.XFrameOptionsMode.ALLOWALL];
}
// Hàm này lấy dữ liệu từ file Google Sheets và trả về một array
function getData[]{
var spreadSheetId = "1zbau6OQ-jM8LR-HhgiOccP5RyxHaBbmMzHceYOU_gSI"; // lấy ID của file tương ứng
var dataRange = "Sheet1!A2:F"; // tên sheet và vùng tương ứng, không tính dòng tiêu đề
var range = Sheets.Spreadsheets.Values.get[spreadSheetId,dataRange];
var values = range.values;
return values;
}
// Hàm này khai báo các file javascript và css
function include[filename] {
return HtmlService.createHtmlOutputFromFile[filename]
.getContent[];
}Trong đó, ID của file Google Sheets được lấy từ URL.
Nhấn Ctrl+S để lưu mỗi khi sửa code.
Tiếp theo, tạo thêm 2 file là JavaScript.html và Index.html bằng cách:
Trong mục Files ở cột trái, bấm nút +
> Chọn mục HTML
> Gõ tên file, ví dụ JavaScript, không cần gõ đuôi file.
Copy paste đoạn code này vào file JavaScript.html
// Hàm này gọi hàm getData[] trong file Code.gs
// và truyền array trả về của getData[] vào hàm showData[]
google.script.run.withSuccessHandler[showData].getData[];
// Hàm này sẽ tạo bảng dữ liệu từ array trả về của getData[]
function showData[dataArray]{
$[document].ready[function[]{
$['#data-table'].DataTable[{
data: dataArray,
// Gõ tiêu đề ứng với tất cả các cột của bảng dữ liệu
columns: [
{"title":"ID"},
{"title":"Tên câu thần chú"},
{"title":"Cách đọc thần chú"},
{"title":"Loại"},
{"title":"Tác dụng"},
{"title":"Ánh sáng phát ra"}
]
}];
}];
}
Copy paste đoạn code này vào file Index.html
Bước 3: Triển khai Web App
Bấm nút Deploy màu xanh ở góc trên bên phải
> Chọn New Deployment
> Trong hộp thoại hiện ra, gõ tùy ý vào ô Description
> Chọn email của mình ở mục Execute as
> Chọn Anyone ở mục còn lại
> Bấm Deploy.
Trong hộp thoại hiện ra tiếp theo, bấm nút Authorize access để cấp quyền cho App mới truy xuất vào file Google Sheets.
> Chọn email của mình.
> Trong cửa sổ kế đó, click Advanced.
> Click tiếp link Go to ở dưới cùng.
[Tên app hiện đang là Untitled project, bạn có thể thay đổi tùy ý vào lúc khác.]
Bấm nút Allow > Hộp thoại hiện ra, bạn có thể bấm vào URL để xem kết quả.
Sẽ có thông báo lỗi [do một số ô trong file Google Sheets rỗng], bạn cứ bấm OK cho qua. Kết quả hiển thị như sau:
Lưu ý:
1. Khi tạo lần đầu cũng như chạy thử lần đầu, bạn phải Deploy > New deployment.
2. Mỗi lần sửa code, bạn chạy thử bằng cách bấm Deploy > Test deployments.
3. Khi hoàn tất, không còn điều chỉnh gì, bạn chọn lại Deploy > New deployment rồi chuyển sang Bước 4.
Bước 4: Hiển thị lên trang web
Bạn chỉ cần nhúng URL của Web App vào tag iframe là xong.
Thêm một lưu ý nữa, kết quả hiển thị tại Bước 3 là ở chế độ fullscreen, tức bạn có thể thấy table của mình ở kích thước nguyên vẹn. Nhưng khi nhúng vào web ở Bước 4, table sẽ bị scale các kiểu, bạn phải tìm cách responsive cái table.
Tùy biến table
1. Table tạo ra trong bài này là nhờ công cụ DataTables. Bạn có thể tham khảo các vấn đề liên quan, kể cả responsive, tại DataTables | Table plug-in for jQuery.
2. Viết thêm các class CSS và bổ sung các tag HTML cần thiết trong file Index.html.
3. Cũng tham khảo từ site DataTables, bạn có thể điều chỉnh các tham số trong các hàm của file JavaScript.html.
Ví dụ, một số ô trong file Google Sheets là rỗng, khiến xuất hiện thông báo lỗi khi chạy. Bạn khắc phục bằng cách khởi tạo giá trị mặc định là chuỗi rỗng.
columns: [
{"title":"ID", "defaultContent": ""},
{"title":"Tên câu thần chú", "defaultContent": ""},
{"title":"Cách đọc thần chú", "defaultContent": ""},
{"title":"Loại", "defaultContent": ""},
{"title":"Tác dụng", "defaultContent": ""},
{"title":"Ánh sáng phát ra", "defaultContent": ""}
]