Веб-приложение Apps Script: получение и отображение данных из Google Sheets

  •   
  •   16784
  •   7 мин
  •   120

Введение в веб-приложения Apps Script и Google Sheets

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

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

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

Apps Script предлагает ряд преимуществ для работы с Google Sheets:

  1. Автоматизация: Автоматизация рутинных задач, таких как импорт данных, форматирование, отправка отчетов.
  2. Расширение функциональности: Добавление пользовательских функций и меню в Google Sheets.
  3. Интеграция: Интеграция Google Sheets с другими сервисами Google и сторонними API.
  4. Веб-приложения: Создание веб-приложений, взаимодействующих с данными в Google Sheets.
  5. Бесплатность: Apps Script – бесплатный инструмент для пользователей Google Workspace.

Создание и настройка нового проекта Apps Script

Чтобы начать работу с Apps Script, необходимо создать новый проект. Это можно сделать непосредственно из Google Sheets, выбрав Инструменты > Редактор скриптов. Откроется редактор Apps Script, где можно писать код. Важно дать проекту осмысленное имя, чтобы его было легко найти в будущем.

Связь проекта Apps Script с Google Sheets

Когда проект Apps Script создан из Google Sheets, он автоматически связан с этой таблицей. Это означает, что скрипт имеет доступ к данным в этой таблице. Для доступа к другим таблицам необходимо указать их ID или имя.

Получение данных из Google Sheets с использованием Apps Script

Подключение к Google Sheets по ID и имени

Для работы с Google Sheets в Apps Script необходимо установить соединение с нужной таблицей. Это можно сделать двумя способами: по ID или по имени.

По ID: ID таблицы можно найти в URL-адресе Google Sheets.

/**
 * Подключение к Google Sheets по ID.
 * @param {string} spreadsheetId ID таблицы.
 * @return {Spreadsheet} Объект Spreadsheet.
 */
function getSpreadsheetById(spreadsheetId: string): GoogleAppsScript.Spreadsheet.Spreadsheet {
  return SpreadsheetApp.openById(spreadsheetId);
}

По имени: Имя таблицы отображается в верхней части Google Sheets.

/**
 * Подключение к Google Sheets по имени.
 * @param {string} spreadsheetName Имя таблицы.
 * @return {Spreadsheet} Объект Spreadsheet.
 */
function getSpreadsheetByName(spreadsheetName: string): GoogleAppsScript.Spreadsheet.Spreadsheet {
  return SpreadsheetApp.openByName(spreadsheetName);
}

Получение доступа к листу (sheet) внутри таблицы

После подключения к таблице необходимо получить доступ к нужному листу (sheet). Это также можно сделать по имени или по индексу.

/**
 * Получение листа по имени.
 * @param {Spreadsheet} spreadsheet Объект Spreadsheet.
 * @param {string} sheetName Имя листа.
 * @return {Sheet} Объект Sheet.
 */
function getSheetByName(spreadsheet: GoogleAppsScript.Spreadsheet.Spreadsheet, sheetName: string): GoogleAppsScript.Spreadsheet.Sheet {
  return spreadsheet.getSheetByName(sheetName);
}

/**
 * Получение листа по индексу.
 * @param {Spreadsheet} spreadsheet Объект Spreadsheet.
 * @param {number} sheetIndex Индекс листа (начиная с 1).
 * @return {Sheet} Объект Sheet.
 */
function getSheetByIndex(spreadsheet: GoogleAppsScript.Spreadsheet.Spreadsheet, sheetIndex: number): GoogleAppsScript.Spreadsheet.Sheet {
  return spreadsheet.getSheets()[sheetIndex - 1];
}

Чтение данных из листа: диапазоны, ячейки, массивы

Для чтения данных из листа используются методы getRange() и getValues(). getRange() позволяет получить диапазон ячеек, а getValues() возвращает массив значений.

/**
 * Чтение данных из диапазона.
 * @param {Sheet} sheet Объект Sheet.
 * @param {string} range Строка, представляющая диапазон (например, "A1:B10").
 * @return {any[][]} Двумерный массив значений.
 */
function getDataFromRange(sheet: GoogleAppsScript.Spreadsheet.Sheet, range: string): any[][] {
  return sheet.getRange(range).getValues();
}

/**
 * Чтение значения из ячейки.
 * @param {Sheet} sheet Объект Sheet.
 * @param {number} row Номер строки.
 * @param {number} column Номер столбца.
 * @return {any} Значение ячейки.
 */
function getValueFromCell(sheet: GoogleAppsScript.Spreadsheet.Sheet, row: number, column: number): any {
  return sheet.getRange(row, column).getValue();
}

Обработка полученных данных: форматирование, фильтрация

После получения данных их можно обработать, например, отформатировать или отфильтровать. Для форматирования можно использовать методы JavaScript, а для фильтрации – метод filter().

/**
 * Фильтрация данных.
 * @param {any[][]} data Двумерный массив данных.
 * @param {function} callback Функция фильтрации.
 * @return {any[][]} Отфильтрованный массив данных.
 */
function filterData(data: any[][], callback: (row: any[]) => boolean): any[][] {
  return data.filter(callback);
}

Примеры кода для различных сценариев получения данных

Пример 1: Получение всех данных из листа:

const spreadsheetId = 'YOUR_SPREADSHEET_ID';
const sheetName = 'Sheet1';

const spreadsheet = getSpreadsheetById(spreadsheetId);
const sheet = getSheetByName(spreadsheet, sheetName);
const data = getDataFromRange(sheet, 'A1:Z'); // Получаем все данные до столбца Z

Logger.log(data);

Пример 2: Получение данных из определенного диапазона:

const spreadsheetId = 'YOUR_SPREADSHEET_ID';
const sheetName = 'Sheet1';

const spreadsheet = getSpreadsheetById(spreadsheetId);
const sheet = getSheetByName(spreadsheet, sheetName);
const data = getDataFromRange(sheet, 'A2:C10');

Logger.log(data);

Создание веб-интерфейса для отображения данных

Основы HTML, CSS и JavaScript для Apps Script

Для создания веб-интерфейса в Apps Script используются HTML, CSS и JavaScript. HTML отвечает за структуру страницы, CSS – за стили, а JavaScript – за динамическое поведение.

Использование HTML-сервиса Apps Script для создания веб-страниц

HTML-сервис Apps Script позволяет создавать веб-страницы, которые могут отображать данные из Google Sheets. Для этого необходимо создать HTML-файл и использовать метод HtmlService.createHtmlOutputFromFile().

/**
 * Создание HTML-вывода из файла.
 * @param {string} filename Имя HTML-файла.
 * @return {HtmlOutput} Объект HtmlOutput.
 */
function createHtmlOutput(filename: string): GoogleAppsScript.HTML.HtmlOutput {
  return HtmlService.createHtmlOutputFromFile(filename)
    .setTitle('Веб-приложение Apps Script');
}

Передача данных из Apps Script в HTML (template literals, google.script.run)

Данные из Apps Script можно передавать в HTML двумя способами: через template literals и через google.script.run. Template literals позволяют встраивать значения переменных в HTML-код, а google.script.run позволяет вызывать функции Apps Script из JavaScript.

Template literals: Используются для простой передачи данных.

function doGet() {
  const data = ['Apple', 'Banana', 'Cherry'];
  const htmlOutput = HtmlService.createHtmlOutput(`
    <ul>
      ${data.map(item => `<li>${item}</li>`).join('')}
    </ul>
  `);
  return htmlOutput;
}

google.script.run: Используется для более сложного взаимодействия, например, для отправки данных обратно в Apps Script.

Дизайн веб-интерфейса: структура, стили, элементы управления

Дизайн веб-интерфейса включает в себя определение структуры страницы, стилей и элементов управления (кнопки, поля ввода, списки и т.д.). Для стилизации можно использовать CSS, а для добавления интерактивности – JavaScript.

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

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

Отображение данных из Google Sheets в веб-приложении

Отображение данных в табличном виде (HTML table)

Данные из Google Sheets часто отображают в виде HTML-таблицы. Для этого необходимо создать HTML-код таблицы и динамически заполнить его данными из Apps Script.

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody id="data-table-body">
  </tbody>
</table>

<script>
  google.script.run.withSuccessHandler(displayData).getData();

  function displayData(data) {
    const tableBody = document.getElementById('data-table-body');
    let html = '';
    data.forEach(row => {
      html += `<tr><td>${row[0]}</td><td>${row[1]}</td></tr>`;
    });
    tableBody.innerHTML = html;
  }
</script>

function getData() {
  const spreadsheetId = 'YOUR_SPREADSHEET_ID';
  const sheetName = 'Sheet1';
  const spreadsheet = getSpreadsheetById(spreadsheetId);
  const sheet = getSheetByName(spreadsheet, sheetName);
  return getDataFromRange(sheet, 'A1:B10');
}

Использование JavaScript для динамического обновления контента

JavaScript позволяет динамически обновлять контент веб-страницы без перезагрузки. Это можно использовать для отображения обновленных данных из Google Sheets в реальном времени.

Визуализация данных с помощью графиков и диаграмм (Chart.js, Google Charts)

Для визуализации данных можно использовать библиотеки графиков, такие как Chart.js или Google Charts. Эти библиотеки позволяют создавать различные типы графиков (столбчатые, круговые, линейные и т.д.) на основе данных из Google Sheets.

Отображение отфильтрованных данных на основе пользовательского ввода

Веб-приложение может отображать отфильтрованные данные на основе пользовательского ввода (например, по ключевому слову). Для этого необходимо получить пользовательский ввод, отфильтровать данные и обновить отображение.

Примеры различных вариантов отображения данных

  • Таблица с пагинацией: Отображение данных по страницам.
  • График с интерактивными элементами: Добавление возможности фильтрации данных непосредственно на графике.
  • Список с возможностью поиска: Предоставление пользователю возможности быстрого поиска по данным.

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

Настройка разрешений и авторизации

Перед развертыванием веб-приложения необходимо настроить разрешения и авторизацию. Это гарантирует, что только авторизованные пользователи смогут получить доступ к данным.

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

Развертывание веб-приложения выполняется через редактор Apps Script. Необходимо выбрать Развернуть > Новое развертывание, указать тип (веб-приложение), описание и выбрать, кто будет иметь доступ к приложению (только вы, все с аккауннтом Google, все). Важно отметить, что при изменении кода необходимо создавать новое развертывание.

Тестирование веб-приложения

После развертывания необходимо протестировать веб-приложение, чтобы убедиться, что оно работает корректно.

Публикация веб-приложения для пользователей

После тестирования веб-приложение можно опубликовать для пользователей. Для этого необходимо предоставить им ссылку на приложение.

Обновление и поддержка веб-приложения

После публикации необходимо регулярно обновлять и поддерживать веб-приложение, чтобы исправить ошибки и добавить новые функции.

Расширенные возможности и оптимизация

Использование кэширования для повышения производительности

Кэширование позволяет временно хранить данные, чтобы избежать повторного обращения к Google Sheets. Это может значительно повысить производительность веб-приложения.

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

Важно предусмотреть обработку ошибок и логирование, чтобы можно было легко диагностировать и исправлять проблемы.

Асинхронные вызовы и работа с таймерами

Асинхронные вызовы позволяют выполнять задачи в фоновом режиме, не блокируя пользовательский интерфейс. Таймеры можно использовать для периодического выполнения задач, таких как обновление данных.

Защита данных и предотвращение несанкционированного доступа

Необходимо принять меры для защиты данных и предотвращения несанкционированного доступа. Это может включать в себя использование авторизации, шифрование данных и ограничение доступа к Google Sheets.

Работа с большими объемами данных

При работе с большими объемами данных необходимо оптимизировать код, чтобы избежать превышения лимитов Apps Script. Это может включать в себя использование пакетной обработки данных и кэширование.

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

Создание панели мониторинга для отслеживания ключевых показателей

Веб-приложение можно использовать для создания панели мониторинга, отображающей ключевые показатели из Google Sheets. Например, для отслеживания эффективности рекламных кампаний в Google Ads.

Автоматизация отчетности и рассылки уведомлений

Apps Script можно использовать для автоматизации отчетности и рассылки уведомлений по электронной почте. Например, отправка ежедневного отчета по продажам.

Разработка системы управления задачами

Веб-приложение можно использовать для создания простой системы управления задачами, где задачи хранятся в Google Sheets.

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

Apps Script позволяет интегрировать Google Sheets с другими сервисами Google, такими как Calendar и Drive. Например, автоматическое создание событий в календаре на основе данных из Google Sheets.

Создание простого CRM

Можно создать упрощенную CRM систему, храня данные о клиентах и сделках в Google Sheets и используя веб-приложение для удобного интерфейса.

Заключение

Краткий обзор изученного материала

В этой статье мы рассмотрели, как создавать веб-приложения Apps Script для получения и отображения данных из Google Sheets. Мы изучили основы работы с Apps Script, HTML-сервисом и JavaScript, а также рассмотрели различные сценарии использования.

Рекомендации по дальнейшему изучению Apps Script

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

Полезные ресурсы и ссылки

Метки:

Добавить комментарий

Как узнать длину строки в Google Apps Script?
Что такое Google Apps Script и где он применяется Google Apps Script (GAS) — это облачная платформа разработки, позволяющая автоматизировать задачи и расширять функциональность Google Workspace, включая Google Sheets, Docs, Forms и другие приложения.
  •  0
  •   2025
Google Apps Script: Как удалить строку?
Обзор Google Apps Script и его возможностей Google Apps Script (GAS) — это облачная платформа разработки, позволяющая автоматизировать задачи и расширять функциональность Google Workspace, включая Google Sheets.
  •  12
  •   2025
Google Apps Script: Как добавить столбец в таблицу?
Введение в добавление столбцов в Google Таблицах с помощью Apps Script Что такое Google Apps Script и зачем он нужен для работы с таблицами? Google Apps Script — это облачный язык сценариев, который позволяет автоматизировать задачи в Google Workspace, включая Google Таблицы.
  •  13
  •   2025
Google Apps Script: Где найти примеры и руководство для новичков?
Введение в Google Apps Script для начинающих Что такое Google Apps Script и зачем он нужен? Google Apps Script (GAS) — это облачный язык сценариев, разработанный Google для автоматизации задач и расширения функциональности Google Workspace (ранее G Suite).
  •  16
  •   2025