Використання Google Apps Script для розробки веб-додатків

4.3 Інтерфейс користувача 
Для розробки інтерфейсу користувача, використовується Bootstrap - 
фреймворк, що надає широкий набір готових компонентів для створення сучасного 
та привабливого інтерфейсу. Це дозволяє швидко створити зручні сторінки для 
перегляду та редагування завдань.
Для стилізації дат використовується Moment.js - JavaScript бібліотеку, яка 
надає потужні функції для роботи з датами і часом. Вона дозволяє легко парсити, 
відображати, форматувати, маніпулювати і виконувати різні операції з датами та 
часом. 
У файлі user.html створюється сторінка, на якій відображається список завдань 
та підзавадань, інформація про них. 
Рисунок 28 – Головна сторінка 

Під назвою завдання міститься інформація про автора завдання та кінцева дату 
виконання. Нижче розміщені підзавдання, їх виконавець та статус виконання.
Файл edit.html відповідає за створення веб-інтерфейсу, який дозволяє 
додавати, редагувати і видаляти завдання та підзавдання. Щоб перейти на сторінку 
редагування завдань, потрібно додати в пошуковий рядок до поточної адреси веб-
додатку наступні параметри: «?p=edit». Після цього здійснюється перехід на 
сторінку редагування. 
Рисунок 29 – Сторінка редагування 
Зверху сторінки містяться поля, які потрібно заповнити, щоб створити нове 
завдання.
Після кліку на поле для введення дати розгортається календар. 

Рисунок 30 – Вибір дати 
Після додавання нового завдання на екрані з’явиться наступне повідомлення: 
Рисунок 31 – Сповіщення про додавання нового завдання 
Нижче полів додавання нового завдання на сторінці відображається список 
завдань і підзавдань, які вони в себе включають. Завдання і підзавдання можна 
редагувати, додавати до певного завдання нові підзавдання. Після внесення змін на 
екрані з’являться наступні сповіщення: 
Рисунок 32 – Сповіщення про зміну нового завдання 
Рисунок 33 – Сповіщення про додавання нового підзавдання 
Рисунок 34 – Сповіщення про зміну підзавдання

жүктеу/скачать 1,77 Mb.

Достарыңызбен бөлісу: