АРХІТЕКТУРА ТА РЕАЛІЗАЦІЯ ВЕБ-ЗАСТОСУНКУ ДЛЯ ІНТЕРАКТИВНОЇ ВІЗУАЛІЗАЦІЇ ПЕРСОНАЛЬНИХ ДАНИХ МУЗИЧНОГО СТРІМІНГУ
##plugins.themes.bootstrap3.article.sidebar##
##plugins.themes.bootstrap3.article.main##
Анотація
У статті описано архітектуру та практичну реалізацію веб-застосунку для аналізу й
інтерактивної візуалізації персональних даних музичного стрімінгу платформи Spotify.
Актуальність теми зумовлена стрімким зростанням обсягів даних, що генеруються
користувачами стрімінгових сервісів, а також недостатністю вбудованих аналітичних
засобів для їх глибокого дослідження. На підставі порівняльного аналізу існуючих рішень –
сторонніх сервісів Last.fm та Stats.fm, а також вбудованих засобів Apple Music, YouTube Music
і Spotify – визначено ключові обмеження наявних підходів та сформульовано вимоги до
розроблюваної системи. В основу архітектурного рішення покладено принцип розподілу
серверної та клієнтської частин: серверна частина реалізована на платформі Node.js з
використанням фреймворку Express.js і документоорієнтованої СУБД MongoDB, клієнтська –
на основі бібліотеки React з підтримкою суворої типізації через TypeScript і централізованого
керування станом засобами Redux Toolkit. Для авторизації застосовано протокол OAuth 2.0 у
варіанті потоку обміну кодом авторизації, що забезпечує безпечний серверний доступ до
Spotify Web API без зберігання облікових даних користувача. Повнота ретроспективних даних
про прослуховування досягнута завдяки імпорту розширеної історії стрімінгу відповідно до
механізму запиту персональних даних за вимогами GDPR. Отримані дані нормалізуються,
фільтруються та зберігаються локально для подальшої агрегованої обробки. Візуалізацію
реалізовано за допомогою бібліотеки Recharts і охоплює щомісячну динаміку прослуховувань,
розподіл активності протягом доби, рейтинги виконавців, треків та альбомів з детальними
індивідуальними сторінками. Наукова новизна роботи полягає у розробці комплексного підходу
до інтеграції Spotify Web API з персональною аналітичною системою, що поєднує безперервний
збір поточних даних та повний ретроспективний імпорт й надає користувачеві інтерактивні
засоби дослідження власних музичних уподобань, недоступні в жодному з розглянутих
аналогів.
##plugins.themes.bootstrap3.article.details##
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
Посилання
Last.fm | Play music, find songs, and discover artists. [Electronic resource]. – Access: https://last.fm
Stats.fm (Formerly Spotistats for Spotify). [Electronic resource]. – Access: https://stats.fm
MongoDB Documentation. [Electronic resource]. – Access: https://www.mongodb.com/docs
Spotify Web API | Spotify for Developers. [Electronic resource]. – Access:
https://developer.spotify.com/documentation/web-api
Schedl M., Gómez E., Urbano J. Music Information Retrieval: Recent Developments and Applications.
Foundations and Trends in Information Retrieval. 2014. Vol. 8, No. 2-3. P. 127–261.
Node.js Documentation. [Electronic resource]. – Access: https://nodejs.org/docs/latest/api
Lim G. Beginning Node.js, Express & MongoDB Development. Independently Published. 2019.
React Documentation. [Electronic resource]. – Access: http 9. Getting Started | Redux Toolkit. [Electronic resource]. – Access: https://reduxtoolkit.js.org/introduction/getting-started
Overview – Material UI. [Electronic resource]. – Access: https://mui.com/material-ui/getting-started
Recharts. Redefined chart library built with React and D3. [Electronic resource]. – Access:
Article 15 GDPR. Right of access by the data subject. [Electronic resource]. – Access: https://gdprtext.com/read/article-15