24.11.2017 08:09
dkomarovskiy 12 9900 Источник


Привет!

Для тех, кто пользуется 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-специалистов».
Пройдите бесплатный вводный урок и получите комплексную обратную связь по своему уровню знаний, затем выбирайте преподавателя и программу обучения себе по душе!

Комментарии (12)


  1. mickvav
    24.11.2017 12:20
    #10536168

    А гугл денег не захочет за активное общение с таким приложением?


    1. dkomarovskiy Автор
      24.11.2017 12:47
      #10536220

      У всего есть свои лимиты: docs.google.com/macros/dashboard
      При большой нагрузке, видимо, лучше прогонять это через бекенд и кешировать каким-то образом на стороне вашего сервера.


      1. pm_wanderer
        24.11.2017 22:56
        #10537158

        А на какую циферку смотреть там надо?


      1. XLOR
        25.11.2017 06:12
        #10537334

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


  1. s493599
    24.11.2017 13:18
    #10536278

    Спасибо за статью. Полезная, однако, штука.
    Особенно для мелких лендингов, сайтов мероприятий и прочего.
    Сайт можно сделать по сути дела только на фронтэнде.


    1. dkomarovskiy Автор
      24.11.2017 15:52
      #10536518

      Да, бережем ресурсы разработчиков. :)


    1. MasMaX
      24.11.2017 16:18
      #10536548

      Да и экономия на базе данных :-)


  1. Elmot
    24.11.2017 15:06
    #10536444

    Моя вариация на тему. С блэ гуглокартами, гридами и веб-компонентами
    github.com/elmot/turku
    elmot.xyz/turku


  1. elkrieg
    24.11.2017 15:46
    #10536498

    А я как-то делал мелкий лендинг с хостингом на гитхабе и фидбек формой через google forms с сохранением результатов в гугл таблицу + отправку емейла через плагин к формам. Если интересно, могу описать в деталях, но с практической точки зрения — совершенно бесполезные кульбиты, лучше, действительно, делать всё на стороне хоста.


    1. dkomarovskiy Автор
      24.11.2017 15:48
      #10536502

      Отправку имейлов через Google Scripts тоже пробовали.
      Но как инструмент — не годится, всего 100 писем в день.


  1. eavprog
    24.11.2017 17:29
    #10536650

    обнаружил эту халяву много лет назад. сначала не поверил, но разобравшись… кстати там есть много вкусного — можно запускать кроны. а среда разработки вообще выше всех похвал. свой проект www.abscur.ru делал весь именно таким образом. одного там только нет — это нормальной базы данных.


  1. Denai
    24.11.2017 21:46
    #10537088

    А зачем макрос городить, если можно просто Файл>Опутбликовать в интернете>выбрать формат?