Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги
Привет, Пикабу! Хочу рассказать историю о том, как обычный айтишник без особых знаний фронтенда создал довольно полезное веб-приложение, используя силу искусственного интеллекта. Спойлер: коллеги были удивлены.
Начальный экран приложения (прелоадер)
Завал задач и поиски спасения
Итак, дело было так. Очередной завал на работе, куча задач, мозг кипит. Вспомнил про технику Помодоро — это когда работаешь 25 минут, потом 5 минут отдыхаешь. Простая штука, но реально помогает не выгорать.
Полез искать нормальный таймер в интернете и... знакомая история:
Либо убого простые
Либо перегруженные фигнёй
Либо на английском
Либо платные
Либо ещё регистрацию просят
В общем, типичная ситуация: "Да я сам лучше сделаю!" Но проблема в том, что фронтенд я знаю на уровне "поменять текст на странице через консоль разработчика до перезагрузки".
Вспомнил про хайповую штуку
Тут я вспомнил про так называемый "вайб-кодинг" с нейросетями. Да, знаю, что многие к этому относятся скептически, но решил попробовать. Открыл Claude и написал примерно так:
"Старина, сделай мне HTML-страничку с таймером Помодоро. Нужно: таймер на 25 минут, задачи можно добавлять, статистика какая-нибудь и чтоб пикал когда время вышло."
И тут началось волшебство! Claude выдал мне полноценный рабочий прототип. Причём не просто "Hello World", а реально функциональную штуку😉:
Нормальным таймером
Возможностью добавлять задачи
Статистикой
Звуками
Меня понесло
Ну и дальше меня, конечно, понесло:
А можешь добавить сохранение в Local Storage?
А сделай звуки покруче
А перекрась вот это в зелёный
А добавь настройки времени
А мобильную адаптивность
Claude всё это выполнял как послушный джуниор! За час у меня был готов довольно приличный таймер.
Внешний вид приложения (начальной версии не осталось, к сожалению, показываю конечный результат)
Реакция коллег
Показал результат фронтенд-разрабам на работе со словами: "Смотрите, что я за час накатал, вообще без знаний!"
Их реакция:
😳 (удивление)
🤔 (изучают интерфейс)
😯 (ещё больше удивления)
Нефига себе, ништяк получилося! Реально работает!
Решил довести до ума
После такой реакции подумал: "А почему бы не довести это до продакшена?" И понеслось...
Сейчас можете посмотреть результат: pomo25.ru
Что в итоге получилось:
Для тех, кто хочет настроить под себя:
Настраиваемые интервалы (любое время, какое хочешь!)
10 типов звуков + можно загрузить свой
Ручное сохранение настроек
Push-уведомления в браузере
Для обычных людей:
Добавляешь задачи и следишь за прогрессом
Видишь статистику: сколько помидорок сделал
Не забываешь делать перерывы
Задачи сохраняются автоматически
Запуск таймера для добавленной задачи, длительностью 1 час
Настройки приложения
Про дизайн (не кидайтесь тапками)
Отдельно про дизайн. Да, я знаю, что он специфический. Это не потому что у меня нет вкуса (хотя может и нет 😅), а потому что я специально попросил Claude сделать что-то в стиле киберпанка 90-х.
Получилось ярко, кислотно, с неоновыми цветами и пиксельными эффектами. Возможно, не всем зайдёт, но зато запоминается!
Телеграм-версия
Потом решил пойти дальше и сделал версию для Телеграма: @pomo25_bot
Плюсы:
Данные синхронизируются через облако Телеграма
Уведомления приходят от самого Телеграма
Работает на телефоне как нативное приложение
Минусы:
Не работает в фоне (об этом ниже)
Приложение в Telegram
Проблема с фоновой работой
Единственное, что не смог победить — работу в фоне на мобилках.
Проблема в том, что:
Телеграм Web Apps работают в WebView
При сворачивании приложения WebView приостанавливается
JavaScript перестаёт выполняться
Service Workers в WebView работают криво
iOS вообще жёстко блокирует фоновые скрипты
В итоге при сворачивании таймер автоматически ставится на паузу. Для полноценной работы в фоне нужно было бы нативное приложение.
Опыт работы с нейросетями
Claude: король прототипирования
В начале Claude был просто космос:
Быстро понимает что нужно
Генерирует рабочий код
Хорошо итерируется
Не задаёт лишних вопросов
Но потом начались проблемы
Когда проект разросся, Claude начал путаться:
Исправляет одно, ломает другое
Забывает контекст больших файлов
Приходилось делать бэкапы в гите постоянно
Попробовал ChatGPT — ещё хуже! То ли ленился и отвечал "попробуйте перезагрузить страницу", то ли чинил совсем не там, где надо, вообще не понимая что происходит в коде.
Gemini спас ситуацию
Тогда попробовал новый Gemini (у него миллион токенов контекста). И охренел!
Gemini смог:
Прочитать ВЕСЬ проект целиком
Найти реальные причины багов
Переписать проблемные части
Почистить код от мусора
Реальная польза
Сейчас пользуюсь своим таймером каждый день:
Реально стал делать перерывы (раньше мог 3 часа сидеть не вставая)
Лучше планирую время на задачи
Меньше выгораю от сложных задач
Коллеги тоже подсели, просят фичи добавить, но я пока просто собираю обратную связь и анализируюю насколько это будет сложно реализовать и внедрить
Мораль истории
Современные нейросети действительно могут сильно понизить порог входа в разработку. Даже если ты не знаешь React/Vue/Angular, можно создать полезную штуку.
Но есть нюансы:
Для прототипов ИИ идеален
Для больших проектов нужно понимать что делаешь
Разные ИИ лучше для разных задач
Git обязателен при работе с ИИ
Итог
За час собрал рабочий прототип, потом пару недель в свободное время фиксил баги и боролся с нейросетями. В итоге получился реальный продукт, которым пользуются люди. Нейросети — не панацея, но инструмент мощный.
Сейчас собираю обратную связь (конструктивную, не токсичную) и планирую постепенно что-то добавлять и исправлять по мере поступления интересных идей.
Кто-то ещё экспериментировал с ИИ-разработкой? Поделитесь в комментах!
P.S. Если найдёте баги или будут идеи, пишите. Обратная связь очень ценна!
UPD: Забыл добавить — если кто захочет посмотреть, что получилось: pomo25.ru и @pomo25_bot в Телеграме!