Розробка інтерфейсу користувача

для 3D-конфігураторів мовою

JavaScript з використанням
бібліотеки React.js
як воно є
Що таке JavaScript?

JavaScript — надзвичайно популярна об'єктно-орієнтована скриптова мова

програмування і є діалектом мови ECMAScript.
Сьогодні ця мова широко використовується майже для будь-чого:

- Front-end web development,

- Back-end web development,
- Game development,
- Mobile development,
- Virtual reality (VR),
- Artificial intelligence (AI), etc.
 Дуже популярна
https://insights.stackoverflow.com/survey/2021
Чому React.js?
А не InfernoJS, EmberJS, VueJS, Angular JS, etc...

● Віртуальна об'єктна модель документа

● Повторне застосування компонентів
● Потік даних зверху-вниз
● Велика спільнота розробників
● DevTools плагіни для React-розробника

Об’єктна модель документа (DOM) — це інтерфейс програмування для веб-

документів, щоб програми могли змінювати структуру документа, стиль і
вміст. DOM представляє документ як вузли та об’єкти; таким чином мови
програмування можуть взаємодіяти зі сторінкою.

Насправді, просто так склалося… 😄

Не я його обирав, він мене обрав.
 https://sketchfab.com/

https://www.threekit.com/

3D API з якими я працював

 1. ELITE Home Theater Seating (крісло)

Розглянемо 3 різні проекти https://elitehts.com/build-your-theater-chair

 1. ELITE Home Theater Seating (крісло)

3D модель дуже об’ємна, тому потрібен час

для завантаження.

Згідно тестів, більша частина користувачів не

очікувала завантаження. Зробили 2 кроки
завантаження для створення відчуття, що
“щось уже відбувається”.
Цікаві моменти. 2 динамічні лоадери
 1. ELITE Home Theater Seating (крісло)

Кожна варіація зберігається у моделі. Щоб

показати різні приклади наборів, ми вирішили
зробити ще одну менш деталізовану модель,
яка буде ілюструвати розміщення в різних
наборах сидінь.

Цікаві моменти. Додаткове вікно з 3d ілюстрацією

 2. Brooklyn Solar Canopy (сонячні
панелі)

Розглянемо 3 різні проекти https://brooklynsolarcanopy.com/design-quote/

 2. Brooklyn Solar Canopy (сонячні
панелі)

Цікаві моменти. Анімовані підказки та вкладена документація.

 3. Ritchey Livestock Id in| progress…

Розглянемо 3 різні проекти https://ritchey-id.tapmod.studio/

 3. Ritchey Livestock Id in| progress…

Перші проекти не мали остаточного дизайну, інколи

ідеї мені надавалися у вигляді скетчу і мені
доводилося частіше знаходити власні інтуїтивні
рішення щодо поєднання логіки конфігуратора,
зручності, простоти і естетики з точки зору
користувача.

Для даного проекту — зліва пояснення різних

можливих екранів програми та зв’язок між ними.
Хоча досі залишається багато простору для
Проект у Figma. творчості.
 3. Ritchey Livestock Id in| progress…

5
Дизайн у Figma та
складові.

1
3 4
1) Blank / Engraved
2) Single / Double Sided,
Engraving Template
4) Double Sided
3) Text Inputs for Template;
5) Text Inputs for Back-side
More Info block
2 Template

Як відбувається втілення у код.

На прикладі третього кроку в конфігураторі
Engraving (написи з обох боків ярлика)
 EngravingSwitch займає EngravingSwitch
3. Ritchey Livestock Id in| progress… весь екран, тому що
потрібно розміщувати
блоки поверх 3d моделі

EngravingTextInp
Step3Content
ut

Перевикористовувані
компоненти
Дерева компонентів у React, відображені завдяки Chrome-плагіну
React Developer Tools. Дуже зручно його використовувати для
дебагінгу та моніторингу станів (state).
 3. Ritchey Livestock Id in| progress…

React Developer Tools — незамінний плагін для розробки

застосунків на React. Інколи він економить дуже багато часу
для виявлення помилок чи причини дивного поводження
програми.

Проте він не завжди може спрацювати, як очікується. Все

залежить від логіки “під капотом”.

React Developer Tools дозволяє в реальному часі змінювати значення

змінних у state (useState hook).
3. Ritchey Livestock Id in| progress…
Наприклад, компонент EngravingTextInputAdjastable

Компонент — це контейнер для HTML, CSS та JS коду, який можна повторно

використовувати, експортувати і тд.
Хоча це не завжди доцільно: Atomic Design Pattern — не завжди доречний.
 3. Ritchey Livestock Id in| progress…

У Figma разом із зображеннями

трапляються текстові коментарі, які
вказують на бажану поведінку
програми.

Проте, нерідко пояснення обробки

подій немає, мені ж має бути
“інтуїтивно зрозуміло” що за чим.

1) Вибір “Є / Нема” написи

2) Якщо є — вмикається стандартний template для
переднього боку і випадковим чином
заповнюються поля
3) Якщо обирається 2-сторонній напис, то крок 2
для заднього боку
4) На кожному боці можна обрати свій template і
ввести бажаний текст
5) Натискання на хрестик повністю очищає бік чи і
Обробка подій та взаємодія з користувачем. геть видаляє написи — Blank Tag.
 3. Ritchey Livestock Id in| progress…

1) Користувач натискає “Engraved” (компонент

Step3Content);
2) Кнопки змінюються на “з одного” чи “з
двох” боків додати написи і з’являється
меню для вибору шаблону написів
(компонент EngravingSwitch).

Обробка події “Додати напис”

 1) При натисканні на кнопку
3. Ritchey Livestock Id “Engraved”:
1 onClick={() => handleAddEngraving(true)}

in progress… 2) Якщо hasEngravingFlag не true,

показуємо кнопки для додавання
написів (інакше обираємо 1- чи
2-сторонній напис)

3) Компонент EngravingSwitch
3 теж показується, якщо
hasEngravingFlag === true

Обробка події “Додати напис”

 1) За замовчуванням завантажується
3. Ritchey Livestock Id шаблон з моделі (1а) або перший
шаблон зі списку (1б) (LT1)
in progress…
2) При натисканні на іконку будь-якого
іншого шаблону змінюється список
полів для введення тексту (із випадково
згенерованими значеннями залежно від
типу поля)

3) Зміна тексту в полі відображається на

моделі.

1
2 а 1
1б

Обробка події “Додати напис”

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