Алейников М.В.
СОЗДАНИЕ WEB-ПРИЛОЖЕНИЯ «МЕНЕДЖЕР УЧЕТА РАСХОДОВ» В ИНТЕГРИРОВАННОЙ СРЕДЕ РАЗРАБОТКИ WEBSTORM *
Аннотация:
в данной статье рассматриваются вопросы создания web-приложения в интегрированной среде разработки WebStorm. Данное приложение написано на языке программирования JavaScript и фреймворке Vue.js 3 с применением языка гипертекстовой разметки html и языка каскадных стилей css
Ключевые слова:
web-приложение, WebStorm, JavaScript
УДК 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() { |
Листинг 2
| async function createBudget() { if (budget.isValid()) { budget.id = budget.name + "-" + budget.pass; await setDoc(doc(db, "budgets", budget.id), { balance: 0, categories: [], chat: [], name: budget.name, purchases: [], }); await updateDoc(doc(db, "users", logsStore.uid), { budgets: arrayUnion(budget.id), }); await budgetsStore.setBid(budget.id); await 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.
Номер журнала Вестник науки №6 (51) том 4
Ссылка для цитирования:
Алейников М.В. СОЗДАНИЕ WEB-ПРИЛОЖЕНИЯ «МЕНЕДЖЕР УЧЕТА РАСХОДОВ» В ИНТЕГРИРОВАННОЙ СРЕДЕ РАЗРАБОТКИ WEBSTORM // Вестник науки №6 (51) том 4. С. 180 - 184. 2022 г. ISSN 2712-8849 // Электронный ресурс: https://www.вестник-науки.рф/article/5961 (дата обращения: 26.04.2024 г.)
Вестник науки СМИ ЭЛ № ФС 77 - 84401 © 2022. 16+