DEVELOPMENT OF A WEB-BASED SYSTEM FOR CONTENT EXCHANGE РОЗРОБКА ВЕБ-СИСТЕМИ ДЛЯ ОБМІНУ КОНТЕНТОМ

. The research paper presents a comprehensive study and development of a web-based content sharing system, the main purpose of which is to stimulate and distribute photo and media content, textual information about video game characters in the Ukrainian segment of the Internet through a convenient and efficient platform for users. This study formulated the requirements for the content sharing system and the stages of its development. Based on the requirements for the implementation of the system, a web-based content exchange system was developed, consisting of a client application (frontend) and a web server (backend) using third-party SaaS solutions to store media content and user information for the content exchange system. The system is designed to provide users with a convenient and efficient tool for sharing information about video games. The development process consists of the following stages: researching the context of formulating functional and non-functional requirements, selecting technologies to implement the system in accordance with the requirements for the frontend and backend


І. INTRODUCTION
A new tweet, a message in a messenger, participation in an online conference, watching a popular video, leaving a comment on a post -all of these are the result of a person's continuous integration into content-sharing systems.Such systems differ in their implementation and specifics of use, but they all have a common feature -they provide the ability to distribute and receive any information regardless of the user's location and time.
Content-sharing systems are directly created for Android, Windows, and Linux platforms, but the most widespread, thanks to the Internet, are Web-oriented systems.Since they are not tied to the platform on which they run, the number of users who will use such a system is much higher compared to other implementations of such a system.
The research topic is determined by its importance in exploring and promoting a new niche for the Ukrainian segment.The web application is aimed at a specific type of content, namely textual information, video and photo galleries.Creating a content-sharing system is a creative and detailed process that requires not only knowledge of a technical discipline but also confident knowledge of the theoretical side and its application in practice.

II. LITERATURE ANALYSIS 2.1. Approaches to creating a web application
To create a web application, a developer in the "JavaScript world" has to choose from a large number of options, not only types of web applications but also the technology used to create the application.This is because JavaScript is one of the most widespread programming languages, as well as the ability of anyone to create and distribute their solution to a problem or a new solution as a Node Package Module.
The definition of "web application" can be perceived differently depending on the environment where web technologies are used.For example, a web application can be created as a full-fledged Android, Desktop, web server, or console application, but the main use case is to run in a browser.
The types of web applications include: • Single Page Application (SPA): this is a type of application that runs only on the client side.The application is interactive for the user and navigation throughout the application takes place without reloading the page; • Multi Page Application (MPA): traditional multi-page web applications.When switching between pages, the user loads a new page; • Progressive Web Application (PWA): similar features, functions, and quality of user experience to traditional computer and mobile applications based on SPA solutions.However, it is difficult to distinguish such applications as non-PWA or PWA.PWA applications are characterised by the following aspects, they must have a proxy layer (Service Worker) and a Web App manifest.
Popular web technologies used to create a web application are React, Vue, and Angular.These technologies can also use the SPA and PWA approaches, combining them to improve the user experience.
In addition to these technologies, some use one of the already mentioned technologies for page rendering, use the Server Side Rendering (SSR) approach for SEO page optimisation, speed up page loading speed, and provide an opportunity to build an application using all three types of web applications.
In cases where a web application does not require the use of any of the above technologies, but rather pure JavaScript solutions, use builders such as Vite, Webpack, Rollup, Parcel; Gulp.Most of these technologies use a bundler to improve the developer experience.
It is also worth noting that there are systems for creating web applications, namely content management systems, or CMS (Content Management System), which is a website content management system, or they are also called CMS engines [1].Such systems offer the use of ready-made templates for a website, provide ready-made functional solutions for managing website content and design, and various plugins that implement certain functionality for a website.Examples of CMS are WordPress, Joomla, OpenCart, Shopify, and Fix.

Business requirements for a content exchange system
Defining precise requirements ensures that all parties involved in the creation of the system have a clear understanding of what they are developing.
Business requirements define the strategic path of the project.They include high-level project requirements that describe the overall business goal from the company's perspective.The goal may be to increase profits or capture a larger market share [2].The business requirements of the content sharing system are to provide the user with the opportunity to get acquainted with the character's story and multimedia content (photos, videos) from games and other entertainment services, interact with the user to make him or her interested in the content offered and promote a new niche in the Ukrainian segment by creating a united community.
Solution requirements describe the specific characteristics that a product must have to meet the needs of stakeholders and the business itself.They fall into two broad groups [3]: • Functional requirements describe the capabilities that a solution should have in terms of behaviour and information that the solution will manage [4]; • Non-functional requirements are not directly related to the behaviour of the solution's functionality, but rather describe the conditions under which the solution must remain effective or the qualities that the solution must have [4].
Another important stage is the creation of a project solution.A project solution is a reasoned recommendation for achieving a specific desired result, determining its feasibility for implementation in the form of a project.It is an integral part of the project and correlates with it as a part of the whole.

Technology stack for developing a content exchange system
In web development, choosing the technologies that will be used to develop the software implementation is always an important stage because in the world of JavaScript, there are a lot of solutions that solve specific requirements in an extremely efficient way.
A technology stack is a set of technologies that are put together to create any application.Also known as a technology infrastructure stack or solution stack, a technology stack has become essential for building easy-to-maintain, scalable web applications [5].The technology stack of a content exchange system consists of two important elements: the front-end (client side) and the back-end (server side).
The success of the business project will also depend on the right choice of the technology stack.Therefore, when choosing a technology stack, you should focus on the following key points: • Workflow support: Implementing new software solutions can be time-consuming.The team needs to adapt, and it takes time to increase efficiency.However, choosing the right set of technologies from the outset can help avoid unnecessary changes in the future [6]; • Budget savings: rebuilding a technology stack is costly.This may include reworking applications, reviewing and changing processes, and even hiring new employees with specialised skills [6]; • Supporting innovation and scaling: budget and team staffing constraints can slow down product development, and while the technology stack should not be allowed to be the main reason for pursuing new opportunities and ideas, it should always be ensured that the technology stack encourages innovation rather than restricts it [6].
Following the defined requirements (see section 4.1) and project decision stages (see section 4.2), the successful implementation of a web application requires • Create a website layout; • Implement a web server using third-party services and create API documentation; • Implement a web application according to the layout.
Therefore, before proceeding to the implementation of a web application, you need to determine which technologies should be used at each of the above stages.
To create a layout, you can use Figma, Axure RP, Draftium, InVision, or Adobe XD.In the implementation of the target system, the Figma tool will be used, due to a small entry curve for starting to use, a sufficient amount of functionality, and no restrictions on creating and editing projects.
To develop a web server, you can use Spring MVC, Express, Laravel, and Django.In the implementation of the target system, the Express framework will be used.The advantages of this technology are a single programming language for a web application and a web server, ease of use, and a large number of extensions and packages for solving various tasks.
When choosing a technology for the web server, you need to select a service that will provide SDK solutions for interacting with the database and cloud media storage and a service for sending emails.
For the web server, we will use the Firebase SDK solution, as the above-mentioned services provide a large amount of functionality, but have a different entry curve for starting to use them.Compared to AWS and Microsoft platforms, Firebase does not require additional knowledge of the platform itself and its infrastructure to be used.
Mailchimp, Sendinblue, and GetResponse can be used for sending emails.In the implementation of the target system, Sendinblue will be used, due to the ease of use of the service and the largest number of messages provided in the free tariff.
For API documentation, Swagger will be used, as Swagger has no disadvantages among all other technologies, and also provides self-generated documentation for API documentation without the need to change the development environment.
To create a web application, the Webpack builder will be used, due to the possibility of greater control over the build configuration process and ease of extension if necessary to add a web framework or other technology compared to other builders such as Vite, Rollup, and Parcel.
Following the requirement for the webserver to use the SSR approach and the web application and web server technology stack, Handlebars will be used to create dynamic and static HTML pages.This technology will reduce the amount of repetitive code by splitting the template into separate parts and reusing them, and the technology will provide a single solution for the client and server sides.SCSS will be used to style the pages, which is a preprocessor scripting language that is a superset of CSS.

III. OBJECT, SUBJECT, AND METHODS OF RESEARCH
The object of research is the process of developing Web-oriented systems.
The subject of the study is Web-oriented content exchange systems as a means of obtaining and disseminating information and technologies for their development.
Research methods.In this paper, the theoretical basis of the research is: • Methods of analysing literature and scientific sources: a review of publications related to the development of a content exchange system; • Methods of requirements management: determination of user requirements, namely functional and non-functional requirements, formation of a design solution; • Algorithmic programming methods for creating web application and web server functionality; • Analysis methods for selecting appropriate technologies, platforms for developing a content exchange system.
IV. RESULTS

Requirements for a content exchange system
The functional requirements for a content exchange system should include the following capabilities: • Creating a user account by registering; • User authorisation; • View multimedia content such as photo gallery, video and text information on the "character" page for an authorised user; • Delete multimedia content (photos) from the "favourite photos" category; • Add multimedia content (photos) to the "favourite photos" category; • Create a personal list of "favourite characters"; • Select an account profile photo from the list; • Edit personal account information; • Filter photo content by criteria; • Send an email to the developer.Non-functional requirements for a content exchange system: • Requirements for use: o The system should be web-based; o The design of the web application should be based on the "Desktop first" approach.
• Performance requirements: the system must support several thousand simultaneous requests to the web server and a third-party service for storing media content and user information.

Design solution for a content exchange system
The project solution for a content exchange system will be a set of incremental stages that determine the amount of work that needs to be done to successfully implement the project.
Stages of developing a content exchange system: • Research stage: o Market and competitor research: comparing the capabilities of competitors and the target system (see Table 1).o Analysis of the target audience: following the "5W" method: ▪ "What": the opportunity for users to get acquainted with multimedia content and textual information about the world of games and other entertainment services and interactive interaction with the user; ▪ "Who: people of any age who like to spend time playing games; ▪ "Why": the ability to quickly get acquainted with certain content; ▪ "Where: search engines; ▪ "When: any time, mostly in the evening after 19:00.

Software implementation of the content exchange system
Following the steps for successful implementation of a web application (see Section 2.3), the first stage of implementing a content exchange system is to create a mockup in Figma.Following the requirements and the technology stack, a web application mockup was created, Fig. 1 shows the layout of the main page of the web application.
The following pages have been developed in the course of the site's layout: • Home page -contains brief information about the service.The page contains minimal text of up to 100 words in black.All navigation elements and images on the page are intuitively simple for the user; • The page "Taiwan through photos" implements the requirement "filtering photo content by criteria".On the right side of the page, there is a list of photos with thematic content, and on the left side, there is a functionality for direct filtering; • Authorisation page -contains a form with fields for entering email and password, as well as a link to the registration page; • Registration page -contains a form with fields for entering your email, password, name, selection of a game element (water, fire, earth, air, etc.) and a game city from the proposed list; • User profile page -this page contains a list of photos that belong to the category of the user's "favourite characters" and the ability to edit the list by deleting certain photos.The page also provides an opportunity to edit the user's personal information and update the list of "favourite characters"; • Sending a message page -this page implements the requirement to send an email to the developer, it contains a form with a field for mail and a test message; • Page with a list of characters -contains a list of all characters and a link to the detailed page with the character; • Character page -contains detailed information about the character in the form of text information, video and photo content, and also has the functionality to add a photo to the "favourite photos" category; • About page -contains a short text from the developer of the content sharing system, no more than 50 words.The link to the entire layout for the web application is attached: https://www.figma.com/file/8gxkL94XyHiuedslxtSG9y/Keqing-site?node-id=1305%3A15&mode=dev.

Fig. 1. Home page layout
The second stage involves the implementation of the web server itself using third-party services and the creation of API documentation.The requirements for the web server also include the use of the MVC architectural pattern and CSRF protection.
Fig. 2 shows the architecture of the web server following the MVC template and Fig. 3 shows the initialisation of CSRF protection in the web server.The third stage is the implementation of the web application.Following the defined technology stack at this stage: • We used the Webpack bundler with its configuration; • Web pages are built according to the layout.Another requirement for creating a web application is to use the MVVM architectural pattern.Fig. 4 shows the architecture of a web application using the MVVM template.Accordingly, after creating the configuration file for the bundler, the pages for the web application are built, Fig. 5 shows the view of the main page.Jest is used to write unit tests.Fig. 6 shows the details of implementing a unit test of a service for working with a database.To start the test execution process locally, run the following command in the terminal of the project root folder "npm run be:test", Fig. 7 shows the result of running all unit tests.Cypress was used to write and execute E2E tests.Fig. 8 shows the details of implementing E2E tests for the character page.To start the process of running tests locally, run the following command in the terminal of the project root folder "npm run fe:test", Fig. 9 shows the result of the E2E test for the character page.

V. CONCLUSIONS
The paper presents the results of a theoretical study and practical implementation, which consist of the development of a WEB-oriented content exchange system.The results of the theoretical study include the formation of functional and non-functional requirements and a design solution for the system.The results of the theoretical study became the basis for the practical implementation of a WEB-oriented content exchange system.As a result of the practical implementation of the content-sharing system, the following conclusions were obtained: • The layout for the web application was implemented following the functional requirements, which made it possible to identify inaccuracies in the requirements, obtain the main features of the web application in advance and adjust the development process.
• The software implementation of the client part of the content exchange system was carried out following the created layout, defined requirements and the selected technology stack in the form of a multi-page web application.Ключові слова: інформатизація освіти, навчальний процес, комп'ютерна навчальна програма, навчальні програми, імітаційне моделювання, випадкові закономірності, неперервні випадкові величини, дискретні випадкові величини.

І. INTRODUCTION
In the era of information technology development, there is a wide variety of programming languages, frameworks, instrumental and software tools, shells, and equipment that students, enrolled in the educational programs "6B06101 -Information Systems" and "6B06103 -Intelligent Robotics," need to be familiar with.Typically, specialists in these fields must be able to use various types of instrumental and software environments and equipment.
The limited number of hours allocated to different disciplines and the constant evolution and updating of information technologies and equipment do not allow for structuring the educational process to cover all existing programming languages, instrumental and software tools, shells, and equipment.
For the quality and effective performance of tasks assigned to specialists in the field of information technology and robotics, they need to constantly improve their skills and explore new digital tools and equipment.This process should continue even after they have completed their education in this field.
One solution to this problem is computer-based educational programs aimed at self-learning, which, in turn, allow individuals to undergo training at a convenient (free) time for them.

II. LITERATURE ANALYSIS
More and more educators are utilizing various informational and interactive teaching methods and technologies [1][2][3][4][5][6][7][8][9][10][11].The use of informational and interactive methods and technologies enables the activation of the cognitive activities of learners, optimizes the task execution process, and improves communication between the teacher and learners.
Currently, there are a multitude of digital tools that can be employed in teaching various disciplines.Among such tools are no-code tools, online compilers, integrated programming environments for software development, platforms for creating tests and quizzes, virtual trainers and simulators, educational platforms, etc.
Many researchers are involved in the development and use of computer-based educational programs for studying various disciplines.For instance, in [6], the authors develop educational and control programs, an electronic textbook "Forensic Studies of Narcotics and Psychotropic Substances" for students in the field of "Forensic Expertise," which includes two lecture presentations, two educational programs, six control tests, two instructional videos, and other educational materials covering all the topics studied.
In [7], the authors use an instructional (control and instructional) program in the study of the discipline "Digital Devices and Microprocessors," which is developed in the "Delphi" language.
When studying electronic devices and designing the structure of radio-electronic equipment, it is convenient to use various electronic laboratory practicals, as demonstrated in [8].At the Department of Information Technologies at Turan University, a computer-based educational program is being developed for the course "Fundamentals of Computer Modeling."The program is intended for students enrolled in the educational programs "6B06101 -Information Systems" and "6B06103 -Intelligent Robotics," enabling them to model random patterns of any nature, ranging from random events to random flows.
The educational program consists of 6 laboratory works (fig.1).The program interface is designed in three languages: Russian, Kazakh, and English (fig.2).
Each laboratory work includes various methods for modeling random patterns and the most common laws of their distribution (fig.2).
For example, in laboratory work No. 3, "Modeling Continuous Random Patterns," methods such as the inverse function method, Neumann's rejection method, limit theorem method, and composition method are discussed.
Among the frequently encountered distributions of continuous variables, normal, uniform, linear, gamma, and exponential distributions are highlighted, and these are also covered in laboratory work No. 3.
The results of laboratory works can be presented as numerical data (fig.2) or as graphs (fig.3).Numerical data can be saved in an Excel file format (fig.4).To reinforce the covered material, the learner can take a test on each topic and analyze their results (fig 7).In case of unsatisfactory results in a particular topic, the learner can review it again.
• Requirements for implementation: o Programming languages for the implementation of the web application and web server should be JavaScript and TypeScript; o The architectural pattern for designing and developing a web server should be MVC (Model View Controller); o The architectural pattern for designing and developing a web application should be MVVM (Model View ViewModel); o The project should be built using a monolithic architecture; o The web server should use the SSR (Server Side Rendering) approach for dynamic pages; o A bundler should be used for the web application, namely static pages; o Use a third-party service to store media content, user information, and other information required by the system.The service should provide SDK (Software Development Kit) solutions for working with the database and for working with cloud storage for media content; o It should be possible to edit, add and change media content in the system only through the use of a third-party control panel to save all media resources; o The minimum version of browsers in which the web application should work is: Chrome 49, Firefox 18, Safari 10, Edge 12. • Reliability requirements: o The web server must be able to withstand a simultaneous load of at least 2000 users; o The web application should provide the user with only predefined functionality.• Interface requirements: o The web application must interact with the web server via the REST API (Representational State Transfer Application Programming Interface); o The web server should interact with a third-party service for storing media resources and user information via SDK.• Security requirements: o Routes and APIs that require user authentication should be protected on the web server side; o The web server must use CSRF (Cross-Site Request Forgery) protection against cross-site request forgery; Authorised users can only change data that is directly related to them.
• Stage "Development of a full-fledged website design": o Designing the interface and architecture of the website; o Development of sections and pages for the website layout.• Stage "Website layout according to the design": o Layout of all pages according to the design; o Work with animation of elements on the pages.• Stage "Implementation of the server part": o Creating routing for the website; o Creating public and private REST APIs; o Creation of API documentation; o Using third-party services to obtain user information and data about multimedia content.• Stage "Testing the web application and web server": o Writing Unit tests for web server services; o Writing End-to-end tests for a web application.• Support stage: o Publishing the source code in a repository of one of the web services for version control system repositories (Git).

Fig. 6 .Fig. 7 .
Fig. 6.Unit test of the service for working with the database