Счета и валюты
Остатки на картах, наличные и накопления. Общий капитал в рублёвом эквиваленте и отдельные валютные счета.
Babkify.
Все деньги.
Один взгляд.
Разработали приложение для личных финансов. Счета в рублях и долларах, доходы, расходы и цели накоплений собраны в одной сводке.
2валюты: ₽ и $
4периода сводки
PWAтелефон и компьютер
Финансы перед глазамиот остатка до цели
О проекте
Сколько осталось.
Куда ушло.
На что копим.
Деньги лежат на разных счетах, операции распределены по категориям, а накопления привязаны к своим целям. Для общей картины нужно собрать эти данные и привести суммы к понятному виду.
Сделали приложение, которое принимает финансовый экспорт и собирает сводку. На телефоне удобно быстро проверить баланс и счета, на компьютере можно подробнее посмотреть категории, динамику и цели.
Доходы и расходы
Финансовая сводка за выбранный период, категории и динамика операций.
История операций
Последние поступления и списания с датой, счётом и описанием. Данные загружаются из финансового экспорта.
Цели накоплений
Сколько уже отложено и какая часть цели достигнута. Прогресс виден рядом с остальной сводкой.
Интерфейс
Быстрый взгляд с телефона.
Подробный обзор с компьютера.
У каждого экрана своя плотность информации. Мобильная версия начинается с крупного баланса и карточек счетов, десктопная показывает расширенную финансовую панель.
Скриншоты сняты с копии интерфейса. Все счета, суммы, курс и операции вымышлены
Финансовая картина на одном экране
На компьютере рядом находятся общий капитал, доходы, расходы, категории, динамика, последние операции и цели. Период можно переключить на неделю, месяц, квартал или всё время.
Баланс и счета в нужной валюте
На телефоне переключатель «Все / ₽ / $» фильтрует карточки счетов и меняет отображение баланса. Курс доллара показан отдельно. Общая сводка переводится в валюту отображения.
Свой цвет и значок для каждого счёта
Карточку проще узнать по оформлению. На телефоне достаточно открыть счёт, выбрать цвет и значок, затем сохранить настройки.
Babkify открывается из Telegram. Вход проверяется на сервере, а доступ к финансовой сводке ограничен списком разрешённых пользователей.
Открыть Babkify , в новой вкладкеРабота с данными
Загрузить историю.
Получить общую картину.
Счета, категории, операции, цели и курсы приходят из финансового JSON. Сервер сохраняет их в SQLite и рассчитывает сводку для интерфейса.
- 01
Проверить структуру
Обязательные разделы, уникальные ID операций и ссылки на счета и категории
- 02
Сохранить одним импортом
Запись в транзакции и обновление существующих объектов по ID
- 03
Собрать сводку
Остатки по счетам, доходы и расходы за период, категории и цели
Данные можно выгрузить обратно
Авторизованный пользователь получает JSON-экспорт счетов, категорий, операций, целей и курсов. Финансовая история сохраняет свою структуру.
Разработка
Удобная сводка начинается
с правил обработки данных
Соединили импорт истории, расчёт балансов, валютные значения, Telegram-вход и два сценария просмотра в одном приложении.
Перенести данные без повторных операций
Как решили
Сделали импорт финансового JSON из VOID. До загрузки проверяются обязательные разделы, повторяющиеся ID транзакций и ссылки на счета и категории. Запись выполняется в одной транзакции SQLite, а обновление по ID позволяет повторить импорт без добавления дублей.
Отделить валютный остаток от общей сводки
Как решили
Для счёта сохраняется его исходная валюта. Общий капитал собирается в рублёвом эквиваленте, а мобильный переключатель отдельно выбирает счета и валюту отображения. Курс USD запрашивается у ЦБ, кешируется на 30 минут и при недоступности источника заменяется сохранённым значением.
Проверять вход на стороне сервера
Как решили
Данные запуска Telegram Mini App проверяются по подписи и времени авторизации. Доступ получают только пользователи из разрешённого списка. После входа создаётся подписанная сессия. Загрузка сводки, экспорт и сохранение оформления требуют авторизации.
Разные экраны для телефона и компьютера
Как решили
На телефоне оставили крупный баланс, короткую сводку и горизонтальные карточки счетов. На компьютере показываем расширенную панель с категориями, динамикой и целями. Добавили PWA-манифест и кеширование ресурсов интерфейса через service worker.
SvelteKitSvelte 5TypeScriptNode.jsSQLiteTelegram Mini AppPWADocker
Результат
Личные финансы.
В одном приложении.
Работающий сервис со сводкой, валютными счетами, категориями и целями. Финансовую историю можно импортировать, посмотреть и выгрузить в общей структуре.
валюты в интерфейсе
Рубли и доллары, общий баланс и отдельные счета
периода сводки
Неделя, месяц, квартал и всё время
типа операций
Доход, расход и перевод в модели данных
приложение в браузере
Один сервис с интерфейсами для телефона и компьютера
Возможности проверены по исходному коду на . Публичный сервис доступен, вход в кабинет защищён. Числа показывают возможности приложения; финансовые значения на скриншотах демонстрационные.
На телефоне человек быстро видит остатки и нужные счета. На компьютере получает более подробную картину доходов, расходов и накоплений за выбранный период.
Следующий продукт
Нужно собрать данные
в удобное приложение?
Разберём источники, расчёты, доступ и сценарии интерфейса
