Від розмови з ШІ до функціонального додатку: мій досвід побудови системи для рекламної агенції без написання коду
Нещодавно мій друг, який керує невеликою рекламною агенцією, вилив свою душу: “Ліло, я просто втомився від купи таблиць Excel, нескінченних ланцюжків електронних листів і того, що клієнти забувають затвердити макет, поки я не нагадаю їм вп’яте. Ми прагнемо чогось… більш витонченого. Чогось, де все під рукою, де клієнт бачить лише своє, а команда – своє. І щоб це працювало, як годинник!”
Я уважно вислухала, спостерігаючи, як він нервово крутить ручку. Це була знайома картина. Скільки разів я чула подібне від професіоналів з найрізноманітніших галузей – від маркетингу до логістики. Ми, технічні спеціалісти, звикли говорити про складні архітектури, про “бек-енди” та “фронт-енди”, про бази даних та API. Але для бізнесу це часто звучить як заклинання, що не вирішує їхніх нагальних проблем.
І ось тут починається найцікавіше. Я задумалася: “А що, якби можна було отримати готовий, функціональний додаток, просто поговоривши з розумним асистентом? Без тонни коду, без найму дорогої команди розробників, без місяців очікування?” Можливо, це звучить як наукова фантастика, але я вам скажу: ми вже майже там. І сьогодні я детально покажу, як я побудувала цілу програму для рекламної агенції, взаємодіючи виключно з Claude. Так, ви не помилилися – з Claude, і жодного рядка коду я не написала самостійно.
Чому візуально приваблива сторінка – це ще не повноцінний додаток
Давайте будемо відвертими. Коли хтось із відділу маркетингу чи операцій бачить, як штучний інтелект може створити привабливу веб-сторінку, він вражений. “Ось, дивіться, у нас тепер є дошка для кампаній! Кожен етап – окремий стовпчик, картки з назвами клієнтів, бюджети… виглядає ж цілком готовим!” Так, виглядає. Аж доки ви не спробуєте цим реально скористатися.
Ось класичний сценарій: ви оновили сторінку, а всі перетягнуті картки повернулися на місце. Чому? Тому що кампанії збережені просто у файлі, а не в справжній базі даних. Немає механізму автентифікації, що означає, що ви не можете надіслати дані клієнту, не показавши йому бюджетів інших клієнтів. А якщо двоє колег одночасно відкриють цей файл, кожен отримає свою копію, і вся суть спільної роботи зникає.
Саме так часто робляться внутрішні інструменти. Людина створює щось візуально привабливе, команда починає це використовувати, залежність зростає. А потім виявляється, що цю “красу” необхідно переписати з нуля, щоб вона була безпечною, масштабованою та працювала як єдине ціле. Проблема ніколи не була в самій сторінці. Проблема полягала у відсутності справжньої бази даних та облікових записів користувачів. І саме це ми зараз і додамо.
Крок 1: знайомимо Claude з його новим робочим середовищем (та з собою)
Суть магії полягає в тому, що Claude має здатність взаємодіяти з іншими сервісами. Це як якщо б він мав спеціальні “вуха” та “руки” для роботи зі зовнішнім світом. Такий механізм називається MCP (Model Context Protocol) – це свого роду стандарт від Anthropic для створення конекторів. Він працює аналогічно до того, як ви підключаєте Claude до свого календаря чи документів.
Я відкрила розділ “Customize” у Claude, потім “Connectors”, натиснула “Add” і вибрала “Add custom connector”. Далі – просто вставила MCP URL від Softr (це платформа, яка спрощує побудову додатків за допомогою ШІ; вони виступили спонсором цього відео – посилання, до речі, є в описі, надає 200 AI кредитів, що дозволяє вам спробувати самостійно). Після цього – звичайний OAuth-логін, той самий, що ви бачите, коли програма запитує дозвіл на підключення до вашого Google-акаунту.
І ось тут почалося найцікавіше. Я перевірила, які саме дії Claude тепер може виконувати. І раптом список доступних інструментів значно розширився: з’явилися інструменти для роботи з базами даних, для створення робочих процесів, для роботи зі сторінками та групами користувачів. Навіть з’явився інструмент для “vibecoded blocks” – це такі невеликі, кастомні елементи інтерфейсу.
Відтепер, коли я прошу Claude створити таблицю або сторінку, він робить це безпосередньо всередині самої програми, а не просто пояснює, як я могла б це зробити. Це як надати йому не просто рецепт, а й доступ до кухні з усіма необхідними інструментами.
Крок 2: фундамент – будуємо базу даних, яка не забуває
Існує думка, що все в житті тримається на фундаменті. У нашому випадку – на базі даних. Все інше будується поверх неї. Тому я почала саме з цього.
У промпті я чітко визначила кожну таблицю та кожне поле. Я вказала точні етапи, через які проходить кампанія в рекламній агенції: “Ідея”, “Дизайн”, “Рецензування”, “Клієнтське затвердження”, “В роботі”, “Завершено”. Якби я це пропустила, Claude міг би вигадати власні етапи, і мені б довелося витратити додатковий час на їх перейменування. Хто любить переробляти чужу роботу? Правильно, ніхто.
Claude розпочав роботу, створюючи таблиці послідовно: спочатку “Клієнти”, потім “Кампанії” (з посиланням на відповідного клієнта), потім “Завдання” (пов’язані з кампаніями) і, нарешті, заповнив усе це зразковими записами.
Коли він закінчив, я відкрила вкладку “Data” в додатку. І що я побачила? Зв’язки між таблицями працювали належним чином. Поле “Етап” перетворилося на випадаючий список із моїми шістьма етапами, розташованими у правильному порядку. Я відкрила картку одного клієнта і побачила його кампанії, перелічені прямо там. Це свідчило про те, що зв’язок працював в обох напрямках.
І ось що ще цікаво: Claude вміє аналізувати ці дані. Я могла поставити йому запитання прямо в чаті. Наприклад: “Які кампанії перевищують бюджет?” Він порівняв витрати з бюджетом і надав список, показуючи, наскільки кожна кампанія перевищила встановлений ліміт. Звичайно, зазвичай керівник відділу витрачає на це чимало часу, відкриваючи таблицю Excel і сортуючи її вручну. Це вже був маленький, але значущий прорив!
Крок 3: канбан-дошка та дашборд – візуалізація успіху
Команді необхідно бачити свій операційний пайплайн. Тому наступним логічним кроком була побудова канбан-дошки. І тут Claude використав той самий “vibecoding” – він створив кастомний блок (невеликий React-компонент) і опублікував його як сторінку в додатку.
Важливо: на відміну від моєї першої, “сирої” сторінки, цей блок міг читати та записувати дані з таблиці “Кампанії”. Я перетягнула картку кампанії з етапу “Внутрішнє рецензування” на “Затвердження клієнтом”. Потім відкрила цю кампанію у вкладці “Data” – і вуаля, етап змінився на “Затвердження клієнтом”.
Але це ще не все. Мені захотілося внести незначні корективи. Я відкрила цей блок в редакторі, щоб побачити, що саме зробив Claude. У вкладці “Source” було посилання на мою таблицю “Кампанії”, а у вкладці “Code” – сам React-код, який я могла б переглянути, якби виникла така потреба. Я попросила Claude зробити картки більш компактними та додати бейдж із бюджетом. Він відредагував той самий блок, а не створив новий. Після перезавантаження дошка мала оновлений вигляд.
І що найприємніше: кожна версія зберігається. Якщо мені не сподобається якесь оновлення, я можу вибрати попередню версію з меню і відновити її. Це як машина часу для вашого додатку!
Далі – дашборд для власника агенції. Це завжди не найпростіше завдання – правильно сформулювати запит. Перший результат рідко буває ідеальним. Якби я просто написала “build a dashboard”, я б отримала кілька загальних показників. ШІ не читає думок. Він робить рівно те, що ви просите. Тому я поставилася до цього, як до брифінгу реального розробника: чітко, детально, з усіма нюансами.
Я попросила згрупувати активні кампанії за етапами, додати прогрес-бар для кожної, базуючись на кількості виконаних завдань. Потім – виділити все, що минуло термін, або має запуститися цього тижня.
Під час ітерацій я помічала помилки. Наприклад, дашборд показував 40 протермінованих завдань з 40. Виявилося, Claude присвоїв усім зразковим завданням дату виконання в минулому. Я попросила його “розтягнути” дати на наступні три тижні, і кількість протермінованих завдань стала більш правдоподібною.
Найкраще те, що мені не довелося починати все з нуля. Claude вміє читати дані з додатку через конектор. Тому кожне виправлення – це просто ще одне повідомлення в чаті, яке доповнює те, що вже працює. Тому я ніколи не відкриваю новий чат, коли щось іде не так.
Крок 4: хто є хто? Користувачі, ролі та безпека
Наразі я єдина, хто має доступ до цього додатку. Але команді потрібен доступ, а клієнтам – свій, обмежений. І вони не повинні бачити одне й те саме.
Тому я розробила детальний план доступу одним запитом, згрупувавши все за ролями. Claude створив три групи: “Адміністратори”, “Команда” та “Клієнти”. Потім він визначив, хто яку сторінку може бачити.
- Адміністратори бачать повний додаток, включно з дашбордом.
- Команда бачить дошку кампаній та завдання, але доступ до дашборду їм обмежений.
- Клієнти бачать лише свою сторінку, де представлені їхні кампанії, що очікують на затвердження, та кнопка “Затвердити”.
Я ретельно протестувала додаток, перемикаючись між ролями. Спочатку як член команди: бачу дошку, завдання, але дашборд недоступний. Потім як клієнт: одна картка кампанії, кнопка “Затвердити”, поле бюджету приховане. Повертаюся як адміністратор – все на місці.
Але це ще не все. Я перевірила безпеку: як клієнт, я спробувала відкрити кампанію іншого клієнта. Додаток відмовив. Потім я натиснула “Затвердити” на своїй кампанії і перевірила у вкладці “Data” – кампанія успішно перемістилася в статус “Затверджено”.
Тут варто підкреслити: облікові записи користувачів та дані зберігаються в одному додатку. Дошка, створена Claude, підпорядковується тим самим правилам видимості, що й будь-який інший блок на сторінці. Це означає, що мені не довелося будувати окрему систему дозволів поверх усього іншого.
Крок 5: автоматизація – коли ШІ робить роботу за вас
Коли клієнт затверджує кампанію, хтось із команди має підготувати все для запуску. Я не хочу, щоб це залежало від чиєїсь пам’яті. Тому я попросила Claude створити робочий процес (workflow).
Claude побудував коротку логічну послідовність на полотні робочих процесів. Тригер: зміна статусу кампанії на “Затверджено”. Дія: створення нового завдання та призначення його відповідальному за кампанію. Ця автоматизація працює для моєї команди, оскільки завдання з’являється прямо в їхній частині додатка.
Однак, як виявилося, дрібні кампанії не потребують окремого завдання на запуск. Тому я уточнила цей процес через чат. Claude відредагував той самий робочий процес, додавши фільтр: якщо бюджет кампанії менше 10 000, жодного завдання не створювати.
Щоб протестувати, я затвердила велику кампанію з облікового запису клієнта. У таблиці завдань з’явилася задача “Підготувати запуск”, призначена правильному виконавцю. Потім я затвердила маленьку кампанію – і жодного завдання не з’явилося. Все працює!
Крок 6: публікація та запити – світ готовий до роботи
Все, що ми робили до цього, відбувалося в Claude. Тепер час опублікувати додаток. Я отримала готову URL-адресу, яку могла б відправити реальному клієнту вже сьогодні. І найкрутіше – мені не довелося налаштовувати жодного хостингу. Softr все зробив за мене. Якщо ви захочете використовувати власну адресу пізніше, платформа дозволяє підключити кастомний домен.
Перш ніж повністю довіряти, я відкрила цю адресу у приватному вікні браузера і зареєструвалася як новий клієнт. Я хотіла побачити додаток очима клієнта, який заходить вперше. Новий обліковий запис потрапив на портал, де бачив лише свою кампанію.
І ось ще одна чудова можливість MCP-з’єднання: Claude може взаємодіяти з реальним додатком як звичайний користувач. Я підключила його, використовуючи логін цього клієнта, так само, як підключала його до редактора на початку. Claude повернув мені одну кампанію – ту саму картку, яку бачив клієнт на порталі. Потім я попросила його “затвердити цю кампанію”, і кампанія успішно перемістилася в статус “Затверджено”. Клієнтський обліковий запис має таке право, тому Claude також міг це зробити.
А якщо я попрошу його про кампанію іншого клієнта? Відповідь: “Нічого не знайдено”. Це означає, що для зайнятого клієнта вся необхідна інформація доступна прямо в чаті, який він і так використовує. Те саме працює і для агенції. Якщо я підключу Claude до командного облікового запису, я можу запитати: “Які завдання протерміновані цього тижня?”. І він відповість, спираючись на ту дошку, з якою працює команда, а не на якусь застарілу експортну таблицю.
Висновок: майбутнє вже тут, і воно доступне кожному
Все будівництво відбувалося в Claude. Але дані та правила доступу опинилися в додатку, до якого моя команда може підключитися і переглянути. Якщо хтось із відділу операцій побудує свій наступний інструмент таким чином, він отримає щось для перегляду, а не щось для повного перезапису.
Більша частина роботи пішла на промпти, і вони ставали кращими з кожною ітерацією, з кожною новою деталлю, яку я додавала. Це не магія, це просто процес. Процес, який стає значно простішим, коли у вас є розумний помічник і правильні інструменти.
Якщо ви хочете спробувати створити свою версію, пам’ятайте: посилання в описі надає вам 200 AI-кредитів у Softr. Спробуйте!
А тепер, мої друзі, головне питання: що б ви створили першим – внутрішній інструмент для своєї команди чи портал для своїх клієнтів і партнерів? Напишіть у коментарях, мені дуже цікаво!
До зустрічі в наступному відео!
