В прошлой статье, мы построили вывод данных из таблицы Google Sheets через веб-интерфейс. Самое время, оптимизировать код веб-приложения, сделав его более читаемым и эффективным.
Оптимизируем код веб-приложения
Вот так выглядит наш проект. Файл const.gs отвечает за константы, в code.gs лежит весь функционал, а index.html это шаблон вывода данных.
const.gs:
code.gs:
index.html:
Для начала, давайте избавимся от функции main(). Свое задачу она выполнила, продемонстрировав как получать данные со сторонних API и сохранять данные в таблицу. Сейчас, данные будем получать через веб-интерфейс, а значит смысла в функции уже нет.
Далее, логика работы приложения. При открытии веб-приложения, выполняется функция doGet(). Функция подготавливает HTML-шаблон, который в свою очередь вызывает getDate(). getDate() возвращает шаблону данные, которые переносятся в таблицу. После, doGet() завершает обработку и отдает страницу браузеру.
Довольно сложная, непрозрачная схема. Имеет место быть, но можно написать не так мудрено. Изменим способ передачи шаблону данных, соответственно, перепишем функции doGet() и getDate(). Кода получится минимум, поэтому отступим от принципа «одно действие одна функция» и объединим все в doGet():
Другой способ получения и передачи данных
Новый код работает следующим образом: создаем объект шаблона, передаем в него данные из таблицы и выводим результат.
Ранее, чтобы получить данные нужно было вызвать функцию getData(). Это вносило некую путаницу. Эффективнее подготовить данные сразу в скрипте и передать их в шаблон. Если, конечно, нет какой-то крайней необходимости вызывать функцию из шаблона.
Реклама
Мечтаете научиться программировать и зарабатывать хорошие деньги в разработке? Хватит мечтать, пора действовать. Записывайтесь на факультет «Fullstack JavaScript» от GeekBrains. Освойте с нуля язык программирования JavaScript, чтобы стать Fullstack-разработчиком. Вы научитесь создавать сайты, мобильные приложения и высоконагруженные сервисы.
Сейчас действует скидка, вы можете сэкономить 25% Тем более, обучение можно купить в рассрочку.
К сведению, зарплата Fullstack JavaScript легко достигает 250 000 руб., а устроиться можно удаленно из любой точки мира. GeekBrains еще и с трудоустройством помогает.
Хватит откладывать, переходите по ссылке и записывайтесь!
Теперь, мы просто создаем объект шаблона и присваиваем ему новое свойство, в данном случае data. Этим свойством, шаблон может пользоваться как переменной. Согласитесь, так гораздо лучше.
Получение данных так же изменено. Мы избавились от использования методов getLastRow() и getLastColumn(). Просто выбираем весь диапазон, содержащий данные, функцией getDataRange(). Не забудьте в Google таблице удалить заголовки. getDataRange() берет весь диапазон с данными, включая первую строку.
Осталось только удалить из HTML-шаблона убрать вызов функции getData() и удалить ненужную константу URL. Все, теперь код гораздо чище, короче и более читаем.
Планировал добавить в статью пользовательский ввод через веб-интерфейс, но материал и так получился достаточно объемным. Поэтому, пользовательский ввод будет в следующей статье. Если у вас возникли какие-то вопросы, обязательно напишите в комментариях. Да и в целом, не стесняйтесь написать комментарий и поставить лайк, это сильно помогает в продвижении.
Напоминаю, что на сайте https://codeblog.khoroshilov.pro материалы выходят раньше, в среднем на сутки.