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


 Створення таблиці та календаря



Pdf көрінісі
бет15/25
Дата25.07.2023
өлшемі1,77 Mb.
#104779
1   ...   11   12   13   14   15   16   17   18   ...   25
Байланысты:
Дипломна Колесник

4.1 Створення таблиці та календаря 
Для початку потрібно увійти до свого облікового запису Google та перейти на 
Диск. На Диску створюємо нову таблицю, яка буде містити всю інформацію про 
завдання. Створена таблиця міститиме 3 аркуші: «access», «tasks», «subtasks». 
Далі наповнюємо таблицю даними. 
Перший аркуш «access» міститиме адреси електронних пошт користувачів, що 
матимуть доступ до редагування завдань. 
Рисунок 13 – Аркуш «access» 
Наступний аркуш «tasks» складається з 8 стовпців, кожний з яких міститиме 
інформацію про завдання: ідентифікатор завдання, дата створення, кінцевий термін 
виконання, виконавець, деталі завдання, стан виконання, автор завдання, 
ідентифікатор події в календарі. 
Рисунок 14 – Аркуш «tasks» 
Аркуш «subtasks», який міститиме додаткові підзавдання для завдань з 
попереднього аркуша, містить також 8 стовпців: ідентифікатор завдання, якого 
стосується підзавдання, ідентифікатор самого підзавдання, дата створення, кінцевий 
термін виконання, виконавець, деталі завдання, стан виконання, автор завдання. 


Рисунок 15 – Аркуш «subtasks» 
Як було сказано вище, завдання з таблиці будуть відображатися в Google 
Календарі. Для цього переходимо в Google Календар і створюємо новий календар 
під назвою «Task Tracking». Після його створення він буде відображатися серед 
інших календарів користувача. 
Рисунок 16 – Відображення календаря «Task Tracking» серед календарів 
користувача 
 


4.2 Розробка функціоналу веб-додатка 
Далі потрібно перейти в редактор скриптів для розробки власне самого веб-
додатка. За зовнішній вигляд веб-додатка будуть відповідати файли user.html та 
edit.html. Функціональність веб-додатка буде описана в файлах code.gs та calendar.gs.
Code.gs містить код, який надає основну функціональність для трекера завдань, 
зокрема дозволяє користувачам переглядати, додавати та редагувати завдання та 
підзавдання. 
На початку коду створюємо змінну «PROJECTSHEETID», яка містить 
ідентифікатор Google Таблиці, з якою буде взаємодіяти цей код. За допомогою цього 
ідентифікатора код отримає доступ до відповідної таблиці та її аркушів. 
Функція «requestAccess()» перевіряє доступ користувача до трекера завдань. 
Вона отримує дані з аркуша «access» в створеній Google Таблиці, порівнює 
електронну адресу користувача зі списком адрес, які мають доступ, і повертає 
значення «true» або «false» в залежності від результату перевірки. Для отримання 
даних з таблиці було використано вбудований клас «SpreadsheedApp», який значно 
спрощує роботу з Google Таблицями. 
Рисунок 17 – Функція «requestAccess()» 
Далі створюємо функцію «doGet()». Як було зазначено раніше, ця 
функція є обов'язковою для всіх веб-додатків, створених в Google Apps Script. Вона 
отримує параметри запиту «e» і в залежності від них вибирає шаблон для 


відображення сторінки. Якщо параметр запиту «p» містить значення «edit» і 
користувач має доступ, то використовується шаблон «edit»; в іншому випадку 
використовується шаблон «user». Функція створює HTML-шаблон, передає дані 
користувача, список завдань та підзавдань, і повертає створений HTML-код 
сторінки. 
Рисунок 18 – Функція «doGet()» 
Функція «listMain()» виводить у веб-додаток список завдань, які отримує з 
таблиці з аркуша «tasks». Вона повертає масив об'єктів, кожен з яких містить 
інформацію про завдання. Дані з таблиці записуються у «sheetdata» за допомогою 
методу getRange().getValues(), а потім обробляються, створюючи об'єкти для кожної 
підзадачі та додавання їх до масиву ep. Якщо завдання позначене в таблиці як 


виконане (true), то воно не буде включене в список завдань, який відображає веб-
додаток.
Рисунок 19 – Функція «listMain()» 
Функція «listSub()» отримує дані з аркуша «subtasks» в Google Таблиці та 
обробляє їх, створюючи об'єкти підзавдань. Вона повертає масив об'єктів, кожен з 
яких містить інформацію про підзавдання. Дана функція схожа на «listMain()» за 
винятком того, що статус виконання підзадач буде відображатися у відсотках. 
Функції «addTask(data)» та «addSubTask(data)» додають нові завдання та 
підзавдання безпосередньо у таблицю. Вони отримують дані в якості параметра 
«data» та виконують необхідні дії над аркушем даних. 


Рисунок 20 – Функція «addTask(data)» 
Функції «updateTask(data)» та «updateSubTask(data)» вносять нові дані до 
існуючих завдань та підзавдань. Після отримання нової інформації, яка була 
введенна у поля на сторінці для редагування, вони знаходять відповідне завдання чи 
підзавдання в Google Таблиці за ідентифікатором та оновлюють дані. 
Рисунок 21 – Функція «updateTask(data)» 
Функція «formatDate(date)» форматує дату у форматі «рік-місяць-день». Вона 
використовується, щоб відформатувати дату в нових завданнях та підзавданнях 
перед тим, як додати їх до Google Таблиці. 
Функція «getRandom()» генерує випадковий унікальний ідентифікатор для 
нового завдання або підзавдання. Вона використовує вбудовану функцію 
«Utilities.getUuid()» для генерації унікального ідентифікатора.
Файл calendar.gs відповідає за створення подій у Google Календар на основі 
даних з таблиці. Для зручної роботи з Google Календарем було використано 
вбудований клас «CalendarApp». 


Функція «createEventsFromSpreadsheet()» відповідає за створення та 
оновлення подій. Функція отримує доступ до календаря за його ідентифікатором та 
отримує доступ до аркуша «tasks» в активній електронній таблиці. Далі з аркуша 
отримуються дані у змінну «schedule», і перший рядок, який містить заголовки 
стовпців, видаляється. Функція проходить через кожен рядок розкладу за 
допомогою циклу «forEach». Для кожного рядка перевіряється наявність 
ідентифікатора події. Якщо ідентифікатор порожній, це означає, що подія ще не була 
створена, і викликається функція «createNewEvent()». Якщо ідентифікатор є, це 
означає, що подія вже існує, і викликається функція «updateExistingEvent()». 
Рисунок 22 – Функція «updateTask(data)» 
Функція «createNewEvent()» створює нову подію в календарі, використовуючи 
дані з «schedule». Вона також записує ідентифікатор створеної події в стовпець 
«Calendar ID» з аркуша «tasks». 


Рисунок 23 – Функція «createNewEvent()» 
Функція «updateExistingEvent()» оновлює існуючу подію в календарі. 
Рисунок 24 – Функція «updateExistingEvent()» 
Після створення або оновлення події функція «sendEmailNotification()» 
відправляє електронного листа з повідомленням про завдання вказаному 
користувачеві. Для розсилки повідомлень було використано вбудований клас 
«GmailApp». 


Рисунок 25 – Розсилка повідомлень 
Після додавання подій на основі даних з таблиці, створений раніше календар 
«Task Tracking» має наступний вигляд: 


Рисунок 26 – Календар «Task Tracking» 
Рисунок 27 – Деталі події 


Достарыңызбен бөлісу:
1   ...   11   12   13   14   15   16   17   18   ...   25




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет