Gallery
Мапа mariupol.me
Share
Explore
Gallery
Мапа mariupol.me

Щоденник дизайнера/розробника

Щоденник дизайнера/розробника

⁠
10.08.2023
⁠
⁠

Опишу сьогодні все, що відбувалось з проєктом з самого початку. Пока пам’ятаю. Раптом, потім знадобиться.
10.35 Після тижня важких та часто виснажуючих експериментів з різними зв’язками фреймворків, хостингів та сервісів, нарешті, зупинився на тому, що матиме спрацювати саме для мее. To name a few:
Перша версія продукту була зібрана на
coda.io
⁠
з табличкою та інтегрованою в нього картою від Mapbox буквально за 2 години (саме це був MVP, з яким ми вийшли у фінал
Хататону 4.0
⁠
та посіли друге місце). До нього також додавалася 3D-галерея у
Re:Mariupol Space
⁠
з моделлю зруйнованого рашистами Маріупольського драматичного театру із хмари точок від
Spatial Technologies
⁠
, що була доступна для завантаження на Sketchfab за ліцензією Creative Commons. Ця модель стояла на карті Маріуполя.
➖ У такої конфігурації були суттєві мінуси: на карті не відкривались popup з описом об’єктів, мапа не була пов’язана з карточками об’єктів в таблиці.
➕ Однак, в coda я все ж закохався с першого погляду.
Наступна ітерація була спробувати більш вишукані no code інструменти. Одразу вирішив перенести таблицю в Airtable. Bubble здався мені занадто складним, FlutterFlow та WeWeb мені порекомендував Степан Доктор, однак, з ними я теж не розібрався. А ось Softr залетів одразу. В ньому я за 2 дня зібрав повністю працюючий прототип навіть з регістрацією користувачів через Google OAuth та можливістю додавати та редагувати записи, пошуком, працюючою картою, яка пов’язана з карточками об’єктів та рекомендаціями.
remariupol.softr.app
⁠
. На сьогодні ця версія є основною, що підв’язана до домену mariupol.me.
➕ Чудово та дуже легко налаштовувати, функціонал відповідає моїм потребам на цьому етапі майже повністю
➖ У Softr є 2 компоненти карти: OpenStreetMap та Google Map. В першому немає popup, тож я обрав другий. Але обидва мають дуууже обмежені можливості стилізації, а в Google Map це ї нема мождливості вимкнути зайві об’єкти. Тож доводиться розглядати на карті й кафе, заправки та торгові центри. Це сильно розбігається з задуманою концепцією. Також, дууууже обмежені можливості налаштування зовнішнього вигляду сайту. Що, з одного боку, непагано (вбудовані стилі виглядають досить привабливо та менше шансів все спаплюжити для новачків), з ішого боку, мене як професійного дизайнера, звісно, м’яко кажучи не влаштовує.
Тож, я пішов шукати далі.
Наступні пошуки були для мене досить болісними, бо, як зазвичай, я зовсім не відчуваю обмежень власних можливостей. Google Cloud, Microsoft Azure (дуже потужні гнучкі, але для мене виявились занадто складними). З ними паралельно пробував MongoDB для бази даних (взагалі мене в депресію загнав, бо геть нічого не зрозуміло), NodeJS для середовища виконання, почав проходити курс з React. Паралельно ж обирав хостинг (так щоб не за всі гроші світу як для волонтерського проєкту, але й функціонально). Спробував GitHub Pages, Gitch, Ghost та ще багато всього, що вже й не згадаю. Мене кидало від “зараз все з нуля взагалі напишу, тільки трохи у всьому розберусь” до “та ну його нафіг, в мене є досвід Wordpress, зараз все налаштую і забуду”. Доречі, про Wordpress...
Я і справді забрав кілька сайтів, включаючи
сайт агенції
⁠
на Wordpress, тож, досвід дійсно є. Тому на налаштування Wordpress із плагіном Mapster я теж витратив десь пару днів.
➕ Знайоме середовище, все легко запускається, є місце на хостінгу з Wordpress, досить функціональний плагін Mapster, який добре працює з Mapbox і навіть відображає стилі.
➖ Нема рішення для видачі списку об’єктів у вигляді карток, пошуку та групування та зв’язки з об’єктами на мапі, загальна важкість та багато додаткового складного коду, що створю Wordpress на всіх своїх сторінках.
Тож, після багатьох невдач та розчарувань (переважно, неспівпадіння власних амбіцій та навичок та знань) для мене зараз спрацювала така зв’язка. NodeJS + React видають для мене мапу створену у Mapbox. І розміщене це на Netlify. Станом на зараз все працює! Ура! Але поки що це просто видача мапи веб-застосунком.
Найближчі наступні кроки:
визначитись, де зберігати дані: можна прямо в об’єктах GeoJSON на Mapbox, а можна все ж підключити Airtable (та зберігати лише унікальний ідентификатор на MapBox).
додати на сторінку список карток по об’єктам
додати header, footer та декілька додаткових сторінок з описами
розробити та впровадити візуальну айдентику
Подальші наступні кроки:
створити реєстрацію користувачів
створити кілька історій від Mapbox (
https://labs.mapbox.com/storytelling/
⁠
)
продумати інтерактив для користувачів (може, кураторські галереї, або свої власні історії)
дослідити як прив’язати Mapbox до Unity та Spatial (щоб створити арт-галерею у метаверсі)
нагенерувати NFT про Маріуполь
Все ж, мій жарт про себе, що я дизайн роблю за допомогою коду (креативне кодування, генеративна графіка), а кодую за допомогою no code, не підтвердився. No code інструменти, звісно, потужні. Але врешті-решт якщо хочеш отримати дійсно контрольований результат - треба писати код.

16.11 Помістив всі точки у GeoJSON файл. Це набір об’єктів. В стандартному прикладі точки рендеряться а карті у вигляді кружечков, а інформацію видають в окні alert. Мені ж треба налаштувати popup.
17.33 Шляхом довгив експоспериментів виявив, що до мракеру можна додавати popup безпосередньо, що чудово, але занадто багато часу витрачено, щоб для цього дотямити. З іншого боку, враховуючи, що я не кодер, то багато досвіду отримано також.

⁠
11.08.2023
⁠
⁠

Сьогодні продовжую додавати функціонал. Роблю sidebar зі списком всіх локацій. Також планую використати Tailwind та компоненти HeadlessUI для зручного та красивого форматування всього, що знаходиться ззовні карти: списки, карточки, описи.
Поки що все виходить

⁠
12.08.2023
⁠
⁠

Стосовно компонентів UI подивившись на візуальну систему Washington Post побачив, що основана вона на Radix-UI (що є безкоштовним відкритим фреймворком). Спробую прикрутити деякі компоненти звідти. Наприклад, акордеон в список. І взагалі треба переписати весь код більше під react. А для цього треба спочатку трохи ще повчити React.
Взагалі, все просувається доволі добре. Зробив список об’єктів у sidebar, додав пошук по імені (точніше, він працює як фільтр).
Треба зробити розкладку для мобільних. Зараз все працює, але зручність користування далека від ідеальної.
Також планую подати проєкт на
Metaverse Summit
⁠
у якості стартапу.
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.