Giaoan.link chia sẻ đến các bạn một project về “Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi“. Với project này bạn dễ dàng thay đổi nội dung của mã QR code đặt trên website hay blog của bạn. QR code là dạng mã sinh ra động, chứ không phải là một hình ảnh mà mình upload chèn vào website. Bên dưới là link video hướng dẫn minh họa và code apps script để bạn thực hiện.
Bạn tìm kiếm thêm nhiều project google sheet, apps script tại đây.
Project ngẫu nhiên:
- Appscript Webapp | Kéo thả các Items theo 2 chiều Dọc – Ngang, Ứng dụng sắp xếp chu trình công việc
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
Mã Apps script trang “Code.gs”
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getQRCodes() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1'); // Thay 'Sheet1' bằng tên sheet của bạn
var data = sheet.getRange("A1").getValues(); // Lấy dữ liệu từ cột A
var qrCodes = data.map(function(row) {
var url = "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" + data;
return url;
});
return qrCodes;
}
Mã apps script trang “Index.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.container{
width: 500px;
text-align: center;
padding: 5px;
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
border-radius: 10px;
}
.title{
background-color: yellow;
font-size: 1.5em;
font-weight: bold;
padding: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">QR CODE TỰ ĐỘNG CẬP NHẬT</div>
<div class="box-qr" id="qrCodes"></div>
</div>
<script>
function displayQRCodes(qrCodes) {
var container = document.getElementById('qrCodes');
qrCodes.forEach(function(url) {
var img = document.createElement('img');
img.src = url;
container.appendChild(img);
});
}
google.script.run.withSuccessHandler(displayQRCodes).getQRCodes();
</script>
</body>
</html>