Coin - Банковское приложение

Цель проекта - отработка навыков создания сайта с использованием сборщика Webpack.

Особенности:

1. тренировка асинхронных AJAX-запросов;
2. изучение одного из способов создания и использования личного кабинета;
3. использование различных плагинов для упрощения разработки;
4. ознакомление с созданием графиков;
5. работа с Яндекс-картами;
6. подключение веб-сокета;
7. создание кастомных элементов интерфейса и т.д.

Установка

1. Запуск сервера базы данных из папки server для обработки API-запросов:

   cd server
   npm run start
   

2. Запуск веб-сервера с помощью сборщика Webpack из папки ./project:

   cd ../project
   npm i
   

   • Режим разработки npm run dev;
   • Финальная сборка npm run build.

Бэкенд к итоговой работе «Банк»

Установка и запуск проекта

1. Для запуска данного проекта вам понадобится nodejs и npm.
2. Склонируйте данный репозиторий к себе на диск. Затем выполните npm i для установки и npm start для запуска сервера.
3. По умолчанию сервер слушает на 3000-ом порту localhost.

Помните, что в репозиторий могли добавляться правки и улучшения, поэтому не забывайте периодически стягивать обновления посредством git pull.

Логин и пароль

На данный момент доступен только вход в следующий аккаунт:

• Логин: developer
• Пароль: skillbox

Подробнее о том, как авторизоваться смотрите ниже в документации API.

Существующие счета

Сразу после запуска сервера существуют следующие счета:

1. Ваш пользовательский счёт с длинной историей переводов (на него будут регулярно поступать входящие переводы с произвольных счетов):

   • 74213041477477406320783754

2. Набор других счетов, которые не принадлежат пользователю, но гарантированно существуют. С их помощью вы можете проверять функционал перечисления средств со счёта на счёт:

   • 61253747452820828268825011
   • 05168707632801844723808510
   • 17307867273606026235887604
   • 27120208050464008002528428
   • 2222400070000005
   • 5555341244441115

Формат ответа API

Все методы API отвечают объектом следующего общего формата:

{
 payload, // любое произвольное значение, которое вернёт метод API (null, если произошла ошибка или невозможно вернуть какие-либо значимые данные)
 error // текст описания/кода ошибки, которая произошла; заполняется, только если произошла ошибка. При успешном завершении работы метода здесь всегда будет пустая строка.
}

Методы API

GET /login

Авторизация пользователя. На данный момент метод позволяет вход для следующего пользователя:

{
 login: 'developer',
 password: 'skillbox'
}

В ответ вернёт payload следующего формата:

{ token }

где token — это строка, содержащая информацию для доступа к запросам, требующим авторизацию.

Возможные ошибки:

• Invalid password — пытаемся войти с неверным паролем;
• No such user — пользователя с таким логином не существует.

В дальнейшем токен указывается в заголовке Authorization для методов, которые требуют авторизации: Authorization: Basic TOKEN, где TOKEN заменяем на значение токена, которое мы получили.

Если мы запрашиваем какой-либо метод и он возвращает ошибку Unauthorized, это означает, что мы забыли предоставить заголовок с токеном при вызове метода.

GET /accounts

Возвращает список счетов пользователя. Ответом будет массив с информацией об счёте пользователя примерно в таком формате:

[
 {
  "account": "74213041477477406320783754",
  "balance": 0,
  "transactions": [
   {
    "amount": 1234,
    "date": "2021-09-11T23:00:44.486Z",
    "from": "61253747452820828268825011",
    "to": "74213041477477406320783754"
   }
  ]
 }
]

Примечание: данный метод возвращает только последнюю транзакцию из истории транзакций.

GET /account/{id}

Метод возвращает подробную информацию о счёте пользователя, где {id} в адресе метода — это номер счёта.

Формат ответа примерно такой:

[
 {
  "account": "74213041477477406320783754",
  "balance": 0,
  "transactions": [
   {
    "amount": 1234,
    "date": "2021-09-11T23:00:44.486Z",
    "from": "61253747452820828268825011",
    "to": "74213041477477406320783754"
   }
  ]
 }
]

Примечание: данный метод возвращает полную историю транзакций по счёту.

POST /create-account

Метод создаёт для пользователя новый счёт, тело запроса не важно.

Отвечает объектом с информацией о новом созданном счёте:

 "43123747452820828268825011": {
  "account": "43123747452820828268825011",
  "balance": 0,
  "mine": false,
  "transactions": []
 },

POST /transfer-funds

Метод перевода средств со счёта на счёт.

Тело запроса:

{
 from, // счёт с которого списываются средства
 to, // счёт, на который зачисляются средства
 amount // сумма для перевода
}

Метод отвечает объектом счёта, с которого был произведён перевод.

Возможнные ошибки:

• Invalid account from — не указан адрес счёта списания, или этот счёт не принадлежит нам;
• Invalid account to — не указан счёт зачисления, или этого счёта не существует;
• Invalid amount — не указана сумма перевода, или она отрицательная;
• Overdraft prevented — мы попытались перевести больше денег, чем доступно на счёте списания.

GET /all-currencies

Метод отвечает массивом со списком кодов всех используемых бекэндом валют на данный момент, например:

[ 'ETH', 'BTC', 'USD' ]

GET /currencies

Метод возвращает список валютных счетов текущего пользователя. Отвечает объектом с информацией о балансах валютных счетов данного пользователя:

{
 "AUD": {
  "amount": 22.16,
  "code": "AUD"
 },
 "BTC": {
  "amount": 3043.34,
  "code": "BTC"
 },
 "BYR": {
  "amount": 48.75,
  "code": "BYR"
 },
}

POST /currency-buy

Метод совершения валютного обмена.

Тело запроса:

{
 from, // код валютного счёта, с которого списываются средства
 to, // код валютного счёта, на который зачисляются средства
 amount // сумма, которая списывается, конвертация вычисляется сервером автоматически, исходя из текущего валютного курса для данной валютной пары
}

Метод отвечает объектом с информацией о балансах валютных счетов данного пользователя (см. /currencies).

Возможнные ошибки:

• Unknown currency code — передан неверный валютный код, код не поддерживается системой (валютный код списания или валютный код зачисления); Invalid amount — не указана сумма перевода, или она отрицательная; Not enough currency — на валютном счёте списания нет средств; Overdraft prevented — попытка перевести больше, чем доступно на счёте списания.

Websocket /currency-feed

Это websocket-стрим, который будет выдавать сообщения об изменении курса обмена валют.

Формат сообщения:

{
 "type":"EXCHANGE_RATE_CHANGE",
 "from":"NZD",
 "to":"CHF",
 "rate":62.79,
 "change":1
}

где:

• type — тип сообщения, которое можно использовать, чтобы отфильтровать данное сообщение от любых других типов сообщений, если таковые будут приходить;
• from — код валюты, из которой производится конвертирование;
• to — код валюты, в которую производится конвертирование;
• rate — курс обмена вышеприведённых валют;
• change — изменение курса по отношению к предыдущему значению: 1 — возрастание курса, -1 — убывание курса, 0 — курс не изменился.

GET /banks

Метод возвращает список точек, отмечающих места банкоматов:

[
  { lat: 44.878414, lon: 39.190289 },
  { lat: 44.6098268, lon: 40.1006606 }
]

где lat — широта, lon — долгота.

Фронтенд к итоговой работе "Банк"

Запуск с помощью npm run dev/npm run build.

Специфика разработки

1. Полная адаптация сборщика Webpack для использования в будущих проектах (осталось допилить только создание спрайтов + normalize.css + шрифты?);
2. Обработка всех возможных ошибок подключения к серверу, а также самих ошибок сервера в бэкенде при обращениях (в первую очередь асинхронная функция auth.login, а также важно делать асинхронные обработчики нажатия клавиш, которые вызывают такие функции - см. createButton);
   • дополнительно см. создание оболочек для функций-запросов к БД - функция requests.js/loadCoordinates: внутри функция запроса loadFromDB, которая выводит все возможные ответы сервера, включая серверные ответы; снаружи обернута в функцию loadCoordinates, которая отлавливает возможные ошибки самой функции fetch, например, если сервер отключен;
   • на основании п.2.1 следует создать блок с запросами к серверу и его ответами, а также блок с обертками осуществления этих запросов. Для loadCoordinates в модуле requests.js это уже сделано, сделать и для остальных запросов, т.к. отображение ошибок будет производиться не где-то, а именно внутри этих обёрток!
3. Итоговая настройка маршрутизации с помощью плагина Navigo;
4. Возможность авторизации на сервере через использование токена, получаемого из БД через API при передаче логина и пароля, и затем хранимого в sessionStorage до логаута либо закрытия приложения/перезагрузки (проверить);
5. Создание грида с помощью js, произвольное размещение ячеек с помощью block.style.gridArea = '2 / 1 / span 2 / span 3' (см. createPageAccount);
6. Обработка Yandex-карт с одновременной загрузкой возможных координат точек из БД (см. loadCoordinates);
7. Формирование диаграммы по загружаемым из БД данным с помощью библиотеки chart.js (см. createBlockTransactionsBalance);
8. Подключение веб-сокета для непрерывного отслеживания поступления данных с сервера (см. requests.js/openSocket);
9. Кастомный селект из одного элемента в фильтрах и формах;
   • Фильтр - для быстрой фильтрации сделан массив загруженных данных, который перезагружается только с обновлением страницы в браузере. В остальных случаях сортировка ведется по уже загруженному списку и обновляется только грид;
   • Селекты для номера счета и валют;
   • TODO: класс с селектом, данные передавать через объект в параметре, при необходимости что-то сделать с селектом вызывать функцию класса;
10. Система уведомлений windows для браузеров (Notification in window) (см. js/notifications.js);
11. Иконка процесса загрузки из БД данных, показываемая либо перед полным обновлением страницы, пока формируются блоки, либо на кнопке при совершении транзакции/перевода и иных аналогичных операций;
    • ДОПОЛНИТЕЛЬНО: значок выполнения загрузки к каждому блоку, где загрузка выполняется, чтобы можно было собирать страницу из деталей по отдельности, а не формировать ее сперва целиком перед отображением на экране;
12. окошко уведомлений справа снизу с ошибками;
13. кастомная пагинация для страницы истории транзакций для случаев, если число транзакций превышает установленную величину;
14. использование масок ввода для инпутов Inputmask;

TODO:

1. подключить плагин npm i normalize.css, разобраться, в каком порядке он отрабатывать будет;
2. разобраться, почему у меня не работают нормально шрифты через подключение файлами: проверить файлы шрифтов в отдельном проекте - может быть проблема в файлах?
3. создать файл с константами и данными, загружаемыми из БД (например, валюты, счета и т.д.), которые могут использоваться на разных страницах без необходимости перевыгрузки.