add article

This commit is contained in:
innoavvlasov 2025-07-07 16:27:01 +03:00
parent 65eab4986f
commit 6d077d05e9
4 changed files with 2922 additions and 0 deletions

428
article.md Normal file
View File

@ -0,0 +1,428 @@
# От техсетки до «Татар сан»: как мы изобрели новый формат ИТ-конференций
*Туториал*
![Главное фото с конференции Татар сан]
В 2020 году мир ИТ-конференций сломался. Онлайн убил нетворкинг, а традиционные форматы перестали работать. Рассказываю, как за 5 лет мы прошли путь от ежедневных техсеток в Сбере до флагманской конференции «Татар сан» с призовым фондом 250 тысяч рублей, собственной платформой оценки спикеров и уникальными механиками борьбы со стереотипами.
Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и лидирую технологический хаб Сбера в Казани. За пять лет организовал более 10 мероприятий — от внутренних митапов до конференций на 1000+ участников.
## Проблема: что сломалось в мире ИТ-конференций
Давайте честно признаем — мир ИТ сильно изменился, а технологические митапы и конференции не меняли механики уже много лет.
**Что произошло в 2020 году:**
- Офлайн-мероприятия ушли в онлайн
- Нетворкинг практически умер
- Появились новые потребности в интерактиве
**Базовые метрики конференций в 2020:**
- ✅ **Актуальность** — наконец-то качественные доклады в комфортных условиях
- ✅ **Интерактив** — рост популярности Mentimeter и QR-интерактивов
- ❌ **Нетворкинг** — RIP
- ⚠️ **Организация** — гонка собственных платформ и армий техподдержки
Я очень люблю конференции и обмен знаниями, но когда что-то начало не устраивать в существующих форматах, решил делать свои.
## Этап 1: Техсетка — решение проблемы масштабирования экспертизы
![Фото с техсетки]
Всё началось в 2019 году на проекте СберБанк Онлайн. Я был своеобразным справочным бюро — люблю помогать коллегам. Правильно организовав базу знаний и систематизировав знания по JavaScript, мог решить любой вопрос в кратчайшие сроки.
**Проблема масштабирования:**
- Проект СберБанк Онлайн — огромный
- Ко мне ежедневно обращались десятки разработчиков
- Катастрофически не хватало времени на собственные задачи
- Дилемма: либо отказывать, либо изобретать
**Решение — техсетка:**
- Ежедневная онлайн-встреча ровно на 1 час
- Все фронтенд-разработчики могли прийти с вопросами
- Вопросы, поступавшие в течение дня, разбирались на техсетке
- Неотвеченные вопросы переносились на следующий день
### Эволюция формата
Через несколько месяцев вопросы начали повторяться. Объяснять одно и то же каждый день не хотелось. Тогда я начал просить тех, кому уже что-то объяснял, повторить материал своими словами.
**Результат:**
- Децентрализация экспертизы
- Формирование культуры шеринга знаний
- Участники становились менторами для других
## Этап 2: Web Sbol Application meetup — первый внутренний митап
![Фото с первого митапа]
Спустя полгода, видя, как хорошо ребята менторят на техсетке, появилась идея сделать внутренний митап для всех фронтенд-разработчиков СберБанк Онлайн.
**Концепция:**
- Все темы внутренние
- Фокус на частые боли разработчиков
- Доклады о том, чему инструкции уделяют недостаточно внимания
- Народный митап "от разработчиков для разработчиков"
**Обратная связь от техлидов:**
- ❌ Недостаточно хардовости
- ❌ Низкое качество презентаций
- ❌ Неподготовленные спикеры
Критика была конструктивной и помогла найти вектор развития.
## Этап 3: BroJS — первый публичный митап
![Фото с BroJS]
Изучив форматы крупных конференций, я начал составлять свою формулу технологического митапа. Дополнительная сложность — проводить в Казани, где собрать большую аудиторию на no-name митап задача со звездочкой.
**14 ноября 2022 — запуск BroJS:**
Название от проекта Brokerage (раздел "Инвестиции" в СберБанк Онлайн).
**Формула успеха:**
- 👥 Спикеры из топ-экспертов техсетки
- 📅 2 дня программы
- 📈 1-й доклад — максимально хардовый
- 🛠️ Воркшоп — короткий, хардовый, из серии "оказывается, вы код писали неправильно"
- 📊 2-й доклад — средней хардовости
- 🎯 5 спикеров
**Результаты:**
- 1-й день: 90 участников
- 2-й день: 70 участников
**Трудозатраты:**
- Деловая программа
- Поиск конференц-зала
- Организация кейтеринга
- Фотозоны, бейджи, мерч
- Продвижение мероприятия
- Поиск бюджета
- Лендинг с регистрацией
## Этап 4: IT Community day — масштабирование
![Фото с крыши ИТ-Парка]
Как говорится, ставишь цель — ставь её высоко. Через пару месяцев я начал собирать не митап, а полноценную конференцию.
**29 июля 2023 — IT Community day:**
**Масштаб:**
- 20 спикеров
- 3 сцены (2 на крыше ИТ-Парка Башира Рамеева)
- Отдельная дискуссионная зона
- Арт-зоны с уникальным мерчем от дизайнеров
- Афтепати
- Команда организаторов: 40+ человек
**Метрики:**
- 1000+ регистраций
- 500 очных участников
### Урок о форс-мажорах
![Фото шторма на конференции]
**Незапланированный спецэффект:** мощнейший шторм во время мероприятия на крыше.
Волонтёры, охрана и организаторы отработали блестяще — все остались живы и здоровы. После этого крышесносного (в прямом смысле) опыта к погодным рискам отношусь супер-серьёзно.
**Инфраструктура:**
- Собственный Telegram-канал с контент-планом
- Детальный роадмап с ответственными
- Визуальный стиль
- Партнёрство с СберПрофи для поиска спикеров
## Этап 5: Новый формат — стабильность и качество
**12 октября 2024 — урок стабильности:**
После погодного форс-мажора решили максимально снизить риски:
- Все мероприятия под крышей
- Конференц-зал школы 21 + Технохаб
- Уменьшили количество спикеров
- Добавили HR-зону с докладами о рынке и найме
**Результаты:**
- 860 регистраций
- 470 очных участников
- Выросла конверсия при меньшем количестве спикеров
**Новые партнёрства:**
- Сотрудничество со школой 21
- Синхронизация мероприятий Технохаба и школы 21
- Общий бюджет на пересекающиеся мероприятия
- Core-команда: 20 организаторов
### Построение команды организаторов
![Фото команды организаторов]
К этому моменту сформировалась четкая структура команды с ключевыми ролями:
**Основные роли:**
- 🛒 **Закупочные процедуры** — работа с поставщиками, контроль бюджета
- 🎨 **Визуальный стиль** — айдентика, оформление, мерч
- 👥 **Работа с участниками и спикерами** — коммуникации, поддержка
- 📋 **Деловая программа** — моя зона ответственности
**Моя роль как организатора:**
- Составление деловой программы
- Работа над докладами со спикерами
- Кураторство контента
- Общая координация
### Работа со спикерами: проверенные практики
За годы организации выработался чёткий процесс подготовки спикеров. Самый важный этап — первый прогон доклада, где мы проверяем готовность выступления.
Основу нашего подхода составляет чек-лист, который я позаимствовал у программного комитета HolyJS, когда сам проходил чекап доклада. Это отличный пример того, как можно учиться у крупных конференций и адаптировать их лучшие практики.
**Чек-лист доклада спикера перед первым прогоном (адаптирован из HolyJS):**
1. **Про что ты хочешь рассказать?**
- Основные тезисы/идея доклада
- Ключевое сообщение в одном предложении
- 3-5 главных точек, которые должна запомнить аудитория
2. **Кому ты это хочешь рассказать?**
- Кто целевая аудитория (джуны, мидлы, сеньоры?)
- Какой опыт нужен для понимания
- На каком уровне подавать технические детали
3. **Почему ты думаешь, что им это интересно/полезно?**
- Какую проблему решает твой доклад
- Почему люди должны слушать именно тебя
- Твоя экспертность и уникальный опыт
4. **Что бы ты хотел, чтобы человек рассказал коллегам после доклада?**
- Главный инсайт в одном предложении
- Что должно мотивировать поделиться с командой
- Конкретные действия, которые можно предпринять
5. **Чем послушать тебя лучше, чем 10 минут погуглить эту тему?**
- Личный опыт и кейсы
- Неочевидные решения и подводные камни
- Практические советы, которых нет в документации
**Дополнительные критерии качества:**
- [ ] Есть ли живые демо или примеры кода?
- [ ] Можно ли применить знания сразу после доклада?
- [ ] Есть ли интерактив с аудиторией?
- [ ] Укладывается ли в тайминг (20/30/45 минут)?
- [ ] Подготовлены ли ответы на очевидные вопросы?
Этот чек-лист помогает отсеять слабые доклады ещё на этапе подготовки и значительно повышает качество программы.
## Этап 6: «Татар сан» — революция в механиках
![Фото конкурса "Королева кода"]
Параллельно прорабатывался совместный проект с ИТ-парком под названием «Татар сан» (по-татарски "сан" — цифра).
**25 декабря 2024 — первая «Татар сан»:**
### Новые механики против стереотипов
**Ядро мероприятия — конкурс "Королева кода":**
- Соревнование девушек-инженеров в решении задач
- Жюри во время конкурса выступало с техдокладами
- Участники получали "два в одном"
**Цель — битва со стереотипами:**
За счёт поднятия важных тем мы выровняли гендерное присутствие на мероприятиях и улучшили восприятие того, что мероприятие не узкоспециализированное, а предназначено для нетворкинга и развития сплочённого ИТ-сообщества в Татарстане.
**Особенности:**
- Крутая айдентика и стиль
- Эффектное афтепати в формате шоу
- Красочное, не затянутое мероприятие
- Народ не хотел расходиться до 23:00
**Результаты:**
- 840 регистраций
- 470 очных участников
- В последнюю неделю перед Новым годом, в среду!
## Этап 7: Флагманская «Татар сан» — технологический прорыв
![Фото с воздушным шаром]
**21 июня 2025 — флагманская версия:**
### Маркетинговый ход
За день до мероприятия запустили брендированный воздушный шар, который произвёл неизгладимое впечатление на жителей республики и хорошо завирусился в соцсетях.
### Технологический стек
К этому моменту мы создали собственную технологическую экосистему:
**Собственные разработки:**
- 🏆 **Платформа оценки спикеров** — автоматизированная система голосования и фидбека
- 🤖 **Агент общения с пользователями** — чат-бот для решения типовых вопросов
- 📊 **Агент обработки обратной связи** — автоматический анализ отзывов и предложений
### Революционные механики
**Мотивация для спикеров:**
- 250 000 рублей за лучший доклад
- Все доклады писались/модифицировались под мероприятие
- Единая тематика: практическое применение LLM в работе
**Зоны и активности:**
- 🧓 **Зона ИТ-дедов** — на фоне AI-тематики контрастный посыл "раньше было лучше"
- 👩‍💻 **Женская дискуссионная зона** — обсуждение карьеры в мире мужчин и AI
- 🎨 **Татар-панк стилистика** — уникальная айдентика в оформлении и афтепати
- 💻 **Vibe coding time** — секция о том, как AI-трансформация откроет новые возможности
![Фото зоны ИТ-дедов]
![Фото женской дискуссионной зоны]
![Фото в стиле Татар-панк]
**Итоговые метрики:**
- 1700+ регистраций
- 1000+ очных участников
## Анализ успеха: метрики и результаты
### Система отслеживания эффективности
**Основные KPI:**
- 📊 **Упоминания в соцсетях** — виральность и охват
- 📝 **Количество регистраций** — интерес к мероприятию
- 📱 **Подписчики в Telegram-канале** — формирование сообщества
- 🏢 **Улучшение качества найма** — долгосрочный эффект для региона
- ⚡ **Скорость закрытия вакансий** — влияние на ИТ-рынок Татарстана
### Влияние на региональный ИТ-рынок
**Конкретные результаты:**
- Увеличение скорости закрытия вакансий в регионе
- Повышение качества найма ИТ-специалистов
- Формирование сильного локального сообщества
- Улучшение репутации Казани как ИТ-центра
### Метрики роста
| Мероприятие | Год | Регистрации | Очные участники |
|-------------|-----|-------------|----------------|
| BroJS | 2022 | ~100 | 90/70 |
| IT Community day | 2023 | 1000+ | 500 |
| IT Community day v2 | 2024 | 860 | 470 |
| Татар сан v1 | 2024 | 840 | 470 |
| Татар сан v2 | 2025 | 1700+ | 1000+ |
### Ключевые принципы успеха
1. **Решение реальных проблем** — каждый формат отвечал на конкретную боль сообщества
2. **Итеративное развитие** — от техсетки к флагманской конференции за 5 лет
3. **Уникальные механики** — конкурсы, дискуссии, нестандартные зоны
4. **Локальная специфика** — татарская айдентика, региональные особенности
5. **Технологические решения** — собственные платформы и агенты
6. **Борьба со стереотипами** — гендерное равенство и инклюзивность
### Социальное влияние
**Достижения в области инклюзивности:**
- Выравнивание гендерного баланса участников
- Создание безопасного пространства для женщин в ИТ
- Формирование позитивного образа ИТ-сообщества
- Популяризация технологий среди широкой аудитории
## Что изменилось в индустрии
**Традиционные форматы:**
- Статичные доклады
- Пассивная аудитория
- Слабый нетворкинг в онлайне
**Новые подходы:**
- Интерактивные механики
- Геймификация
- Мотивация через призы и конкурсы
- Микс онлайн/офлайн активностей
- Технологическая автоматизация процессов
## Планы развития
В дальнейших планах:
- Доработка текущих механик
- Добавление новых интерактивных форматов
- Расширение технологической платформы
- Цель: придать «Татар сан» культовый статус среди ИТ-специалистов
## Топ-5 ошибок начинающих организаторов
### 1. Переоценка аудитории
**Ошибка:** Первый митап сразу на 200-300 мест
**Решение:** Начните с 50-70 участников, лучше переполненный зал
**Личный опыт:** BroJS начинали со 100 регистраций, пришло 90 — идеально
### 2. Слабая подготовка спикеров
**Ошибка:** Доверились "экспертам" без прогонов и проверки материала
**Решение:** Обязательный прогон + чек-лист из 5 вопросов выше
**Результат:** Качество докладов выросло с 6/10 до 8.5/10 по отзывам
### 3. Игнорирование обратной связи
**Ошибка:** Не собирали фидбек первый год
**Решение:** Автоматизированный сбор через ботов и платформу
**Данные:** NPS вырос с 6 до 8.5 за счёт работы с отзывами
### 4. Отсутствие запасных планов
**Ошибка:** Один сценарий развития событий
**Решение:** План А, Б, В для каждого критичного процесса
**Пример:** Запасные спикеры, дублирование оборудования, погодные риски
### 5. Неправильное ценообразование спонсорства
**Ошибка:** Занижение стоимости пакетов на старте
**Решение:** Исследование рынка + добавленная стоимость для партнёров
**Рост:** Средний чек спонсора вырос в 3 раза за 2 года
## Рекомендации для организаторов
### Чек-лист создания успешного ИТ-мероприятия
**Этап планирования:**
- [ ] Определите реальную проблему, которую решает мероприятие
- [ ] Изучите целевую аудиторию и её потребности
- [ ] Сформируйте уникальное ценностное предложение
**Команда:**
- [ ] Назначьте ответственных за ключевые роли
- [ ] Обеспечьте экспертизу в закупках
- [ ] Привлеките профессионалов по визуальному стилю
- [ ] Организуйте качественную работу со спикерами
**Технологии:**
- [ ] Автоматизируйте рутинные процессы
- [ ] Внедрите системы сбора фидбека
- [ ] Создайте каналы коммуникации с участниками
- [ ] Настройте аналитику и метрики
**Контент:**
- [ ] Итерируйтесь — каждое мероприятие должно быть лучше предыдущего
- [ ] Не бойтесь экспериментов — новые механики могут выстрелить
- [ ] Боритесь со стереотипами — иногда надо погладить против шерсти устояшуюсю культуру, чтобы привлечь аудиторию
![Фото команды организаторов]
## Заключение
За 5 лет мы прошли путь от ежедневных техсеток до флагманской конференции на 1000+ участников. Главный урок: традиционные форматы ИТ-мероприятий нуждаются в кардинальном обновлении.
**Что работает:**
- Собственные технологические решения
- Борьба со стереотипами и инклюзивность
- Уникальные механики и геймификация
- Влияние на региональный ИТ-рынок
- Системный подход к метрикам
**Измеримые результаты:**
- Увеличение аудитории в 10 раз
- Улучшение скорости закрытия вакансий в регионе
- Формирование сильного локального сообщества
Мир ИТ-конференций меняется. Те, кто не адаптируется к новым реалиям, рискуют остаться в прошлом. А те, кто готов экспериментировать, внедрять технологии и решать реальные проблемы сообщества, могут создать по-настоящему культовые мероприятия.

106
article.txt Normal file
View File

@ -0,0 +1,106 @@
Тема статьи: от маленького внутреннего JS митапчика для своих до большой конференции по gen ai тематике.
Приветствую.
Меня зовут Андрей Власов, я работаю в Сбере, разрабатываю сайт СберБанк онлайн и паралельно с этим лидирую технологический хаб Сбера в Казани.
Давайте признаемся сами себе, мир ит сильно поменялся за последнее время, а технологические митапы и конференции не меняли свои механики уже много лет.
Начнем с того что 2020 год поломал офлайн и ит конференции перешли в онлайн, а в онлайне нетворкинг мертв.
посмотрим на базовые метрики конференции в 2020
Актуальность - наконецто хардовые доклады, которые можно смотреть в комфортных для себя условиях
Интерактив - рост популярности таких инструментов как минтиметр и похожих интерактивов по QR коду
Нетворкинг - RIP
Организация - развитие собственных платформ и армии тех поддержки.
Я очень люблю конференции и обмен знаниями, но из за того что начало что то не устраивать в других конференциях, начал делать свои.
Про свой путь организатора конференций начну из далека, за время организации получил огромное количество точек роста, но как говорится дорогу осилит идущий и руки опускать нельзя.
началось все в 2019 году, на проекте я был своего рода справочным бюро, я впринципе люблю помогать людям.
Правильно организовав базу знаний по проекту и за счет преподавания упорядочив знания по js. решал любой вопрос в очень короткий срок. Но так как проект СберБанк онлайн очень большой и ко мне с вопросами заходили 10ки разработчиков, у меня катострафически нехватало времени на свои задачи. Был выбор либо начинать отказывать, либо что то изобретать.
И так появилось такое создание как онлайн встреча техническая сессия далее техсетка, это мероприятие было ровно 1 час, каждый день куда приходили все фронтенд разработчики чтобы задать вопрос. Все поступающие ко мне вопросы в течении дня я отправлял на техсетку. если вопрос не успевали ответить он переносился на следующий день.
в какой то момент вопросы на техсетке стали повторяться и обьяснять каждый день одно и тоже не хотелось, начал пробовать чтобы тем кому я уже что то обьяснил, пытались повторить своими словами и тем самым я отвязывал ребят от фокуса только моей компетенции в сторону децентрализации и формирования шаринга знаний внутри сообщества техсетки.
где то через полгода, видя как хорошо менторят ребята на техсетке, появилась идея сделать внутренний митап на всех фронтенд разработчиков СберБанк онлайн.
Назвали его Web Sbol Application meetup. Темы все были внутренние, говорили в основном про частые боли, доклады от инструкций до технологий уделяют недостаточно внимания. Получился народный митап, который разработчики поддержали на ура, но вот техлиды дали развивающую обратную связь, что не хватило хардовости, качество презентаций было удручающее и спикеры не подготовленные.
ну чтож я пошел искать референсы как надо у крупных конференций, посетив несколько
начал составлять свою формулу технологического митапчика
нужно еще добавить что митап планировал провести в Казани, в регионах собрать большое количество человек на ноунейм митап, задача со звездочкой
назвали митап BroJS в честь проекта на котором были Brokerage - Брокерский бизнес, в нашем ведении раздел Инвестиции в СберБанк онлайн. Стартанул он 14 ноября 2022.
Ключевые особенности:
- спикеры взяты с топ экспертов техсетки
- 2 дня
- доклад короткий воркшоп доклад
- 1й доклад хардовый
- воркшоп максимально короткий и максимально хардовый но из серии, зацени оказывается вы код писали неправильно
- 2й доклад средней хардовости
- 5 спикеров
пришло тогда человек 90 первый день и 70 второй день
из трудозатрат:
деловая программа
поиск конф зала
организация кейтеринга
фотозоны, бейджи, подарочный мерч
рекламма мероприятия
поиск бюджета на мероприятие
лендинг мероприятия с возможностью регистрации
Как говорится, ставишь цель ставь ее высоко.
через пару месяцев я стал собирать уже не митап а конференцию.
29 июля 2023 года случился IT Community day
20 спикеров, отдельная дискуссия, арт зоны, где тебе дизайнеры делали уникальный мерч, 3 сцены, афтепати.
2 сцены распологались на крыше ИТ Парка Башира Рамеева, техники смогли побороть какафонию, так как сцены распологались рядом.
1000+ регистраций 500 очных участников, цифры прекрасные, конфа с точки зрения уровня организации удалась.
команда организаторов выросла до 40+ человек.
Если бы не одно, но, произошел не запланированый спец эффект в виде мощнейшего шторма. Волонтеры, охраники и организаторы отработали блестяще и люди остались все живы. После этой крышесносной в прямом смысле этого слова, к погодным рискам я теперь отношусь супер серьездно.
в этой конференции уже добавился свой отдельный ТГ канал с контент планом и визуальным стилем
появился детальный роадмап что когда и кем делается.
со сборкой деловой программы помогало СберПрофи, внутри каждого профиля есть свои звездочки и так гораздо легче, так как лидеры проф сообществ берут на себя поиск спикера, подготовку и прогон доклада. Отдельный низкий поклон Арине Штерн, очень сильно помогла на той конференции со спикерами, да и сейчас прекрасно помогает с этим. Спасибо ей огромное!
следующую конференцию провели спустя почти полтора года 12 октября 2024
всех разместили под крышей, взяли конф зал школы 21 и конф зал Технохаба количество спикеров уменьшили, добавили HR зону с докладами про ит рынок и подбор кандидатов. Доклады про найм и развитие сотрудников считаю не менее важными темами на проф конференциях, чем слушать доклад про опыт использования технологии.
860 регистрации
470 очных участников
конверсия поднялась, при том что количество спикеров и сцен стало меньше.
все прошло штатно и без внезапных спец эффектов.
из нововедений мы стали делать конференцию в партнерстве со школой 21 и в этом году мы синхронизировали сетку мероприятий технохаба и школы 21, а так же сделали общий бюджет на пересекающихся мероприятиях. Попутно наши команды научились слаженно работать вместе. Core команда организаторов выросла до 20
Паралельно с этой конференций прорабатывался совместный проект с ИТ парком, под названием Татар сан (Татарская цифра), сан это цифра по Татарски
Это мероприятие стало про битву со стереотипами, в конференции были заложенный яркие темы для дисскуссий.
25 декабря 2024 состоялась конференция Татар сан с новыми механиками и формулой
В ядре эвенто было соревнование между девушками инженерами в решение задач и написание кода, конкурс назывался Королева кода. А пока в режиме реального времени девушки решали задачу, те кто был заявлен в жюри, должен был показать свою проф пригодность, выступить с техническим докладом на сцене. У конкурса получилась обвязка в виде конфы. То есть очные участники получили два в одном прийдя на мероприятие. Конференцию выделял круто проработаная идентика и стиль, а так же очень крутое афтепати в виде шоу. Мероприятие получилось красочное, не затянутое деловой программой и народ не хотел расходиться до 23:00.
По цифрам было 840 регистраций
очно пришло 470 человек и это в последнюю неделю перед новым годом и еще и в среду
Сделал выводы на основе голосования в тг и опросов в соц сетях, поняли что новые механики народу понравились. в следующей конференции решили добавить новые механики.
21 июня 2025 года состоялась флагманская версия Татар сан.
за день до мероприятия мы запустили воздушный шар брендированый под конференцию, что произвело неизгладимое впечатление на жителей республики и хорошо завирусилось в соцсетях.
из новых механикам
- за лучший доклад спикер получал награду в 250к
- доклады писались или модифицировались под эвент, тематика конференции была про практическое применения LLM в работе
- зона с ит дедами, на фоне тематики про AI хорошо контрастировала с посылом раньше было лучше
- женская дискуссионая зона, где девушки обсуждали как строить карьеру в мире мужчин и AI, вызвала оченьь положительный резонанс
- разработана уникальная стилистика Татар панк, которая была ярко выраженна в интерактивных зонах, оформлении конференции и афтепати
- секция vibe coding time показала что тревожные темы про замену программистов нужно обсуждать именно в таком формате, чтобы показать что у разработчиков которые пройдут ai трансформацию ждет светлое будущее
по цифрам у нас 1700+ регистраций и 1000+ очных участников
В дальнейших планах доработать текущий механики и добавить новые чтобы Татар сан приобрел культовый статус среди ит специалистов

353
primakov.md Normal file
View File

@ -0,0 +1,353 @@
# Создаём клон Gamma.app: от промпта до AI-агента на LangGraph
*Как фронт-энд разработчик из Сбера создал аналог популярного сервиса для генерации презентаций с помощью LangChain и LangGraph*
![Слайд с информацией о спикере](https://via.placeholder.com/800x450/2D3748/FFFFFF?text=Александр+Примаков%0A10+лет+в+IT%0A6+лет+в+Сбере)
*[0:00:02 → 0:00:50]*
## Кто создаёт AI-сервисы сегодня?
В списке Forbes топ-50 AI-компаний есть множество знакомых названий: OpenAI, Cursor, Bolt New. Особенно интересна компания Speak — они с 2016 года разрабатывают приложение для изучения языков с AI-помощником и попали в топ-50.
![Слайд с компаниями, использующими AI](https://via.placeholder.com/800x450/2D3748/FFFFFF?text=Forbes+Top+50+AI+Companies%0AOpenAI%2C+Cursor%2C+Bolt+New%2C+Speak)
*[0:00:50 → 0:02:10]*
Но главное открытие: **сейчас создавать AI-приложения можно довольно быстро**. Наши студенты делают продукты не хуже тех, что попадают в топ-рейтинги.
## Gamma.app: что внутри магии?
Gamma.app — это сервис для создания презентаций. Вы вводите тему, он создаёт план презентации с заголовками и буллетами для каждого слайда, а затем генерирует полную презентацию с изображениями и оформлением.
![Демонстрация работы сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Gamma.app+Demo%0AВводим+тему+→+План+→+Презентация)
*[0:02:10 → 0:03:12]*
Выглядит как волшебство, но давайте разберём, как это работает изнутри.
## Декомпозиция задачи
Чтобы создать аналог Gamma.app, нужно решить две основные задачи:
![Слайд с задачами для решения](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Задачи%0A1.+Генерация+плана+презентации%0A2.+Создание+презентации+по+плану)
*[0:03:12 → 0:04:15]*
1. **Генерировать план презентации** — структуру с заголовками и основными пунктами
2. **Создавать презентацию** — контент, изображения и оформление на основе плана
## Часть 1: Генерация плана с LangChain
### Промпт-инжиниринг в реальности
Простой промпт в ChatGPT может создать план презентации, но для продакшена нужен более сложный подход:
![Слайд с промптом для генерации презентации](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Промпт+для+генерации%0A•+Уговариваем+создать+план%0A•+Описываем+типы+слайдов%0A•+Форматирование+в+JSON%0A•+Текущая+дата)
*[0:05:40 → 0:06:23]*
Мой промпт включает:
- Инструкции по созданию плана
- Описание доступных типов слайдов (титульный, контентный и т.д.)
- Требования к формату JSON
- Текущую дату (важно для актуальных тем)
### Шаблоны в LangChain
LangChain предоставляет механизм шаблонов для удобной работы с промптами:
```typescript
const template = `
Создай план презентации на тему {topic}.
Учти следующие требования: {requirements}
Текущая дата: {current_date}
{format_instructions}
`;
```
Переменные в фигурных скобках заменяются на реальные значения при выполнении.
### Структурированный вывод с Zod
Для надёжной работы с JSON-ответами использую Zod для описания схемы:
![Слайд с описанием JSON схемы](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=JSON+Schema+с+Zod%0Apresentation%3A+%7B%0A++title%3A+string%0A++slides%3A+array%0A++imageStyle%3A+string%0A%7D)
*[0:06:23 → 0:08:00]*
```typescript
const presentationSchema = z.object({
title: z.string().describe("Заголовок презентации"),
description: z.string().describe("Описание презентации"),
imageStyle: z.string().describe("Общий стиль изображений"),
slides: z.array(z.object({
title: z.string().describe("Заголовок слайда"),
bullets: z.array(z.string()).describe("Основные пункты"),
imagePrompt: z.string().describe("Промпт для генерации изображения"),
webSearchQuery: z.string().optional().describe("Запрос для поиска в интернете")
}))
});
```
### Создание цепочки LangChain
![Слайд с описанием работы парсера ответа от LLM](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=LangChain+Pipeline%0ATemplate+→+Model+→+Parser+→+JSON)
*[0:08:00 → 0:09:25]*
```typescript
const parser = StructuredOutputParser.fromZodSchema(presentationSchema);
const chain = template.pipe(model).pipe(parser);
const result = await chain.invoke({
topic: "Фотографирование котят",
format_instructions: parser.getFormatInstructions(),
current_date: new Date().toISOString()
});
```
![Демонстрация распарсенного JSON](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=Результат+парсинга%0A%7B%0A++title%3A+%22Фотографирование+котят%22%0A++slides%3A+%5B...%5D%0A%7D)
*[0:09:25 → 0:09:55]*
## Часть 2: Создание презентации с LangGraph
Для генерации самой презентации простого LangChain недостаточно. Нужны:
- Поиск в интернете для актуальной информации
- Генерация изображений для каждого слайда
- Создание контента с учётом контекста
- Условная логика и роутинг
![Демонстрация аналога сервиса gamma.app](https://via.placeholder.com/800x450/4A5568/FFFFFF?text=Клон+Gamma.app%0AГенерация+презентации%0Aпо+готовому+плану)
*[0:09:55 → 0:10:57]*
Здесь на помощь приходит **LangGraph**.
## Архитектура LangGraph: от нод к агентам
![Слайд с объяснением работы LangGraph](https://via.placeholder.com/800x450/2B6CB0/FFFFFF?text=LangGraph+Architecture%0ANodes+→+Edges+→+State+→+Graph)
*[0:10:57 → 0:26:20]*
### Основные концепции
LangGraph работает с **нодами** (nodes) — функциями, которые выполняют конкретные задачи:
- Каждая нода получает состояние и обновляет его
- Между нодами есть рёбра (edges) для управления потоком
- Возможен условный роутинг и циклы
- Единое состояние передаётся между всеми нодами
### Архитектура моего клона
Я создал компактный и эффективный граф из нескольких нод:
1. **Prepare** — подготовка данных и присвоение ID слайдам
2. **Router** — решение, нужен ли веб-поиск
3. **WebSearch** — поиск актуальной информации
4. **Generate Images** — генерация изображений
5. **Generate Content** — создание контента слайдов
6. **Final** — финализация результата
### Нода подготовки данных
```typescript
async function prepareNode(state: GraphState): Promise<Partial<GraphState>> {
const presentation = state.presentation;
// Присваиваем ID каждому слайду
presentation.slides.forEach((slide, index) => {
slide.id = `slide-${index}`;
});
return { presentation };
}
```
### Условный роутинг
Для принятия решений использую **Conditional Edge**:
```typescript
function routeToWebSearch(state: GraphState): string[] {
const sends = [];
state.presentation.slides.forEach(slide => {
if (slide.webSearchQuery) {
sends.push(
new Send("webresearch", { slide })
);
}
});
return sends.length > 0 ? sends : ["generate"];
}
```
### Веб-поиск с Tavily
Для поиска актуальной информации использую Tavily API:
```typescript
async function webSearchNode(data: { slide: Slide }): Promise<Partial<GraphState>> {
const tavily = new TavilySearchResults({
maxResults: 5,
searchDepth: "advanced"
});
const results = await tavily.search(data.slide.webSearchQuery);
// Экранируем фигурные скобки в коде
const cleanResults = results.replace(/\{/g, '{{').replace(/\}/g, '}}');
return {
webSearchResults: {
[data.slide.id]: cleanResults
}
};
}
```
**Важный момент**: LangChain воспринимает фигурные скобки как переменные шаблона, поэтому код нужно экранировать двойными скобками.
### Генерация изображений с Kandinsky
Для генерации изображений использую российскую нейросеть Kandinsky через API:
```typescript
async function generateImageNode(data: {
slide: Slide,
imageStyle: string
}): Promise<Partial<GraphState>> {
const kandinsky = new KandinskyAPI();
const imagePrompt = `${data.slide.imagePrompt}, ${data.imageStyle}`;
const image = await kandinsky.generateImage({
prompt: imagePrompt,
negativePrompt: data.slide.negativeImagePrompt,
width: data.slide.type === 'title' ? 512 : 768,
height: data.slide.type === 'title' ? 512 : 432
});
return {
generatedImages: {
[data.slide.id]: image.url
}
};
}
```
### Генерация контента с сохранением контекста
Самая интересная часть — создание контента с учётом предыдущих слайдов:
```typescript
async function generateContentNode(state: GraphState): Promise<Partial<GraphState>> {
const messages = [
{ role: 'system', content: 'Ты создаёшь контент для слайдов презентации...' }
];
for (const slide of state.presentation.slides) {
// Добавляем запрос на генерацию контента
messages.push({
role: 'user',
content: `Создай контент для слайда "${slide.title}".
Используй найденную информацию: ${state.webSearchResults[slide.id] || ''}
Основные пункты: ${slide.bullets.join(', ')}`
});
// Получаем ответ от LLM
const response = await model.invoke(messages);
messages.push({ role: 'assistant', content: response });
// Запрашиваем комментарий для спикера
messages.push({
role: 'user',
content: 'Добавь комментарий для спикера: что рассказывать по этому слайду?'
});
const speakerNotes = await model.invoke(messages);
messages.push({ role: 'assistant', content: speakerNotes });
// Сохраняем результат
slide.content = response;
slide.speakerNotes = speakerNotes;
}
return { presentation: state.presentation };
}
```
Такой подход **сохраняет контекст** между слайдами, позволяя создавать логически связанные презентации.
### Сборка графа воедино
```typescript
const graph = new StateGraph(GraphState)
.addNode("prepare", prepareNode)
.addNode("webresearch", webSearchNode)
.addNode("generateImages", generateImageNode)
.addNode("generateContent", generateContentNode)
.addNode("final", finalNode)
.setEntryPoint("prepare")
.addConditionalEdges("prepare", routeToWebSearch)
.addEdge("webresearch", "generateImages")
.addEdge("generateImages", "generateContent")
.addEdge("generateContent", "final")
.setFinishPoint("final");
const app = graph.compile();
// Запуск генерации
const result = await app.invoke({
presentation: planFromLangChain
});
```
## Технологический стек
- **LangChain** — для простых цепочек обработки
- **LangGraph** — для сложных сценариев с условными переходами
- **Zod** — для структурированного вывода
- **Tavily** — для веб-поиска
- **Kandinsky API** — для генерации изображений
- **TypeScript** — для типизации и надёжности
## Оптимизация и экономика
### Параллельное выполнение
LangGraph позволяет запускать ноды параллельно. Например, генерация изображений для разных слайдов происходит одновременно, что значительно ускоряет процесс.
### Стоимость генерации
Примерная стоимость создания презентации из 8 слайдов:
- Планирование: ~$0.02
- Веб-поиск: ~$0.01
- Генерация изображений: ~$0.06
- Создание контента: ~$0.02
**Итого: ~$0.11** себестоимость при продажной цене $2-5.
## Практические советы
1. **Экранируйте фигурные скобки** в коде, иначе LangChain будет пытаться их интерпретировать
2. **Используйте Zod** для гарантированной структуры ответов
3. **Сохраняйте контекст** между запросами для связности контента
4. **Тестируйте промпты** на разных темах и языках
5. **Добавляйте текущую дату** для актуальных тем
## Заключение
Создание AI-агентов — это **не rocket science**. Фронт-энд разработчик может создать полноценный аналог коммерческого сервиса, используя современные инструменты.
Главное — **пробовать и экспериментировать**. Это направление развивается очень быстро, и скоро каждый разработчик будет работать с AI-агентами.
![QR-код для доступа к приложению](https://via.placeholder.com/200x200/2D3748/FFFFFF?text=QR+Code%0AГенератор+презентаций)
*QR-код для доступа к демо-версии клона Gamma.app*
---
*Статья основана на докладе Александра Примакова, фронт-энд разработчика Сбера с 10-летним опытом в IT. Александр также преподаёт в университетах и успешно запустил курс по созданию AI-агентов для магистрантов КФУ.*
### Полезные ссылки
- [LangChain Documentation](https://langchain.com/docs)
- [LangGraph Tutorial](https://langchain.com/langgraph)
- [Zod Schema Validation](https://zod.dev/)
- [Tavily Search API](https://tavily.com/)
- [Kandinsky API](https://fusionbrain.ai/)
**Хэштеги:** #AI #LangChain #LangGraph #TypeScript #Презентации #Kandinsky #MachineLearning

2035
primakov.txt Normal file

File diff suppressed because it is too large Load Diff