Как создать HTML-сервис в Google Apps Script: Полное руководство

02.07.2025
20225

6 мин
283

Что такое Google Apps Script и его возможности

Google Apps Script (GAS) – это облачная платформа для разработки, позволяющая автоматизировать задачи и расширять функциональность Google Workspace (Sheets, Docs, Drive, Gmail и др.). GAS поддерживает JavaScript, что делает его доступным для многих разработчиков. С помощью GAS можно создавать веб-приложения, пользовательские функции для Google Таблиц, автоматизировать отправку электронных писем и многое другое.

Обзор HTML-сервисов: для чего они нужны и как работают

HTML-сервисы в Google Apps Script позволяют создавать пользовательские веб-интерфейсы. Это означает, что вместо использования встроенных диалоговых окон и оповещений Apps Script, вы можете создавать полноценные HTML-страницы, которые взаимодействуют с вашим кодом Apps Script. Работает это следующим образом: пользователь запрашивает HTML-страницу, Apps Script обрабатывает этот запрос и возвращает HTML-код для отображения в браузере.

Преимущества использования HTML-сервисов в Google Apps Script

Более гибкий и настраиваемый интерфейс: HTML, CSS и JavaScript позволяют создавать более привлекательные и функциональные пользовательские интерфейсы, чем стандартные средства GAS.
Интерактивность: HTML-сервисы поддерживают обработку событий (например, нажатие кнопок, заполнение форм), что позволяет создавать интерактивные веб-приложения.
Интеграция с внешними сервисами: Можно легко интегрировать HTML-сервисы с другими веб-сервисами и API.
Разработка веб-приложений: Создавайте standalone веб-приложения, работающие независимо от сервисов Google, но использующие их данные и функциональность.

Создание простого HTML-сервиса: Пошаговое руководство

Настройка проекта Google Apps Script

Откройте Google Drive и создайте новый проект Google Apps Script (через «Создать» -> «Еще» -> «Google Apps Script»).
Присвойте проекту имя, например, «My HTML Service».

Создание HTML-шаблона (index.html)

Создайте HTML-файл с именем index.html. Этот файл будет содержать структуру и внешний вид вашего веб-интерфейса. Пример простого index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Service</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Написание кода Apps Script для обработки запросов (code.gs)

В файле code.gs напишите функцию doGet(e), которая будет вызываться при запросе к вашему HTML-сервису. Эта функция должна возвращать объект HtmlOutput, содержащий HTML-код для отображения.

/**
 * @param {GoogleAppsScript.Events.DoGet} e
 * @returns {GoogleAppsScript.HTML.HtmlOutput}
 */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

Развертывание HTML-сервиса: публикация и предоставление доступа

В редакторе Apps Script выберите «Развернуть» -> «Новое развертывание».
Выберите тип «Веб-приложение».
В поле «Выполнять от имени» выберите «Я».
В поле «Кто имеет доступ» выберите подходящий вариант (например, «Все у кого есть ссылка»).
Нажмите «Развернуть».
После завершения развертывания скопируйте URL-адрес веб-приложения. Этот URL можно использовать для доступа к вашему HTML-сервису.

Взаимодействие с Google Apps Script из HTML: GET и POST запросы

Отправка данных из HTML в Apps Script: методы google.script.run

google.script.run – это API, предоставляемое Google Apps Script для взаимодействия HTML с серверной частью (code.gs). Оно позволяет вызывать функции Apps Script из JavaScript-кода, работающего в браузере. Можно передавать данные из HTML-формы в Apps Script для обработки.

Обработка данных, полученных от пользователя

В Apps Script данные, отправленные из HTML, доступны в качестве аргументов функции, вызванной через google.script.run. Обрабатывайте эти данные, валидируйте их и выполняйте необходимые операции (например, сохранение в Google Sheets).

Возврат данных из Apps Script в HTML

Функции, вызванные через google.script.run, могут возвращать данные обратно в HTML. Это можно использовать для обновления содержимого страницы, отображения сообщений об успехе/ошибке и т.д. Для обработки возвращаемых данных используйте .withSuccessHandler() и .withFailureHandler().

Примеры использования GET и POST запросов

Хотя HTML-сервисы обычно используют POST-запросы для отправки данных, можно также использовать GET-запросы, передавая параметры в URL. Однако, для передачи больших объемов данных или конфиденциальной информации рекомендуется использовать POST-запросы.

Пример отправки данных из HTML в Apps Script (POST):

<!DOCTYPE html>
<html>
<head>
  <title>Send Data to Apps Script</title>
</head>
<body>
  <input type="text" id="dataInput" value="Some Value"/>
  <button onclick="sendData()">Send Data</button>

  <script>
    function sendData() {
      var data = document.getElementById('dataInput').value;
      google.script.run
        .withSuccessHandler(data => {
          console.log("Data received: " + data);
        })
        .withFailureHandler(error => {
            console.error("Error: " + error);
        })
        .processData(data);
    }
  </script>
</body>
</html>

/**
 * @param {string} data
 * @returns {string}
 */
function processData(data) {
  Logger.log('Received data: ' + data);
  return 'Data processed successfully: ' + data;
}

Продвинутые возможности HTML-сервисов

Использование шаблонов Templated HTML для динамической генерации контента

Templated HTML позволяет создавать HTML-страницы, которые генерируются динамически на основе данных, полученных из Apps Script. Используйте <% ... %> блоки для вставки кода Apps Script в HTML-шаблон. Это очень полезно для создания отчетов, таблиц и других динамических элементов интерфейса.

Интеграция с другими сервисами Google (Sheets, Docs, Drive)

HTML-сервисы могут легко интегрироваться с другими сервисами Google Workspace. Например, можно отображать данные из Google Sheets в HTML-таблице, создавать документы Google Docs на основе данных, введенных пользователем в HTML-форме, или загружать файлы на Google Drive.

Обработка ошибок и логирование

Важно обрабатывать ошибки, которые могут возникать при работе с HTML-сервисами. Используйте блоки try...catch для перехвата исключений и логируйте ошибки для отладки. Logger.log() и console.log() (в браузере) – ваши лучшие друзья.

Пример HTML-сервиса: Форма для сбора данных и сохранения в Google Sheets

Описание примера проекта: цели и функциональность

Этот пример демонстрирует создание HTML-формы для сбора данных (имя, email, сообщение) и сохранения этих данных в Google Sheets. Он объединяет все основные концепции, рассмотренные выше.

Реализация HTML-формы (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Form</h1>
  <form id="contactForm">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message"></textarea><br><br>

    <button type="button" onclick="submitForm()">Submit</button>
  </form>

  <div id="messageDiv"></div>

  <script>
    function submitForm() {
      var form = document.getElementById('contactForm');
      var formData = {};
      for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.name) {
          formData[element.name] = element.value;
        }
      }

      google.script.run
        .withSuccessHandler(function(message) {
          document.getElementById('messageDiv').innerHTML = message;
          form.reset();
        })
        .withFailureHandler(function(err) {
          document.getElementById('messageDiv').innerHTML = 'Error: ' + err.message;
        })
        .saveFormData(formData);
    }
  </script>
</body>
</html>

Код Apps Script для обработки формы и записи в Google Sheets (code.gs)

/**
 * @param {Object} formData
 * @returns {string}
 */
function saveFormData(formData) {
  try {
    // Replace with your spreadsheet ID and sheet name
    const spreadsheetId = 'YOUR_SPREADSHEET_ID';
    const sheetName = 'Sheet1';

    const ss = SpreadsheetApp.openById(spreadsheetId);
    const sheet = ss.getSheetByName(sheetName);

    if (!sheet) {
      throw new Error(`Sheet with name '${sheetName}' not found.`);
    }

    sheet.appendRow([formData.name, formData.email, formData.message]);

    return 'Data saved successfully!';
  } catch (e) {
    Logger.log('Error saving data: ' + e);
    throw e; // re-throw the error so that withFailureHandler is invoked
  }
}

Тестирование и отладка сервиса

Разверните HTML-сервис, как описано выше.
Откройте URL-адрес веб-приложения в браузере.
Заполните форму и отправьте ее.
Проверьте Google Sheets, чтобы убедиться, что данные сохранены правильно.
Используйте инструменты разработчика браузера (console) для отладки JavaScript-кода.
Используйте Logger.log() в Apps Script для отладки серверного кода. Просматривайте логи через «Просмотр» -> «Логи». Убедитесь, что spreadsheetId указан верно.