No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

git-budget.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <link rel="stylesheet" href="../../style.css">
  6. </head>
  7. <body>
  8. <script data-goatcounter="https://services.opengamestudio.org:443/count" async src="//services.opengamestudio.org:443/count.js"></script>
  9. <div id="header">
  10. <div>
  11. <strong id="title">Open Game Studio</strong>
  12. <div id="lang">
  13. <a href="../../en/news/git-budget.html">EN</a>
  14. <a href="../../ru/news/git-budget.html">RU</a>
  15. </div>
  16. </div>
  17. <div class="header2">
  18. <div class="menu">
  19. <a href="../../ru/news/index.html">Новости</a>
  20. <a href="../../ru/game/index.html">Игры</a>
  21. <a href="../../ru/tool/index.html">Инструменты</a>
  22. <a href="../../ru/page/about.html">О нас</a>
  23. </div>
  24. <a class="discord" href="https://t.me/Tail_and_shadow">
  25. <img src="../../images/telegram.png"></img>
  26. </a>
  27. <div class="clear"></div>
  28. </div>
  29. </div>
  30. <h3 class="left_item_title">В новостях...</h3>
  31. <center>
  32. <div class="news_item">
  33. <h2 class="news_item_title">
  34. <a href="git-budget.html">Почему я сделал личный проект учёта трат на Git+JS</a>
  35. </h2>
  36. <p class="news_item_date">
  37. 2020-05-03 00:00
  38. </p>
  39. <div class="news_item_contents">
  40. <p><img src="../../images/2020-05-06_гит-бюджет_снимок.png" alt="ГитБюджет" /></p>
  41. <p>В этой статье Михаил поделится опытом использования Git+JS.</p>
  42. <p>Здравствуйте, господа, в этой статье я поделюсь опытом создания приложения учёта трат, в частности отвечу на следующие вопросы:</p>
  43. <ol>
  44. <li>Зачем мне приложение учёта трат?</li>
  45. <li>Почему это личный проект?</li>
  46. <li>Почему проект на Git+JS?</li>
  47. </ol>
  48. <p><strong>1. Зачем мне приложение учёта трат?</strong></p>
  49. <p>Как и многие другие люди я давно хотел стать богатым и практиковать <a href="https://успешный-успех.рф">успешный успех</a>. Одной из рекомендаций в таких случаях часто выступает предложение вести собственный бюджет, чем я и занялся несколько лет назад. Скажу сразу, что ведение бюджета не сделало меня богатым и успешным, а своё материальное положение я улучшил обычным переездом в Москву.</p>
  50. <p>Вести бюджет я начал, если не изменяет память, где-то в 2012-м году. В то время у меня уже была профессиональная деформация программиста, выражающаяся формулой "сделано не мной" и попыткой написать всё самому. Тем не менее, по неопытности я решил начать с "проверенных" решений и приобрёл <a href="https://www.youneedabudget.com">YNAB</a> (You Need A Budget), т.к. приложение позволяло работать и с ПК, и с телефона.</p>
  51. <p>Я честно пытался задавать план трат на месяц и укладываться в него года три. Однако, где-то в 2015-м году авторы выпустили новую версию приложения, за которую <strong>опять хотели денег</strong>, старую же версию эти недальновидные капиталисты выкинули на обочину истории. В итоге мне пришлось выбирать из двух вариантов:</p>
  52. <ol>
  53. <li>Заплатить за новую версию и пользоваться "совершенно новым" приложением с другим интерфейсом.</li>
  54. <li>Послать их нафиг, сохранить деньги, но потерять текущую историю трат.</li>
  55. </ol>
  56. <p>Я рассудил, что:</p>
  57. <ol>
  58. <li>приложение уже оплачивал;</li>
  59. <li>старая версия меня устраивала;</li>
  60. <li>новую версия я не просил;</li>
  61. <li>если бы они мне до покупки сказали, что будут каждый раз драть с меня деньги, я бы им не заплатил и первый раз;</li>
  62. <li>спонсировать такое хамство я не буду;</li>
  63. </ol>
  64. <p>и выбрал второй вариант: послал их нафиг и <strong>потерял историю трат</strong>.</p>
  65. <p>Эта ситуация меня довольно сильно разочаровала, поэтому я забросил ведение бюджета где-то на год. Однако, в один из дней "болезненной синхронизации" (также известной как "выяснение отношений") я <strong>не смог отбить финансовый наброс</strong> вида "ты транжира, вечно тратишь деньги на ерунду", после чего ясно осознал важность учёта трат.</p>
  66. <p>В этот раз я решил не повторять ошибку и не отдавать свои данные неизвестно куда с потенциальной возможностью их потерять, поэтому начал вести учёт трат в самых обычных заметках телефона. Формат был довольно простым и выглядел следующим образом:</p>
  67. <p><img src="../../images/2020-05-06_гит-бюджет_заметки.png" alt="Заметки" /></p>
  68. <p>Заметки продержались у меня до середины 2018-го, пока я всё-таки не захотел иметь возможность <strong>работать с тратами на ПК</strong>, чтобы анализировать их. Я решил поискать решение, которое позволит мне <strong>бесплатно работать</strong> с историей трат и на ПК, и на телефоне. Таким решением оказался обычный календарь:</p>
  69. <p><img src="../../images/2020-05-06_гит-бюджет_календарь-день.png" alt="Календарь" /></p>
  70. <p><img src="../../images/2020-05-06_гит-бюджет_календарь-запись.png" alt="Новая запись" /></p>
  71. <p>В календаре я использовал учётку Google, чтобы иметь доступ к <a href="https://developers.google.com/apps-script?hl=ru">Apps Script</a> (фактически JavaScript) для анализа записей. Делать скрипты оказалось не очень удобно, т.к. формат хранения календарных записей мало подходит для трат. Вопрос владения данными также оставался нерешённым: мои данные опять пылились на неизвестном и неподконтрольном мне сервере, а доступ к ним был лишь через неподконтрольный мне и <strong>изменяющийся по чужой прихоти</strong> API.</p>
  72. <p>Во время использования календаря меня периодически посещали две мысли:</p>
  73. <ol>
  74. <li>как здорово было бы все свои данные хранить в Git, чтобы легко анализировать траты;</li>
  75. <li>как здорово было бы использовать интерфейс без всего лишнего, чтобы ускорить запись трат.</li>
  76. </ol>
  77. <p>Осенью 2019-го я наткнулся на проект <a href="https://isomorphic-git.org/">Isomorphic-Git</a>, позволяющий работать с Git из JavaScript, бегло проверил его работоспособность и понял, что нашёл свой Святой Грааль. Недавно я завершил создание первой версии приложения ГитБюджет, функциональность которого можно увидеть в следующем видео: </p>
  78. <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>
  79. <p>В итоге, сейчас учёт трат на телефоне у меня выглядит следующим образом:</p>
  80. <p><img src="../../images/2020-05-06_гит-бюджет.png" alt="ГитБюджет" /></p>
  81. <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>
  82. <p>Отмечу некоторые важные моменты:</p>
  83. <ul>
  84. <li>по ссылке представлено хранилище Git, отражающее действия из видео;</li>
  85. <li>свои траты я храню в отдельном закрытом хранилище, так следует делать каждому;</li>
  86. <li>приложение работает полностью на устройстве и не имеет сервера: используется хостинг GitHub Pages;</li>
  87. <li>приложение общается с внешним миром лишь в момент синхронизации с Git;</li>
  88. <li>пароль хранит браузер, приложение использует его лишь в момент синхронизации с Git;</li>
  89. <li>приложение необходимо загружать по HTTP, т.к. используемая версия Isomorphic-Git (0.70.0) некоторые запросы (метаданные) к Git выполняет по HTTP, а браузеры нынче запрещают обращения к HTTP из HTTPS.</li>
  90. </ul>
  91. <p><strong>2. Почему это личный проект?</strong></p>
  92. <p>На ГитБюджет я потратил 40 часов своей жизни в течение первого квартала 2020-го, т.е. в среднем каждый день я тратил около получаса.</p>
  93. <p>Личный проект обладает следующими преимуществами по сравнению с рабочим:</p>
  94. <ol>
  95. <li>Можно делать всё, что угодно, и учиться на своих ошибках.</li>
  96. <li>Никто не стоит над душой и не ограничивает фантазию.</li>
  97. <li>Предыдущие два пункта дают душевный покой и возможность совершенно спокойно принимать и исполнять самые идиотские решения на работе.</li>
  98. <li>Шишки, набитые в личном проекте, колоссально расширяют кругозор.</li>
  99. </ol>
  100. <p>У личного проекта также есть и недостатки:</p>
  101. <ol>
  102. <li>На твой проект пофиг всем в мире, кроме тебя.</li>
  103. <li>Никто не даст тебе ни гроша.</li>
  104. <li>Нужно умудряться выкраивать время на личный проект каждый день.</li>
  105. <li>Жена не скажет тебе "спасибо", даже если сама потом будет использовать приложение.</li>
  106. </ol>
  107. <p>Легко заметить, что все недостатки личного проекта перекрываются преимуществами рабочего проекта. А все недостатки рабочего проекта перекрываются преимуществами личного проекта. Инь и янь.</p>
  108. <p><strong>3. Почему проект на Git+JS?</strong></p>
  109. <p>Хранение данных в Git вместо неизвестного сервера/API даёт следующие преимущества:</p>
  110. <ol>
  111. <li>Git является самым распространённым решением для децентрализованного хранения проектов среди разработчиков, т.е. практически каждый разработчик умеет работать с Git.</li>
  112. <li>Для работы с Git не нужен очередной API: вы просто работаете с файлами.</li>
  113. <li>Есть много сервисов, предоставляющих хранилище Git бесплатно, если вы не помешаны на безопасности или не хотите платить денег за сервис.</li>
  114. <li>Владелец сервиса Git, конечно, может через несколько лет <a href="https://habr.com/ru/post/413215/">быть выкуплен крупной корпорацией</a>, однако, вы легко сможете перенести свои данные Git.</li>
  115. <li>Для максимальной безопасности данных вы всегда можете поднять свой Git.</li>
  116. </ol>
  117. <p>Использование JS с HTML/CSS вместо Swift/Kotlin/C#/Python даёт следующие преимущества:</p>
  118. <ol>
  119. <li>Ваше приложение будет работать и на телефоне, и на планшете, и на ПК.</li>
  120. <li>Вам не нужно проходить никаких проверок вроде AppStore, для того чтобы попасть в каждое устройство.</li>
  121. <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>
  122. <li>Ввиду отсутствия сервера вся логика размещается в JS, исполняемый на клиенте, что даёт возможность сохранить ту версию приложения, которая устраивает лично вас, и забыть про обновления, зачастую <a href="https://pikabu.ru/story/android_skoree_vsego_stanet_platnyim_6052457?cid=118211967">приводящие лишь к увеличению тормозов</a>.</li>
  123. </ol>
  124. <p>ГитБюджет является лишь первым испытанием возможностей Git+JS. Посмотрим, что удастся сделать ещё.</p>
  125. </div>
  126. </div>
  127. <div id="disqus_thread"></div>
  128. <script>
  129. var disqus_config = function () {
  130. this.page.url = "https://opengamestudio.org/ru/news/git-budget.html";
  131. this.page.identifier = "git-budget.html";
  132. };
  133. (function() { // DON'T EDIT BELOW THIS LINE
  134. var d = document, s = d.createElement('script');
  135. s.src = 'https://opengamestudio.disqus.com/embed.js';
  136. s.setAttribute('data-timestamp', +new Date());
  137. (d.head || d.body).appendChild(s);
  138. })();
  139. </script>
  140. <noscript>Пожалуйста, включите JavaScript для просмотра <a href="https://disqus.com/?ref_noscript">комментариев на платформе Disqus.</a></noscript>
  141. <div id="footer">
  142. Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
  143. из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
  144. </div>
  145. </center>
  146. </body>
  147. </html>