Хабрахабр

«CMS» на базе Google Spreadsheets для статических сайтов

Либо своими силами, либо привлекая дизайнеров и без участия программиста. Все чаще для рассказа о мероприятии/товаре/услуге компании создают сайты на базе каких либо конструкторов. Любые изменения нужно вносить «ручками в редакторе» и перепубликовать страницу. Современные конструкторы позволяют собрать классный, яркий, эффектный сайт, но статичный. И все бы ничего, есть блок «таблица» — забивай данные и публикуй, но были два условия: Но что делать, если данные меняются очень часто или хочется добавить немного автоматизации — вот тут и могут помочь Гугл Таблицы и Charts Query Language (и знакомы программист).
Несколько лет назад ко мне обратился один приятель которому потребовалось на сайте собранном на Тильде добавить прайс лист.

  • цены зависили от курса доллара и менялись почти каждый день
  • нужен был общий прайс и его части на страницах групп товаров

Соответственно куча рутины и высокая вероятность расхождения данных. Нужно было автоматизировать.

Думаю нет смысла описывать плюсы: привычный редактор, совместная работа, формулы. И помощь пришла со стороны Google Speadsheets. Оставался только вопрос как получить данные из таблицы на сайте. Все что нужно это менять один раз в день курс валюты. А тут пригодился API Google Charts.
Он позволяет при помощи ajax запроса получить данные в виде jsonp.

Запрос нужно отправлять по адресу «docs.google.com/a/google.com/spreadsheets/d/xxxxxx/gviz/tq?tq=yyyyyy»
где:
xxxxxx — идентификатор из общедоступной ссылки на гугл таблицу
yyyyyy — SQL-запрос для получения данных из таблицы преобразованный (не забудьте преобразовать все символы в HTML entities типа: select%20A%2C%20sum(B)%20group%20by%20A).

документацию), но из него полностью вырезан блок FROM. Еще одно замечание, SQL вполне привычный разве что урезанный (см. Так что нужно писать что-то типа «select A, B where C='f' and B<30 order by B»

Query.setResponse(data).
Объект data содержит следующие полезные данные: Полученный в ответ скрипт вызовет метод google.visualization.

, 1: { id: "B", label: "Заголовок столбца B", type: "number" }, ... ], rows: [ //массив по количеству строк 0: { c: [ //массив по количеству столбцов с данными 0: { v: "Строка" // для строки только одно поле } 1: { v: 3.1415, // для числа и прочих кроме "сырого" значения f: "3,1415" // есть еще и форматированное } ] } ] }
}

Ну, а дальше делайте с данными что хотите: хоть вставляйте в таблицу, хоть генерируйте svg (использовал для генерации карты на схеме загородного поселка отмечая свободные и проданые), хоть заменяйте плейсхолдеры в тексте — полет фантазии безграничный.

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

Таблица к которой делаются запросы должна быть расшарена по ссылке. И маленькая подсказка на последок. Называется она IMPORTRANGE(ключ., диапазон). А если вдруг будут нужны поля скрытые от общих глаз, то для этого есть удобная функция в Google Таблицы. Т.е. В качестве ключа выступает ссылка на любую таблицу к которой у вас есть доступ, а диапазон это группа ячеек которые нужно показать. вы делаете закрытую таблицу с полным набором данных и публичную таблицу в которую импортируете только нужные диапазоны данных (вы же их все равно собрались показывать на сайте).

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть