Skip to content

Latest commit

 

History

History
136 lines (100 loc) · 10.9 KB

README.md

File metadata and controls

136 lines (100 loc) · 10.9 KB
Raw

Диплом курса «Программист на JavaScript»

Описание

Видеодемонстрация и описание (нажмите на изображение):

BHJ Diploma

Вам необходимо разработать приложение для управления финансами.

Сервис предполагает следующий функционал:

  1. Регистрация. Позволяет зарегистрировать нового пользователя в системе. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: Sidebar.js, Modal.js, AsyncForm.js, RegisterForm.js, User.js, createRequest.js.

  2. Авторизация. Позволяет авторизовать пользователя в системе. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: Sidebar.js, Modal.js, AsyncForm.js, LoginForm.js, User.js, createRequest.js.

  3. Выход. Позволяет деавторизовать пользователя в системе. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: Sidebar.js, User.js, createRequest.js.

  4. Создание счетов. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: AccountsWidget.js, TransactionsPage.js, Modal.js, AsyncForm.js, CreateAccountForm.js, Entity.js, Account.js, createRequest.js.

  5. Удаление счетов. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: TransactionsPage.js, Entity.js, Account.js, createRequest.js.

  6. Создание транзакций. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: TransactionsWidget.js, Modal.js, AsyncForm.js, CreateTransactionForm.js, Entity.js, Transaction.js, createRequest.js.

  7. Удаление транзакций. Для обеспечения работоспособности данной функции необходимо реализовать следующие структуры: TransactionsPage.js, Entity.js, Transaction.js, createRequest.js.

У вас уже готова HTML и CSS разметка. Ваша задача - реализация JavaScript-логики.

Существующая файловая структура проекта предусматривает разделение управляющей логики на графический интерфейс и API.

Например, функция регистрации нового пользователя в системе, требуется при нажатии на кнопку "Регистрация" боковой панели (Sidebar.js), что бы обеспечить открытие модального окна с соответствующей формой. Далее требуется, при нажатии кнопки "Регистрация" данной формы, выполнить оправку данных из формы регистрации на сервер с помощью метода User.register() и при получении положительного ответа от сервера установить состояние App.setState( 'user-logged' ) и закрыть модальное окно регистрации.

С чего начать

Выполняйте работу по шагам, описанным в разделе «Основные задачи».

Ориентируйтесь на описание шагов, а также на комментарии в коде каждого файла.

Для реализации работы необходимо развернуть локальный сервер по адресу "http://localhost:8000". Описание по запуску локального сервера и серверной логики можете найти в файле

При работе с локальным сервером рабочая директория public/js.

Основные задачи

Выполняйте данные задачи по порядку:

  1. Разработка API для взаимодействия с Backend
  2. Разработка пользовательского интерфейса
    1. Кнопка управления боковой колонкой
    2. Управление окнами
    3. Управление формами
    4. Обработка нажатий на кнопки бокового меню
  3. Взаимодействие API с пользовательским интерфейсом
    1. Регистрация
    2. Авторизация
    3. Отображение информации о пользователе
    4. Создание новых счетов
    5. Создание новых транзакций (доход/расход)
    6. Отображение страницы транзакций при выборе счёта

Файловая структура

Для удобства работы весь проект разбит на файлы, каждый из которых в конченом счете будет занимать от 5 до 100 строк. В каждом файле содержится только один класс, что упрощает навигацию по проекту.

Для более объемного понимания работы приложения, рекомендуется изучить поведение приложения начиная с файла public/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 (класс управления боковой колонкой)
    • App.js (класс приложения)

Формат сдачи

Сделайте Fork репозитория с дипломным заданием.

Предоставьте Вашему дипломному руководителю ссылку на GitHub с доработанным проектом.

Как правильно задавать вопросы дипломному руководителю?

Что следует делать, чтобы все получилось:

  • Попробовать найти ответ сначала самому в интернете. Ведь, именно это скилл поиска ответов пригодится тебе на первой работе. И только после этого спрашивать дипломного руководителя
  • В одном вопросе должна быть заложена одна проблема
  • По возможности, прикреплять к вопросу скриншоты и стрелочкой показывать где не получается. Программу для этого можно скачать здесь https://app.prntscr.com/ru/
  • По возможности, задавать вопросы в комментариях к коду.
  • Начинать работу над дипломом как можно раньше! Чтобы было больше времени на правки.
  • Делать диплом по-частям, а не все сразу. Иначе, есть шанс, что нужно будет все переделывать :)

Что следует делать, чтобы ничего не получилось:

  • Писать вопросы вида “Ничего не работает. Не запускается. Всё сломалось.”
  • Откладывать диплом на потом.
  • Ждать ответ на свой вопрос моментально. Дипломные руководители - работающие разработчики, которые занимаются, кроме преподавания, своими проектами. Их время ограничено, поэтому постарайтесь задавать правильные вопросы, чтобы получать быстрые ответы!