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

Я не разработчик, а проектировщик интерфейсов (UX/UI-дизайнер). Опыта в программировании совсем немного. Поэтому пет-проект был мне особенно интересен. Я уже двадцать лет готовлю проектную документацию для других — а в этот раз для себя.

Сейчас расскажу, как я довёл идею до продукта, как мне в этом помог ChatGPT и почему это было иногда весело и интересно, но большую часть времени — скучно и грустно.

Почему я решил сделать ЦРМ нормального фрилансера

Надоело хранить данные по клиентам, проектам и задачам в разных местах. А ещё у меня есть видение. То, что я делаю сейчас — это просто база, фундамент. Действительно интересные функции будут позже. ЦРМка будет узко заточена на одиночек: фрилансеров, ремесленников, самозанятых. И будет помогать им делать то, что никто не любит: пополнять базу клиентов, не забывать собирать отзывы по проектам, следить за тем, чтобы сроки не срывались (а если и срывались, то с предупреждением заранее).

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

Первый шаг: подготовка проектной документации

Сначала проектирование. Я подготовил небольшой документ с функциональными требованиями к проекту. Кто что в нём может делать и какие там есть разделы. Идея очень простая: список задач, список клиентов и список проектов. И все они могут быть связаны между собой (а могут и не быть). У задач есть опциональные дедлайны. А ещё у каждой сущности есть многострочное текстовое поле для ведения заметок (например, можно использовать для контактов клиентов или для уточнения деталей по проектам и задачам). Вот и всё для начала.

Затем по функциональным требованиям я подготовил небольшой интерактивный прототип в Axure (вот ссылка для любопытных). Интересных разделов получилось девять. Это всё, что связано с задачами, клиентами и проектами. А неинтересных — тринадцать. Это вход, регистрация, восстановление пароля, архивы и прочее. Очень нелегко было ограничивать себя и не придумывать новых функций.

После прототипа я открыл гугл.док и написал функциональную спецификацию на 10 страниц (можно взглянуть по ссылке). Это была самая неприятная часть работы. Зачем мне документ, если я сам буду разрабатывать проект и всё и так знаю? Но, конечно, эта неприятная часть работы оказалась самой полезной. Во-первых, я отловил несколько ошибок и несостыковок, во-вторых, добавил недостающую логику и разделы, и, в-третьих…

Я пошёл в ChatGPT, создал там новый проект (эта функция доступна для платных пользователей) и загрузил в раздел «Project files» получившуюся функциональную спецификацию. После этого ChatGPT имел постоянный доступ к этому документу и мне хотя бы в этой части не приходилось постоянно возвращать его в контекст.

Я специально вставил в документ скриншоты из прототипа и последовательно пробовал загрузить его в двух форматах: docx и pdf. На мой вопрос, видит ли ChatGPT изображения в документах, тот честно отвечал, что нет, не видит. Поэтому, работая над тем или иным разделом, мне в дальнейшем приходилось кидать скриншоты прямо в чат.

В общем, проектную документацию я подготовил такую, словно собирался передавать её живым разработчикам. Именно это, возможно, и помогло довести проект до конца.

Дизайн я рисовать не стал. Решил, что для MVP хватит внешнего вида прототипа. Так что мой следующий шаг — создание проекта локально на своём компьютере.

Разработка на Django

У меня уже есть IDE, которым я пользовался при создании парсера постов из Телеграм-каналов (VS Code). Также есть небольшой опыт работы с Питоном. С учётом этого, ChatGPT порекомендовал мне использовать в качестве фреймворка Джанго и подсказал, как установить всё необходимое с помощью терминала.

Так как у ChatGPT перед «глазами» была функциональная спецификация, он мне сразу сказал, какие нужно создать файлы для того, чтобы у проекта появилась основа. Это views.py, которые управляют логикой работы основных сущностей; urls.py, которые управляют путями; templates — html-страницы с основными экранами веб-приложения. Я для этой части не использовал никаких фреймворков (вроде Реакта).

Буквально за час я создал основные необходимые файлы и запустил проект на локальном сервере. Всё выглядело страшно и убого — но уже работало. Позволяло добавлять задачи, клиентов и проекты — и связывать их между собой. Именно на этом этапе я заметил, что некоторые формулировки из функциональной спецификации ChatGPT понял неверно — и сделал себе пометку, что, наверное, и люди тут могли бы ошибиться. И что в следующий раз я буду ещё более чётко выражать свои мысли.

После того, как всё заработало, мне сразу захотелось, чтобы это ещё и выглядело красиво. Я сверстал «обёртку» с шапкой и подвалом, а также привёл в порядок все основные шаблоны. Я не гнался за эстетикой, а, в первую очередь, работал над тем, чтобы стили и правила были едиными для всего проекта. Это позволит мне в будущем всё «раскрасить» без лишних трудозатрат.

Сделал один большой файл styles.css, сопроводил его подсказками, где что находится (разумеется, с помощью ChatGPT). И в результате получил интерфейс, вполне себе похожий на тот, что я спроектировал в прототипе.

Прод и домен

Я несколько дней попользовался ЦРМкой на домашнем компе и решил, что было бы неплохо опубликовать его в сети. Например, чтобы добавлять новые задачки, когда я не дома.

В теории я знал, что нужно делать, но на практике самостоятельно проделывал впервые. Я купил выделенный сервер у одного питерского провайдера. Доменное имя в зоне ru получил бонусом. Завёл проект на Гитхаб, разобрался с тем, что такое коммиты, пуши и пулы.

Моей задачей было сделать так, чтобы я на локальном компе работал над улучшением проекта, затем выполнял простую команду — и все изменения автоматически улетали на Гитхаб, а оттуда — на сервер (прод), где самостоятельно устанавливались без моего вмешательства. Для этого мне пришлось прописать настройки для локального и серверного окружения и условия для их активации. Эта часть была очень неинтересной и заняла довольно много времени — но оно того стоило. И я это говорю с учётом того, что некоторые деплои всё равно ломались.

Особенно меня удивило, насколько просто можно установить SSL-сертификаты. С помощью ChatGPT и пары строк в терминале на сервере я справился с задачей буквально за пять минут. Установил WildCart сертификаты и настроил их автоматическое обновление каждый месяц. Почему-то никто из разработчиков никогда не рассказывал мне о том, как это просто.

Адаптивная вёрстка, языки и переводы, SMTP и защита от ботов

В общем, в результате всех моих трудов в Интернете появилась ЦРМ нормального фрилансера. Я открыл её с телефона — и ужаснулся. Вёрстка-то была десктопная. Мне срочно захотелось это поправить — и следующий подход заключался в том, что я добавлял стили для мобильной точки слома и редактировал шаблоны, чтобы строки таблиц превратились в карточки, а меню навигации — в гамбургеры.

Дальше я попользовался ЦРМкой ещё немного — и решил, что было бы здорово пригласить в неё кого-нибудь ещё. Но предварительно мне хотелось сделать несколько вещей, финальных штрихов.

Например, переехать с SQLite3 на PostgreSQL. Я не до конца понимал, зачем это, но ChatGPT уверенно советовал — и я доверился. В общем, я установил pgAdmin4 у себя на компе, установил PostgreSQL на сервере и переехал.

Был забавный момент: у меня что-то не выходило с подключением к новой базе и во время диалога ChatGPT порекомендовал мне дропнуть её и создать заново. Я на всякий случай уточнил, а не потеряю ли я таким образом все данные, которые накопились за недели использования. На что он ответил прям как в меме: «Ты совершенно прав!». На самом деле таких моментов, когда я потерял бы ценные результаты своих трудов, если бы послушался чата, было несколько.

Например, я решил после переезда на новую БД добавить в проект языковые переменные, чтобы в будущем не пришлось всё переделывать, если я захотел бы перевести всё на какой-нибудь другой язык. Переписал шаблоны (для подобных задач ChatGPT подходит очень хорошо), установил i18n, сгенерировал файл, в котором хранятся значения всех строк для переводов. Перевёл на английский, проверил — всё хорошо.

Но потом в проекте появилось ещё несколько новых шаблонов (связанных с активацией аккаунтов) — и мне нужно было их тоже перевести. После того, как я запустил команду обновления файла с переводами — он разросся с пятисот до двух тысяч строк. Я спрашиваю ChatGPT, что произошло — а он отвечает: «Ты просто не уточнил, что джанговские файлы не нужно добавлять к переводам». «А как это откатить?» — спрашиваю я. «А ты возьми — и удали файл с переводами. А потом сгенерируй новый, но только уточни в команде, что джанговские файлы тебе собирать не нужно». Я такой: «А разве я при этом не потеряю всё, что переводил до этого?». «Ты совершенно прав!». В общем, я просто пошёл в файл с переводами в VS Code и нажал там ctrl+z — это решило проблему.

Дальше я решил подключить SMTP и сделать так, чтобы зарегистрировавшимся пользователям отправлялись емейлы со ссылкой активации. ChatGPT рекомендовал мне разных провайдеров SMTP, но ни один из них не позволял регистрироваться русским. Тогда он начал рекомендовать Бизнес 360 от Яндекса, а также что-то подобное от Мэйла (как оказалось, от VK). Но там чёрт ногу сломит.

В итоге мне помог Яндекс — и я подключился одному из локальных провайдеров.

Отправка писем заработала — но теперь появился риск того, что боты наотправляют себе миллионы писем, а я выйду за лимиты бесплатного тарифа. Поэтому решил сразу прицепить Рекапчу от Гугла. Тоже никогда до этого подобным не занимался. Выбрал Рекапчу третьей версии. Она невидимая для пользователя и занимается поведенческим анализом, выдавая некий балл от 0 до 10. Если балл слишком низкий (например, 0,5) — это бот.

Что ещё нужно сделать

И на этом я на сегодня закончил. Мне не терпится перейти к интересной части работы: добавлять функции, связанные с задачами, клиентами и проектами. Сделать красивый дизайн и вёрстку. Поработать над текстами. Но нет, в списке грядущих задач на ближайшее время всё унылое и неинтересное:

• Написать пользовательское соглашение и политику обработки пользовательских данных (хотя это маленький пет-проект, по закону я обязан заморачиваться)

• Предупредить посетителей об использовании кукис во всплывающем окошке

• Настроить бэкапы на сервере

• Как только появятся новые пользователи — настроить тестовое окружение, чтобы снизить риск потери чужих данных

• Оформить страницы ошибок, перепроверить и прописать логику переадресаций

• Настроить уведомления о работоспособности сервера (чтобы он кидал мне письма, когда что-то падает)

• Разобраться с тем, что такое автотесты, и внедрить их

• Разобраться с тем, что такое API и внедрить его (было бы круто попробовать сделать веб-апп для Телеграма, например)

• Даже добавление фавиконки кажется неприятной необходимостью

Мне кажется, что все эти штуки нужно делать до того, как проект начнёт разрастаться. И до того, как первые пользователи потеряют свои данные из-за какого-нибудь моего косяка. Но могу ошибаться.

Выводы

• Делать пет-проект очень весело (даже когда грустно и скучно — всё дело в том, что результат можно «пощупать руками»). Я променял компьютерные игры на эту деятельность;

• Работа над функциями, непосредственно связанными с ЦРМ, заняла у меня 10-15% времени. Всё остальное время ушло на что-то ещё;

• ChatGPT не позволил мне заниматься тем, что я считал vibe-кодингом. Большую часть времени я обучался. Ещё значительную часть времени я выводил его из loop'ов. Когда он начинал по второму кругу давать мне те же рекомендации, которые не приводили к результатам с первого раза — я задумывался, что мне нужно менять во вводных, чтобы он понял, в чём проблема. Иногда ответа я так и не находил — и предпочитал в таких случаях показывать ему исходный код и просил объяснить на пальцах за что отвечает каждый его участок. После этого ошибку находил сам;

• ChatGPT удерживает в памяти очень мало контекста во время диалогов (по сравнению с человеком). Но при этом может постоянно обращаться к проектной документации. Теоретически, если эту проектную документацию регулярно дополнять необходимым контекстом — может что-то получиться. Я попробую такой подход в будущем;

• Всё, что я описал в этой статье, я в теории знал и до работы над проектом. Но знал абстрактно, на уровне общих смыслов. Практическое применение этих знаний здорово меняет представление о реальности. Вещи, которые мне, как проектировщику, казались сложными, оказались простыми. И, наоборот, те, что казались простыми, — оказались сложнее, чем я думал;

• Без ИИ я бы не справился. У меня бы опустились руки в середине пути, если бы я получал все знания самостоятельно, из открытых источников. Единственная альтернатива, которую я вижу — обращаться за сопровождением к фул-стэк разработчику, который готов нянчиться с новичком. Либо изволь платить деньги за разработку — и не лезь не в свою профессию;

• Проектирование, на мой взгляд, — последняя профессия, которую сможет взять на себя ChatGPT и ему подобные. Скорее всего, это когда-то всё равно произойдёт, но не завтра.

Разработчиком я, разумеется, не стал. Но стал человеком, который может придумать, спроектировать, запрототипировать и собрать собственный инструмент. В одиночку. Те, кто такое уже проделывали — принимайте в свои ряды новичка! А те, кто ещё ждут своего часа — пробуйте. Сегодня это намного проще, чем несколько лет назад, несмотря на то, что технологии становятся всё сложнее.

Полезные ссылки:

• Получившийся проект (ЦРМ нормального фрилансера): normcrm.ru

• Книга нормального фрилансера. Она бесплатная. И это не какая-то брошюрка-лид-магнит. Я писал её два года. Уже больше десяти тысяч человек прочитали. Ни одного негативного или нейтрального отзыва — только позитив

• Мой Телеграм-канал о работе на фрилансе и проектировании интерфейсов