Розробка інтерфейсу сайту як компонентів Angular

1.

РОЗРОБКА ІНТЕРФЕЙСУ САЙТУ
ЯК КОМПОНЕНТІВ ANGULAR
Виконавець:
Студент 4 курсу 441 групи
Напряму підготовки
6.050103 Програмна
інженерія
Краковський О.О.
Науковий керівник:
Керівник: доктор
педагогічних наук, доцент
Круглик В.С.

2.

Об’єктом дослідження є технології
створення інтерфейсу сайту.
Предмет дослідження: технології створення
бібліотек візуальних компонентів Angular.
Мета дослідження: розробити інтерфейс
сайту як бібліотеку компонентів Angular.

3.

У зв'язку з поставленою метою було
визначено завдання дослідження:
• Визначити основні принципи UI/UX – дизайну сайту.
• Проаналізувати вимоги до дизайн-макетів сайту.
• Описати інструменти та технології розробки UI/UX –
дизайну сайту.
• Розглянути компоненти JavaScript-фреймворку
Angular для створення сайту, навести їх порівняльну
характеристику.
• Виконати аналіз вимог до компонентів Angular.
• Створити бібліотеку компонентів сайту за
допомогою Angular.

4.

Демонстрація додатку

5.

Демонстрація додатку

6.

Демонстрація додатку
• Bar chart (гістограма) та Doughnut chart
(кільцева діаграма) мають надавати
можливість відображати необхідні дані у
графічній формі. При наведенні на певну
область діаграми мають з’явитися
«виринаючі» підказки із вказівкою точного
значення області.

7.

Демонстрація додатку

8.

Демонстрація додатку

9.

Демонстрація додатку
Компонент Timeline (розклад) має дозволяти
створити подію з такими атрибутами:
– Опис події
– Дата початку
– Піктограма
Додатково може бути реалізована
можливість обирати та в подальшому
змінювати фон піктограми та її іконку.

10.

Демонстрація додатку

11.

Демонстрація додатку
TaskBoard – це компонент, який може бути
використаний для організації та впорядкування
робочого процесу. Всі задачі поділені на три
групи («дошки»):
– власне «Задачі»,
– «У роботі»
– «Завершені».
Функціонал компоненту має дозволяти додавати
та видаляти задачі, а також вільно переміщати
задачі між дошками.

12.

Демонстрація додатку

13.

Демонстрація додатку
• CalendarEvent – компонент, за допомогою
якого всі події будуть відображені у
зручному та звичному для користувача
форматі календаря. Подія може бути
створена на день, чи лише на певний
проміжок часу (із його зазначенням).

14.

Демонстрація додатку

15.

ВИСНОВКИ
У ході виконання роботи були виконані наступні завдання:
• Визначено основні принципи UI/UX – дизайну сайту.
• Проаналізовано вимоги до дизайн-макетів сайту.
• Описано інструменти та технології розробки UI/UX –
дизайну сайту.
• Розглянуто компоненти JavaScript-фреймворку Angular
для створення сайту.
• Виконано та наведено аналіз вимог до компонентів
Angular.
• Результатом роботи є створення бібліотеки компонентів
сайту за допомогою Angular.

16.

Дякую за увагу!