OGS-Main
/
ogs-site

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            #header
            {
                background: #2BA6E3;
                padding: 0.7em;
                text-align: left;
            }
            #header a
            {
                color: white;
                text-decoration: none;
                padding: 0.5em 1em 0.5em 1em;
            }

            #lang
            {
                float: right;
            }

            .news_item
            {
                background: #FFFFFF;
                width: 720px;
                padding: 1em;
                margin-top: 2em;
                margin-bottom: 2em;
                border: 1px solid #E0E0E0;
                text-align: left;
            }
            .news_item_contents
            {
                color: #444;
                line-height: 1.5em;
            }
            .news_item_date
            {
                margin-bottom: 2em;
                color: #aaa;
            }

            html
            {
                font-family: sans-serif;
            }
            body
            {
                background: #FAFAFA;
            }
            code, pre
            {
                font-family: monospace, serif;
                font-size: 1em;
                color: #7f0a0c;
            }
            /*
            figure
            {
                margin: 0px;
                padding: 0px;
            }
            */
            img
            {
                width: 720px;
            }
            a
            {
                color: #3A91CB;
            }

            table
            {
                border-collapse: collapse;
            }
            table, th, td
            {
                border: 1px solid #aaa;
                padding: 0.5em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <strong id="title">Open Game Studio</strong>
            <a href="../../ru/news/index.html">Новости</a>
            <a href="../../ru/game/index.html">Игры</a>
            <a href="../../ru/tool/index.html">Инструменты</a>
            <a href="../../ru/page/about.html">О нас</a>
            <div id="lang">
                <a href="../../en/news/git-budget.html">EN</a>
                <a href="../../ru/news/git-budget.html">RU</a>
            </div>
        </div>
        <center>
            <h1>В новостях...</h1>
            <div class="news_item">
                <h2 class="news_item_title">
                    <a href="git-budget.html">Почему я сделал личный проект учёта трат на Git+JS</a>
                </h2>
                <p class="news_item_date">
                    2020-05-03 00:00
                </p>
                <div class="news_item_contents">
<p><img src="../../images/2020-05-06_гит-бюджет_снимок.png" alt="ГитБюджет" /></p>
<p>В этой статье Михаил поделится опытом использования Git+JS.</p>
<p>Здравствуйте, господа, в этой статье я поделюсь опытом создания приложения учёта трат, в частности отвечу на следующие вопросы:</p>
<ol>
<li>Зачем мне приложение учёта трат?</li>
<li>Почему это личный проект?</li>
<li>Почему проект на Git+JS?</li>
</ol>
<p><strong>1. Зачем мне приложение учёта трат?</strong></p>
<p>Как и многие другие люди я давно хотел стать богатым и практиковать <a href="https://успешный-успех.рф">успешный успех</a>. Одной из рекомендаций в таких случаях часто выступает предложение вести собственный бюджет, чем я и занялся несколько лет назад. Скажу сразу, что ведение бюджета не сделало меня богатым и успешным, а своё материальное положение я улучшил обычным переездом в Москву.</p>
<p>Вести бюджет я начал, если не изменяет память, где-то в 2012-м году. В то время у меня уже была профессиональная деформация программиста, выражающаяся формулой "сделано не мной" и попыткой написать всё самому. Тем не менее, по неопытности я решил начать с "проверенных" решений и приобрёл <a href="https://www.youneedabudget.com">YNAB</a> (You Need A Budget), т.к. приложение позволяло работать и с ПК, и с телефона.</p>
<p>Я честно пытался задавать план трат на месяц и укладываться в него года три. Однако, где-то в 2015-м году авторы выпустили новую версию приложения, за которую <strong>опять хотели денег</strong>, старую же версию эти недальновидные капиталисты выкинули на обочину истории. В итоге мне пришлось выбирать из двух вариантов:</p>
<ol>
<li>Заплатить за новую версию и пользоваться "совершенно новым" приложением с другим интерфейсом.</li>
<li>Послать их нафиг, сохранить деньги, но потерять текущую историю трат.</li>
</ol>
<p>Я рассудил, что:</p>
<ol>
<li>приложение уже оплачивал;</li>
<li>старая версия меня устраивала;</li>
<li>новую версия я не просил;</li>
<li>если бы они мне до покупки сказали, что будут каждый раз драть с меня деньги, я бы им не заплатил и первый раз;</li>
<li>спонсировать такое хамство я не буду;</li>
</ol>
<p>и выбрал второй вариант: послал их нафиг и <strong>потерял историю трат</strong>.</p>
<p>Эта ситуация меня довольно сильно разочаровала, поэтому я забросил ведение бюджета где-то на год. Однако, в один из дней "болезненной синхронизации" (также известной как "выяснение отношений") я <strong>не смог отбить финансовый наброс</strong> вида "ты транжира, вечно тратишь деньги на ерунду", после чего ясно осознал важность учёта трат.</p>
<p>В этот раз я решил не повторять ошибку и не отдавать свои данные неизвестно куда с потенциальной возможностью их потерять, поэтому начал вести учёт трат в самых обычных заметках телефона. Формат был довольно простым и выглядел следующим образом:</p>
<p><img src="../../images/2020-05-06_гит-бюджет_заметки.png" alt="Заметки" /></p>
<p>Заметки продержались у меня до середины 2018-го, пока я всё-таки не захотел иметь возможность <strong>работать с тратами на ПК</strong>, чтобы анализировать их. Я решил поискать решение, которое позволит мне <strong>бесплатно работать</strong> с историей трат и на ПК, и на телефоне. Таким решением оказался обычный календарь:</p>
<p><img src="../../images/2020-05-06_гит-бюджет_календарь-день.png" alt="Календарь" /></p>
<p><img src="../../images/2020-05-06_гит-бюджет_календарь-запись.png" alt="Новая запись" /></p>
<p>В календаре я использовал учётку Google, чтобы иметь доступ к <a href="https://developers.google.com/apps-script?hl=ru">Apps Script</a> (фактически JavaScript) для анализа записей. Делать скрипты оказалось не очень удобно, т.к. формат хранения календарных записей мало подходит для трат. Вопрос владения данными также оставался нерешённым: мои данные опять пылились на неизвестном и неподконтрольном мне сервере, а доступ к ним был лишь через неподконтрольный мне и <strong>изменяющийся по чужой прихоти</strong> API.</p>
<p>Во время использования календаря меня периодически посещали две мысли:</p>
<ol>
<li>как здорово было бы все свои данные хранить в Git, чтобы легко анализировать траты;</li>
<li>как здорово было бы использовать интерфейс без всего лишнего, чтобы ускорить запись трат.</li>
</ol>
<p>Осенью 2019-го я наткнулся на проект <a href="https://isomorphic-git.org/">Isomorphic-Git</a>, позволяющий работать с Git из JavaScript, бегло проверил его работоспособность и понял, что нашёл свой Святой Грааль. Недавно я завершил создание первой версии приложения ГитБюджет, функциональность которого можно увидеть в следующем видео: </p>
<iframe width="720" height="405" src="https://www.youtube.com/embed/ii_cLXAy3S0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>В итоге, сейчас учёт трат на телефоне у меня выглядит следующим образом:</p>
<p><img src="../../images/2020-05-06_гит-бюджет.png" alt="ГитБюджет" /></p>
<p>Данные в Git выглядят cледующим образом: <a href="https://gitlab.com/kornerr/git-budget-sample-data/-/blob/me/gb.log">https://gitlab.com/kornerr/git-budget-sample-data/-/blob/me/gb.log</a></p>
<p>Отмечу некоторые важные моменты:</p>
<ul>
<li>по ссылке представлено хранилище Git, отражающее действия из видео;</li>
<li>свои траты я храню в отдельном закрытом хранилище, так следует делать каждому;</li>
<li>приложение работает полностью на устройстве и не имеет сервера: используется хостинг GitHub Pages;</li>
<li>приложение общается с внешним миром лишь в момент синхронизации с Git;</li>
<li>пароль хранит браузер, приложение использует его лишь в момент синхронизации с Git;</li>
<li>приложение необходимо загружать по HTTP, т.к. используемая  версия Isomorphic-Git (0.70.0) некоторые запросы (метаданные) к Git выполняет по HTTP, а браузеры нынче запрещают обращения к HTTP из HTTPS.</li>
</ul>
<p><strong>2. Почему это личный проект?</strong></p>
<p>На ГитБюджет я потратил 40 часов своей жизни в течение первого квартала 2020-го, т.е. в среднем каждый день я тратил около получаса.</p>
<p>Личный проект обладает следующими преимуществами по сравнению с рабочим:</p>
<ol>
<li>Можно делать всё, что угодно, и учиться на своих ошибках.</li>
<li>Никто не стоит над душой и не ограничивает фантазию.</li>
<li>Предыдущие два пункта дают душевный покой и возможность совершенно спокойно принимать и исполнять самые идиотские решения на работе.</li>
<li>Шишки, набитые в личном проекте, колоссально расширяют кругозор.</li>
</ol>
<p>У личного проекта также есть и недостатки:</p>
<ol>
<li>На твой проект пофиг всем в мире, кроме тебя.</li>
<li>Никто не даст тебе ни гроша.</li>
<li>Нужно умудряться выкраивать время на личный проект каждый день.</li>
<li>Жена не скажет тебе "спасибо", даже если сама потом будет использовать приложение.</li>
</ol>
<p>Легко заметить, что все недостатки личного проекта перекрываются преимуществами рабочего проекта. А все недостатки рабочего проекта перекрываются преимуществами личного проекта. Инь и янь.</p>
<p><strong>3. Почему проект на Git+JS?</strong></p>
<p>Хранение данных в Git вместо неизвестного сервера/API даёт следующие преимущества:</p>
<ol>
<li>Git является самым распространённым решением для децентрализованного хранения проектов среди разработчиков, т.е. практически каждый разработчик умеет работать с Git.</li>
<li>Для работы с Git не нужен очередной API: вы просто работаете с файлами.</li>
<li>Есть много сервисов, предоставляющих хранилище Git бесплатно, если вы не помешаны на безопасности или не хотите платить денег за сервис.</li>
<li>Владелец сервиса Git, конечно, может через несколько лет <a href="https://habr.com/ru/post/413215/">быть выкуплен крупной корпорацией</a>, однако, вы легко сможете перенести свои данные Git.</li>
<li>Для максимальной безопасности данных вы всегда можете поднять свой Git.</li>
</ol>
<p>Использование JS с HTML/CSS вместо Swift/Kotlin/C#/Python даёт следующие преимущества:</p>
<ol>
<li>Ваше приложение будет работать и на телефоне, и на планшете, и на ПК.</li>
<li>Вам не нужно проходить никаких проверок вроде AppStore, для того чтобы попасть в каждое устройство.</li>
<li>Ввиду того, что стандарты HTML/CSS/JS согласуются огромным количеством компаний, ни одна из компаний не может <a href="https://habr.com/ru/post/413335/">в одностороннем порядке прекратить поддерживать какую-либо технологию</a> или <a href="https://arm1.ru/blog/pro-perehod-na-swift-3-i-swift-2-4">в очередной раз поменять API</a>, так что обратная совместимость может достигать <a href="on-the-way-to-durable-applications.html">20 лет</a> и больше.</li>
<li>Ввиду отсутствия сервера вся логика размещается в JS, исполняемый на клиенте, что даёт возможность сохранить ту версию приложения, которая устраивает лично вас, и забыть про обновления, зачастую <a href="https://pikabu.ru/story/android_skoree_vsego_stanet_platnyim_6052457?cid=118211967">приводящие лишь к увеличению тормозов</a>.</li>
</ol>
<p>ГитБюджет является лишь первым испытанием возможностей Git+JS. Посмотрим, что удастся сделать ещё.</p>
                </div>
            </div>
            <div id="footer">
                Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
                из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
                Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
            </div>
        </center>
    </body>
</html>