Rsclone — small business Money keeper

Abitova Anzhela
4 min readFeb 3, 2021

Как я и Сергей Талай создавали приложение small business Money keeper

Начальная страница

Предисловие

Я пришла в rs school, чтобы как и все получить практические рабочие знания и навыки javaScript. В ходе данного задания мне пригодились знания, полученные в ходе заданий Air-dashboard (работа с API, Chart.js, Webpack), презентации (Express, Node.js), всё остальное пришлось изучать с нуля.

Описание проекта

Small Business Money keeper — это проект, посвященный упрощенному бухгалтерскому учету для индивидуальных предприятий и малого бизнеса. Конечно, из задуманного не удалось осуществить многое.

Реализованные фичи:
1. В приложении можно авторизоваться.
2. Сохранить свои доходы и расходы.
3. Просмотреть график баланса.
4. Настройка приложения для пользователя.
5. Посмотреть историю доходов и расходов.

Скриншоты интерфейса
Обзор frontend-части приложения
Обзор backend-части приложения

Организация командной работы

Деятельность команды координировалась по принципу, каждый в процессе работы ставил себе задачи и отмечал степень их реализации на доске trello.

Для координации совместной работы использовались доска в trello и интенсивная переписка в telegram.

Основной сложностью в работе было то, что у нас были разные подходы к архитектуре приложения. Результатом стало существование двух версий приложения SPA и MPA.

Архитектура проекта, особенности реализации

В проекте были использованы сервер Express, авторизация passport, mongoose, MongoDB, шаблонизатор ejs, chart на node.js, bcrypt, Vue, TypeScript, авторизация firebase, core-js, . В процессе разработки также применялись nodemon, eslint, sass.

Сервер Express — легковесный, но мощный framework-обертка для сервера на Node.js. Passport.js гибкий инструмент для разных стратегий авторизации, разработанный для Express. MongoDB — простая NoSQL-база данных с облачной реализацией. Mongoose — это библиотека JavaScript, которая используется для типизации и структуризации данных, а также как оболочка MongoDB. Bcrypt — маленькая библиотека для хеширование паролей перед сохранением в базу данных.

Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов, в проекте использовался, как для верстки, так и для представления данных. TypeScript — это строго типизированная версия JavaScript с расширенными возможностями, в проекте ответственен за клиентскую часть. Firebase — это облачная база данных, которая позволяет подключить на сайте регистрацию, авторизацию и хранение текста. Core-js — библиотека-полифиллов для работы клиентской части в разнообразных браузерах.

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

Решением последнего стало подключение chartjs-node-canvas и отрисовка графиков на сервере с последующей передачей фотографией на клиент.

Также были проблемы с соединением авторизации passport и MongoDB, они были решены углубленном изучением документации и форумов.

Проблема соединения роутера Vue и сервера Express с авторизацией Passport.js стоит до сих пор.

Ход разработки

Каждый из нас вложился в проект целиком и полностью. Моей частью разработки был сервер. Частью Сергея был frontend. Поскольку сейчас существуют две версии проекта, то дополнительно я сделала frontend на шаблонизаторе Ejs и Сергей сделал сервер на firebase.

История коммитов

Заключение

Это был очень сложный проект, который не идеален, но мы вложили в него много сил, и получили много новых знаний.

--

--