Данные из Google Таблиц на вашем сайте

  • Tutorial


Привет!

Для тех, кто пользуется Google Таблицами, есть хорошая новость — ниже описано решение, которое позволит импортировать данные из таблицы на ваш сайт.

Поехали.

1. Открываем Таблицу Google


Для примера, я возьму таблицу, в которую падают результаты из Google Формы.



2. Открываем меню Tools — Script Editor…




3. Добавляем скрипт


var ss = SpreadsheetApp.getActiveSpreadsheet(), // spreadsheet
      s = ss.getActiveSheet(); // sheet

function getData(){
  var result = [],
      range = 'A:E', // диапазон ячеек, который хотим выгружать
      values = s.getRange(range).getValues(),
      last_row = parseInt(s.getLastRow());
    
  for (var i = 1; i < last_row; i++) {
      result.push(values[i]);     
  }
  return result; 
}


function doGet() {
  var data = getData();
  if(!data) {
    data = '';
  }
  return ContentService.createTextOutput(
    JSON.stringify({'result': data})).setMimeType(ContentService.MimeType.JSON);
}

При необходимости переопределите переменную “range”.

Если вы захотите доработать скрипт, ссылки на документацию:


4. Публикация как Web Application


Открываем меню Publish — Deploy as web app…

Вводим название новой версии проекта (например 1).
Меняем значение для “Who has access to the app” на “Anyone, even anonymous
Нажимаем “Deploy”.



При первом деплое, нужно пройти процесс авторизации. Описывать не буду, покажу скриншотами.

Скриншоты








Далее вам будет показан попап с ссылкой на ваш web app:



Вам нужно скопировать эту ссылку.

Можете сразу открыть её в браузере. Приложение должно вернуть содержание выбранного диапазона таблицы в формате JSON:



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

Пример работы на фронтенде


Ссылка на l.englishdom.com/google-s.html
Для простоты восприятия скрипта, я не стал делать дополнительное оформление выводимой информации.

На странице используются:

JS
(function () {
   var app = "https://script.google.com/macros/s/AKfycbzngb-5a3tDdHJ445o5LxqeN63V_ihhF_Nxlkz3gxLyMeG3MA/exec",
      output = '',
      xhr = new XMLHttpRequest();
   xhr.open('GET', app);
   xhr.onreadystatechange = function() {
     if (xhr.readyState !== 4) return;

     if (xhr.status == 200) {
        try {
            var r = JSON.parse(xhr.responseText),
               result = r["result"];
            for (var i = 0; i < result.length; i++){
                  var obj = r["result"][i];
                  output += obj.join("<br/>") + "<br/><hr/>";
            }
        } catch(e) {}
     } 
     
   document.getElementById('info').innerHTML = output;

   }
   xhr.send()
})()



HTML
 <div id="info"></div>

Успехов!

Бонусы для читателей




Мы дарим бесплатный доступ на три месяца изучения английского с помощью наших онлайн-курсов. Для этого просто перейдите по ссылке до 31 декабря 2017 года.



Будем рады видеть вас на индивидуальных занятиях курса «Английский для IT-специалистов».
Пройдите бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!
Онлайн школа EnglishDom 215,39
Лидер в онлайн образовании
Поделиться публикацией
Похожие публикации
Комментарии 14
  • 0
    А гугл денег не захочет за активное общение с таким приложением?
    • 0
      У всего есть свои лимиты: docs.google.com/macros/dashboard
      При большой нагрузке, видимо, лучше прогонять это через бекенд и кешировать каким-то образом на стороне вашего сервера.
      • +1
        А на какую циферку смотреть там надо?
        • 0

          Все верно пишите. Тоже пару раз утыкался в суточные лимиты. Причем один раз так сильно, чтобы я не делал скрипт не работал, просто не получал данные со страницы. Пришлось завести новую табличку и перенести туда данные и скрипт, все чудесным образом заработало. Теперь без кэширования на стороне сервера вообще не лезу туда.

      • 0
        Спасибо за статью. Полезная, однако, штука.
        Особенно для мелких лендингов, сайтов мероприятий и прочего.
        Сайт можно сделать по сути дела только на фронтэнде.
        • 0
          Да, бережем ресурсы разработчиков. :)
          • 0
            Да и экономия на базе данных :-)
          • +1
            Моя вариация на тему. С блэ гуглокартами, гридами и веб-компонентами
            github.com/elmot/turku
            elmot.xyz/turku
            • 0
              А я как-то делал мелкий лендинг с хостингом на гитхабе и фидбек формой через google forms с сохранением результатов в гугл таблицу + отправку емейла через плагин к формам. Если интересно, могу описать в деталях, но с практической точки зрения — совершенно бесполезные кульбиты, лучше, действительно, делать всё на стороне хоста.
              • 0
                Отправку имейлов через Google Scripts тоже пробовали.
                Но как инструмент — не годится, всего 100 писем в день.
              • 0
                обнаружил эту халяву много лет назад. сначала не поверил, но разобравшись… кстати там есть много вкусного — можно запускать кроны. а среда разработки вообще выше всех похвал. свой проект www.abscur.ru делал весь именно таким образом. одного там только нет — это нормальной базы данных.
                • +3
                  А зачем макрос городить, если можно просто Файл→Опутбликовать в интернете→выбрать формат?
                  • 0
                    Как вариант, для некоторых случаев, но нет гибкости:
                    — Получать придётся лист целиком, в статье написано как можно произвольный диапазон выбрать.
                    — нет возможности получить сразу json, придётся csv конвертировать.
                  • 0
                    Надо будет попробовать

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

                    Самое читаемое