Самое время перейти к чему-то более интересному. Давайте разберемся, как подготавливать и отдавать данные из таблицы, используя Google Apps Script. Соберем небольшой веб интерфейс, через который можно будет посмотреть содержимое гугл-таблицы не давая к ней доступ.
Все уроки цикла легко найти используя хештэг: #уроки google apps script spreadsheet
или в моем блоге: Блог Программиста
HTML-шаблон в Google Sheets
В прошлой статье, когда мы учились получать данные и сохранять их в таблице, упоминал HTML-файлы в проектах. Сделаем простой пример. Да-да, вляпаемся в «Hello World!».
Жмем плюсик в окне файлов и выбираем «HTML». Название придумываем любое, у меня банальный «index.html». Переходим в файл и видим стандартный HTML. Впишем заголовок и, пока, заканчиваем с HTML. Возвращаемся в файл со скриптами.
Вывод HTML
Следующим шагом, нужно организовать вывод. Так как у нас будет веб-интерфейс, нужно обработать GET-запрос. В Google Apps Script это делается при помощи функции doGet(). После развертывания веб-приложения, именно она обработает запрос от браузера и вернет ответ.
Для того, чтобы вывести правильный ответ, воспользуемся объектом HtmlService. Если быть точным, то методом объекта createHtmlOutputFromFile. Метод принимает название файла, который нужно вывести в виде HTML. К другим вариантам ответа, например, к JSON, вернемся в следующих статьях. Такой вид примет функция вывода:
Почти все готово, осталось только развернуть проект. Важный момент в том, что при каждом изменении, касающемся работы с функциями doGet и doPost, каждый раз требуется развертывание. В последующих статьях, разберм как это исправить. Сейчас же, в верхнем правом углу жмем «Начать развертывание», выбираем «Новое развертывание»
Выбираем тип «Веб-приложение» и жмем «Начать развертывание»
По завершению процесса, платформа предоставит ссылку по которой можно перейти и увидеть заветный «Hello World!»
Добавим Bootstrap и пару фишек для улучшения веб-приложение
В добавлении Bootstrap нет никакой хитрости. Просто классическим способом добавляем тэг <link> с аттрибутом href указывающим на CDN Bootstrap. Теперь можем пользоваться его стилями.
Реклама
Мечтаете научиться программировать и зарабатывать хорошие деньги в разработке? Хватит мечтать, пора действовать. Записывайтесь на факультет «Fullstack JavaScript» от GeekBrains. Освойте с нуля язык программирования JavaScript, чтобы стать Fullstack-разработчиком. Вы научитесь создавать сайты, мобильные приложения и высоконагруженные сервисы.
Сейчас действует скидка, вы можете сэкономить 25% Тем более, обучение можно купить в рассрочку.
К сведению, зарплата Fullstack JavaScript легко достигает 250 000 руб., а устроиться можно удаленно из любой точки мира. GeekBrains еще и с трудоустройством помогает.
Хватит откладывать, переходите по ссылке и записывайтесь!
Title страницы можно указать, как добавив изменения в html-код, так и скриптом. Для практики, пойдем по второму пути. В строке генерации вывода ставим точку после закрывающей скобки и вводим метод setTitle. Метод принимает один параметр - строка, которую нужно вставить в title.
Сейчас, страница не адаптируется под экран. Исправим, добавив мета-тэг viewport. После setTitle ставим точку и указываем метод addMetaTag с двумя параметрами: название мета-тэга и значение.
Осталось добавить нормальный favicon. Для этого, нашел понравившуюся PNG-картинку и скопировал ее адрес. Точно так же, продолжаю цепочку вызовов, ставлю точку и пишу метод setFaviconUrl. Параметром передаю адрес.
Для универсальности и улучшения читаемости кода, создаю литеральные константы для имени файла и адреса картинки. Константы складываю в файл const.gs, где лежат остальные константы.
Подготовка и вывод данных из Google Sheets
Для вывода будем использовать специальные операторы, которые работают в HTML-шаблонах Google Apps Script: «<? ?>» и «<?= ?>». Отличия в том, что второй выводит значение выражения.
Но предварительно, в скриптах напишем такую функцию:
Если вы читали предыдущую статью, многое должно быть вам знакомом. Если нет, обязательно изучите.
Здесь мы знакомимся с тремя новыми методами: getLastRow(), getLastColumn() и getValues(). Как вы уже догадались по названиям функций, первые две получают последнюю строку и последний столбец. Третья функция получает массив значений. Если быть точным, массив массивов. Каждый элемент массива верхнего уровня является строкой. Вложенные массивы - это конкретные ячейки. Функция берет значения с листа и возвращает в место вызова.
Чуть не упустил еще один новый метод: getSheetByName(). Он получает лист по его имени. Для удобства, переименовал лист в «Sheet1» и помести его в константу SHEET_NAME. Подобный подход нужен, когда у нас несколько листов и мы не знаем, какой активен в текущий момент.
Итоговый HTML
В последний вариант шаблона, добавлено совсем немного. В первую очередь, это получение данных из таблцы Гугла. Просто вызываем функцию из прошлого блока и присваиеваем ее константе: <? const data = getData() ?>
Самый внушительный блок, это выходная таблица. Самый интересный участок вывода:
Для знакомых с PHP подход не нов. В первой строке мы открываем цикл, в последней закрываем. Внутри может быть, как код JavaScript (обязательно обрамленный в <? ?>), так и обычный html.
Данным циклом мы проходим по всем элементам массива строк. Далее, просто выводим значения ячеек, обрамив их в выводящую конструкцию <?= ?>.
Для знакомых с PHP подход не нов. В первой строке мы открываем цикл, в последней закрываем. Внутри может быть, как код JavaScript (обязательно обрамленный в <? ?>), так и обычный html.
Данным циклом мы проходим по всем элементам массива строк. Далее, просто выводим значения ячеек, обрамив их в выводящую конструкцию <?= ?>.
Сохраняем изменения в файлах и делаем новое развертывание. Запускаем...
Ошибка
Как же так? Все написано правильно, но Google Apps Script никак не обработал наши конструкции.
Нужно внести пару корректив в файле со скриптами. В функции, которая возвращает ответ сервера — doGet(). Дело в том, что метод createHtmlOutputFromFile() обрабатывает HTML-файл «как есть». Т.е. ему без разницы сервлеты и прочее. Чтобы исправить ситуацию, нужно воспользоваться методом работающим с шаблонами createTemplateFromFile() и запустить обработку, добавив в цепочку вызова вызов evaluate(). Все, теперь точно работает!
Итоговый файл со скриптами должен выглядеть вот так:
Не забудьте выполнить развертывание веб-приложения.
На этом сегодня все. В следующем материале усложним наше веб-приложение, добавим больше вариантов для работы с данными, сделаем страницу более интерактивной.
