Прискорте свій робочий процес розробки: використання MCP з VS Code для створення розумної розробки з підтримкою AI

pic

Кілька місяців тому я створив простий бекенд-сервіс на WSO2 Choreo, щоб отримувати та повертати щоденний обмінний курс USD до LKR з вебсайту місцевого банку. Моя мета була проста — зручність. Мені набридло постійно натискати на кілька меню, щоб знайти курс.

Я розгорнув сервіс на Choreo та почав використовувати його сам. Незабаром кілька моїх колег дізналися про це і також почали використовувати. Все йшло добре, поки один із них не написав мені:

"Це класно, але чи можемо ми побачити тенденції за кілька останніх днів? Важко зрозуміти ситуацію, коли є тільки курс на сьогодні, особливо з усіма коливаннями останнім часом."

Це зачепило мене. Якраз у той час курс валюти коливався через нові переговори щодо тарифів, і раптом цей проект став важливим.

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

Технічний стек: Залишаємо все простим

Ось що я використовував:

  • Фронтенд: React + Chart.js (розміщено як веб-додаток на Choreo)
  • Бекенд: Сервіс на Go, який надає API для отримання даних з MongoDB (розміщено як сервіс на Choreo)
  • Служба завдань: Завдання на Go, яке періодично отримує курси з вебсайту банку (запускається як заплановане завдання на Choreo)
  • База даних: MongoDB Atlas (зовнішня, не розміщена в Choreo)

Фронтенд, бекенд і завдання розгорнуті як окремі компоненти в Choreo, які спілкуються між собою безпечно через з'єднання на основі середовищ.

Чому Choreo?

Я міг би використовувати Vercel для фронтенду і, можливо, Fly.io або AWS Lambda для бекенду та cron — але я не хотів:

  • З'єднувати сервіси вручну.
  • Налаштовувати CI/CD для кожної частини.
  • Думати про API шлюзи, секрети, масштабування.

Замість цього, з Choreo:

  • Без турбот про платформу — я навіть не торкався Kubernetes чи Docker.
  • Безпечні з'єднання — мої сервіси спілкуються один з одним без написання жодного рядка коду для автентифікації або конфігурації.
  • Управління секретами — облікові дані бази даних, API ключі — все це керується одним кліком.
  • Dev → Prod — середовища підтримуються з коробки.
  • Моніторинг і логи — без додаткових налаштувань.

Функція, яка справді мене вразила: підключення фронтенду до бекенду було справою кількох кліків через інтерфейс. Готово.

Архітектура

pic

Високорівнева архітектура

21-хвилинне розбиття

🧠 7 хвилин — Ідея

  • З'явилася ідея візуалізувати тенденції обмінного курсу.
  • Рішення зробити повноцінний стек.
  • Набросок компонентів: завдання → БД → API → фронтенд.

👨‍💻 7 хвилин — Кодування (з невеликою допомогою ChatGPT)

  • Написав cron завдання на Go для отримання обмінного курсу.
  • Створив API на Go для обробки збережених даних.
  • Створив мінімальний інтерфейс на React з лінійним графіком.

🚀 7 хвилин — Розгортання на Choreo

  • Завантажив код на GitHub.
  • Створив 3 компоненти в Choreo (вебдодаток, сервіс, завдання).
  • Налаштував секрети та змінні середовища.
  • Визначив розклад cron для завдання.
  • Підключив компоненти через інтерфейс.
  • Натиснув "Розгорнути". Все працює.

Приклад коду: Отримання курсу

req, _ := http.NewRequest("GET", "https://www.sampath.lk/api/exchange-rates", nil)  
req.Header.Set("User-Agent", "My Custom Agent")  
resp, _ := http.DefaultClient.Do(req)  
// Парсинг курсу USD, вставка в MongoDB

Приклад коду: Запит на фронтенді

const res = await axios.get(`${CHOREO_CONNECTION_URL}/latest-rate`);

Повний код

👉 Репозиторій на GitHub: github.com/chameerar/usd-lkr-exchange-rate-dashboard

Заключні думки

Цей проект нагадав мені, як сильно зростає продуктивність, коли платформа не стає на шляху.

Перекладено з: Supercharge Your Dev Workflow: Using MCP with VS Code to Build Smarter, AI-Assisted Development