Створюємо лендінг з використанням Google Spreadsheets, Sinatra та Ruby

4 хв. читання

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

Ви можете використовувати 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/ побачимо головну сторінку:

Створюємо лендінг з використанням Google Spreadsheets, Sinatra та Ruby

Як бачите, на сторінці є форма, через яку ми будемо збирати дані користувачів і наповнювати ними нашу таблицю. Ми запитуємо ім'я, мейл та номер телефону щоб користувач вчасно отримував новини. Форма налаштована так, що відправляє 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/ і заповніть дані. При надсиланні форми ви можете побачити, як дані з'являються в таблиці.

Створюємо лендінг з використанням Google Spreadsheets, Sinatra та Ruby

Підсумок

Тепер ви знаєте як обробляти дані форми за допомогою Sinatra. Ви можете змінити макет на власний, а завдяки використанню Google Spreadsheet дані будуть легко доступні вашим колегам, що не так добре розуміються в технологіях. Результат нашої роботи ви можете знайти в гілці save-data репозиторія на GitHub.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація