Самый простой способ создать защищенную панель управления с помощью Google Apps Script

Создайте панель мониторинга Google Sheets с помощью Gemini и Apps Script и превратите электронную таблицу в работающее веб-приложение, не написав код самостоятельно. В итоге у вас будет интерактивная панель мониторинга с основными показателями, диаграммами, детализацией и кнопкой обновления, работающая на основе вашей собственной таблицы. Я использую ту же книгу учета дебиторской задолженности, что и в предыдущем видео, для вымышленной компании Adamland. Пять подсказок: укажите Gemini, где находятся ваши данные, создайте макет дизайна в Canvas, извлеките данные, постройте панель мониторинга, а затем сделайте ее интерактивной. Gemini пишет код. Таблица выполняет вычисления. Панель мониторинга только отображает данные. 📄 Демонстрационный лист: [ссылка] Временные метки 0:00 Готовая панель мониторинга 0:20 Лист 0:45 Задание 1: Укажите Gemini, где находятся ваши данные 1:14 Задание 2: Создайте макет в Canvas 2:15 Задание 3: Получите данные 3:30 Задание 4: Создайте панель мониторинга 5:05 Задание 5: Сделайте ее интерактивной 6:08 Итоги ЗАДАНИЯ Сначала прикрепите свой лист в Gemini. Поменяйте местами хранения данных и параметром «что я хочу видеть» свои собственные. ЗАДАНИЕ 1: ГДЕ НАХОДЯТСЯ ДАННЫЕ Я прикрепил свой лист Google Sheets. Это книга учета дебиторской задолженности моей компании Adamland. Все расчеты выполняются с помощью формул в листе. Вот где именно находятся данные: Вкладка «Управление»: B3 — дата отчета Вкладка «Сводка по дебиторской задолженности»: A5:B9 — категории и значения просроченной задолженности, B10 — общая дебиторская задолженность, B13 — процент просроченной задолженности, B16 — общая дебиторская задолженность за последнюю неделю, B17 — изменения за последнюю неделю Вкладка «Сбор платежей»: B7 — показатель своевременного сбора платежей, B8 — среднее количество дней до оплаты Вкладка «Наихудшие нарушители»: A4:E8 — 5 клиентов с наибольшей задолженностью (клиент, сумма просроченной задолженности, количество счетов, количество дней просрочки, наихудшая категория) Вкладка «Снимки»: заголовки строки 1, по одной строке на каждую неделю Вкладка «Счета-фактуры»: заголовки строки 1, по одной строке на каждый счет-фактуру, важен только статус «Открыто» Ответьте одной строкой, подтверждающей, что вы все поняли. Пока не пишите код. ЗАДАНИЕ 2: СОЗДАЙТЕ МАКЕТ Я хочу превратить это в веб-панель управления. Заголовок: «Монитор дебиторской задолженности Adamland». Прежде чем писать какие-либо скрипты Apps Script, создайте макет в Canvas в виде одной HTML-страницы с заполнителями в виде чисел. Отобразить: основные показатели (общая дебиторская задолженность, процент просроченной задолженности, динамика за последнюю неделю, процент своевременной оплаты), дебиторскую задолженность по категориям, еженедельный тренд, 5 самых злостных нарушителей и открытые счета. Оформить как на сайте Bloomberg: чистый, современный, редакционный стиль. Белый фон, почти черный текст, тонкие серые линии между разделами, без карточек, теней и закругленных углов. Шрифт Inter, крупные цифры в заголовках. Один синий акцент (шестнадцатеричный код 2A63C4), зеленый — для хорошего состояния, красный — для плохого. Заголовок с жирным логотипом «Adamland», датой отчета и кнопкой «Обновить». Черная бегущая строка, прокручивающая основные показатели с помощью ▲▼ изменений. Диаграммы Chart.js со светлыми линиями сетки, серыми полосами старения, где самая старая категория выделена красным, тренд — тонкой черной линией. Все на одном экране ноутбука. ЗАДАНИЕ 3: ИЗВЛЕЧЬ ДАННЫЕ Мне нравится этот дизайн. Теперь напишите файл Code.gs с функцией getDashboardData(), которая считывает все необходимые для макета данные из указанных мной мест, и функцией testData(), которая выводит эти данные в лог. Используйте точно те ячейки, которые я перечислил, не ищите данные на листе. Считывайте только значения, никогда не пересчитывайте. Возвращайте даты в виде текста, а не объектов Date. В функции testData() перечислите все пустые или нулевые значения. ЗАДАНИЕ 4: СОЗДАЙТЕ Данные верны. Теперь создайте реальную панель мониторинга, соответствующую макету. Добавьте функцию doGet(), которая будет обслуживать файл Dashboard.html, загружая его данные с помощью google.script.run.getDashboardData(). Без числовых заполнителей. Суммы в евро без десятичных знаков, проценты с одним десятичным знаком, дни как целые числа. Откройте таблицу счетов: номер счета, клиент, срок оплаты, количество дней просрочки, категория, сумма. Используйте свои собственные заголовки разделов. Отображайте «Загрузка…», пока не поступят данные. ЗАДАНИЕ 5: СДЕЛАЙТЕ ЕГО ИНТЕРАКТИВНЫМ Только отображение логики, без вычислений: 1. Щелкните по полосе просроченной задолженности, чтобы отфильтровать список счетов по этому сегменту. 2. Щелкните по клиенту, чтобы открыть боковую панель с его открытыми счетами. Esc закрывает ее. 3. Поле поиска, которое фильтрует по имени клиента. 4. Обновление перезагружает данные, и любое измененное число заголовка выделяется зеленым или красным цветом. ЕС...