 |
| ru |
 |
31-05-26 @ 22:49
Ad Noctum  
Вайб-кодинг
|
От полного нуля до своего онлайн‑радио: как я обманул систему с помощью ИИ (и почти всё сломал)».
Вайб‑кодинг: от идеи — к реальному продукту за "ОЧЕНЬ БЫСТРО"
Эта статья написана лично мной (😃): я получил массу впечатлений и хочу ими поделиться. В тексте будет много ссылок и несколько картинок. На выходе - можете скачать бесплатное приложение, в котором играет музычка от человека, который никогда не занимался полноценной разработкой своими руками.
Для меня важно, чтобы вы попробовали получившееся и оставили в комментариях своё мнение о качестве реализации. Для тех, кому лень читать всё подряд, — ссылка на продукт ждёт вас в самом низу! Много букв, но надеюсь, этот материал поможет кому‑то сделать то, что раньше казалось невозможным :)
Для тех, кто не в курсе:
Речь идёт о современном подходе к созданию цифровых продуктов: вы описываете идею на обычном языке, а ИИ помогает превратить её в работающий код. В теории это даёт реальную экономию времени и ресурсов — без потери качества. Я решил опробовать этот подход на спонтанной идее — создать онлайн‑радио. У меня на ноутбуке уже была готовая подборка «100 лучших песен в стиле Русский рок», которую я быстро загрузил для экспериментов. Так родилась концепция радио «Лучший русский рок».
Как человек, который писал код последний раз лет 20 назад (если не больше), но имеет общее представление об основах программирования, я считаю себя идеальным кандидатом для такого эксперимента.
Задачи проекта:
- Запустить аудиопоток и научиться «передавать» аудио любому подключившемуся
- Протестировать работу потока на готовом сервисе.
- Встроить поток на сайт в доменной зоне .ru.
- Создать мобильное приложение для Android с встройкой аудиопотока.
Шаг 1. Запускаем аудиопоток
Запустить аудиопоток оказалось на удивление просто. Достаточно подписаться на готовую оболочку — и вам становятся доступны инструменты редактирования плейлиста. Ваш аудиопоток начинает вещать! Я выбрал сервис myradio24. Работа по запуску заняла считанные минуты: через полчаса и за смешную сумму в 300 рублей сервис заработал.
Результат: в мире появилась точка, из которой мой плейлист готов передаваться на любые устройства.
Шаг 2. Тестируем поток на готовом сервисе
Встроить поток я решил прямо на странице оболочки myradio24. Сервис предлагает простейший конструктор форм — в духе старых форумов. Немного повозившись, я вспомнил, как это делается (спасибо браузерным играм и форумам, где мы использовали теги для выделения жирным и ![]() для вставки картинок). Не стремясь к излишней красоте, я несколько дней тестировал стабильность потока — и убедился, что всё работает как надо.
Результат: появилась возможность заходить на страницу и слушать своё онлайн‑радио. Кроме того, радио разместилось в приложении myradio24 — можно переходить к следующим задачам!
Первое и второе использование ИИ:
1. Я решил создать приветственный джингл — короткую мелодию, которая играет при запуске радио перед началом вещания. Перепробовал много сервисов: все генерировали полноценные песни, и мне приходилось обрезать их вручную.
2. Мне потребовалась генерация логотипов. Ни яндекс ни Кандинский не справились с задачей создать изображение требуемого размера (в моем случае 300х800). Пришлось делать вручную.
Итоги этапа: считаю, что ИИ справился лишь на 10 % от общего времени — но всё равно это сэкономило мне пару часов ручной работы.
Ссылка на самую первую страницу, собранную из готовых компонентов оболочки: https://myradio24.com/zloy
(Картинка из приложения — в фото к посту.)
Шаг 3. Встраиваем поток на сайт .ru‑сегмента
Конечно же, выбор пал на Тильду — знакомый многим конструктор. На этом этапе процесс оказался довольно автоматизированным: основная работа свелась к конструированию готовых форм и общению с ИИ‑агентом, который формировал информационные блоки.
Однако результат меня не устроил полностью, мне было нужно:
- перекрасить передаваемые с myradio24 данные;
- подобрать подходящие шрифты (перекрасить приходящие);
- встроить плеер;
- добавить кнопку «Добавить в избранное»;
- написать текст с высокой цитируемостью, близкий к теме «Русский рок».
Эти пункты успешно выполнил ИИ, мне осталось только скопировать их на HTML-страницу.
А еще в итоге на сайте получилось не одна, а три страницы.
Итоги этапа: около 20% трудозатрат удалось полностью передать ИИ (к еще 50%, которые были автоматизированы ИИ-агентами самой Тильды). На сайт было потрачено пара часов под ключ.
Ссылка на получившийся сайт: https://rus-rock-radio.ru
Шаг 4. Создаём мобильное приложение для Android: эпическая битва с кодом — и триумфальная победа!
Этот этап стал для меня настоящим испытанием. Я поручил ИИ полный цикл разработки:
- составление требований к приложению;
- описание архитектуры;
- написание кода.
Что пошло не так? !!!ВСЕ!!! Пришлось:
- Разбираться с компилятором для Android‑приложений.
- Понимать архитектуру и переносить предложенный код в соответствующие разделы.
- Столкнуться с бесконечными ошибками компиляции и отладки — многие из них были связаны с разницей в версиях компонентов и их взаимодействием.
С пятницы по воскресенье я бился над проблемой, не вылезая из кода, — но безуспешно. Тогда я обратился за помощью к опытным разработчикам.
Они подсказали ключевую идею: дать ИИ доступ к репозиторию проекта. Изменили подход — и… ПОБЕДА!
Теперь у меня есть работающее приложение! Но, конечно, без нюансов не обошлось:
- непонятные таймеры;
- проблемы с воспроизведением в фоновом режиме;
и другие мелкие баги.
Серия обращений к ИИ — и шаг за шагом было исправлено всё.
Список исправлений, которые пришлось попросить сделать ИИ:
- Исправить порядок отображения последних треков (чтобы свежие были сверху, а не снизу).
- Починить «взбесившиеся» таймеры, показывающие непонятные значения.
- Переместить элементы на экране для удобного отображения с учётом шрифтов.
- Уменьшить размер шрифтов в ряде блоков.
- Добавить универсальную картинку на случай, если на альбоме исполнителя её нет.
- Переименовать пункты меню.
- Добавить виджет «слушателей онлайн».
- Заменить яркое сообщение «CONNECTION ERROR» на лаконичное уведомление при отсутствии интернета.
- Исправить проблему с переходом в приложение из «Ленты», когда оно работает в фоне.
- Встроить в панель информации данные о следующем треке.
- Привести все шрифты к единому стилю.
- Добавить кнопку [i] с информацией о приложении.
- Изменить название сборки.
Каждый пункт пришлось уточнять и дорабатывать несколько раз — но в итоге награда: стабильное и работающее приложение Android!
Итог: 90% эффект от использования ИИ. Мои знания не позволили бы сделать такой проект самостоятельно, но сочетание моего описания задачи на русском языке и трансформации его в код дало отличный результат - готовый проект. У владельцев iPhone — извините, пока разработка только для Android! 10% отдаем сложным случаям, где потребовались корректировки вручную.
Ссылка на яндекс диск с готовым приложением: https://disk.yandex.ru/d/RModglWQ4oYXGA
Итоги проекта:
- Аудиопоток онлайн‑радио запущен и стабильно работает.
- Сайт с плеером и дополнительной информацией готов:
- Страница на сервисе myradio24 для быстрого доступа:
- Мобильное приложение для Android — стабильное, удобное и уже ждёт ваших прослушиваний!
Это сделано человеком, который обладает только упорством, но не обладает никакими знаниями в области написания кода.
Общее время на все эти затеи - 5 рабочих дней (с 9 до 18). С учетом того, что я делал это после работы и в выходные - управился за 2 недели. Повторить могу тоже самое за 2 дня, т.к. уже не надо разбираться с разной мелочевкой, на которую ушло много времени. Параллельно, в фоне, прослушивал плейлист, добавлял и убирал неудачные композиции: теперь у нас с вами есть уникальный сборник песен, подходящие под описание "Русский Рок".
Я надеюсь, что мне удалось вдохновить хоть одного человека на новые свершения. Напишите мнение о статье. Также, если будет настроение и положительный отклик - возможно я буду замотивирован на проверку ИИ как инструмента развития этого проекта. Говорят, есть большие проблемы с добавлением функционала спустя несколько релизов и ИИ не справляется.
Еще раз ссылки:
Сайт: https://rus-rock-radio.ru
Ссылка на андроид приложение: https://disk.yandex.ru/d/RModglWQ4oYXGA
Попробуйте результаты и поделитесь мнением в комментариях — мне это очень важно! Что получилось хорошо, а что стоит улучшить? Буду рад любым отзывам!
Удачи, братцы :)
|
Post reply | Post reply with quote
|
 |
