Как я 8 лет вел учет личных финансов в гугл таблице и сделал из нее сайт

21

Этот текст написан в Сообществе, в нем сохранены авторский стиль и орфография

Аватар автора

Александр Гладких

Страница автора

Преамбула

Естественно я не из леса и знаю, что есть разные приложения для учета финансов. Но! В тот период, когда я начал вести учет, чаще всего о расходах приложения получали информацию из смс, а они у меня отключены во всех банках. Кроме того, даже если бы была интеграция, уж довольно я тревожный человек, не хочется давать доступ к чтению своих данных каким-то ребятам. А тем более не понятно, как эти данные будут использоваться. В общем, хотелось мне контролировать не только расходы, но и что с этими данными делается.

Страдания

В далеком 2018 года я начал очередную попытку начать вести учет расходов. Я и раньше это делал, но все заканчивалось в лучшем случае через месяц. И эта попытка сначала пошла не очень. Два года рваных шаблонов, которые нельзя было совместить. Разные написания категорий, где-то детализация записей вплоть до жвачки, а где-то просто сумма расходов за день без категорий. Это был ад.

Но параллельно я читал книжки по учету личных финансов, личному финансовому плану. Появлялись какие-то идеи. С 2020 года я стал стандартизировать процесс. На каждый месяц создавал копию таблицы, чтобы категории прочее было одинаковым. Добавил отдельно доходы, а позже активы и пассивы. Осознал важность того, что суммы должны быть сбалансированы, что дает понимание положительного или отрицательного денежного потока.

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

Да, это был монотонный труд, но он побуждал фокусироваться, анализировать, задумываться. А самое главное — создавал бесценный дивиденд на всю жизнь — привычку.

Но такой подход тоже имеет минусы. Таблицы на месяц удобны человеческому глазу, но это просто неудобно экспортировать. Так родилась идея поменять структуру данных — сделать ее похожей на реляционную таблицу. Однако, это не очень удобно глазу, да и вносить записи тоже не самое лучшее. В итоге начал думать, как это автоматизировать.

Как я это автоматизировал

Решение получилось следующим:

Под капотом — все та же гугл таблица, точнее несколько таблиц.

Внешнее оформление — html страница. Выложена на github, поэтому любые изменения сразу оказываются доступны, можно открыть по ссылке и с ПК и на мобильном телефоне, что удобно и практично.

Чтобы не светить свои данные, я создал отдельную гугл таблицу и сгенерировал случайные данные за два полных года, просто для демонстрации.

Обзор возможностей

1. Главная (Месяц)

На главной можно увидеть ту самую детализированную таблицу по категориям расходов и доходов на месяц.

Ниже суммы и небольшая визуализация.

2. Год

Во вкладке “Год” можно увидеть сводную таблицу за какой-то год и увидеть прирост относительно предыдущего года. Да, это не инфляция, точнее она там тоже есть. Так можно отследить, как меняется потребительское поведение. Стал ли я больше тратить по какой-то категории, а может быть наоборот меньше. И тут уже повод посмотреть детали, а может я чаще стал что-то покупать и тогда это не инфляция, а рост моего потребления, а если частота покупок не менялась, но вырос средний чек — это его величество Инфляция.

3. Динамика

Во вкладке Динамика можно увидеть как меняются доходы / расходы и капитал за период (можно выбрать гибко). Важно! Слева ось для расходов и доходов, справа ось капитала.

4. Запись

Вкладка +Запись — это то самое окно, для внесения новых записей. Зашел в магазин, купил, внес расходы по категории. Получил зарплату или иной доход — записал.

5. История

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

6. Баланс

И конечно вкладка Баланс. Долго думал над названием, пусть будет баланс. Здесь отражены суммарно все активы, пассивы (если есть) и чистый капитал, который рассчитан как разница суммы активов и пассивов.

Чуть ниже визуальное распределение портфеля. Можно посмотреть группировку по типу, счету

или провалиться в детализированный Отчет, для отслеживания динамики.

Ниже важный блок “Внести данные на дату” — здесь по итогу месяца важно обновлять состояние каждого счета или актива, чтобы отчет в динамике учитывал изменения в портфеле.

Вот такая штука получилась. Почему я вообще решил об этом написать? Ну, во-первых, просто поделиться, сам не ожидал, что это вообще получится. А во-вторых, потому что используя эту html-страницу, любой, кто создаст копию гугл таблицы с скриптом, сможет также вести учет и данные будут только в его гугл диске, в его гугл таблице.

Посмотреть демо данные можно здесь. Еще раз подчеркну — это искусственные данные (выдуманные), без них бы просто была пустая html-страница с рамками, а так можно посмотреть, что это не просто макет.

Расскажите, ведете ли вы учет ваших финансов? Где именно? Как вам такое решение?

Спасибо, что дочитали. Буду рад вашим комментариям и идеям.

интернетбюджетведение бюджета
  • Александр ГладкихХм, вообще я не разработчик, ну ладно))0
  • KreeegС телефона можно заходить на сайт и добавлять траты?1
  • Александр ГладкихKreeeg, да, настроить нужно один раз на ПК, потому что создать скрипт гугл-таблицы можно только с компьютера, а пользоваться можно будет и на ПК и с мобильного телефона в браузере. В блоке настройки есть видео инструкция как сделать копию таблицы для себя.1
  • KreeegАлександр, НА компьютере все получилось. А вот как зайти в свою версию сайта с телефона не разобрался.1
  • Александр ГладкихKreeeg, у вас должна быть ссылка https://script.google.com/<что-то там> раз на ПК все получилось, вы ее нашли и вставили. На мобилке когда зайдете, т.к. это новое устройство тоже вставьте ссылку в это поле и все заработает. Да, не учел в инструкции, что на новом устройстве вставку ссылки нужно повторить. Спасибо 🙏1
  • KreeegАлександр, Спасибо, помогло!1
  • Александр ГладкихKreeeg, ура ❤️ Если будут вопросы, пишите.0
  • KreeegЯ добавил возможность ввода отрицательных значений при вводе расходов и сортировку по столбцам в таблицах на вкладке "Год" - стало чуть удобнее пользоваться. Хочется добавить еще графиков каких-нибудь, и чтобы при нажатии на категорию трат открывалась бы статистика по месяцам с тратами именно по этой категории (с графиков конечно, я люблю графики :D). Буду мучить дипсик дальше. Спасибо за то что поделились!1
  • Александр ГладкихKreeeg, класс! Рад, что пользуетесь 👍1
  • Александр ГладкихKreeeg, а вы получается локально теперь запускаете html, просто интересно как реализуете правки. Поделитесь, если не секрет, как используете отрицательные значения в расходах и на счет сортировки, верно я понял, что сортируете не по названию категории, а по сумме (Итого)?1
  • KreeegАлександр, Ну еще добавил, чтобы с телефона открывалась вкладка добавления транзакции, и поле ввода сразу открывалось с цифровой клавиатурой. Рассказываю потому что вдруг вас тоже заинтересует что-то)0
  • KreeegАлександр, Я фокрнул ваш код в свой аккаунт на гитхабе. и теперь открываю сайт Мой-аккаунт.github.io/finance/ В нем вношу правки. Отрицательные значения: ну например купил детскую одежу за 1000р, потом продал за 500р. Я это записываю как трата в категории детская одежа -500р. Поскольку это не какой-то постоянный доход. Ну или снял с кредитки деньги, положил на накопительный счет - заработал 100р на вкладе - записал +1000р вклад кредиток. Потом забыл внести платеж, попал на штраф и записал вклад кредиток -2000р. Сортировка по столбцам Итого, среднее, доля и изменение к прошлому году.0
  • Александр ГладкихKreeeg, спасибо, интересно. Возьму на заметку.0
  • KreeegАлександр, Могу дать ссылку на сайт с моими изменениями, вдруг заинтересует.1
  • Александр ГладкихKreeeg, да, поделитесь, если можно. Спасибо.0
  • KreeegАлександр, https://pongi89.github.io/finance/1
  • Александр ГладкихKreeeg, спасибо0
  • KreeegАлександр, Еще одно нововведение - график капитала может быть отрицательным - ипотека, все дела... Пассив крупненький может быть.1
  • Александр ГладкихKreeeg, да, в этом направлении я не смотрел 👍0
  • KreeegВ общем я тут немного увлекся и вот, что я добавил к функционалу: 1. Возможность вносить отрицательные значения 2. На вкладке Год - сортировки по столбцам и алфавиту, карточки FAIR - обязательные траты за 12 месяцев, цель FAIR, прогресс достижения. Визуализация клика по категории - появляется график. 3. Во вкладке Динамика - Капитал может быть отрицательным 4. Добавил достижения - немного геймификации (я люблю ачивки) 5. С телефона сайт открывается сразу на добавлении транзакции и клавиатура цифровая 6. В Месяц - убрал Текущие счета и всего средств - они на вкладке Баланс. 7. Добавил Итоги года с разными рекордами.1
  • Александр ГладкихKreeeg, спасибо, посмотрю.0
Сообщество
Маргарита Макарова
Маргарита Макарова
Мой рисунок: соц-арт «Исход»
Маргарита Макарова
Маргарита Макарова
Мой рисунок: алые паруса
Маргарита Макарова
Маргарита Макарова
Мои рисунки: по всему миру
Маргарита Макарова
Маргарита Макарова
Мой рисунок: с черного на белое