СОЗДАНИЕ WEB-ПРИЛОЖЕНИЯ «МЕНЕДЖЕР УЧЕТА РАСХОДОВ» В ИНТЕГРИРОВАННОЙ СРЕДЕ РАЗРАБОТКИ WEBSTORM Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.4

Алейников М.В.

студент 2 курса бакалавриата кафедры информатика и программное обеспечение Брянский государственный технический университет (Россия, г. Брянск)

СОЗДАНИЕ WEB-ПРИЛОЖЕНИЯ «МЕНЕДЖЕР УЧЕТА РАСХОДОВ»

В ИНТЕГРИРОВАННОЙ СРЕДЕ РАЗРАБОТКИ WEBSTORM

Аннотация: в данной статье рассматриваются вопросы создания web-приложвния в интегрированной среде разработки WebStorm. Данное приложение написано на языке программирования JavaScript и фреймворке Vue.js 3 с применением языка гипертекстовой разметки html и языка каскадных стилей css.

Ключевые слова: web-приложение, WebStorm, JavaScript.

Студенты, обучающиеся в университете по направлению подготовки «Программная инженерия», получают знания, умения и навыки, необходимые для разработки, тестирования и эксплуатации программного обеспечения и программных систем. Уже на первом курсе появляется возможность реализовать полученные теоретические знания при создании практически применимых web-приложений. В частности, одним из написанных нами приложений является web-приложение «Менеджер учета расходов», позволяющее анализировать и контролировать личные и семейные финансы.

Тема нашей работы выбрана не случайно. Одно из наиболее актуальных в наши дни понятий - финансовая грамотность - включает в себя понимание того, как необходимо зарабатывать и тратить деньги. Умение анализировать и контролировать свои доходы и расходы способствует обеспечению достойных

условий жизни. Целью нашей работы являлось создание простого и понятного приложения, позволяющего регулировать траты и планировать бюджет.

Для написания данного приложения мы использовали интегрированную среду WebStorm, которая является одной из наиболее популярных сред для разработки на JavaScript и подходит для client-side-разработки, создания приложений на Node.js и мобильных приложений на React Native. Главное ее достоинство - это удобный и умный редактор для JavaSсript, HTML и CSS, который также поддерживает TypeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и Vue.js.

Приложение написано на языке программирования JavaScript, который используют для написания frontend- и backend-частей сайтов. Это язык программирования высокого уровня, позволяющий разрабатывать понятный и хорошочитаемый код.

На отображенном ниже листинге 1 представлен образец программы, описывающий возможность добавления категорий товаров. Листинг 2 демонстрирует часть программы, в которой описано создание бюджета.

Листинг 1

function create() {

if (isValid()) {

if (budgetsStore.bid) {

updateDoc(doc(db, "budgets", budgetsStore bid), {

categories: arrayUnion({

name: name.value,

color: color.value,

price: 0,

}),

});

reset(); } } }

Листинг 2

function

setDoc(doc( db,

async if

budget.id

await

balance : categories : chat: name:

purchases :

});

await updateDoc(doc(db,

budgets:

});

await await

createBudget() (budget.isValid()) budget.name + "-" +

"budgets" ,

users",

{

budget.pass ;

budget.id), {

0, [], [],

budget.name, [],

logsStore.uid), {

arrayUnion(budget.id),

budgetsStore.setBid(budget.id);

router.push("/");

На представленном ниже рисунке 1 отображена рабочая область web-приложения «Менеджер учета расходов». Приложение позволяет добавлять неограниченное количество категорий и конкретных товаров, соответствующих имеющимся категориям, и суммы, которые потрачены на данные товары. Информация отображается в таблице и на круговой диаграмме, что позволяет наглядно представить свои расходы и сравнить суммы, которые тратятся на различные товары и услуги. Разработанное приложение функционирует для всех членов семьи (при необходимости), что предоставляет возможность контролировать не только собственные финансы, но и траты каждого члена семьи, а также всех членов семьи вместе. Приложение содержит чат, позволяющий общаться членам семьи по поводу осуществляемых трат и по любым другим вопросам.

Рис. 1. Демонстрация рабочей области web-приложения «Менеджер учета расходов»

Разработанное web-приложение «Менеджер учета расходов» корректно функционирует на стационарных и на мобильных устройствах. В дальнейшем возможно расширить функционал приложения: добавить сортировка расходов, анализ доходов, изменить интерфейс приложения, улучшить производительность.

СПИСОК ЛИТЕРАТУРЫ:

Основы HTML [Электронный ресурс]. Режим доступа: https://html5book.ru/osnovy-html/ (дата обращения 10.06.2022) Руководство по JavaScript [Электронный ресурс]. Режим доступа: https: //habr.com/ru/company/ruvds/blog/429552/ (дата обращения 15.06.2022) Документация Vue.js 3 [Электронный ресурс]. Режим доступа: https://vuejs.org/guide/introduction.html/ (дата обращения 17.06.2022)

Aleinikov M.V.

Bachelor of the 2rd year Department of Informatics and Software Bryansk State Technical University (Russia, Bryansk)

CREATING A COST ACCOUNTING MANAGER WEB APPLICATION IN THE WEBSTORM IDE

Abstract: this article discusses how to create a web application in the WebStorm IDE. This application is written in the JavaScript programming language and the Vue.js 3 framework using the hypertext markup language html and the cascading styles language css.

Keywords: web-application, WebStorm, JavaScript.