Мені часто доводиться розробляти лендінги з можливістю збору даних користувачів, які зацікавлені в додатку. Зазвичай це ім'я, мейл та телефон, щоб повідомити користувача коли додаток буде готовий.
Ви можете використовувати Google Forms, але це виглядає так собі. Тут нам на допомогу приходить Google Spreadsheet API та Ruby.
Початок роботи
Перш за все, вам потрібно створити таблицю, в якій ми будемо зберігати дані. Також вам потрібно створити сервісний акаунт, якому ви надасте доступ до створеної таблиці. Як це зробити я вже описував в цьому пості. Не забудьте надати вашому новому акаунту доступ до редагування таблиці.
Я створив невеличку заготовку щоб ви могли відразу почати кодити. Клонуйте або завантажте її.
git clone https://github.com/philnash/ruby-google-sheets-sinatra.git
cd ruby-google-sheets-sinatra
Завантажте дані вашого додатку і скопіюйте в директорію з додатком, впевніться, що файл називається client_secret.json
.
Також я включив в проект файл Gemfile
з двома залежностями: sinatra та google_drive, інсталюємо їх:
bundle install
Тепер створимо застосунок.
Створення додатку з Sinatra
Створіть файл app.rb
і відкрийте в улюбленому текстовому редакторі. Перш за все, нам потрібно під'єднати наші залежності. На щастя, Bundler може зробити це за нас:
require("bundler")
Bundler.require
Тепер потрібно налаштувати віддачу головної сторінки при запиті сайту. Я вже додав макет та файл з відображенням в директорію views
, тому для рендеринга потрібно додати лише трішки коду:
require("bundler")
Bundler.require
get "/" do
erb :index
end
Збережіть файл та запустіть наш додаток:
bundle exec ruby app.rb
Якщо все зроблено правильно, то при переході на http://localhost:4567/ побачимо головну сторінку:
Як бачите, на сторінці є форма, через яку ми будемо збирати дані користувачів і наповнювати ними нашу таблицю. Ми запитуємо ім'я, мейл та номер телефону щоб користувач вчасно отримував новини. Форма налаштована так, що відправляє POST-запит на головну сторінку. Створимо обробник для нього.
Збереження даних
Почнімо з написання допоміжної функції, що надаватиме нам таблицю, яку потрібно заповнювати.
Функція повинна розпочинати нову сесію роботи з Spreadsheet API, відкрити потрібний файл та вибрати перший робочий лист. Ми напишемо цю функцію так, що ці дані будуть зберігатися глобально, тому нам не потрібно буде робити це кожен раз.
def worksheet
@session ||= GoogleDrive::Session.from_service_account_key("client_secret.json")
@spreadsheet ||= @session.spreadsheet_by_title("Fancy new app spreadsheet")
@worksheet ||= @spreadsheet.worksheets.first
end
Не забудьте змінити ім'я таблиці на потрібне вам. Тепер нам потрібно створити обробник форми, який і буде записувати дані:
post "/" do
new_row = [params["name"], params["email"], params["phone_number"]]
begin
worksheet.insert_rows(worksheet.num_rows + 1, [new_row])
worksheet.save
erb :thanks
rescue
erb :index, locals: {
error_message: "Помилка при зберіганні. Спробуйте ще раз."
}
end
end
Ми приймаємо дані з форми та формуємо масив, що буде відповідати новому рядку в нашій таблиці. Імена цих даних відповідають атрибуту name
тега input
. Ми використовуємо метод worksheet.insert_rows
щоб додати рядок до таблиці, зберігаємо зміни й показуємо користувачу сторінку з подякою.
Всі операції ми виконуємо в блоці begin … rescue … end
, тому при будь-якій помилці ми просто показуємо користувачу домашню сторінку з помилкою.
Збережіть файл та перезапустіть сервер. Відкрийте http://localhost:4567/ і заповніть дані. При надсиланні форми ви можете побачити, як дані з'являються в таблиці.
Підсумок
Тепер ви знаєте як обробляти дані форми за допомогою Sinatra. Ви можете змінити макет на власний, а завдяки використанню Google Spreadsheet дані будуть легко доступні вашим колегам, що не так добре розуміються в технологіях. Результат нашої роботи ви можете знайти в гілці save-data репозиторія на GitHub.
Ще немає коментарів