Як я відкрив для себе вайбкодінг і навабкодив сервіс з графіками відключень світла

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Невеликий дисклеймер

Цю статтю я писав не сам — у процесі підготовки тексту використовував штучний інтелект для структурування думок, редагування та вичитки.

Фінальний текст — це мій досвід і мої висновки, просто сформульовані трохи швидше, ніж це було б без допомоги AI.

Проблема

З початком масових відключень електроенергії з’явилась потреба вчасно отримувати інформацію про зміни в графіках.

На той момент єдиним зрозумілим джерелом для Києва та області був офіційний сайт ДТЕК, але користуватися ним було незручно:

• потрібно щоразу вводити адресу, навіть якщо ти знаєш свою чергу;
• інтерфейс складно назвати дружнім до користувача;
• не було сповіщень — будь-які зміни доводилося відстежувати вручну.

Перший підхід

Я вирішив піти шляхом автоматизації й використав n8n.

Найскладнішим виявилось не налаштування workflow, а пошук самих даних — відкритого API не існувало.

Довелося аналізувати HTTP-запити сайту та відтворювати їх програмно. Трохи часу, терпіння — і в результаті я отримав наступний workflow.

Як це працювало

Дані зчитувались кожні 30 хвилин з 7:00 до 23:00.

Поточний стан зберігався в Google Sheets.

При зміні графіків автоматично надсилались повідомлення в Telegram.

З часом з’ясувалося, що відстеження графіків — це спільна проблема для багатьох сусідів. І дуже швидко у мого бота з’явилося кілька Telegram-груп, підписаних на сповіщення.

Повідомлення виглядали приблизно так:

Новий етап

n8n виявився платним рішенням, а повідомлення бота часто губилися в потоці дискусій у чатах. Тож я вирішив:

• перейти на безкоштовні інструменти;
• створити сайт, де можна в реальному часі без зайвих дій бачити ситуацію по чергах.

Тому я спробував створити власний інтерфейс за допомогою AI.

Використовуючи ChatGPT та AI-асистента від IntelliJ IDEA, після кількох вечорів тестування з’явився сайт:

👉 kolybude.com

Технічний стек нового рішення

Після переходу від n8n до власного рішення стек виглядає так:

• Render — використовую як хостинг для застосунку. Хотілося максимально простого деплою без складної інфраструктури та зайвого DevOps.
• Browserless — для програмного зчитування графіків із сайту. Оскільки відкритого API немає, довелося працювати фактично на рівні браузера.
• Cron-job — періодично виконує запити до сервера, щоб той не «засинав» на безкоштовному тарифі та продовжував стабільно обробляти задачі.

Висновки

Поділюсь висновками, які зробив для себе, використовуючи Junie by JetBrains.

Плюси

• Без AI я витратив би значно більше часу на розробку такого проєкту.
• AI суттєво прискорює роботу.
• Не довелося залучати UX-дизайнера чи бекенд-розробника.
• Удалося обійтися без написання коду в тому вигляді, до якого я звик.
• Новий функціонал додається буквально за лічені хвилини.

Мінуси

• AI не замінює інженера.
• Без розуміння програмування, логіки та відладки нічого б не запрацювало.
• Щоб все це запрацювало не лише локально, а ще й на віддаленому сервері, також потрібні навики, які не навайкодиш.
• Щоб отримати очікуваний результат, AI потрібно дати добре пропрацьоване ТЗ.
• Увесь код — і на фронтенді, і на бекенді — часто опинявся в одному файлі.
• Розширення функціоналу іноді призводило до небажаних змін або редизайну компонентів.
• Часто доводилося відкатувати зміни та інколи вручну вносити правки.

З одного боку, рішення поки що доволі сире.

З іншого — без окремих frontend-, backend- та UX-спеціалістів вдалося створити робочий сервіс буквально за кілька вечорів і з мінімальним ручним написанням коду.

Професія інженера нікуди не зникне — вона трансформується. І адаптуватися до цього потрібно вже зараз.

Наостанок

Я щиро сподіваюся, що після цієї публікації ДТЕК не закриє можливість програмно отримувати дані про відключення електроенергії, а навпаки — розгляне можливість створення публічного API для всіх охочих.

Це зробило б інформацію доступнішою та допомогло б зменшити навантаження на офіційні ресурси.