Cách Tạo Một Web App Đơn Giản Với Apps Script

Bởi

Trong bài viết này, chúng ta sẽ cùng nhau khám phá cách tạo một web app đơn giản bằng Google Apps Script. Đây là một công cụ mạnh mẽ cho phép bạn tự động hóa các tác vụ và xây dựng các ứng dụng web nhỏ mà không cần phải có nhiều kiến thức về lập trình.

Bước 1: Tạo Dự Án Mới Trong Google Apps Script

Để bắt đầu, hãy mở Google Apps Script và tạo một dự án mới:

  1. Truy cập vào Google Apps Script.
  2. Nhấp vào nút New Project (Dự án mới).
  3. Đặt tên cho dự án của bạn, ví dụ như “Simple Web App”.

Bước 2: Viết Mã JavaScript Cho Web App

Trong dự án của bạn, bạn sẽ thấy một tập tin Code.gs được tạo sẵn. Bạn có thể sử dụng tập tin này để viết mã JavaScript cho web app của mình. Dưới đây là một ví dụ đơn giản:

function doGet() {
  return HtmlService.createHtmlOutput('<h1>Chào mừng bạn đến với Web App của tôi!</h1>');
}

Đoạn mã trên tạo một hàm doGet(), hàm này sẽ được gọi khi người dùng truy cập vào web app của bạn. Hàm này trả về một đối tượng HTML với nội dung là một tiêu đề h1.

Bước 3: Triển Khai Web App

Sau khi viết mã xong, bạn cần triển khai (deploy) web app của mình:

  1. Nhấp vào Deploy (Triển khai) ở góc trên bên phải.
  2. Chọn New deployment (Triển khai mới).
  3. Trong cửa sổ hiện ra, chọn Web app.
  4. Đặt tên cho triển khai của bạn và chọn Execute the app as (Thực thi ứng dụng dưới dạng) là Me (Tôi).
  5. Chọn Who has access (Ai có thể truy cập) là Anyone (Bất kỳ ai).
  6. Nhấp vào Deploy (Triển khai).

Sau khi triển khai, bạn sẽ nhận được một URL, đây là địa chỉ mà người dùng có thể truy cập để xem web app của bạn.

Cách Tạo Một Web App Đơn Giản Với Apps Script

Bước 4: Thêm Nội Dung Phức Tạp Hơn

Bạn có thể làm cho web app của mình phức tạp hơn bằng cách thêm các biểu mẫu và xử lý các yêu cầu từ người dùng. Dưới đây là một ví dụ về cách tạo một biểu mẫu đơn giản:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function processForm(formObject) {
  var response = 'Bạn đã nhập: ' + formObject.inputText;
  return HtmlService.createHtmlOutput(response);
}

Tạo một tập tin HTML mới tên là Index.html và thêm nội dung sau:

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <label for="inputText">Nhập văn bản:</label><br>
      <input type="text" id="inputText" name="inputText"><br><br>
      <input type="button" value="Gửi" onclick="submitForm()">
    </form>

    <script>
      function submitForm() {
        google.script.run.withSuccessHandler(function(response) {
          document.body.innerHTML = response;
        }).processForm(document.getElementById('myForm'));
      }
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta đã tạo một biểu mẫu HTML với một ô nhập liệu và một nút gửi. Khi người dùng nhấn nút gửi, biểu mẫu sẽ được xử lý bởi hàm processForm trong tập tin Code.gs.

Kết Luận

Google Apps Script cung cấp một cách đơn giản và hiệu quả để tạo các web app nhỏ. Với những bước cơ bản như trên, bạn đã có thể tạo một web app đơn giản và mở rộng nó theo nhu cầu của mình. Hãy thử và khám phá thêm nhiều tính năng thú vị mà Google Apps Script mang lại! 🚀

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.

📒 Nhận dạy Lập trình Apps Script, Power Apps từ cơ bản đến nâng cao.

📞 +84 78 600 5534 (Zalo, WhatsApp, Telegram)

💻 Github

🌏 appscript.online

Viết một bình luận