Веб-сервіс для публікації творів цифрового візуального мистецтва

Loading...
Thumbnail Image

Date

Journal Title

Journal ISSN

Volume Title

Publisher

Національний університет "Львівська політехніка"

Abstract

Цифрові платформи для мистецтва є важливим інструментом у сучасному інформаційному суспільстві, забезпечуючи художникам можливість презентувати свої твори, взаємодіяти з аудиторією та сприяти культурному розвитку. Такі системи не лише популяризують мистецтво, але й відіграють роль у формуванні академічного дискурсу щодо цифрової творчості, підтримуючи інновації в культурних і технологічних галузях. Дослідження цифрових платформ для мистецтва має значення для розвитку інформаційних систем, що поєднують технічні рішення з креативними потребами. Метою даної магістерської кваліфікаційної роботи є розробка веб-сервісу, який забезпечує публікацію цифрових творів візуального мистецтва, обробку коментарів і вподобань, управління профілями користувачів та інтеграцію з соціальними мережами для поширення контенту. Об’єкт дослідження – процес створення, публікації та поширення цифрового візуального мистецтва в онлайн-середовищі. Предмет дослідження – інформаційна система для завантаження творів, обробки інтерактивних відгуків, адміністрування профілів і автоматизації публікацій у соціальних мережах. Мета дослідження: розробити функціональний веб-сервіс, який забезпечує ефективну взаємодію митців і аудиторії через публікацію, коментування, оцінку та поширення цифрових творів, із застосуванням сучасних веб-технологій. Для досягнення мети використано комплекс методів і технологій. Системний аналіз застосовано для визначення функціональних і нефункціональних вимог шляхом вивчення потреб користувачів і аналізу аналогічних платформ, таких як DeviantArt, ArtStation і Behance. Компонентне програмування реалізовано для створення модульної структури інтерфейсу, що полегшує підтримку та розширення системи. Прямий доступ до бази даних через Supabase JavaScript-клієнт забезпечує оптимізацію обробки даних. Адаптивна верстка, побудована з Tailwind CSS, гарантує кросплатформну доступність. Методи обробки медіафайлів, зокрема через Cloudflare R2, дозволяють ефективно управляти зображеннями. Технологічний стек включає TypeScript для типізації коду, React і Next.js для динамічного фронтенду, Supabase для бази даних і автентифікації, Cloudflare R2 для хмарного зберігання, Tailwind CSS для стилізації та Buffer API для інтеграції з соціальними мережами. Аналіз предметної області охоплював оцінку технічних і користувацьких аспектів, що дало змогу сформулювати вимоги до продуктивності, безпеки та зручності використання [11, 14]. Розроблений веб-сервіс включає ключові функціональні модулі: галерею (Gallery) для відображення творів із сортуванням за датою чи вподобаннями, сторінку поста (PostPage) з коментарями та лайками в реальному часі, профіль користувача (Profile) для редагування даних і перегляду творів, форму завантаження (Uploader) з перевіркою форматів (PNG, JPEG). Дані зберігаються в таблицях Supabase (posts, comments, userprofiles), а зображення – у Cloudflare R2 з швидким доступом через CDN [2, 3]. Модульна архітектура, побудована на React і TypeScript, забезпечує надійність коду завдяки статичній перевірці типів [5, 6]. Асинхронні запити та підписки Supabase (supabase.channel().on('INSERT')) реалізують миттєве оновлення даних [2]. Адаптивний інтерфейс із Tailwind CSS підтримує різні пристрої [4, 11]. Список наведених результатів дослідження: 1. Розроблено функціональний веб-сервіс для публікації цифрових творів, який підтримує завантаження зображень, коментування, вподобання . 2. Реалізовано модульну архітектуру з компонентами Gallery, PostPage, Profile, Uploader, що забезпечує масштабованість і підтримку коду. 3. Забезпечено швидке завантаження зображень через Cloudflare R2 і безпечну автентифікацію через OAuth . 4. Проведено тестування, яке підтвердило стабільну обробку постів і коментарів. 5. Створено передумови для аналітики (підрахунок переглядів, популярності творів) завдяки централізованому зберіганню даних. Система є гнучкою для розширення, зокрема через додавання фільтрів за категоріями, адміністративної панелі чи алгоритмів штучного інтелекту для рекомендацій. Перспективи включають підтримку додаткових мов для міжнародної аудиторії та інтеграцію з іншими платформами [12, 15]. Результати підтверджують ефективність сучасних веб-технологій для цифрового мистецтва, створюючи основу для творчих спільнот.
Digital platforms for art have emerged as vital tools in the modern information society, enabling artists to present their works, engage with audiences, and contribute to cultural development. These systems not only promote artistic expression but also shape academic discourse on digital creativity, supporting innovations at the intersection of culture and technology. Research into digital art platforms is significant for advancing information systems that integrate technical solutions with creative needs. The objective of this master’s thesis is to develop a web service that facilitates the publication of digital visual artworks, manages comments and likes, handles user profiles, and integrates with social media for content sharing. Object of the study: The process of creating, publishing, and disseminating digital visual art in an online environment. Subject of the study: An information system for uploading artworks, processing interactive feedback, administering profiles, and automating social media posts. Objective of the study: To develop a functional web service that ensures effective interaction between artists and audiences through the publication, commenting, evaluation, and sharing of digital artworks, leveraging modern web technologies. A comprehensive set of methods and technologies was employed to achieve this objective. Systems analysis was used to define functional and non-functional requirements by studying user needs and analyzing comparable platforms, such as DeviantArt, ArtStation, and Behance. Component-based programming was implemented to create a modular interface structure, facilitating system maintenance and scalability. Direct database access via the Supabase JavaScript client optimized data processing. Adaptive layout, built with Tailwind CSS, ensured cross-platform accessibility. Media file processing methods, utilizing Cloudflare R2, enabled efficient image management. The technology stack included TypeScript for code type safety, React and Next.js for a dynamic frontend, Supabase for database and authentication management, Cloudflare R2 for cloud storage, Tailwind CSS for interface styling, and Buffer API for social media integration. The domain analysis encompassed technical and user-centric aspects, informing requirements for performance, security, and usability [11, 14]. The developed web service comprises key functional modules: a gallery (Gallery) for displaying artworks with sorting by date or likes, a post page (PostPage) with real-time comments and likes, a user profile (Profile) for editing personal information and viewing artworks, an upload form (Uploader) with format validation (PNG, JPEG). Data is stored in Supabase relational tables (posts, comments, userprofiles), while images are hosted in Cloudflare R2, ensuring fast access via a global CDN [2, 3]. The modular architecture, built on React and TypeScript, ensures code reliability through static type checking [5, 6]. Asynchronous Supabase requests and subscriptions (supabase.channel().on('INSERT')) enable instant data updates [2]. The adaptive interface, crafted with Tailwind CSS, supports diverse devices, from mobile phones to desktops [4, 11]. List of research results: 1. Developed a functional web service for publishing digital artworks, supporting image uploads, commenting, liking, and social media sharing. 2. Implemented a modular architecture with Gallery, PostPage, Profile, and Uploader components, ensuring scalability and maintainability. 3. Enabled real-time comments and likes via Supabase, fast image loading via Cloudflare R2, and secure authentication through OAuth . 4. Conducted testing, confirming stable processing of posts and comments. 5. Established a foundation for analytics (e.g., tracking views, artwork popularity) through centralized data storage. The system is flexible for future enhancements, such as adding category filters, an administrative panel, or AI-driven recommendation algorithms. Prospects include multilingual support for global audiences and integration with additional platforms [12, 15]. The results affirm the efficacy of modern web technologies for digital art platforms, providing a foundation for creative communities.

Description

Keywords

3.126.00.00, веб-сервіс, цифрове мистецтво, Supabase, Cloudflare R2, Tailwind CSS, React, Next.js, TypeScript, соціальні функції, адаптивний дизайн, реальний час, автентифікація. Перелік використаних джерел: 1. Next.js Documentation. Server-Side Rendering and Static Site Generation // Next.js. [Електронний ресурс] – Режим доступу: https://nextjs.org/docs (дата звернення: 01.05.2025). 2. Supabase Documentation. Real-time Subscriptions and Authentication // Supabase. [Електронний ресурс] – Режим доступу: https://supabase.com/docs (дата звернення: 01.05.2025). 3. Cloudflare R2 Documentation. Object Storage // Cloudflare. [Електронний ресурс] – Режим доступу: https://developers.cloudflare.com/r2/ (дата звернення: 01.05.2025). 4. Tailwind CSS Documentation. Utility-First Fundamentals // Tailwind CSS. [Електронний ресурс] – Режим доступу: https://tailwindcss.com/docs (дата звернення: 01.05.2025). 5. React Documentation. Hooks and Component Lifecycle // React. [Електронний ресурс] – Режим доступу: https://react.dev/ (дата звернення: 01.05.2025). 6. TypeScript Documentation. [Електронний ресурс] – Режим доступу: https://www.typescriptlang.org/docs/ (дата звернення: 01.05.2025). 7. Buffer API Documentation. Social Media Automation // Buffer. [Електронний ресурс] – Режим доступу: https://buffer.com/developers/api (дата звернення: 01.05.2025). 8. Webpack Documentation. [Електронний ресурс] – Режим доступу: https://webpack.js.org/configuration/ (дата звернення: 01.05.2025). 9. Vercel Documentation. [Електронний ресурс] – Режим доступу: https://vercel.com/docs (дата звернення: 01.05.2025). 10. Lucide Icons Documentation. [Електронний ресурс] – Режим доступу: https://lucide.dev/docs (дата звернення: 01.05.2025). 11. Blog IT. Адаптивний дизайн: основні концепції та принципи. [Електронний ресурс] – Режим доступу: https://blog-it.com.ua/vvedennya-v-adaptyvnyj-dyzajn-osnovni-konczepcziyi-ta-prynczypy/ (дата звернення: 01.05.2025). 12. FreeCodeCamp. How to Build a REST API with Next.js. [Електронний ресурс] – Режим доступу: https://www.freecodecamp.org/news/build-rest-api-with-nextjs/ (дата звернення: 01.05.2025). 13. Developer Mozilla. Using Fetch API. [Електронний ресурс] – Режим доступу:https://developer.mozilla.org/en/docs/Web/API/Fetch_API/Using_Fetch (дата звернення: 01.05.2025). 14. Medium. Best Practices for Writing React Components. [Електронний ресурс] – Режим доступу: https://medium.com/@georgianstan/why-you-should-build-apps-with-react-9281eccb73fc (дата звернення: 01.05.2025). 15. Blog IT. Захист від XSS та інших типових атак. [Електронний ресурс] – Режим доступу: https://blog-it.com.ua/zahyst-vid-xss-csrf-ta-inshyh-typovyh-atak/ (дата звернення: 01.05.2025), web service, digital art, Supabase, Cloudflare R2, Tailwind CSS, React, Next.js, TypeScript, social features, adaptive design, real-time, authentication

Citation

Молнар М. О. Веб-сервіс для публікації творів цифрового візуального мистецтва : кваліфікаційна робота на здобуття освітнього ступеня магістр за спеціальністю „3.126.00.00 — Інформаційні системи та технології (освітньо-наукова програма)“ / Мирослав Олександрович Молнар. — Львів, 2024. — 86 с.

Endorsement

Review

Supplemented By

Referenced By