Создание посадочной страницы с помощью Sinatra, Google Таблиц и Ruby

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

Можно использовать Google Форму, но тогда страница будет выглядеть как Google Форма. Как я показал в предыдущем посте, использование API Google Таблиц с Ruby — это просто и удобно. Поэтому вот как можно создать собственную посадочную страницу с помощью API Google Таблиц и Ruby.

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

*Если вы следовали предыдущему посту, не забудьте предоставить доступ на редактирование сервисному аккаунту для новой таблицы. Откройте таблицу, нажмите «Поделиться» в правом верхнем углу и вставьте адрес электронной почты из файла `client_secret.json*.*

Я создал шаблонный проект с несколькими файлами представлений, чтобы начать работу в этом посте. Клонируйте или скачайте шаблон сейчас.

Возьмите свои учётные данные Google и добавьте их в папку приложения, убедившись, что файл называется `client_secret.json`.

В шаблоне есть `Gemfile` с двумя зависимостями, которые нам нужны для этого проекта: sinatra и google_drive. Установите гемы с помощью:

Теперь мы можем начать создавать наше приложение.

Создайте файл `app.rb` и откройте его в любимом текстовом редакторе. Сначала нужно подключить зависимости. Bundler может сделать это за нас:

Теперь нам нужна главная страница, которая будет отображаться при переходе на корневой путь. Я включил макет и представление в папку `views`. Чтобы отобразить страницу, просто добавьте:

Сохраните файл и запустите приложение, чтобы убедиться, что всё идёт по плану.

Если вы видите посадочную страницу для нового модного приложения, значит, всё работает как ожидалось.

Как видите, на странице есть форма. Это форма, которую мы будем использовать для сбора данных пользователей и заполнения нашей таблицы. В данном случае мы запрашиваем имя, электронную почту и номер телефона. Мы можем держать пользователей в курсе по электронной почте по мере завершения приложения и отправлять им SMS с ссылкой для установки нового приложения, когда оно будет готово.

Форма настроена на отправку данных методом POST на корневой путь. Давайте создадим этот эндпоинт.

Нам нужно создать маршрут, который будет принимать параметры из POST-запроса, отправленного формой, и передавать их в API Google Таблиц. Начнём с написания вспомогательного метода, который предоставит доступ к листу, в который мы хотим сохранять данные.

Метод должен начать новую сессию с API Таблиц, открыть таблицу, в которую мы хотим сохранять данные, и выбрать первый лист. Мы сделаем так, чтобы объекты сохранялись как переменные экземпляра, чтобы не проходить этот процесс каждый раз.

Я назвал свою таблицу «Таблица для нового модного приложения». Убедитесь, что вы указали название своей таблицы.

Теперь напишем эндпоинт. Мы будем добавлять данные в последнюю строку `worksheet` плюс одну строку, чтобы всегда добавлять данные в таблицу.

Мы берём входящие параметры и превращаем их в массив, который будет представлять строку. Имена берутся из атрибута `name` соответствующих полей в представлении. Обратите внимание, как мы используем соответствующие типы ввода для каждого поля: `text` для имени, `email` для электронной почты и `tel` для номера телефона. Недавно Доминик показал, насколько полезны эти поля для валидации, а также для отображения правильной клавиатуры на мобильных устройствах.

Мы используем `worksheet.insert_rows` для вставки новой строки в таблицу, сохраняем лист и отображаем страницу с благодарностью.

Работу с API мы выполняем внутри блока `begin … rescue … end`, чтобы перехватывать любые ошибки API и возвращать пользователя на главную страницу.

Сохраните файл и перезапустите сервер. Перейдите на http://localhost:4567/ и введите свои данные. Нажмите «Отправить» и посмотрите, как они появятся в вашей таблице.

Теперь вы узнали, как использовать Sinatra для получения параметров из HTML-формы и сохранения их в Google Таблице. Вы можете создать собственный дизайн посадочной страницы и легко сделать данные доступными для нетехнических пользователей. Посмотрите весь код из этого поста в ветке save-data репозитория GitHub.

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

Возможно, вы заметите, что у этого приложения есть недостаток. Пользователи могут вводить любые или никакие данные, и приложение примет их. Вы можете улучшить это приложение, добавив валидацию объектов Ruby с помощью Active Model Validations.

Дайте знать, если вы создали что-то интересное с помощью Google Таблиц и Ruby. Связаться со мной можно по адресу philnash@twilio.com или в Twitter @philnash.