dev-kucha / exam-3 Goto Github PK

github: https://github.com/dev-kucha/EXAM-3 gh-pages: https://dev-kucha.github.io/EXAM-3/

Добрий вечір усім присутнім.

Мене звати Юрій.

Спершу хочу висловити подяку організаторам і вчителям академії

• Оксані,
• Анні
• і, особливо Ростиславу Скибі. Знаю, що для нього це був непростий період і цікавий досвід. Але, мені здається, що він впорався на відмінно. Дякую, тобі, Рос! Бажаю натхнення і успіхів, продовжувати вчителювати.

Дякую Академії за цей надзвичайно цікавий і місткий курс. Чесно кажучи, реєструючись я не усвідомлював, ступінь інтенсивності цього інтенсиву. Тричі на тиждень нова велика тема - це доволі складно, особливо якщо поєднувати навчання з основною роботою. І не всі теми вдалося досконало вивчити. Але основне, начебто зрозумів і надалі вже самостійно вдосконалюватиму. Дійсно, все тільки починається.

Вашій увазі пропонується випускний проект. Застосунок розроблено на базі чиненайпопулярнішої бібліотеки для розробки динамічних веб-застосунків - React.js

Основна ідея - зручний інтерфейс для відображення у вигляді точок на мапі та у вигляді окремих карток певного переліку об'єктів, інформацію про які отримано з віддаленого сервера. Це може бути корисно під час вирішення задач логістики, навігації на місцевості, у довідково-інформаційних сервісах.

Наприклад, я у якості вихідного прототипу я взяв інформацію про установи одного з українських банків.

Ідей було дуже багато - це і зручний контекстний пошук, і зчитування геолокації у разі використання мобільного девайса, і сортування точок по порядку, наприклад, збільшення відстані до неї і т.д. Але часові межі були обмежені. Врешті, що встиг, те зробив.

ФУНКЦІОНАЛ На даний час ми маємо такий функціонал: Ліворуч картки, праворуч мапа. При кліку на точки на мапі, бачимо спливаючі вікна з детальною інформацією. Клік на картці відкриває детальну інформацію про точку і фокусує її на карті. Натискання кнопки Refresh ініціює запит на сервер для оновлення інформації. Як тільки проміс PROMIS повертає дані з сервера, стан компоненти оновлюється, всі компоненти, на які це вплинуло, перемальювуються. Реалізовано адаптивність для перегляду на мобільних пристроях.

ТЕХНОЛОГІЇ Застосував GoogleMaps API - це найпопулярніший картографічний сервіс для фронтенду. Активно використав основний React-підхід поділу загального лейауту на окремі компоненти. Використовував як функціональні компоненти, так і компоненти на основі класів. Задіявтакі прийоми як прокидання пропсів PROPS крізь декілька компонентів вниз по так званому водоспаду, підняття стану STATE нагору. Викорирстовував новий спосіб тримання власного STATE в середині функціонального компонента за допомогою хуків. Для підключення до серверної БД застосував досить нову бібліотеку axios.

У якості серверної БД я, наразі використав сервіс Firebase тому що поки що не зміг подолати обмеження CORS на сайті банку. Але json повністю ідентичний.

ПЛАНИ НА МАЙБУТНЄ Мені взагалі дуже цікава тема роботи з картами і, зокрема, з GoogleMaps. На жаль не було достатньо часу щоб розібратися з іншими численними сервісами, що надає GoogleMaps API, але я планую зайнятися цим після екзамену і короткого відпочинку. Додаток, в принципі, вийшов доволі універсальним засобом. В архітектурі передбачено окремий компонент, у якому я планую реалізовувати функції нормалізації отриманих даних тобто приведення їх до єдиного вигляду, з яким уже працюватимуть усі інші компоненти.

Таким чином цей додаток може стати таким собі "випробувальним стендом" для відображення будь-яких точок, отриманих по будь-якому API а також для дослідження можливостей GoogleMaps API.

В принципі все. Якщо є питання, готовий відповісти.