Web-разработка

Как в два счета сделать сайт редактируемым извне с помощью данных Google Sheets

07.03.2021

Как-то раз заказчики спросили меня, можно ли сделать так, чтобы события и ярмарки на их сайте мгновенно обновлялись. Сегодня я могу сказать: «Да, и все будет интегрировано с деловой документацией в Google Spreadsheets».

Цель этого руководства — показать, как сделать некоторые части сайта легко редактируемыми вашими технически не подкованными коллегами или клиентами. Готовы? Поехали!

Приступим

Первым делом нужно… создать Google таблицу! В ней должна быть одна строка заголовка (текстовое содержимое ее потом будет использоваться для визуализации данных) и строки с данными. Используем любой формат ячеек (текст, цифры, даты, валюты, выпадающие списки, флажки и т. д.). Подойдут даже URL-адреса (ссылки или фото), которые будут отображаться в HTML. Вот пример:

После этого жмем на кнопку Share («Поделиться») и в разделе Get link («Получить ссылку») нажимаем на Change to anyone with the link («Изменить на всех, у кого есть ссылка»), чтобы включить открытый доступ для чтения к таблице. Затем копируем ссылку на таблицу.

Добавим websheet.js к сайту

Для отображения данных таблицы на сайте будем использовать автономную и легковесную библиотеку JS с открытым исходным кодом websheet.js. Ее нужно просто импортировать:

<!-- Импортируем websheet.js -->
<script src="//cdn.jsdelivr.net/gh/pierreavn/websheetjs/dist/websheet.min.js"></script>

<!-- Конфигурация Websheet.js -->
<script>
  websheet('products', {  // <-- имя источника данных

    // URL-адрес таблицы
    url: 'https://docs.google.com/spreadsheets/d/1enj8u4b7WA4Itrw8u5YEzt8MzwtRD1GkJNSWkl9GMK0/edit#gid=0',

    // Название вкладки таблицы, в которой находятся данные
    sheet: 'Products',
    
    // Определяем вновь вычисляемые столбцы на основе имеющихся.
    // В приведенном ниже примере псевдоним столбца Bread? true для
    // всех строк, в которых значение столбца Category («Категория») равно Breads («Хлеб»)
    // (row — это объект, содержащий все данные текущей строки).
    aliases: {
        // 'Bread?': row => row['Category'].value === 'Breads',
    }

  })
</script>

После импортирования websheet.js задействуем инициализатор websheet, который принимает два параметра:

Первый(products) — это имя источника данных. Если вызывать инициализатор websheet неоднократно, то для каждой таблицы надо будет использовать разные имена источников данных.
Второй параметр — это конфигурация источника данных (замените значения url и sheet своими).

Мы задействовали самый полезный функционал библиотеки. Есть здесь также и много другого, например кэширование, колбэки, запросы (для фильтрации, сортировки и группировки строк) и т. д. Загляните в документацию: там все это приводится.

Визуализируем данные таблицы

Заключительный этап — визуализация данных таблицы, которые мы только что загрузили! Добавляем визуализацию источников данных в любом месте страницы сайта:

<!-- Этот блок будет дублироваться для каждой строки источника данных products («Продукты») -->
<div data-websheet="products">

    <!-- Отображается только в том случае, если флажок True.
         В рассмотренном ранее примере с псевдонимами
         используется <div data-websheet-if="Bread?"> -->
    <div data-websheet-if="Display ?">

        <!-- Отображается значение столбца Product («Продукт») -->
        <div data-websheet-text="Product"></div>

        <!-- Значение столбца Picture («Изображение») привязывается к атрибуту src -->
        <img data-websheet-bind:src="Picture" />

    </div>

</div>

В этом примере было использовано несколько средств форматирования:

data-websheet="<dataSourceName>"Определяет блок, который будет дублироваться и визуализироваться для каждой строки источника данных.
data-websheet-if="<columnName>"
Отображает элемент только в том случае, если ячейка содержит отмеченный флажок или если это псевдоним, возвращающий true (противоположный эффект будет с data-websheet-unless).
data-websheet-text="<columnName>"
Заполняет текст элемента значением ячейки.
data-websheet-bind:<attributeName>="<columnName>"
Заполняет значение данного атрибута значением ячейки, например:
<img data-websheet-bind:src="Picture Column" /> <a data-websheet-bind:href="Link" data-websheet-bind:text="Link Text"></a>

После загрузки websheet.js блок будет дублироваться и визуализироваться для каждой строки таблицы:

<div>
  <div>
    <div> Baguette </div>
    <img src="https://www.boulangerielangelus.com/wp-content/uploads/2015/09/BAGUETTE-CAMPAGNE_ss-ombres-1024x683.png" />
  </div>
</div>
<div>
  <div>
    <div> Olive Bread </div>
    <img src="https://www.boulangerielangelus.com/wp-content/uploads/2015/08/CAMUSETTE-OLIVES-01-1-1024x683.png" />
  </div>
</div>...

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

Заключение

Нам удалось в два счета сделать сайт редактируемым извне: любое изменение в таблице сразу же отображается на сайте. Красота! 🎉

Весь пример/демоверсия вместе с задействованным функционалом доступен здесь (это меню пекарни). Попробуйте сделать из этого что-то свое, используя рассмотренный функционал и добавляя новый.