Trong chapter 4, chúng ta đã ứng dụng bootstrap 5 để lên layout cho dự án Google Apps Script. Bài viết hôm nay sẽ nói về các bước set up để truy xuất dữ liệu trực tiếp từ Google sheet.
Các bạn có thể truy cập vào đường dẫn Gist này để code. Ở thời điểm hiện tại, chúng ta đã cơ bản hoàn thành yêu cầu đặt ra, cơ mà trong tương lai khi dữ liệu thay đổi, chắc chắn sẽ phát sinh change request. Do đó trong bài này, mình sẽ tập trung vào phần dynamic data bằng cách cho phép web-app tự động truy xuất vào dữ liệu ở google sheet.
Ở đây, Google sheet đóng vai trò như database của chúng ta, lý tưởng là mỗi khi có sự thay đổi trong database thì output của dự án cũng sẽ tự động up-to-date.
Đầu tiên, chúng ta cần ID của Gsheet. Đường dẫn của Gsheet thường có dạng như sau:
https://docs.google.com/spreadsheets/d/1J8YesIXf02FioGtAeECHWIiZsyQOq2TEYMsb083Seic/edit#gid=0
Đoạn được tô đỏ là id của Gsheet, chúng ta sẽ sử dụng ID này ở phần sau.
Trong file code.gs thêm mã:
function getData(){
var ssId = '1J8YesIXf02FioGtAeECHWIiZsyQOq2TEYMsb083Seic'; // thay thế GSheet ID của bạn ở đây
var ss = SpreadsheetApp.openById(ssId);
var sheet = ss.getSheetByName('data'); // Đây là lý do thêm 1 sheet tên là data
var values = sheet.getDataRange().getValues();
console.log(values)
return values;
}
Chạy thử function mới (lưu ý trước khi nhấn Run, nhớ chọn tên function là getData).
(1) Google Apps Script sẽ yêu cầu quyền truy cập, bước này để Google Apps Script xác nhận bạn có thực sự có quyền truy cập vào GSheet ID tương ứng hay không. Chúng ta đồng ý với các yêu cầu cấp quyền của Apps Script.
(2) Đây là kết quả của function sau khi chạy thành công. Dữ liệu tương ứng trong Gsheet sẽ được log ra như hình bên dưới.
Giải thích code
Tới đây các bạn có thể thêm 1 dòng vào GSheet, sau đó chạy lại hàm getData như vừa rồi để kiểm tra lại tính đúng đắn của hàm getData này
Chúng ta đã có dữ liệu dưới dạng một mảng, mục tiêu là tiếp tục biến đổi dữ liệu thô này thành HTML tương ứng.
(3) Thêm function dưới đây vào file code.gs
function dataToHTML(){
var data = getData() // gọi hàm getData, lưu output vào biến data
var outHtml = '' // tạo một biến chưa có giá trị
for (let i = 1; i< data.length; i++){ // khởi tạo vòng lặp từ i = 1, bỏ i = 0 vì phần tử đầu tiên (phần tử 0) của array là header
outHtml = outHtml // tương ứng với mỗi phần tử thứ i của data (tương ứng là data[i]) tạo html sau đó nối vào trong outHtml hiện có
+
`<div class="row mb-3 p-2 border">
<div class="col-2">
<img src="${data[i][3]}" height="150" width="150">
</div>
<div class="col-5">
<p class="fs-3 text-primary">${data[i][1]} - ${data[i][0]}</p>
<p class="fs-5 text-secondary">${data[i][2]}</p>
</div>
</div>`
}
return outHtml // trả về giá trị outHtml cuối cùng
}
(4) Và đoạn code này vào trong thẻ <head> của file index.html
<script>
function onSuccess(html) {
var div = document.getElementById('output');
div.innerHTML = html;
}
google.script.run.withSuccessHandler(onSuccess).dataToHTML();
</script>
Sau thêm 2 đoạn mã trên, bạn Refresh trang Deploy test thì dữ liệu cũng xuất hiện.
Giải thích code
Ở khuôn khổ bài viết, mình xin phép chưa đi sâu vào syntax của Apps Script, chúng ta sẽ tìm hiểu chủ đề này trong một series riêng. Về mặt ý tưởng:
Sau khi kết thúc chapter 5, chúng ta đã có một web-app đơn giản (nhưng hoàn chỉnh). Bao gồm từ việc truy xuất dữ liệu thô từ GSheet (đóng vai trò database), xử lý dữ liệu, chuyển dữ liệu thô hành HTML, đến dùng bootstrap 5 để định dạng lại HTML. Cũng nói thêm rằng, chúng ta chỉ khai thác khía cạnh truy xuất database để hiển thị, tuy nhiên Google Apps Script cũng có thể cập nhật dữ liệu với vào lại database.
Kết thúc series tại đây, hi vọng quý bạn đọc có cái nhìn sơ lược về công dụng cũng như tiềm năng ứng dụng của Apps Script vào công việc hằng ngày. Trong những series sau, mình sẽ chia sẻ sâu hơn vào từng bước của quy trình phát triển web-app đã đề cập ở trên, cũng như có những module bổ trợ thêm kiến thức về Javascript (độ nhanh chậm ra bài phụ thuộc vào traffic của từng series ha). Chào.