Google Apps Script, HTML и CSS: как создать веб-приложение?

26.05.2025
18222

6 мин
710

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

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

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Ключевые возможности:

Автоматизация задач в Google Workspace.
Создание пользовательских функций для Google Sheets.
Интеграция с внешними API и сервисами.
Разработка веб-приложений, работающих непосредственно в браузере.

Роль HTML и CSS в создании пользовательского интерфейса

HTML (HyperText Markup Language) является основой для создания веб-страниц. Он определяет структуру и контент страницы, используя теги для разметки текста, изображений, ссылок и других элементов. CSS (Cascading Style Sheets) отвечает за внешний вид и стиль веб-страницы, определяя шрифты, цвета, макет и другие визуальные аспекты.

Вместе HTML и CSS позволяют создавать привлекательные и удобные пользовательские интерфейсы для веб-приложений.

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

Google Apps Script предлагает ряд преимуществ для разработки веб-приложений:

Простота разработки: GAS основан на JavaScript, что делает его доступным для широкого круга разработчиков.
Интеграция с Google Workspace: Легкая интеграция с сервисами Google Workspace позволяет создавать приложения, работающие с данными из Sheets, Docs и других приложений.
Бесплатный хостинг: Google Apps Script предоставляет бесплатный хостинг для веб-приложений, что снижает затраты на развертывание.
Автоматическое масштабирование: Платформа автоматически масштабируется для обработки трафика, что обеспечивает стабильную работу приложений.

Создание базового веб-приложения с использованием Google Apps Script

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

Откройте Google Drive.
Создайте новый проект Google Apps Script (New > More > Google Apps Script).
Присвойте проекту имя (например, «MyWebApp»).

Создание HTML-файла для интерфейса

В редакторе GAS создайте новый HTML-файл (File > New > HTML file).
Назовите файл index.html.
Добавьте базовую структуру HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Web App</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple web app created with Google Apps Script.</p>
</body>
</html>

Написание кода Google Apps Script для обработки запросов

В файле Code.gs (или другом файле .gs) добавьте функцию doGet(e):

/**
 * @param {GoogleAppsScript.Events.DoGet} e The event object representing the HTTP GET request.
 * @return {HtmlOutput} The HTML output to display in the browser.
 */
function doGet(e: GoogleAppsScript.Events.DoGet): HtmlOutput {
  // Возвращаем HTML-страницу из файла index.html
  return HtmlService.createHtmlOutputFromFile('index');
}

Развертывание веб-приложения и предоставление доступа

В редакторе GAS выберите Deploy > New deployment.
Выберите тип развертывания «Web app».
Укажите описание (например, «Initial deployment»).
В разделе «Execute as», выберите «Me (your email address)».
В разделе «Who has access», выберите «Anyone with Google account» или «Anyone». Внимание: Выбор «Anyone» делает приложение общедоступным.
Нажмите Deploy.
Скопируйте URL-адрес веб-приложения из диалогового окна развертывания.
Откройте URL-адрес в браузере, чтобы увидеть свое веб-приложение.

Интеграция HTML и CSS для улучшения внешнего вида

Основы HTML: структура документа, теги и атрибуты

HTML-документ состоит из тегов, которые определяют структуру и содержимое страницы. Каждый тег имеет открывающий и закрывающий тег (например, <p> и </p>). Атрибуты тегов предоставляют дополнительную информацию о теге (например, <img src="image.jpg" alt="My Image">).

Основы CSS: селекторы, стили и правила форматирования

CSS определяет внешний вид элементов HTML. CSS-правила состоят из селектора (определяющего, к какому элементу применяется стиль) и блока объявлений (определяющего стили). Пример:

h1 {
  color: blue;
  font-size: 24px;
}

Связывание HTML и CSS в Google Apps Script

CSS можно добавить в HTML-файл тремя способами:

Встроенные стили: Использование атрибута style непосредственно в HTML-теге (не рекомендуется).
Внутренние стили: Добавление стилей внутри тега <style> в разделе <head> HTML-документа.
Внешние стили: Создание отдельного CSS-файла и подключение его к HTML-документу с помощью тега <link>.

Рекомендуется использовать внешние стили для лучшей организации и повторного использования.

Пример подключения внешнего CSS-файла:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Примеры стилизации веб-приложения: шрифты, цвета, макет

Пример стилизации заголовка и параграфа:

h1 {
  font-family: Arial, sans-serif;
  color: #333;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

Пример изменения макета с использованием CSS Grid или Flexbox:

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 30%;
}

Взаимодействие между Google Apps Script и HTML: передача данных

Использование `google.script.run` для вызова серверных функций из HTML

google.script.run позволяет вызывать функции Google Apps Script из HTML-кода. Это основной способ взаимодействия между клиентской и серверной частями веб-приложения.

Передача данных от HTML к Google Apps Script и обратно

Данные можно передавать в качестве аргументов функции, вызываемой через google.script.run. GAS может возвращать данные обратно в HTML, используя callback-функции.

Обработка форм и пользовательского ввода

Формы позволяют пользователям вводить данные, которые можно отправить на сервер для обработки. При отправке формы данные передаются в функцию GAS, где их можно обработать и сохранить, например, в Google Sheets.

Пример обработки формы:

HTML (index.html):

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
  function submitForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    google.script.run
      .withSuccessHandler(data => {
        console.log('Данные успешно отправлены', data);
        alert('Данные успешно отправлены');
      })
      .processForm(name, email);
  }
</script>

Google Apps Script (Code.gs):

/**
 * @param {string} name
 * @param {string} email
 */
function processForm(name: string, email: string): string {
  // Здесь можно обработать данные (например, записать в Google Sheets)
  Logger.log(`Name: ${name}, Email: ${email}`);
  return "Данные успешно обработаны";
}

Асинхронные запросы и обновление интерфейса

google.script.run работает асинхронно, что позволяет избежать блокировки пользовательского интерфейса во время выполнения серверных операций. Callback-функции используются для обработки результатов асинхронных запросов и обновления интерфейса.

Примеры и лучшие практики

Создание простой формы обратной связи