Vibe Coding: PodClip – застосунок для подкастів за вихідні

Експеримент з Vibe Coding: PodClip

Автор провів експеримент, щоб перевірити ефективність концепції "vibe coding" у створенні реального продукту за один вихідний. Результатом став PodClip — веб-застосунок, призначений для захоплення та організації фрагментів подкастів зі Spotify. Більшу частину застосунку, від інтерфейсу до бази даних та автентифікації, Replit згенерував приблизно за п'ять годин роботи. Автор зазначив, що більше часу витратив на організацію думок та написання статті, ніж на саму розробку.

Проблема та цілі

Проблема полягала в тому, що під час прослуховування подкастів часто трапляються цікаві фрази чи пояснення, які важко запам'ятати або знайти пізніше. Пошук у історії прослуховування є трудомістким. Метою було створити застосунок, який би інтегрувався зі Spotify, дозволяв легко захоплювати кліпи за допомогою кнопки "старт/стоп", зберігав та організовував їх на панелі керування з функцією пошуку. Для пошуку кліпи мали бути транскрибовані.

Основні вимоги до застосунку включали:

Підключення до облікового запису Spotify.
Кнопка "старт/стоп" для захоплення кліпів.
Зберігання часових міток та транскриптів кліпів.
Організація кліпів на панелі керування з можливістю пошуку.

Вибір інструменту: Replit

Серед платформ для "vibe coding" автор обрав Replit, оскільки один із його засновників допомагав створювати React. Replit, як і інші подібні платформи, вимагає підписки; автор використовував Replit Core за $20 на місяць.

Процес розробки

Підготовка включала прослуховування подкасту про поради з "vibe coding" та перегляд офіційних відео Replit для ознайомлення з IDE та інструментами. Відео також показало, як інтегрувати обліковий запис Spotify за допомогою функції Replit Connectors.

Початкова ітерація: Перший запит до Replit був: "Створи застосунок, який дозволяє мені додавати закладки до кліпів моїх улюблених подкастів у Spotify". За кілька хвилин було отримано попередній перегляд веб-застосунку, стилізованого під Spotify. Replit автоматично налаштував інтерфейс, підключився до облікового запису Spotify, створив схему бази даних та виконав тести. Метадані епізодів (назва шоу, назва епізоду, часові мітки, обкладинка) отримувалися через офіційний API Spotify. Спочатку користувачі вводили часові мітки вручну, що не відповідало бажаному досвіду.

Функція "Зараз грає": Для захоплення кліпів під час прослуховування автор хотів додати кнопку "старт/стоп". Було використано "режим планування" (Plan mode) Replit, щоб агент пояснив процес та розбив його на завдання. Агент повідомив, що Spotify не дозволяє сторонні плагіни. Були запропоновані альтернативи:

Віджет "Зараз грає" у самому PodClip, який би отримував інформацію про поточний епізод та часову мітку через API Spotify.
Закладка браузера або комбінація клавіш для запису часових міток.
Мобільна сторінка швидкого захоплення.

Автор обрав варіант з віджетом.

Виклики з Spotify API: Після реалізації віджета виникла проблема: конектор Spotify у Replit перебуває в режимі розробки і не може отримати доступ до Playback API. Це означало, що PodClip не міг автоматично завантажувати інформацію про епізод, який слухає користувач. Агент запропонував обхідне рішення – "ручний режим", де користувач шукає епізод і використовує вбудований таймер PodClip, слухаючи Spotify в окремій вкладці. Хоча це менш зручно, код для "живого режиму" (з використанням Playback API) вже існує і буде активований, коли Replit отримає доступ до API.

Транскрипція: Для можливості пошуку та виділення тексту в кліпах, автор хотів додати функцію транскрипції. Агент попередив, що генерація транскриптів є ресурсомісткою. Було запропоновано підхід:

Сторінка "Транскрипт епізоду" з кнопкою "Згенерувати повний транскрипт".
Розбивка аудіо на невеликі сегменти (кілька хвилин) та їх транскрипція за допомогою OpenAI Speech-to-Text.
Відображення повного транскрипту з часовими мітками та пошуковою панеллю.
Можливість виділяти текст у транскрипті та зберігати його як кліп, автоматично встановлюючи часові мітки.

Важливим обмеженням було те, що Spotify не надає доступ до сирого аудіо подкастів через свій API. Тому PodClip використовує публічно доступні RSS-стрічки подкастів (наприклад, з Apple Podcasts) для отримання аудіофайлів. Для транскрипції було інтегровано обліковий запис OpenAI через конектори Replit. Транскрипція відбувається частинами по дві хвилини, що впливає на точність часових міток, але пріоритет надається змісту.

Кінцевий продукт та публікація

У підсумку, автор отримав робочий застосунок для зберігання цитат з подкастів. Replit спростив публікацію, обробивши автентифікацію користувачів та додавши кнопку зворотного зв'язку. Загалом, на проєкт було витрачено близько 3-5 годин за вихідні, причому більшість часу пішла на формування запитів до агента та тестування функцій.

Висновки щодо Vibe Coding

Найбільшими відкриттями щодо "vibe coding" стали:

Агент автоматично обробляв більшу частину архітектури застосунку.
Короткі та прості запити були цілком достатніми.
Обмеження платформ (наприклад, Spotify API) були найбільшим блокером.

"Vibe coding" чудово підходить для прототипування та значно знижує бар'єр для перетворення ідеї на робочий продукт. Це не обов'язково розвиває навички кодування, але є ефективним для експериментів та швидкої розробки MVP (мінімально життєздатного продукту).

Що це означає для розробників

Цей досвід показує розробникам, що 'vibe coding' значно знижує поріг для перетворення ідеї на робочий продукт, дозволяючи швидко створювати прототипи. Однак, він не обов'язково розвиває навички кодування, а також може бути обмежений сторонніми API, як у випадку зі Spotify.

Ключові факти

Застосунок PodClip створено для збереження та організації фрагментів подкастів зі Spotify.
Розробка зайняла близько 3-5 годин за вихідні за допомогою платформи Replit.
Replit згенерував більшу частину застосунку, включаючи інтерфейс, базу даних та автентифікацію.
Основні функції включають додавання кліпів, організацію на панелі керування та транскрипцію для пошуку.
Виникли труднощі з доступом до Spotify Playback API, що вимагало обхідних рішень (ручний режим).