Вступление

Я люблю приложения для задач и заметок, но с трекерами привычек так и не смог подружиться. В один вечер мне понадобилось знать, сколько дней я непрерывно занимаюсь одним делом. Не хотел это класть в задачи, потому что пришлось бы считать руками, сколько я непрерывно выполнял задачу. И начал накидывать в Гугл таблицах закрашенные ячейки для подсчета.

Моя девушка в это время делала Duolingo и я слышал приятные звоны выполненных упражнений. И тут мне пришло озарение, что если бы был трекер привычек, который как Duolingo закидывает визуальными наградами, поддержкой стрика и другими вещами, которые выдают немного дофамина, я бы смог наконец вести трекер привычек. Поиск таких приложений я отдал на Claude, который пыхтел 20 минут и выдал мне список трекеров, которые могли бы подойти. К сожалению, ни один из них мне не подходил полноценно: где-то стрик можно увидеть только в статистике, какие-то слишком перегружены, какие-то не подходят эстетически. Ложась спать, я понял, что могу попробовать сам собрать дофаминовый трекер привычек и так, размышляя о том что в нем должно быть, уснул.

День 1. Утро

Проснувшись, я почти сразу сел за ноутбук. Делать приложение я решил через нейросети, так как опыта с интерактивными сайтами у меня не было. Вбил запрос с тем, что должно быть в приложении и почему, и получил html-страницу, с которой началась вся база.

Там были привычки, которые можно было сбросить все сразу одной кнопкой и пара счетчиков на главном экране, которые показывали состояние привычек. По одному запросу за раз я просил улучшить, добавить или удалить функционал. Так постепенно появилась синхронизация и аккаунты, которые Claude подсказал как мне подключить к базе данных и хостингу. Вместе с аккаунтами добавил восстановление пароля. Затем добавил попапы при удалении привычек.

С попапами почему-то вышла отдельная проблема, потому что они никак не хотели появляться. Пришлось произвести около 6 итераций, чтобы появлялся хотя бы браузерный попап подтверждения. Благо, Claude сам прокидывал логи для дебагга, подсказывал куда посмотреть и какая информация ему нужна, чтобы локализовать проблему.

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

После сделал кнопки для показа "Обновлений" и "Донатов", которые может изменять только админ. Проверив, ушел на прогулку.

День 1. Вечер

Придя домой, я снова сел за ноутбук. Во время прогулки я подумал, что странно, что почта админа напрямую прокидывается в код сайта и решил уточнить у Claude в новом чате, проблема ли это. Он сразу же сказал, что это огромная проблема и ни в коем случае нельзя так делать, хотя ранее сам именно так реализовал функционал. Это был первый момент, в котором потенциальная проблема была разрешена благодаря хоть какому-то опыту в разработке.

После переделывания функционала, админская почта указывалась в базе данных. Я добавил свою почту, открыл страницу "Обновлений" и не увидел кнопки для редактирования, хотя раньше она там была. Начался долгий процесс дебаггинга, в котором Claude высказывал предположения и изменял код, а я обновлял его и проверял, появилась ли кнопка. Кнопка не появлялась. И наступил второй момент, в котором без моих предположений, мы бы застряли. Я скинул Claude правила доступа из базы данных и оказалось, что нужно было переписать правила, потому что они не добавляли отдельные правила для администраторов. Баг был побежден и работа продолжена.

Я решил добавить достижения для большей мотивации продолжения стрика. Функционал встал очень быстро и начал работать, но не без изъянов. Нужно было переделать порядок достижений и сортировку в коде, иначе полоска прогресса считала прогресс до максимального достижения, а не ближайшего. И здесь начались проблемы.

Так как все это время Claude расширял единственный html файл, в коде накопилось около 1700 строк. И, видимо, из-за того, как Claude работает, он часто переписывал большие блоки с нуля вместо точечных правок. А при создании нового чата он вовсе переписывал весь код заново. И он начал захлебываться, не мог нормально выдать весь код окончательно и заканчивал диалог с написанным наполовину кодом. Несколько раз проитерировав, я столкнулся с лимитом запросов.

Когда лимиты обновились, я попробовал снова с разными запросами сделать так, чтобы он использовал уже готовый код и вносил изменения точечно, но он каждый раз начинал писать весь код с нуля. Попытки поиска информации о том, как это исправить, не увенчались успехом и я снова очень быстро уткнулся в лимит, который должен был обновиться только утром.

Тогда я решил обратиться к Deepseek, потому что в одной из статей, которые я прочитал в попытках поправить ситуацию с Claude, их сравнивали в написании кода. Я отдал Deepseek весь код и попросил оптимизировать его и удалить лишние комменты. Deepseek также начал выдавать с нуля код, строчка за строчкой. Скорость была ниже, чем у Claude и примерно через 10 минут я получил итоговый html-файл. Переписывание кода добавило несколько багов, которые я просил у Deepseek исправить и выдать мне конечный код, но вместо неразумного использования лимитов, он просто начал выдавать ошибку на этот запрос. В итоге, я решил править код руками с помощью Deepseek. Я описывал ему проблему, он отдавал код, который нужно вставить и говорил куда. А я руками вставлял его и тестировал, все ли работает. В какой-то момент код начал выдавать пустую страницу. Попробовав несколько итераций с Deepseek, он не смог найти ошибку.

Тогда я обратился к Google Gemini, раз уж пошел тестировать разные нейросети. Я не просил его выдать сразу готовый код, так как устал ждать написание с нуля. Он также как и Deepseek выдал несколько итераций правок, которые не исправили проблему пустой страницы. И здесь наступил третий момент, когда я решил проявить самостоятельность. Мне просто стало интересно, падает ли какая-то ошибка в консоли. И конечно же ошибка падала. Я просто скопировал ошибку, отдал ее Gemini и он объяснил, что нужно поменять порядок сущностей в коде, потому что это вызывает ошибку. Я поменял порядок и страница заработала.

Я вернулся к Deepseek, чтобы уточнить один момент, который я упустил в рассказе ранее. Перед исчерпыванием лимитов Claude, я спросил у него, нормальные ли графики показывает использование базы данных, потому что мне они показались большими. Отправил скрин и получил информацию, что нужно оптимизировать код, потому что происходит слишком много записей и чтений базы данных, что плохо. Мне было интересно мнение Deepseek по этому вопросу и я отдал ему ровно тот же запрос с тем же скриншотом, который отправлял в Claude. И Deepseek сказал, что это абсолютно нормальные значения и не о чем переживать. С мыслью об этих противоположных мнениях я пошел спать.

День 2. Утро

Утром я снова сел за ноутбук. Пока я засыпал, думал о том, что странно содержать весь код в одной странице, но опыта создания сайтов с кучей разных файлов кроме html-страниц у меня не было. Лимиты Claude обновились и с последней надеждой я попросил его разбить весь код на несколько файлов, чтобы с ними было удобнее работать. Он начал пыхтеть, несколько раз пришлось нажимать продолжение диалога, потому что в один диалог он не умещал все. И к моему облегчению, он смог выдать несколько конечных файлов, объяснил как их разместить и запустить.

Так как я не хотел случайно сломать работающий сайт, а размещение новой версии требовало хостинга, а не просто запуска html в браузере, нужно было разобраться с отделением веток и билдами с них. Я представлял себе это очень сложным процессом и начал спрашивать у Claude, как мне это реализовать. По совету от Claude в начале, я разместил сайт через Netlify. И Claude сразу выдал мне короткую, понятную инструкцию, как включить функционал билдов с разных веток и получить к ним доступ. Сделав все по инструкции, я увидел работоспособную страницу с отдельной ветки и обрадовался, что путешествие на этом не закончилось.

В предыдущий день, когда я уже закончил с нейросетями, сел тестировать приложение, чтобы написать список доработок. Решил выйти с аккаунта, чтобы проверить, как сохраняются данные. Ранее я уже тестировал этот функционал и все работало. Но, видимо с оптимизацией от Deepseek, перестало. Почему-то при выходе и входе в профиль, очищались привычки в базе данных и профиль был без привычек, но с сохраненными стриками и достижениями. Фикс прошел быстро, но баг, который нейросеть создала, мог быть очень критичным, если бы его не обнаружил на тестах.

Далее я продолжил полировать мелочи, которые мне не очень нравились. После окончания полировки, я вернулся к вопросу нагрузки на базу данных. Так как во время тестов я получил новые графики запросов, я передал их Claude и задал вчерашний вопрос. К моему удивлению, он сказал, что все в порядке, хотя графики мало отличались от вчерашних. Тогда было очередное проявление человеческого разума. Я начал уточнять ему, что это график запросов за час, на что он сказал что все в порядке. Потом я уточнил, что вот, смотри, это все произошло за пару минут пользования, и тогда он прозрел. Сказал, что это вообще не нормально и сразу предложил оптимизацию, которая сразу же была заметная на графиках.

Для меня проект был готов, багов на нашел. Тогда в новом диалоге я добавил весь код проекта и попросил дать предложения по улучшениям всего: от функционала до текстов в приложении. Claude выдал довольно большой список и спрашивал, что я хочу из этого внедрить. Начал я с технических вещей. Сначала получил новый код с оптимизацией, затем Claude предложил добавить оффлайн-функционал. Сначала я согласился, но потом подумал, что так как приложение сделано в форме сайта, пока что не хочу заморачиваться с оффлайном и остановил его написание кода. Тогда я решил переключился на визуальные доработки и здесь всплыла новая проблема взаимодействия. Несмотря на то, что я остановил его запрос, связанный с оффлайн, в последующих запросах он считал, что функционал реализован и подвязывался на него. В итоге получилось что-то нерабочее и данный диалог был уже сломан, потому что просить его что-то забывать я не стал, чтобы не сломать что-то уже рабочее, если вдруг он забудет то, что не нужно было забывать.

Начал новый чат и с первых двух запросов исчерпал лимит.

День 2. Вечер

Я начал тестировать предложенные идеи. Сначала он выдал исправления, которые превратили приложение в какой-то свистящий, искрящийся, жутко лагающий перфоманс.

Далее я просил сделать лучше отдельные части, но с этим Claude справлялся так себе. К тому же, он зачем-то опять начал добавлять кучу строк в index.html, хотя код был уже подроблен на отдельные части. После нескольких итераций креативности от Claude, я понял, что зря потратил время.

Сам поменял некоторые тексты, попросил добавить кнопку контактов и починить пару шероховатостей. Проверил работу на ноутбуке и с телефона, поправил адаптивность и решил оставить приложение таким, какое оно сейчас и уже потестировать работу самому в реальной жизни.

Конец?

Таким образом, за 2 дня без понимания строения сайтов, я смог поднять свой интерактивный сайт с подходящим под мои нужны видом и функционалом. Хоть и в моменте было нервно, но в итоге очень полезным для меня было тестирование изменений больших объемов данных и креатива от нейросетей. Еще раз убедился, что если что-то кажется странным, нужно спрашивать, нормально ли это и не доверять до конца всему, что выдает нейросеть. Но как инструмент для создания небольших вещей - это очень круто. Я ничему не научился из программирования, но зато смог собрать инструмент под свои нужды, а не искать меньшее зло на рынке.

Пока из идей дальнейшего развития сделать из сайта Progressive Web App или вообще полноценные приложения на десктоп и мобильные устройства, но пока не уверен, буду ли это делать, потому что в браузере хорошо работает.

Спасибо всем, кто дошел до сюда. Попробуйте это приложение для себя. Вдруг это то, чего вам не хватало, как и мне. Все предложения и замечания приветствуются ❤️