Привет, меня зовут Мария Лем, я ведущий оптимизатор в IT-Agency. В этой статье поделюсь опытом создания собственного тайм-трекера, он же программа учёта и оценки рабочего времени.
Покажу, что нужно, чтобы собрать собственный инструмент, как его улучшить и что сделать, чтобы опубликовать сервис в магазине расширений Chrome, находясь в России.
Опишу весь процесс от первой идеи до конечного результата и отвечу на вопрос: зачем вообще делать свой тайм-трекер, хотя существует много готовых решений?
Мария Лем
ведущий оптимизатор
Зачем изобретать велосипед
Трекер времени – не какая-то вау-новинка, а обычный рабочий инструмент. Вариантов очень много: приложения, расширения для браузера и т.д.
Поэтому первое, что я сделала – попробовала существующие сервисы. Для меня было важно, чтобы решение удовлетворяло моим основным требованиям:
- Тайм-трекер – расширение для Chrome. Это мой основной рабочий браузер.
- Есть возможность разбивать записи по проектам и задачам, а главное – выбирать названия из сохранённого списка.
- Когда трекер активен или на паузе – это явно видно в панели расширений. Иногда задачи затягивают, и попросту забываешь, что включил трекер.
- Отметки времени можно редактировать. Как бы я ни старалась качественно вести учёт времени, всё равно где-то что-то потеряю и не запишу вовремя, – нужно править постфактум.
- Самое главное: зафиксированное время можно выгружать в виде таблицы с удобной разбивкой по проектам и задачам.
Были и дополнительные «хотелки», но основное я перечислила выше.
Сначала мыслей о том, чтобы изобретать свой велосипед, не было. Я попробовала несколько готовых расширений, но оказалось, что найти всё необходимое мне в одном сервисе, – задача непростая.
Вот какие тайм-трекеры я опробовала:
Их было гораздо больше, когда я писала текст, вспомнила только эти.
Решений оказалось предостаточно, только вот мне они не подходят.
Есть много велосипедов, но этот велосипед – мой
Возможно, существует трекер, который делает именно то, что мне нужно, но тратить время на поиски с неизвестным результатом не хочу. Поэтому на помощь пришёл Cursor, с которым мы уже не в первый раз создаём решения для себя.
Напомню, мне нужно расширение для Chrome. Чтобы его протестировать, можно загружать архив локально или добавить расширение в интернет-магазин Chrome.
- Локально – данные подтягиваются из папки на компьютере пользователя; другой пользователь может установить расширение, если создатель передаст ему архив. Если разработчик что-то поменяет, другому человеку придётся скачивать обновлённую версию архива для обновления. При такой схеме история записанного времени потеряется.
- В интернет-магазин Chrome – расширение доступно всем пользователям, обновления тоже доступны для всех.
Первые тестирования были на моём ПК: загрузил-обновил-проверил. Даже с первого раза Cursor сделал скромную, но вполне рабочую версию.
Ввод проекта разбит на две строки, иконка в панели – просто квадрат, нет вкладок по вчерашним и более старым задачам, всё выглядит сыроватым. Но основной функционал работает.
Разработку этого тайм-трекера могу назвать примером простого вайбкодинга (программирования в нейросетях) – здесь нет каких-то сложных зависимостей или необычного функционала.
Специализированных промптов или нестандартного подхода к общению с агентами не использовала. Смотреть в сам код мне тоже было не нужно – проблем практически не возникало. Обнаруженные баги исправляла в обычном диалоге с нейросетью. Все команды описывала чётко, но по-человечески, например:
- Сделай календарь и выбор дат в стиле нашего расширения, не используй системный календарь. При выборе даты закрашивай её в календаре зелёным цветом, который мы используем сейчас в дизайне.
- Давай реализуем выбор проекта с помощью только одного поля с input. При клике на поле разворачивается выпадающий список с названиями проектов, которые пользователь указывал ранее. Пользователь может выбрать название проекта из списка или ввести новое, в таком случае новое название сохранится в список. Также пользователь должен иметь возможность удалить сохранённое в выпадающем списке название проекта.
- Выровняй по ширине поле ввода названия проекта и кнопки добавления и удаления проекта.
Когда MVP (он же минимально жизнеспособный продукт) был готов, попросила нескольких коллег установить расширение и протестировать его. Так мы нашли пару багов, и с помощью того же Cursor я быстро исправила их.
В итоге у меня появилось расширение со всеми нужными функциями.
В основном поле зрения ключевой функционал таймера: выбор проекта и задачи, основные кнопки тайм-трекера.
Теперь посмотрим на детали. При изменении статуса таймера меняется иконка. У некоторых протестированных решений минорно менялись оттенки или бегущие цифры таймера: в первом случае я просто забывала о трекере, а во втором это раздражало и отвлекало.
Для своего расширения сделала простые статичные иконки таймера:
пустая – не запущен;
красная – активен;
жёлтая – на паузе.
Можно редактировать запись и менять в ней абсолютно всё: название проекта, задачи, длительность, перенести время на другую дату.
Зафиксированное время можно посмотреть в трёх вкладках: за сегодня, вчера или другую дату из календаря.
Кстати, прошлые задачи можно продолжить по кнопке – удобно выбрать, например, вчерашнюю задачу и продолжить трекать время по ней. Данные за вчера останутся, а в сегодняшнюю статистику запишется новое время.
А ещё можно выгрузить время за любой удобный период в таблицу. Сейчас выгрузка разделяется на три листа:
- Всё затреканное время в хронологическом порядке. Например, если вы трекали время в одну и ту же задачу для проекта несколько раз, оно сохранится «как есть»: несколько записей с разной отметкой времени и длительностью, но одним и тем же названием проекта и задачи.
- Суммарное время по проектам. Неважно, какими были названия задач – считается общее время по названиям проектов.
- Суммарное время по проектам/задачам. Если, например, вы затрекали несколько задач с одинаковым названием, но в рамках одного проекта, они схлопнутся. Например, вы провели несколько планёрок за неделю в рамках одного проекта, и трекали время с одинаковым названием проекта и задачи. В выгрузке посчитается суммарное по конкретной задаче для этого проекта.
Ещё я сделала напоминания через отрезок времени. Как я уже говорила, некоторые задачи затягивают, и иногда даже изменение иконки не помогает.
Можно выбрать любую периодичность в минутах. По умолчанию – 15.
Оповещения максимально лаконичны.
При включении активируются системные оповещения – они всплывают поверх всех окон и сопровождаются коротким звуковым сигналом. Оповещения не содержат упоминаний проекта или задачи – можно не бояться шарить экран.
Честно скажу, иногда я использую оповещения и в быту. Удобно, когда что-то готовится в духовке, и нужно проверить блюдо через какое-то время.
Ещё несколько функций кратко:
- можно выбрать между светлой и тёмной темой или включить умное переключение: с 23:00 до 8:00 – тёмная, в остальное время – светлая;
- Доступно 9 языков, чтобы изменить текст в интерфейсе и выгрузке;
- Можно выбрать воскресенье первым днём недели, если пользователь в стране, где рабочая неделя начинается так.
Вот такой велосипед у нас с Cursor получился.
Поехали: как я опубликовала свой тайм-трекер в магазине расширений Google
Честно, я делала расширение в первую очередь для себя. Но когда попросила коллег протестировать и дать обратную связь, им тоже понравилось.
Напомню, есть два варианта делиться расширением – локально и через интернет-магазин Chrome. Локально — не вариант, потому что обновления и лечение багов получат не все.
Поэтому я зарегистрировала кабинет разработчика в магазине расширений.
Технически это просто. Возможная сложность у пользователей из России при регистрации как разработчик в магазине расширений Chrome – нужно верифицировать свой кабинет за единоразовую оплату в $5. Если что, российские карты, на момент написания статьи всё ещё не принимают.
Когда появился личный кабинет, просто загрузить архив недостаточно, нужно добавить комментарии по тем разрешениям, которые нужны для работы расширения. Тут тоже помог Курсор. Я просто написала, что мне нужно заполнить обоснования для storage, alarms, notifications для загрузки в Chrome, и он подготовил текст.
Обоснования – это просто комментарии, зачем нашему расширению нужны те или иные разрешения.
Я загружала расширение в два этапа: сначала только базовую версию в старом дизайне и без системных оповещений. Модерация заняла дней пять – сервис появился в магазине.
С финальной версией модерация заняла больше времени – около двух недель. Логично: у меня появились разрешения на системные оповещения. Видимо, к ним проверяющие относятся более трепетно.
Сейчас моё расширение, сделанное вайбкодингом через Cursor, можно найти и установить из официального интернет-магазина Chrome.
Хотите попробовать? Ссылка здесь → ChronoLog.
Устраивает ли меня результат? Более чем. Надеюсь, вам тоже понравится, хотя есть шанс, что захотите функции из других решений: личный кабинет на сайте и визуальная статистика, интеграция с сервисами и так далее.
Чего лично мне хотелось бы докрутить? Пожалуй, можно сделать более стильный и современный дизайн. Но мне, если честно, комфортно и так.
Подытожим:
- Вайбкодинг позволяет решить простую задачу быстро и без глубоких профессиональных знаний. Главное, чтобы задача была действительно лёгкой и понятной, а вы чётко понимали, какой результат хотите получить: сценарии, функции и т.д.
- Любой продукт, сделанный через вайбкодинг или нет, нужно тестировать. В моём случае коллеги нашли несколько багов и поделились обратной связью.
- Я делала сервис в первую очередь для себя и с учётом своих потребностей, хотя на рынке много аналогов. Мне не нужна монетизация. Если бы это был коммерческий или репутационный проект, нужно было бы проводить глубокую аналитику рынка, сбор обратной связи на большой аудитории, делать расширение функционала, строить понимание, как продвигать такой продукт. В любом маркетинговом продукте это обязательно должно быть.
Иногда вайбкодинг – это не про то, как сделать что-то новое, а как сделать что-то для себя. Всегда удобнее ездить на велосипеде, который подобран конкретно под нас, иногда этот велосипед можно собрать самому.
Конспект вебинара «Как удалённо управлять контент-маркетингом, чтобы он давал результаты»
Как использовать таблицу оценки звонков для улучшения работы менеджеров
Карточка переговоров по Кемпу
ИИ для инфлюенс-маркетинга: 8 промптов и советы, которые упростят работу с блогерами в соцсетях
Галлюцинации ИИ: почему они появляются и как их избежать