Как я за месяц сделал бесплатный автоматический конструктор иерархических моделей ORGFORMAT
Приветствую, коллеги пикабушники!
Поделюсь опытом создания с нуля под ключ приложения и всего что вокруг него - от концепции и дизайна до продвижения.
Как всегда все началось с личной проблемы - по долгу работы часто пересобираю оргмодели (органиграммы) и хоть и делаю изначально структуру в екселе, но защищать приходиться визуально в диаграммах. Защита перед учредителями штука импровизированная и динамичная, так как они постоянно просят что-то передвинуть, пересчитать бюджет ФОТ и при этом наглядно для них на большом экране.
Собирать такое в visio/miro/figma нереально по ряду причин.
Поэтому, на досуге я принял решение собрать свое приложение, которое должно обладать следующим фичами и требованиями:
Запускаться и работать с любого браузера без регистраций;
Не передавать информацию на сервера а обрабатывать модель в кэше браузера;
Быть бесплатным и публичным для меня и любых желающих;
строить структуру автоматически, а не рисовать каждый блок вручную;
перетаскивать отдельные карточки и целые ветки (Drag&Drop);
смотреть одну модель как вертикальную иерархию или горизонтальный flow/mindmap;
открывать подробные карточки блоков, но базово показывать компактно;
подсвечивать нужную ветку во время обсуждения, при наведении мышкой;
добавлять теги и другие признаки, как аналог признаков и мини базы данных;
считать один числовой показатель по всей структуре (например, бюджет);
выгружать результат в SVG, таблицу CSV, интерактивный HTML (для пересылки и демонстраций) или машиночитаемый файл ORGF.
Иметь машиночитаемый и открытый формат данных, что бы можно было быстро отдать своей ИИ для проверки или изменений данных.
И вообще бала важна задача скажем так AI-ready, что бы я мог выгружать из своей ИИ наработанную модель или наоборот загружать в нее для проверки, трансформации и оптимизации или объединения нескольких моделей в более крупную структуру (холдинга). Без ручного труда и склейки/верстки и т.д.
По результату фичей получилось намного больше! так же ориентация использования программы расширилась вплоть до построения генеалогических деревьев, атласов животных и прочих иерархических справочников и банально структуры проектов или файловых папок (тут отлично зашел горизонтальный режим).
Теперь по процессу реализации проекта и бюджету, как делал я и где-то советую вам:
Создать проект в ИИ (пару лет живу в ChatGPT Plus - 20$/мес, очень выгодно и агенты не нужны). Обязательно выбрать тип проекта с локальной памятью.
Обсудить концепцию, позиционирование и архитектуру (верхнеуровнево) с первым субчатом и дать ему имя main.
Создать роль (субчаты) маркетинга - market. Упакуйте с ним идею вашего продукта. Ему же дайте задачу создания итогового бренда, дизайна фирменного стиля или вынесите в отдельный субчат design.
Создайте роль (субчат) разработчика - tech1, учтите это ваш постоянный субчат и он будет заканчиваться где-то на 30-50 патчах (chatgpt будет просто блокировать чат). Поэтому их будет много tech_n, это нормально
Создайте папку проекта на своем диске (желательно без длинных и русских имен). Обязательные папки Git (ваш основной код проекта с синхронизацией). Папки патчей, архивов, дизайна, администрирования, текстовых черновиков и прочих вводных рекомендую вынести выше (не в Git). Весь код, хэндоффы, инструкции и библиотеки (md) - в Git. ИИ вам подскажет как исключить из синхронизации в Git технические файлы вашего сервера.
Установите VSC (Visual Studio Code) - бесплатное приложение для программирования. Если вы не программист как и я, не пугайтесь - скажите своему ИИ (tech), что вы только руки и пусть он все делает командами и через загружаемые/выгружаемые файлы.
Установите GitHub Desktop - этот бесплатный сервис позволит вам приватно (или публично) хранить ваш исходный код и что более важно в работе - откатывать неудачные патчи (коммиты). Привяжите его к папке Git.
Далее начинается основная магия вайб-кодинга. Не буду спойлерить, это будет ваш личный кайф. Скажу по обязательному процессу кодинга с ИИ
Любой новый патч начинаете со свежего архива исходного кода (baseline). Запрещаете ему додумывать и вспоминать код, иначе будет много ошибок. Соответственно он вам должен сам давать команду VSC для архивирования папки проекта в ZIP. Просто возвращаете ему этот архив. Имя архива имеет префикс ИИ (tech1) и тему (обычно суть патча).
На загруженный архив он вам выгружает патч в виде cjs-файла и команды его запуска. Запрещаете давать вам код в чат - только через патчи (файлы). Если при исполнении патча вылезают ошибки копируете их в ИИ, он делает микро-патчи. Ошибки очень редки, если соблюден 8.1.
Тестируете изменения и пишете что "ок/чек/хорошо". На это ИИ вам должен выдать имя и описание коммита (командами) - вставляете это в Github desktop и патч успешно исторически закрывается.
Когда ваш чат начинает ощутимо тормозить или вы понимаете, что уже много патчей 30+, то делайте пакет передачи дел (handoff) в zip архиве и в формате MD-файлов. Ваш tech1 сам все соберет и упакует для tech2 (инициируете им новый субчат). Так цикл знаний и разработки не прервется неожиданно. Это тоже коммитите.
Тестируете проект на своем локальном браузере (localhost). Все еще бесплатно.
Когда проект принимает продуктовые черты и вы хотите протестировать его на своих знакомых (ваша фанбаза) - возвращаемся к маркетологу и решаем с ним какой домен приобретать. Покупаем хостинг и домен. Мне подошел самый дешевый, так как никакой нагрузки на сервер он не генерит. Хостинг - 240 р/мес., а домен в Ru зоне обычно бесплатно при годовом хостинге.
Сайт потребует качественных исходников вашего дизайна. ИИ качественно вектор делать не умеет, поэтому передаете ваш фирменный стиль знакомому дизайнеру на векторизацию - несколько тысяч рублей или за "спасибо".
Промо-сайт будет отдельным субпроектом и сую-продуктом. Заведите для него отдельный субчат ИИ (web). Примеры возьмите с ваших коллег на реддите, обычно ветка /r/SideProject. Я итак же выложил сразу демо-кейсы в разных областях. Что бы слету можно было в Студии открыть модель или скачать к себе.
Ваши знакомые дают вам обратную связь для финальных правок вашего релиза.
И тут начинается боль с продвижением вашего продукта. У меня он мультиязычный, поэтому проблема найти локальные площадки для размещения статей о своем продукте и так что бы их не банили и свободно размещали.
Если разместите грамотно статьи, то уже через два дня ИИ поисковики будет знать о вашем продукте. Habr/VC/Reddit и т.д.
Но это лишь начало, если вы делаете коммерческий продукт, то продвижение может у вас начать отнимать до 90% времени. Соц.сети, статьи, ролики, общение и главное генерация правильного интересного контента вокруг вашего продукта. Это больно.
просыпаетесь популярным, но скорее всего нет. Тут главное не переживать, ведь вы делали проект в первую очередь для себя и за свои деньги. И никакому ничего не должны - вы молодец!
Итого затраты - до 7 тысяч рублей. С ИИ-агентами было бы затрат на два порядка больше и меньше понимания, что происходит. Примерно 600 патчей (30 в день). 30 дней реализации.
Пока я разрабатывал концепцию web-приложения, понял, что не менее важно, а возможно даже более важно сделать сам формат (файл) в котором хранится модель. По сути это стало еще одним субпроектом/субпродуктом. Сделал его на базе логики YAML - это убивает всех зайцев. Назвал ORGF, выложил как бесплатный открытый формат на публичный github.
Итоговое промо видео (пример на английском, так как делал для reddit)
Ну и ссылки в конце:
Промо-сайт ORGFORMAT
Бесплатный конструктор моделей ORGFORMAT Studio
Github открытого формата ORGF
Ну и демо-модель бизнеса откроется сразу в Студии, кстати есть демо-модель Атласа животных на 1000 карточек - проверьте производительность своего ПК :)
Не забывайте переключать в темную тему и горизонтальный режим - кайф.
Буду рад обратной связи! ну или просто лайкам, в любом случае спасибо, что дочитали этот лонгрид до конца %)