Веб-разработка

Что такое Echo 423?
Это атмосферная научно-фантастическая игра во вселенной «Эхо». Вас ждёт исследование загадочной планеты, случайные события, необычные объекты и множество решений, влияющих на развитие истории.

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

Присоединиться можно прямо сейчас:
https://nakayn.theecho.ru/

Игра запускается прямо в браузере — ничего устанавливать не нужно.

Если вы любите sci-fi, эксперименты и исследования — заходите, пробуйте, и обязательно делитесь впечатлениями. (https://m.vk.com/wall-227906685_91?from=group )

Спасибо всем, кто следил за разработкой. Это важный шаг — и мы рады пройти его вместе с вами.

- Джуны получают AI-агентов вместо ТЗ → генерируют рабочие прототипы за часы,

- Тестирование, рефакторинг, документирование — автоматизируются.

Итог: команда не "тушит пожары", а создает ценность.

Но есть нюанс:

Чтобы vibe coding действильно давал, а не создавал хаос — надо учиться.

- Разработчикам → как внедрять AI в поток,

- Лидам → как перестраивать процессы,

- Мне → как быть системным и понятным.

Вот почему я сейчас живу в теме вайб-кодинга:

Потому что масштабирование важнее единичных кейсов.

Потому что ускорение команды эффективнее использования еще одного чат-бота.

Потому что дальше будет только веселее 😉

1. Создание фирменного стиля.

- Сбор требований, анализ конкурентов, прототипирование

- Создание фирменного стиля компании, логотипа, проведение UI/UX исследований

- Создание адаптивных макетов, графических элементов и анимации

2. Адаптивная верстка макетов.

- Адаптивная верстка проекта

- Проработка анимации

- Адаптация верстки под разные экраны и браузера

3. Программирование готовой верстки.

- Программирование бэкенда

- Подключение отправки форм

- Переход по ссылкам

- Создание внутренних уникальных страниц, доступных только по уникальной ссылке

4 Наполнение контентом и тестирование.

Анализ текстовой информации бизнес-аналитиком для заполнения контентом, написание title, description. Тестирование продукта.

5 Техническое сопровождение

Покупка домена и выделение собственного сервера под нужды Заказчика.

Результат

Сайт с уникальным стилем и дизайном, который полностью раскрывает цель и задачи новой технологии.

Сайт отвечает ряду главных требований:

- простота и понятность использования, как со стороны пользователя, так и со стороны администратора

- проработанная адаптивность и кроссбраузерность

- быстрая скорость загрузки

1 Создание уникальноно стиля: логотип, шрифты, сам дизайн.

- Проработка фирменного стиля;

- Анализ конкурентов;

- Создание уникального логотипа;

- Проведения UX/UI исследования;

- Прототипирование;

- Проработка мобильной версии.

2 Верстка дизайна

- Адаптивная верстка проекта;

- Проработка анимаций;

- Проработка разрешений фотографий.

3 Программирование бэкенда и панели администратора

- Подключение системы приема заявок Bnovo

- Поключение Яндекс отзывов

- Создание уникальной панели адмиинистратора с управлением контентом.

4 Написание уникальных текстов и сео-оптимизация

- Уникальный копирайтинг;

- Составление семантического ядра;

- Написание title, description

Результат

Полностью созданный сайт "под ключ" с фирменным стилем.

Уникальный дизайн и логотип.

Высокая скорость загрузки страниц.

В панели админстратора ничего личшнего.

1. AI-режим (быстрый старт)

Вы вводите название курса или список тем — AI сам:

• предлагает структуру (модули и уроки),

• генерирует содержание уроков,

• создаёт проверочные задания.

Подходит для быстрого запуска MVP или чернового наброска.

2. Creator-режим (ручное управление)

Вы полностью контролируете структуру курса:

• добавляете модули и уроки вручную,

• загружаете свои тексты, заметки,

• используете AI для редактуры и дополнений.

Этот режим подходит для продуманных авторских программ.

Публикация и библиотека

Курс можно опубликовать — и другие пользователи найдут его в библиотеке и смогут пройти. Это работает как для авторов, так и для студентов, которые хотят делиться находками.

Функции, которые делают обучение живым

1. AI-помощник в уроках В каждом уроке встроен чат с нейросетью. Можно задавать уточняющие вопросы, просить объяснений — будто у вас всегда под рукой личный репетитор.

2. Проверочные задания AI сам создаёт тесты и задания, а затем даёт обратную связь — что получилось, что можно улучшить.

3. Аудиоверсии лекций Не хотите читать — слушайте! Текст превращается в речь, удобно в дороге или во время прогулки.

4. Трекер прогресса Система отмечает, какие уроки вы прошли, что осталось, и помогает отслеживать результат.

Техническая сторона

Проект написан на Django + Jinja2 Templates. Без модных SPA-фреймворков — всё максимально просто и понятно. Почему так? Потому что изначально это был учебный проект — и сработало. Плюс, я не знаком с современным фронтендом и мне было куда проще собирать костяк html самому и потом через GPT кастомить до нужных бутстрап классов, чтобы верстка смотрелась приемлемо.

Архитектура

• Accounts — управление пользователями, токенами, AI-моделями.

• Courses — AI-курсы, публичные курсы.

• CreatorCourses — редактор авторских программ, которые затем можно «трансформировать» в AI-курсы.

Используются стандартные CBV (ListView, CreateView, и т.д.). Данные моделей Course, Module, Lesson, Task клонируются из Creator-программы при публикации.

AI внутри

По умолчанию используется Qwen2.5-32B, но пользователь может подключить свой ключ от OpenAI (например, GPT-4). Я тестировал разные модели — по качеству ± одинаково, но GPT-4 справляется примерно на 20–30% быстрее.

Промпты заранее шаблонизированы, в них просто «втыкается» пользовательский ввод.

Где хостится?

Сначала всё работало на Raspberry Pi, который стоял дома на подоконнике. Потом начались проблемы с провайдером — и я перенёс всё в Digital Ocean. Плачу около 1000₽ в месяц, зато всё стабильно, и не нужно мутить прокси для доступа к OpenAI из РФ.

Проблема стриминга

Хотелось, чтобы ответ от AI печатался прямо на экране. С stream=True и запуском через runserver + nginx всё работало. Но при переходе на Uvicorn/Gunicorn стрим ломается: данные буферизируются и выводятся разом. JS и backend одинаковые, конфиг nginx тот же — а стрима нет. Пока временное решение — просто показываю прогресс-бар.

Возможно, стоит вынести стриминг в отдельный FastAPI-сервис, как советует GPT. Пока руки не дошли.

Что дальше?

• Интеграция WYSIWYG-редактора в Creator-режим.

• Авторизация через VK, Яндекс и другие платформы.

• Улучшение UX/UI.

• Восстановление стриминга при запуске не через runserver.

Завал задач и поиски спасения

Итак, дело было так. Очередной завал на работе, куча задач, мозг кипит. Вспомнил про технику Помодоро — это когда работаешь 25 минут, потом 5 минут отдыхаешь. Простая штука, но реально помогает не выгорать.

Полез искать нормальный таймер в интернете и... знакомая история:

• Либо убого простые

• Либо перегруженные фигнёй

• Либо на английском

• Либо платные

• Либо ещё регистрацию просят

В общем, типичная ситуация: "Да я сам лучше сделаю!" Но проблема в том, что фронтенд я знаю на уровне "поменять текст на странице через консоль разработчика до перезагрузки".

Вспомнил про хайповую штуку

Тут я вспомнил про так называемый "вайб-кодинг" с нейросетями. Да, знаю, что многие к этому относятся скептически, но решил попробовать. Открыл Claude и написал примерно так:

"Старина, сделай мне HTML-страничку с таймером Помодоро. Нужно: таймер на 25 минут, задачи можно добавлять, статистика какая-нибудь и чтоб пикал когда время вышло."

И тут началось волшебство! Claude выдал мне полноценный рабочий прототип. Причём не просто "Hello World", а реально функциональную штуку😉:

• Нормальным таймером

• Возможностью добавлять задачи

• Статистикой

• Звуками

Меня понесло

Ну и дальше меня, конечно, понесло:

• А можешь добавить сохранение в Local Storage?

• А сделай звуки покруче

• А перекрась вот это в зелёный

• А добавь настройки времени

• А мобильную адаптивность

Claude всё это выполнял как послушный джуниор! За час у меня был готов довольно приличный таймер.

Реакция коллег

Показал результат фронтенд-разрабам на работе со словами: "Смотрите, что я за час накатал, вообще без знаний!"

Их реакция:

• 😳 (удивление)

• 🤔 (изучают интерфейс)

• 😯 (ещё больше удивления)

• Нефига себе, ништяк получилося! Реально работает!

Решил довести до ума

После такой реакции подумал: "А почему бы не довести это до продакшена?" И понеслось...

Сейчас можете посмотреть результат: pomo25.ru

Что в итоге получилось:

Для тех, кто хочет настроить под себя:

• Настраиваемые интервалы (любое время, какое хочешь!)

• 10 типов звуков + можно загрузить свой

• Ручное сохранение настроек

• Push-уведомления в браузере

Для обычных людей:

• Добавляешь задачи и следишь за прогрессом

• Видишь статистику: сколько помидорок сделал

• Не забываешь делать перерывы

• Задачи сохраняются автоматически

Про дизайн (не кидайтесь тапками)

Отдельно про дизайн. Да, я знаю, что он специфический. Это не потому что у меня нет вкуса (хотя может и нет 😅), а потому что я специально попросил Claude сделать что-то в стиле киберпанка 90-х.

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

Телеграм-версия

Потом решил пойти дальше и сделал версию для Телеграма: @pomo25_bot

Плюсы:

• Данные синхронизируются через облако Телеграма

• Уведомления приходят от самого Телеграма

• Работает на телефоне как нативное приложение

Минусы:

• Не работает в фоне (об этом ниже)

Проблема с фоновой работой

Единственное, что не смог победить — работу в фоне на мобилках.

Проблема в том, что:

1. Телеграм Web Apps работают в WebView

2. При сворачивании приложения WebView приостанавливается

3. JavaScript перестаёт выполняться

4. Service Workers в WebView работают криво

5. iOS вообще жёстко блокирует фоновые скрипты

В итоге при сворачивании таймер автоматически ставится на паузу. Для полноценной работы в фоне нужно было бы нативное приложение.

Опыт работы с нейросетями

Claude: король прототипирования

В начале Claude был просто космос:

• Быстро понимает что нужно

• Генерирует рабочий код

• Хорошо итерируется

• Не задаёт лишних вопросов

Но потом начались проблемы

Когда проект разросся, Claude начал путаться:

• Исправляет одно, ломает другое

• Забывает контекст больших файлов

• Приходилось делать бэкапы в гите постоянно

Попробовал ChatGPT — ещё хуже! То ли ленился и отвечал "попробуйте перезагрузить страницу", то ли чинил совсем не там, где надо, вообще не понимая что происходит в коде.

Gemini спас ситуацию

Тогда попробовал новый Gemini (у него миллион токенов контекста). И охренел!

Gemini смог:

• Прочитать ВЕСЬ проект целиком

• Найти реальные причины багов

• Переписать проблемные части

• Почистить код от мусора

Реальная польза

Сейчас пользуюсь своим таймером каждый день:

• Реально стал делать перерывы (раньше мог 3 часа сидеть не вставая)

• Лучше планирую время на задачи

• Меньше выгораю от сложных задач

• Коллеги тоже подсели, просят фичи добавить, но я пока просто собираю обратную связь и анализируюю насколько это будет сложно реализовать и внедрить

Мораль истории

Современные нейросети действительно могут сильно понизить порог входа в разработку. Даже если ты не знаешь React/Vue/Angular, можно создать полезную штуку.

Но есть нюансы:

• Для прототипов ИИ идеален

• Для больших проектов нужно понимать что делаешь

• Разные ИИ лучше для разных задач

• Git обязателен при работе с ИИ

Итог

За час собрал рабочий прототип, потом пару недель в свободное время фиксил баги и боролся с нейросетями. В итоге получился реальный продукт, которым пользуются люди. Нейросети — не панацея, но инструмент мощный.

Сейчас собираю обратную связь (конструктивную, не токсичную) и планирую постепенно что-то добавлять и исправлять по мере поступления интересных идей.

Кто-то ещё экспериментировал с ИИ-разработкой? Поделитесь в комментах!

P.S. Если найдёте баги или будут идеи, пишите. Обратная связь очень ценна!

UPD: Забыл добавить — если кто захочет посмотреть, что получилось: pomo25.ru и @pomo25_bot в Телеграме!