Приступаємо до створення застосунку для управління фінансами. Першим кроком стане розробка головного екрану — стартової точки для користувачів, де вони зможуть оглянути основну інформацію.
Але спочатку…
Трохи про термінологію
Нам важливо визначити ключові терміни, щоб бути певними, що читаючи статтю ви уявляєте те ж саме, що я уявляю поки її пишу.
Отже, для контролю наших фінансів, ми маємо відслідковувати джерела надходжень — назвемо їх прибутками а також визначити напрямки витрат — називатимемо їх видатками. Ці назви говорять самі за себе, тому сильно на них не зупиняємось.
На щастя, люди більше не працюють за їжу, тому між моментом отримання грошей і моментом їх витрати є щаслива мить, коли вони у нас просто є. А значить нам потрібна третя сутність, яку ми назвемо гаманцем.
Інколи ми будемо акцентувати увагу на одній з цих сутностей, але частіше я буду згадувати їх усіх разом. Щоб не перевантажувати вас постійним повторенням "прибуток/гаманець/видаток", введемо додатковий термін — комірка.
Ми зможемо переводити кошти з однієї комірки до іншої, але, погодьтеся, незвично виглядає ситуація, коли гроші поступають з видатків у прибутки. Взагалі ситуація, коли гроші приходять з видатків трохи дивна. Хоча й приємна.
Щоб цього уникнути введемо правила обігу грошей в системі:
І, здається, нам знадобиться ще один термін, щоб пояснити, що то за зелені лінії на зображенні. Це транзакції, вони описують скільки коштів буде переказано з одних комірок до інших, а також містять коментарі, фотографії квитанцій, теги та інше.
TL;DR
Комірки зберігають інформацію про гроші і поділяються на три типи: прибутки, гаманці та видатки.
Транзакції описують рух грошей між цими комірками.
Що важливо?
Я би хотів бачити максимальну кількість комірок на головному екрані. Таким чином, одним поглядом можна оцінити загальний стан нашої домашньої фінансової системи. Додатково можна показувати очікувані видатки, стан заощаджень, або іншу релевантну інформацію.
Проте це лише частина функціоналу, який має бути на головному екрані. Тут же хотілось би і створити транзакцію, якщо виникне необхідність. Або хоча б перейти до її створення.
Трохи про транзакції
Найпростіший сценарій — це коли транзакція є переказом коштів з однієї комірки до іншої. Наприклад, оплатити продуктів за допомогою банківської карти. У вас є видаток “Продукти”, є гаманець “Банківська карта” — все доволі зрозуміло.
Але уявіть ситуацію, коли ви зайшли купити овочі для салату, а потім згадали, що у вас закінчився миючий засіб та пральний порошок. Тепер у вас пральний порошок стає “Продуктом”, чи овочі перетворюються на “Побутову хімію”?
Можливо, нам варто дозволити транзакції з однієї комірки в кілька. Чи буде цього достатньо? Чи можуть виникнути ситуації, коли ми перекидаємо кошти із кількох комірок в одну? Або навіть з кількох в декілька? Якщо вам прийде на думку подібний сценарій, напишіть про це в коментарях, а я повернуся до цієї теми пізніше.
До роботи
Знаєте, що таке прокрастинація? Це коли ви кілька годин переглядаєте референси, а потім розумієте, що зарано і робите як зручніше.
Для початку такий варіант (мій справа, якщо не здогадались) підійде. Наступним кроком ми маємо подумати, як створювати транзакції. А до референсів повернемося іншим разом.
Варіант 1
Транзакцію можна створювати перетягуванням однієї комірки до іншої. Цей варіант мені подобається до тих пір, поки кількість комірок збільшиться настільки, що вони перестануть влазити на один екран.
Згадайте це задоволення, коли ви намагаєтесь перемістити застосунок між екранами смартфона, але вони не пролистуються, або перетягування зривається і ви на мить втрачаєте розуміння куди поділася та річ, яку ви тягли. Не той “досвід користувача”, який хотілось би запропонувати.
Варіант 2
Створення транзакції починається з натискання на комірку-джерело, після чого з'являється вікно для вибору комірок-призначень. Просто і зрозуміло, але як переглянути історію операцій?
Так, про історію операцій ми ще не говорили, але, скорше всього, у багатьох із нас є інтуїтивне очікування побачити всі операції з коміркою після натискання на неї.
Отже, як це вирішити? Можна відкрити історію за довгим натисканням, але це не зовсім очевидно і відчувається така дія дивно. А можна зробити навпаки: історія відкривається після кліку, а транзакція створюється при затисканні.
Можливо цей варіант вам сподобався, але мене дратують оці кількасот мілісекунд, на які мені треба "завмерти", щоб виконати якусь дію. Особливо важко це буде у суботу, коли ви вирішите ввести всі операції, які пропустили за тиждень. Це не моє.
Варіант 3
Натискання відкриває історію, а транзакція створюється перетягуванням, але не в комірку, а в напрям. Тобто замість перетягування з “Банківська карта” в “Продукти”, слід перетягнути її в “Видатки”. Після цього відкриється табличка з видатками, де можна буде вибрати їх стільки, скільки треба.
Після декількох спроб та обговорень я замінив вікно, що накладається (overlay) на підсвічування окремих зон.
Що далі?
Під час ітерацій більш важливо було визначити, який підхід буде зручнішим, ніж дотримуватися гарного стилю коду або витрачати час на проектування. Але продовжувати додавати нові функції на базі поганого коду — закладати міну сповільненої дії. Тому слідуюче наше завдання — рефакторинг.
Цим я й займуся в наступні кілька днів, а вам бажаю гарних новин та чудової погоди! 🌅
