Trong thời đại công nghệ số hiện nay, việc phát triển ứng dụng web ngày càng trở nên phổ biến và dễ dàng hơn bao giờ hết. Google Apps Script là một công cụ mạnh mẽ cho phép bạn xây dựng các ứng dụng web đơn giản mà không cần phải có kiến thức lập trình sâu rộng. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách tự tạo một web app đơn giản sử dụng Google Apps Script, Bootstrap và jQuery để nhận request từ người dùng.
1. Giới Thiệu Về Google Apps Script
Google Apps Script là một ngôn ngữ lập trình dựa trên JavaScript cho phép bạn tự động hóa và mở rộng các sản phẩm của Google như Google Sheets, Google Docs, và Gmail. Với Apps Script, bạn có thể tạo ra các ứng dụng web, tự động hóa quy trình làm việc, và tích hợp với các dịch vụ bên ngoài.
2. Chuẩn Bị Môi Trường
Bước 1: Tạo Dự Án Mới
- Truy cập vào Google Apps Script.
- Chọn “New Project” để tạo một dự án mới.
- Đặt tên cho dự án, ví dụ: “Web App Example”.
Bước 2: Tạo File HTML
Trong dự án của bạn, hãy tạo một file HTML để xây dựng giao diện người dùng. Bạn có thể làm điều này bằng cách nhấp vào biểu tượng “+” và chọn “HTML”.
Bước 3: Cài Đặt Bootstrap và jQuery
Để sử dụng Bootstrap và jQuery, bạn cần thêm các liên kết CDN vào file HTML của mình. Dưới đây là một ví dụ về cách cấu trúc file HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web App Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Gửi Request Từ Người Dùng</h1>
<form id="userForm">
<div class="mb-3">
<label for="userName" class="form-label">Tên của bạn:</label>
<input type="text" class="form-control" id="userName" required>
</div>
<button type="submit" class="btn btn-primary">Gửi</button>
</form>
<div id="response" class="mt-3"></div>
</div>
<script>
$(document).ready(function() {
$('#userForm').on('submit', function(event) {
event.preventDefault();
const userName = $('#userName').val();
google.script.run.withSuccessHandler(function(response) {
$('#response').html('<div class="alert alert-success">' + response + '</div>');
}).processForm(userName);
});
});
</script>
</body>
</html>Giải Thích Mã HTML
- Bootstrap: Được sử dụng để tạo giao diện đẹp mắt và responsive.
- jQuery: Được sử dụng để xử lý sự kiện và gửi request đến Apps Script.
- Form: Người dùng sẽ nhập tên của họ vào ô input và gửi form.
3. Xử Lý Request Trong Apps Script
Bước 1: Viết Hàm Xử Lý Trong Apps Script
Quay lại phần mã Apps Script, bạn cần viết một hàm để xử lý request từ người dùng. Hàm này sẽ nhận tên người dùng và trả về một thông báo.
function processForm(userName) {
return "Cảm ơn bạn, " + userName + "! Bạn đã gửi request thành công.";
}Bước 2: Triển Khai Web App
Để triển khai ứng dụng web, bạn cần thực hiện các bước sau:
- Nhấp vào “Deploy” > “New deployment”.
- Chọn “Web app”.
- Đặt tên cho deployment và chọn “Execute as” là “Me”.
- Chọn “Who has access” là “Anyone” để mọi người có thể truy cập.
- Nhấn “Deploy” và xác nhận quyền truy cập.
Sau khi triển khai thành công, bạn sẽ nhận được một URL mà bạn có thể chia sẻ với người dùng.
4. Kiểm Tra Ứng Dụng Web
Mở URL mà bạn đã nhận được và thử nghiệm ứng dụng của bạn. Nhập tên vào ô input và nhấn nút “Gửi”. Bạn sẽ thấy một thông báo phản hồi hiển thị tên bạn đã nhập.
5. Tùy Chỉnh Ứng Dụng
Thêm Các Trường Nhập Khác
Bạn có thể mở rộng ứng dụng của mình bằng cách thêm nhiều trường nhập khác nhau như email, số điện thoại, hoặc bất kỳ thông tin nào mà bạn muốn thu thập từ người dùng. Dưới đây là một ví dụ về cách thêm trường email:
<div class="mb-3">
<label for="userEmail" class="form-label">Email của bạn:</label>
<input type="email" class="form-control" id="userEmail" required>
</div>Cập Nhật Hàm Xử Lý
Cập nhật hàm processForm để nhận thêm thông tin từ người dùng:
function processForm(userName, userEmail) {
return "Cảm ơn bạn, " + userName + "! Email của bạn là: " + userEmail;
}Cải Thiện Giao Diện
Bạn có thể tùy chỉnh giao diện bằng cách thay đổi màu sắc, phông chữ và bố cục bằng cách sử dụng các lớp Bootstrap hoặc CSS tùy chỉnh.
Bạn cần thêm hàm doGet để phục vụ yêu cầu HTTP GET và trả về giao diện HTML mà bạn đã tạo. Dưới đây là cách bạn có thể tích hợp hàm doGet vào mã của bạn.
Cập Nhật Mã Apps Script
Dưới đây là mã hoàn chỉnh bao gồm hàm doGet cùng với hàm processForm:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index'); // 'index' là tên file HTML bạn đã tạo
}
function processForm(userName) {
return "Cảm ơn bạn, " + userName + "! Bạn đã gửi request thành công.";
}Cấu Trúc File HTML
Giả sử bạn đã tạo file HTML với tên là index.html, mã của file này sẽ như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web App Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Gửi Request Từ Người Dùng</h1>
<form id="userForm">
<div class="mb-3">
<label for="userName" class="form-label">Tên của bạn:</label>
<input type="text" class="form-control" id="userName" required>
</div>
<button type="submit" class="btn btn-primary">Gửi</button>
</form>
<div id="response" class="mt-3"></div>
</div>
<script>
$(document).ready(function() {
$('#userForm').on('submit', function(event) {
event.preventDefault();
const userName = $('#userName').val();
google.script.run.withSuccessHandler(function(response) {
$('#response').html('<div class="alert alert-success">' + response + '</div>');
}).processForm(userName);
});
});
</script>
</body>
</html>Giải Thích Mã
- Hàm
doGet: Hàm này sẽ được gọi khi người dùng truy cập vào URL của ứng dụng web. Nó sẽ trả về nội dung của file HTML (index.html). - Hàm
processForm: Hàm này xử lý thông tin từ người dùng và trả về một thông báo xác nhận. - Giao Diện HTML: Giao diện người dùng vẫn giữ nguyên như trước, cho phép người dùng nhập tên và nhận phản hồi.
Triển Khai Ứng Dụng Web
- Nhấp vào “Deploy” > “New deployment”.
- Chọn “Web app”.
- Đặt tên cho deployment và chọn “Execute as” là “Me”.
- Chọn “Who has access” là “Anyone” để mọi người có thể truy cập.
- Nhấn “Deploy” và xác nhận quyền truy cập.
Sau khi triển khai thành công, bạn sẽ có URL để chia sẻ ứng dụng web của mình.
6. Kết Luận
Việc tạo một web app đơn giản với Google Apps Script, Bootstrap và jQuery là một quá trình thú vị và dễ dàng. Bạn không chỉ học được cách thu thập thông tin từ người dùng mà còn có thể triển khai ứng dụng của mình một cách nhanh chóng. Với những kiến thức cơ bản này, bạn có thể mở rộng và phát triển các ứng dụng phức tạp hơn trong tương lai.
Hy vọng bài viết này sẽ giúp bạn tự tạo ứng dụng web đầu tiên của mình. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại câu hỏi dưới bài viết nhé!
Dịch vụ lập trình ứng dụng
🎯 Lập trình API, Python, Node JS, Telegram Bot, Automate Workflow, Power Apps and Apps Script. Ứng dụng Web App, API với Apps Script vào bài toán thực tế trong doanh nghiệp.
📞 +84 78 600 5534 (Zalo, WhatsApp, Telegram)
💻 Github