Зачем использовать React и Apps Script вместе?
React предоставляет мощный и гибкий инструмент для создания интерактивных пользовательских интерфейсов, в то время как Apps Script позволяет автоматизировать задачи в Google Workspace, включая работу с Google Sheets. Совместное использование этих технологий позволяет создавать удобные формы для сбора данных и автоматически сохранять их в Google Sheets без необходимости написания сложного серверного кода. Это особенно полезно для задач, где требуется сложная логика валидации на стороне клиента или динамическое обновление интерфейса.
Обзор компонентов: React Front-end, Apps Script Back-end, Google Sheets
- React Front-end: Отвечает за отображение формы, обработку пользовательского ввода и отправку данных.
- Apps Script Back-end: Принимает данные от React, выполняет необходимую обработку (например, валидацию на сервере) и записывает данные в Google Sheets.
- Google Sheets: Служит хранилищем данных, полученных через форму.
Необходимые знания и инструменты
Для успешной реализации проекта потребуются:
- Базовые знания HTML, CSS и JavaScript.
- Понимание основ React (компоненты, props, state, hooks).
- Знакомство с Google Apps Script.
- Установленная Node.js и npm или yarn (для React).
- Текстовый редактор или IDE (например, VS Code).
Настройка Google Sheets и Apps Script
Создание новой Google Sheets таблицы
Создайте новую таблицу в Google Sheets. Укажите названия столбцов, которые будут соответствовать полям в вашей форме React. Например, ‘Имя’, ‘Email’, ‘Сообщение’.
Открытие Apps Script редактора и создание нового проекта
В Google Sheets выберите Инструменты > Редактор скриптов. Откроется редактор Apps Script, где можно написать код для обработки данных.
Написание Apps Script функции для приема данных
Напишите функцию Apps Script, которая будет принимать данные из POST запроса и добавлять их в таблицу Google Sheets. Вот пример:
/**
* @param {Object} e The event parameter for a doPost() or doGet() function.
*/
function doPost(e) {
try {
// Get the spreadsheet
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName("Лист1"); // Replace with your sheet name
// Get the data from the request
const data = JSON.parse(e.postData.contents);
// Append the data to the sheet
sheet.appendRow([data.name, data.email, data.message]);
// Return a success response
return ContentService
.createTextOutput(JSON.stringify({ "result": "success", "data": data }))
.setMimeType(ContentService.MimeType.JSON);
} catch (error) {
// Log the error
Logger.log(error);
// Return an error response
return ContentService
.createTextOutput(JSON.stringify({ "result": "error", "error": error }))
.setMimeType(ContentService.MimeType.JSON);
}
}Развертывание Apps Script как веб-приложения
- В редакторе Apps Script выберите Развернуть > Новое развертывание.
- Выберите тип развертывания Веб-приложение.
- В поле Кто имеет доступ выберите Все пользователи (или Все пользователи, у которых есть аккаунт Google, в зависимости от ваших потребностей).
- Нажмите Развернуть.
- Предоставьте необходимые разрешения.
- Скопируйте URL-адрес веб-приложения. Он понадобится вам для отправки данных из React.
Создание React формы
Настройка React проекта (Create React App или Vite)
Создайте новый React проект, используя Create React App или Vite. Например:
npx create-react-app my-form
cd my-form
npm startИли, используя Vite:
npm create vite my-form --template react
cd my-form
npm install
npm run devСоздание компонентов формы (поля ввода, кнопки)
Создайте компоненты для полей ввода (имя, email, сообщение) и кнопки отправки. Используйте useState hook для управления состоянием формы.
import React, { useState } from 'react';
function MyForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
// ...
return (
<form>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" />
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
<textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Сообщение" />
<button type="submit">Отправить</button>
</form>
);
}
export default MyForm;Обработка отправки формы и отправка данных в Apps Script
Создайте функцию, которая будет обрабатывать отправку формы. Используйте fetch или axios для отправки POST запроса с данными формы в Apps Script.
import React, { useState } from 'react';
function MyForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [statusMessage, setStatusMessage] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch('<YOUR_APPS_SCRIPT_URL>', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, message }),
});
const data = await response.json();
if (data.result === 'success') {
setStatusMessage('Сообщение успешно отправлено!');
setName('');
setEmail('');
setMessage('');
} else {
setStatusMessage(`Ошибка: ${data.error}`);
}
} catch (error) {
setStatusMessage(`Произошла ошибка при отправке: ${error}`);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" required/>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" required/>
<textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Сообщение" required/>
<button type="submit">Отправить</button>
<p>{statusMessage}</p>
</form>
);
}
export default MyForm;Замените <YOUR_APPS_SCRIPT_URL> на URL-адрес вашего веб-приложения Apps Script.
Валидация формы (опционально)
Реализуйте валидацию формы на стороне клиента, чтобы убедиться, что данные введены правильно перед отправкой на сервер. Это можно сделать с помощью встроенных средств HTML5 или сторонних библиотек, таких как Formik или Yup.
Интеграция React и Apps Script
Использование Fetch API или Axios для отправки POST запросов
В примере выше использовался Fetch API. Axios – это еще одна популярная библиотека для выполнения HTTP-запросов. Для использования Axios, сначала установите ее:
npm install axiosЗатем замените fetch на axios в коде компонента:
import axios from 'axios';
//...
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('<YOUR_APPS_SCRIPT_URL>', { name, email, message });
if (response.data.result === 'success') {
setStatusMessage('Сообщение успешно отправлено!');
setName('');
setEmail('');
setMessage('');
} else {
setStatusMessage(`Ошибка: ${response.data.error}`);
}
} catch (error) {
setStatusMessage(`Произошла ошибка при отправке: ${error}`);
}
};
//...Настройка CORS в Apps Script (при необходимости)
Если вы столкнулись с ошибками CORS, добавьте заголовок Access-Control-Allow-Origin в ответ Apps Script. Однако будьте осторожны, открывая доступ для всех (*). В идеале, следует ограничить доступ только к вашему домену.
function doPost(e) {
//...
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "data": data}))
.setMimeType(ContentService.MimeType.JSON)
.setHttpOnly(false)
.addHeader('Access-Control-Allow-Origin', '*');
}Обработка ответов от Apps Script в React
В React коде обрабатывайте ответ от Apps Script, чтобы отобразить сообщение об успехе или ошибке. Проверьте поле result в JSON ответе.
Отображение сообщений об успехе или ошибке
Используйте состояние компонента для отображения сообщений об успехе или ошибке в пользовательском интерфейсе.
Тестирование и отладка
Тестирование React формы локально
Запустите React приложение локально (npm start или npm run dev) и протестируйте форму. Убедитесь, что все поля работают правильно и данные отправляются.
Отладка Apps Script (логирование)
Используйте Logger.log() в Apps Script для записи информации в журнал. Журнал можно просмотреть в редакторе Apps Script ( Выполнить > Журналы).
Проверка данных в Google Sheets
После отправки формы убедитесь, что данные успешно записались в таблицу Google Sheets.
Устранение распространенных ошибок и проблем
- CORS ошибки: Убедитесь, что CORS настроен правильно в Apps Script.
- Ошибки авторизации: Предоставьте необходимые разрешения для Apps Script.
- Неправильный URL: Убедитесь, что URL-адрес Apps Script указан правильно в React коде.
- Неправильный формат данных: Убедитесь, что данные отправляются в формате JSON и соответствуют ожидаемому формату в Apps Script.