Все хорошие истории начинаются с телефонного разговора с мамой. И эта тоже, потому что она всегда беспокоится о моем недостатке самодисциплины, когда дело касается личных финансов. И она права.
Я пробовал несколько приложений и решений (и в настоящее время использую шаблон Excel, который подходит, но недостаточно глубок), но не нашел ничего, что было бы хорошо.
Я хотел выяснить, сколько я трачу денег на уровне предметов: сколько на пиво, сколько на замороженную пиццу и сколько на огурцы. Я также хочу знать, как меняются цены со временем и какие магазины будут самыми дешевыми.
Я начал с первоначального дизайна рабочего процесса: я хотел, чтобы он был очень простым и убрал все лишние нажатия кнопок и меню. В первом скетче это означало два поля ввода (название и цена товара) и кнопку для их сохранения.
Эскиз дал мне достаточно, чтобы начать. Я начал новый проект Vue.js (сейчас я полностью увлечен Vue) и начал разрабатывать базовые взаимодействия. Я быстро понял, что мне также нужно сохранить название магазина и дату покупки, поэтому для этого потребовался еще один набор полей.
Первая рабочая версия в браузере начала быстро разрастаться. Я хотел выяснить, какие функции мне нравятся и которые мне нужны, поэтому я начал быстро добавлять элементы на экран, чтобы прочувствовать их. Графический дизайн по-прежнему не входил в число приоритетов, так как я не знал, что оставить, а что нет.
После того, как разобрались с основными вещами (вводы, отображение квитанций и т. Д.), Я начал изучать серверную часть. Я не хотел запускать серверную часть Django или Laravel только для хранения каких-то документов. Две причины: 1) я не хотел размещать весь этот бэкэнд и 2) иметь сложные модели ORM и API, настроенные для этого масштаба, было излишним.
Поэтому я решил немного исследовать. К счастью, на следующий день друг собирался рассказать о Firebase на встрече Turku ♥ Frontend. Я решил изучить Firebase, и он идеально мне подошел. Не нужно запускать серверную часть или сервер, не нужно разбираться в вещах DevOps. И Firebase настолько прост в использовании, если вы избавитесь от немного громоздкой документации.
После того, как я убрал бэкэнд, я начал немного больше разбираться в дизайне. Я определенно не дизайнер и не могу позволить себе нанять его для своих побочных проектов, поэтому я начал искать вдохновение в другом месте. Что касается веб-компонентов, я предпочитаю Codepen, где люди делятся своим кодом и CSS для разных вещей.
Я взял эту форму входа от Эрика как основу для надстройки. Я построил уровень управления пользователями (вход в систему, восстановление пароля и функция наша регистрация еще не открыта, подпишитесь на лист ожидания). Работа над аналитикой все еще продолжается, так как я еще не понял, какие взаимодействия я хочу там.
Это был мой первый настоящий фронтенд-проект, так как я обычно начинаю свои сайд-хаки с создания бэкэнда. Теперь я хотел сосредоточиться на Vue.js и сосредоточиться на изучении новых навыков с этой целью. Я также хотел что-то наладить и быстро запустить. И чтобы другие люди тоже его протестировали, чтобы мне не приходилось полагаться только на свои собственные идеи.
Вы можете найти код на github.com/hamatti/kotibudjetti.
