Від кнопки до віджета в Notion

Сьогодні ми пройдемо шлях від кнопки пуску таймера до аналітики використання бюджету часу по проекту:

Після натискання кнопки створюється новий запис в БД Час з фіксацією поточного часу - це буде час старту виконання справи.

Для того щоб “підв’язати” запис часу під певне Завдання та зробити опис виконання справи - після натискання кнопки також відкривається нова сторінка, де ми обираємо Завдання, “підв’язане” під Проект. Якщо Завдання ще не існує - створюємо його та підв’язуємо під Проект (а якщо Проект новий - створюємо його).

Таким чином будь-якої миті ми через натискання кнопки таймера можемо створити новий Проект та Завдання по ньому.

Після закінчення Справи можна зупинити таймер кнопкою Стоп або перейти до іншої Справи з новим таймером, який зупинить запис часу поточної Справи та створить нову Справу, де ми оберемо інше Завдання того самого чи іншого Проекта.

Ми вже побачили в цьому сценарії три бази даних: “Час”, “Завдання” та “Проекти”.

Для оформлення цифр в зручний віджет - створена ще одна БД - “Аналітика”.

Отже, шлях такий:

1. Кнопка Старт додає в БД Час запис часу старту, а кнопка Стоп - запис часу зупинки

2. Час зупинки мінус час старту = витрачено хвилин на справу

3. В БД Завдання рахується сума часу, витраченого на всі Справи по кожному Завданню (коли ми повертаємось до Завдання кілька разів)

4. В БД Проекти рахується сума часу, витраченого на всі Завдання по кожному Проекту

5. В БД Аналітика ми підтягуємо бюджет часу на кожний Проект (з БД Проекти), витрачений час на Проект (також з БД Проекти), календарні дати початку та планового завершення Проектів та перетворюємо ці цифри і дати в інформативні фрази для відображення на картці

Покроково

1. Кнопка Старт

2. Кнопка Стоп

Кнопки ми поки що дивимось, робити ми їх зможемо після створення БД Час

3. БД Час

”Витрачено хвилин” рахуємо формулою dateBetween(prop("Стоп"), prop("Старт"), "minutes")

Додаємо до БД Час підключення з БД Завдання, а також витягуємо сюди зазначення Проекту з БД Завдання - це нам стане у нагоді потім (деталі по БД Завдання нижче, див. крок 6).

Підключення БД Завдання:

Підтягування Проектів з БД Завдання

Тут у читача може виникнути запитання до послідовності викладення кроків цієї інструкції.
Дійсно, як ми додаємо до однієї БД іншу, якщо ми ще не створили її? Ще й перетягуємо до першої БД посилання з другої БД на третю, якщо і третя БД ще не створена?

Творці Notion завжди стикаються з необхідністю утворення зв’язків між базами. Ми в TEMPLOTION завжди цікавимось у розробників шаблонів як вони з цим справляються, бо іноді кількість пов’язаних баз може сягати кількох десятків.
Це залежить. У когось мейнстрім такий, що все в голові. Хтось береться за олівець та А3. Якщо команда працює - користуються онлайн-сервісами типу Miro (насправді, перелік прототипизаторів дуже великий, просто Miro спало на думку зараз).
В цьому нашому випадку просто можна створити чотири підсторінки, створити там БД, назвати їх Час, Завдання, Проекти та Аналітика, і тримати їх відкритими на чотирьох вкладках, перемикаючись між вкладками за потреби по ходу цієї інструкції, як варіант - цього має вистачити.

Йдемо далі. Ми створили старт та стоп, навчили рахувати хвилини між стартом та зупинкою, зробили можливим обрання Завдання, після чого буде підтягуватись Проект.

Тепер час робити кнопки Старт та Стоп.

4. Робимо кнопки

Якщо ще не користувались кнопками і не дуже в курсі з чого почати - обираємо зручне місце для них і просто пишемо:  /but

Тепер повертаємось до кроків 1 та 2 вище і робимо як на скрінах. Іконки та текст - як подобається, експериментуємо))

Є один момент для невеличкої зупинки на "Стоп".

Для зупинки часу в поточній Справі (тобто в Справі, яку пи почали кнопкою Старт) ставимо фільтр:

Варто пам'ятати цей крок потім, при використанні: якщо натиснути більше одного разу кнопку “Старт” а потім натиснути кнопку "Стоп" - всі запущені “Стартом” Справи отримають однаковий запис про зупинення часу (що може не завжди відповідати дійсності).

5. БД Час, поліпшення

В БД Час можна додати дещо:

• якщо кнопка Стоп ще не натиснута - можна подивитись скільки часу минуло від Старту, для цього можна додати актуальний час і віднімати від нього час Старту - так ми побачимо скільки ми вже виконуємо поточну справу

Поточний час:

Хвилин від старту:

• якщо після Старту минуло більше ніж 60 хвилин - ми будемо бачити кількість хвилин, наприклад, якщо це буде 178 хвилин то треба буде трошки зусиль щоб зрозуміти що це майже три години; також, коли ми зупинили час і хочемо подивитись скільки справа зайняла часу - теж побачимо кількість хвилин і все що більше 60 хвилин вже виглядає незвично - тому переводимо хвилини в [ХХ год. ХХ хв.]

формула: format(concat((prop("Усього хвилин") >= 60) ? (format(floor(divide(prop("Усього хвилин"), 60))) + " год. ") : "", (mod(prop("Усього хвилин"), 60) > 0) ? (format(mod(prop("Усього хвилин"), 60)) + " хв. ") : "0 хв."))

Тепер ми готові перейти до БД Завдання.

6. БД Завдання

Як вже на кроці 3 вище ми побачили, БД Завдання містить назву Завдання (основне поле), до завдань ми підтягуємо БД Проекти, щоб кожне Завдання відносити до конкретного Проекту, і ще ми можемо додати Етапи, які не впливатимуть на аналітику часу (хоча можна щоб впливали, то вже як зручно), але допомагатимуть подрібнити Проект на Завдання.

Підключаємо БД Проекти

Додаємо Етапи

Якщо ще на кроці 3 не підключили БД Час - підключаємо звідси:

Тепер витягуємо з БД Час суму часу, який використовуватиметься на кожне Завдання. Тут наше завдання - порахувати саме суму часу всіх Справ з БД Час, які (Справи) ми підв’язали під певне Завдання, тому в полі “Calculate” властивості “Relation” ми обираємо показник “Sum” для властивості “Витрачено хвилин” БД Час (початкове значення буде “Show original”, яке показуватиме через кому кількість витрачених на кожну Справу під це Завдання хвилин - обираємо “Sum” і бачимо суму хвилин):

Одразу обробимо отримані хвилини для того щоб їх можна було додати до БД Проекти (коли ми в БД “Проекти” захочемо додати ці хвилини - ми їх не побачимо, бо власність “Rollup” однієї бази (БД Завдання) не може бути показана в власності “Rollup” іншої бази (БД Проекти): ми це обходимо тим що дублюємо цифри в іншу властивість нашої БД Завдання через простий показ в іншому, рідному для цієї бази, а не “витягнутому” з іншої бази, стовпчику):

Йдемо далі: ми знову бачимо хвилини і знову більше ніж 60 хвилин - це незручно.

Для отримання такого віджету

ми переводимо хвилини в [ХХ год. ХХ хв.] та додаємо текст (як на кроці 5 вище):

- переведення хвилин в  [ХХ год. ХХ хв.]

формула: format(concat((prop("Стат: Час для БД Проекти") >= 60) ? (format(floor(divide(prop("Стат: Час для БД Проекти"), 60))) + " год. ") : "", (mod(prop("Стат: Час для БД Проекти"), 60) > 0) ? (format(mod(prop("Стат: Час для БД Проекти"), 60)) + " хв. ") : "0 хв."))

Додавання тексту:

формула: "⏲ Використано: " + format(0 + toNumber(prop("Час з БД Час"))) + " хв. " + " (" + prop("Стат:хв=год") + ")"

З БП Завдання завершили. Наступний крок - БД Проекти.

7. БД Проекти

Назва проекту - основне поле.

Підключення БД Завдання має вже бути - ми його мали зробити на кроці 3 або на кроці 6.

Завдяки підключенню сюди БД Завдання ми тепер будемо витягувати сюди час - всі Справи під Завданнями пораховані окремо в БД Час, пораховані загалом в кожному Завданні в БД Завдання (якщо ми кілька Справ робили для одного Завдання), і тепер ми тут, в БД Проекти, будемо рахувати суму часу, який записаний по всіх Завданнях кожного окремого Проекту:

Як і на кроці 6, ми вибираємо “Sum” в полі “Calculate”, щоб побачити не окремі кількості хвилин на кожне Завдання певного Проекту, а саме їх суму.

Тут ми не будемо формат хвилин змінювати в формат [ХХ год. ХХ хв.] - зробимо це потім в БД Аналітика. Натомість, ми перерахуємо хвилини в години в форматі десятичного дробу (наприклад 2,83 годин), а також зробимо візуалізацію у вигляді простого лінійного бару (bar chart).

Час (хвилини) переводимо в години в форматі десятичного дробу (170 хв. = 2,83 год.)

формула: round(prop("Часу пішло") / 60 * 100) / 100

Далі бар (bar chart). Для обчислення нам потрібно спочатку додати загальну кількість часу, відведеного на проект. Зазвичай, бюджет часу існує. Якщо проект особистий, тоді можна або згадати якийсь схожий проект з досвіду або уявити приблизну кількість годин на реалізацію проекту.

Взагалі, визначення часу на проект, навіть якщо проект планується за супер гнучкою найеджайлівішою технологією - він має мати бюджет часу в ближній перспективі. Хоча би до першої віхи.Визначення часу на реалізацію проекту або на досягнення цілей - це одна з тих навичок, яка додає ще один нуль до гонорару будь-якого спеціаліста будь-якого рівня, тому що той хто платить - користується всього трьома кінцевими показниками: гроші, час, якість - і саме час - на боці спеціаліста. Як би замовник не намагався нафантазувати собі власний контроль часу, він ніколи його насправді не має, і коли він зустрічає спеціаліста, який впевнено, базуючись на досвіді, реально та аргументовано говорить про бюджет часу - замовник, який розуміє бізнес вище середнього, додає до гонорару спеціаліста просто щоб його не впустити, бо він знає, що таке трапляється вкрай рідко і другий варіант - це лише витратити ті самі гроші або більше, але втратити час, який не повернеш. Тому наявність властивості “Бюджет часу” важлива, навіть в особистих проектах - це про навичку, справді цінну навичку.

Отже, бюджет часу. Це у нас просто цифра, вводиться вручну. За бажання, можна її складати з бюджетів часу Завдань в БД Завдання, або з бюджетів часу Етапів в БД Завдання, кому як зручно.

Бар рахує відсоток часу, використаного вже, від загального бюджету часу на Проект, та показує простим лінійним графіком (ще можна просто цифрою, а можна колом):

формула: round(prop("Стат: Часу пішло (годин)") / prop("Бюджет Годин: ") * 100) / 100

З часом в БД Проекти розібрались. Залишилось ще опрацювати дати.

Робимо стовпчик Старт-Фініш для планування, витягуємо з цих дат дату Старту та дату Фінішу (це можна зробити потім і формулами, та так буде простіше для розуміння в рамках цього матеріалу), та рахуємо кількість днів, запланованих на проект в календарному сенсі (тобто, не в часовому).

Дати Старт-Фініш:

Витягуємо Старт:

формула: start(prop("Старт-Фініш"))

Витягуємо Фініш:

формула: end(prop("Старт-Фініш"))

Рахуємо кількість днів:

формула: dateBetween(end(prop("Старт-Фініш")), start(prop("Старт-Фініш")), "days")

Як бачите, для підрахунку кількості днів між Стартом та Фінішем ми не використовували “витягнуті” на попередніх двох кроках дати Старту та Фінішу, а взяли їх одразу в полі “Старт-Фініш”. Так робити ефективніше (менше роботи, а результат такий самий). Але ми залишимо окремо витягнуті дати і використаємо їх в наступній базі - БД Аналітика. Ми додамо ці дати до тексту для віджета по проекту.

Ми завершили з БД Проекти і приступаємо до БД Аналітика.

8. БД Аналітика

Власне, ця БД нам потрібна як завершення нашого шляху від натискання кнопки Старт до відображення зібраних даних в зручному віджеті.

Скільки днів на проект - ми вже порахували в БД Проекти.

Календарний проміжок часу теж в БД Проекти.

Бюджет часу ввели вручну, після змін в БД Проекти новий бюджет побачимо на цьому віджеті.

Скільки використано часу порахували.

Бар зробили, але сюди його не протягнеш - зробимо вдруге швиденько.

“Ще залишилось” - теж порахуємо.

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

По-перше, обираємо основне поле: ми обрали назву Проекту.

Для того щоб потім за назвою проекту відобразилась потрібна нам інформація - підключаємо БД Проект: саме в цьому полі ми оберемо відповідний проект і всі його показники підтягуємо таким чином.

Підключення БД Проекти:

Далі витягуємо бюджет часу, використаний час, старт, фініш та кількість днів на проект.

Бюджет часу:

Годин використано:

Старт:

Фініш:

Днів на Проект:

Далі наше завдання - перетворити цифрові значення на зрозумілий звичний текст для його відображення в майбутньому віджеті.

Текст про кількість днів, відведений на Проект:

формула: "🕐 На проект відведено  " + format(prop("днів на проект")) + " дні(в):   "

Зазначення на віджеті дат початку та закінчення Проекту:

формула: "" + prop("Старт:") + " - " + prop("Фініш:")

Бюджет часу в годинах:

формула: "⌚ Бюджет часу проекту: " + format(prop("Бюджет часу на проект")) + " год."

Інформація про кількість використаних годин:

формула: "⏲ Використано: " + format(0 + toNumber(prop("Годин використано"))) + " год. "

Робимо бар, який візуалізує використаний час в порівнянні з плановим бюджетом часу:

формула: round(toNumber(prop("Годин використано")) / prop("Бюджет часу на проект") * 100) / 100

Тепер пишемо текст і одразу рахуємо скільки залишилось часу (бюджет часу мінус використано часу):

формула: "⏳  Ще залишилось: " + format(prop("Бюджет часу на проект") - toNumber(prop("Годин використано"))) + " год."

Все, ми майже закінчили.

Залишилось зробити зручну інформаційну картку по Проекту.

9. Віджет по Проекту

Для вигляду в формі картки використаємо розмітку “Gallery”:

Натискаємо Done. 

Заходимо до Properties, обираємо наші текстові поля (натискаємо на закреслені ока 👁 для того щоб ми їх могли бачити):

Отже, ми отримали те, до чого прагнули, дякую за роботу!

10. Бонус для тих хто з нами до кінця: кнопка для наступної Справи

Щоб не натискати кнопку “Стоп” для того щоб потім знову натиснути на “Старт”, коли ми після завершення однієї Справи одразу переходимо до виконання наступної - можна додати кнопку “перемотки”, яка завершить поточну Справу і одразу почне наступну Справу.

Кнопка нескладна зовсім, але її використання дозволяє уникати зайвих рухів, а також дозволяє уникати команди “Стоп, відпочинок” нашому мозку, коли ми натискаємо на червону кнопку Стоп. 

Звісно, у кожного цей процес відчувається по-своєму, але якщо наша підсвідомість працює на збереження життєвої енергії без нашого усвідомлення, то чому б і не користуватись інструментами, які активізують розумову діяльність, не використовуючи механізмів, які, ймовірно, можуть містити інші вектори мотивації ? 🙂

Кнопка:

Для зупинки часу в поточній Справі ставимо фільтр:

Як і з кнопкою “Стоп” (крок 4 вище), має бути певна усвідомленість цього процесу: якщо натиснути більше одного разу кнопку “Старт” а потім натиснути цю кнопку “перемотки” - всі запущені “Стартом” Справи отримають однаковий запис про зупинення часу. Тому не варто забувати що у вас віткритий таймер, а найкращим рішенням буде розміщення десь поруч з кнопками одного простого віджета, який буде показувати поточну Справу (яка не має запису в полі “Стоп”) - тоді перед натисканням будь-якої кнопки побачите підказку про запущений таймер:

Ми завершили. Ми пройшли довгий шлях від кнопки до аналітики, який налаштовується кілька десятків хвилин, а виконується за долі секунди.

Готовий шаблон, скріни якого використані в цьому матеріалі, можна придбати у нас в TEMPLOTION: 

посилання на сторінку сайта з шаблоном

З побажаннями натхнення

Зробімо життя зручнішим!

Володимир Дьяченко з TEMPLOTION