Многие организации проводят виртуальные мероприятия. Возможно, наша организация хочет, чтобы члены команды участвовали в обучающем мероприятии. Наше мероприятие ограничено до 10 мест. В нашей команде 20 человек. Поможем администрировать регистрацию на мероприятие.
Наши цели:
- Предоставьте веб-форму регистрации.
- Ограничьте регистрацию до первых 10 регистраций.
Наш набор инструментов:
- Google Sheet: отслеживайте количество регистраций.
- Сценарий Google App: логика на стороне сервера для передачи количества регистраций на сторону клиента приложения.
- Форма регистрации HTML: отправляет новые регистрации обратно на сервер приложения.
- Alpine.js: упрощенная структура JavaScript, помогающая нашей форме регистрации отображать динамический контент.
- Сайты Google: размещает нашу регистрационную форму.
- Секрет соуса: все инструменты Google бесплатны ❗️ Сервер не настраивается! База данных не требуется!
Эта статья предназначена для того, чтобы показать, как можно использовать Google App Script для достижения целей этого примера. Это не учебник по html, javascript, фреймворкам или CSS. Все еще заинтересован ?…..
ДАВАЙТЕ НАЧНЕМ
Создайте таблицу Google под названием «Регистрация события». В этой электронной таблице будет один лист с названием «Зарегистрироваться». В ячейке A1 будет заголовок с текстом «Имя». Давайте добавим одно имя (мне нравится Маркус) для проверки в ячейке A2.
Готовы выполнять некоторые серверные функции?
Выберите «Расширения» в строке меню электронной таблицы и выберите «Скрипт приложений», чтобы открыть редактор. Назовите сценарий приложения «Регистрация события».
Мы напишем наш код в файле Code.gs.
Давайте создадим функцию с именем «getCount», которая возвращает текущее количество регистраций для обучающего мероприятия.
Далее мы добавим HTML-файл в наш скрипт приложений. Назовем его index.html.
Вернемся к файлу Code.gs. Google предоставляет нам HTMLService для обслуживания веб-страниц. Мы создадим шаблон из нашего файла index.html. Параметр шаблона полезен, потому что он позволяет нам передавать возвращаемое значение нашей функции getCount на сторону клиента при загрузке страницы index.html.
Эта функция должна называться doGet.
Давайте запустим функцию doGet. Это должно вызвать экран авторизации для запуска скрипта Google Apps. Дайте приложению разрешение на запуск.
Время развертывания. Мы собираемся выполнить первоначальное развертывание нашего скрипта приложения как веб-приложения. Это хорошее время для начального развертывания, поскольку оно предоставит URL-адрес, чтобы мы могли просмотреть наш файл index.html.
После развертывания сценария приложения вернитесь к раскрывающемуся списку «Развертывание» и выберите «Проверить развертывание». Скопируйте URL-адрес и вставьте в новую вкладку браузера.
Обратите внимание, что URL-адрес должен заканчиваться на «/dev».
Следующий шаг: создайте нашу регистрационную форму
Перейдите к нашей очень простой форме регистрации. Сейчас мы работаем над клиентской частью нашего решения. Начнем с html. Я использую Skeleton CSS для небольшого форматирования. Вы можете добавить ссылку CDN в раздел ‹head› файла index.html, если хотите использовать Skelton CSS.
Мы начнем с предоставления нашей форме регистрации поля ввода для получения имени регистранта и кнопки для отправки формы.
Виола, html форма.
Пришло время добавить немного функциональности в эту форму. Мы уже настроили функцию doGet, которая возвращает текущее количество регистраций. Мы можем получить доступ к этому номеру в нашем файле index.html с помощью специального тега, называемого скриптлетом. Скрипт будет помещен в раздел «скрипт» файла index.html.
Мы настроим директиву x-data Alpine.js для хранения некоторого контента, который будет отображаться в нашей форме регистрации. x-data также будет включать функцию JavaScript, которая выполняется при нажатии кнопки «Регистрация». Добавьте CDN для Alpine.js в раздел ‹head›.
В нашей директиве x-data есть функция с именем submit. Вот как мы передадим новое имя регистрации обратно в нашу таблицу Google. Строка 10 (выше) включает «google.scipt.run», асинхронный API JavaScript на стороне клиента, который вызывает скрипт приложений на стороне сервера. Мы вызываем функцию addRow. Вернемся к файлу Code.gs и добавим функцию addRow.
Функция addRow возьмет имя, введенное в нашу регистрационную форму, и добавит это значение в нашу таблицу Google. В следующий раз, когда index.html загрузится, у него будет новое количество регистраций. Довольно круто!
Вот остальная часть файла index.html. Мы используем Alpine.js (наши x-данные {}) для управления тем, что пользователь видит в форме регистрации (он же index.html).
Мы хотим показать количество оставшихся мест, поле ввода и кнопку отправки, если оставшиеся места существуют.
Мы также хотим сообщить им, если регистрация заполнена. Alpine.js помогает нам удалить поле ввода и кнопку отправки, если регистрация заполнена.
Подтвердим успешную регистрацию. Поле ввода и кнопка отправки будут удалены. Появится заявление со значением, которое было введено в текстовое поле.
Разместить форму
Давайте сделаем так, чтобы это было легко поделиться с нашей командой. Мы можем встроить наш скрипт приложений в сайты Google (sites.google.com). Обязательно вернитесь к скрипту приложений и выполните новое развертывание. Скопируйте URL-адрес веб-приложения (примечание: заканчивается на /exec). Создайте новый сайт на site.google.com и вставьте URL-адрес, который мы только что скопировали после развертывания нашего веб-приложения Apps Script.
Нажмите кнопку «Опубликовать» в правом верхнем углу редактора Google Sites и поделитесь нашим новым URL-адресом (в формате sites.google.com/[ваш идентификатор]/[имя приложения]), если вы не хотите использовать личный домен.
Возможные улучшения:
✅ Захват адресов электронной почты пользователей
✅ Отправляйте электронные письма с информацией о мероприятии после регистрации (с помощью Apps Script!)
