Видеодемонстрация и описание (нажмите на изображение):
Вам необходимо разработать приложение для управления финансами.
Сервис предполагает:
- Авторизацию/Регистрацию/Выход
- Создание и удаление счетов
- Создание и удаление транзакций
У вас уже готова HTML и CSS разметка. Ваша задача - реализация JavaScript-логики.
Выполняйте работу по шагам, описанным в разделе «Основные задачи».
Ориентируйтесь на описание шагов, а также на комментарии в коде каждого файла.
Выполняйте данные задачи по порядку:
- Разработка API для взаимодействия с Backend
- Разработка пользовательского интерфейса
- Взаимодействие API с пользовательским интерфейсом
Для удобства работы весь проект разбит на файлы, каждый из которых в конченом счете будет занимать от 5 до 100 строк. В каждом файле содержится только один класс, что упрощает навигацию по проекту.
Для более объемного понимания работы приложения, рекомендуется изучить поведение приложения начиная с файла js/App.js (он уже полностью для вас написан).
- js/
- api/ (Связь с сервером, сетевые запросы)
- Account.js (управление счетами)
- createRequest.js (доработка XHR)
- Entity.js (Базовый класс для счетов, пользователей и расходов/доходов)
- Transaction.js (управление доходами и расходами пользователя)
- User.js (регистрация/авторизация/вход в приложение)
- ui/
- forms/ (формы приложения)
- AsyncForm.js (Базовый класс для всех форм. Используется преимущественно во всплывающих окнах)
- CreateAccountForm.js (форма создания нового счёта)
- CreateTransactionForm.js (форма создания нового расхода/дохода)
- LoginForm.js (форма входа)
- RegisterForm.js (форма регистрации)
- pages/ (страницы приложения)
- TransactionPage.js (страница расходов и доходов конкретного счёта)
- widgets/
- AccountsWidget.js (виджет управления счетами)
- TransactionsWidget.js (виджет управления расходами и доходами)
- UserWidget.js (виджет текущего пользователя)
- Modal.js (базовый класс для всех всплывающих окон)
- Sidebar.js (класс управления боковой колонкой)
- forms/ (формы приложения)
- App.js (класс приложения)
- api/ (Связь с сервером, сетевые запросы)
Перейдите по ссылке в repl.it и нажмите кнопку Fork.
Ссылку на доработанный проект предоставьте вашему дипломному руководителю.
Что следует делать, чтобы все получилось:
- Попробовать найти ответ сначала самому в интернете. Ведь, именно это скилл поиска ответов пригодится тебе на первой работе. И только после этого спрашивать дипломного руководителя
- В одном вопросе должна быть заложена одна проблема
- По возможности, прикреплять к вопросу скриншоты и стрелочкой показывать где не получается. Программу для этого можно скачать здесь https://app.prntscr.com/ru/
- По возможности, задавать вопросы в комментариях к коду.
- Начинать работу над дипломом как можно раньше! Чтобы было больше времени на правки.
- Делать диплом по-частям, а не все сразу. Иначе, есть шанс, что нужно будет все переделывать :)
Что следует делать, чтобы ничего не получилось:
- Писать вопросы вида “Ничего не работает. Не запускается. Всё сломалось.”
- Откладывать диплом на потом.
- Ждать ответ на свой вопрос моментально. Дипломные руководители - работающие разработчики, которые занимаются, кроме преподавания, своими проектами. Их время ограничено, поэтому постарайтесь задавать правильные вопросы, чтобы получать быстрые ответы!