Протягом останніх двох років ми з моєю командою в Work & Co випробовували та поступово інтегрували такі інструменти кодування штучного інтелекту, як Copilot, Cursor, Claude і ChatGPT, щоб допомогти нам створювати веб-досвід, яким користуються маси. Слід визнати, що після деякого початкового скепсису та кількох моментів «ага» різні інструменти ШІ знайшли свій шлях до мого щоденного використання. Згодом список додатків, у яких було доцільно дозволити штучному інтелекту взяти на себе контроль, почав зростати, тому я вирішив поділитися деякими прикладами практичного використання інструментів ШІ для того, кого я називаю «відповідальним розробником». Що я маю на увазі під відповідальним розробником? Ми маємо переконатися, що надаємо якісний код, якого очікують наші зацікавлені сторони та клієнти. Наші внески (тобто запити на отримання) не повинні стати тягарем для наших колег, яким доведеться переглядати та тестувати нашу роботу. Крім того, якщо ви працюєте в компанії: інструменти, які ми використовуємо, повинні бути схвалені нашим роботодавцем. Делікатні аспекти, такі як безпека та конфіденційність, повинні розглядатися належним чином: не вставляйте секрети, дані клієнтів (PII) або приватний код в інструменти без схвалення політики. Ставтеся до цього як до коду незнайомця в Інтернеті. Завжди тестуйте та перевіряйте. Примітка: ця стаття передбачає деяке дуже базове знайомство з інструментами кодування AI, такими як Copilot у VSCode або Cursor. Якщо все це звучить для вас абсолютно новим і незнайомим, відеоуроки Github Copilot можуть стати для вас фантастичною відправною точкою.
Корисні застосування інструментів кодування ШІ Примітка: наступні приклади в основному зосереджені на роботі у веб-додатках на основі JavaScript, таких як React, Vue, Svelte або Angular. Отримання розуміння незнайомої кодової бази Це не рідкість працювати на усталених кодових базах, і приєднання до великої застарілої кодової бази може лякати. Просто відкрийте свій проект і агента штучного інтелекту (у моєму випадку Copilot Chat у VSCode) і почніть задавати запитання так само, як ви запитували б колегу. Загалом, я люблю спілкуватися з будь-яким агентом штучного інтелекту так само, як із людиною. Ось більш витончений приклад підказки: "Дайте мені огляд архітектури високого рівня: точки входу, маршрутизація, автентифікація, рівень даних, інструменти збірки. Потім перелічіть 5 файлів для читання по порядку. Розглядайте пояснення як гіпотези та підтверджуйте, перейшовши до файлів, на які посилаються."
Ви можете продовжувати задавати наступні запитання, як-от «Як детально працює маршрутизація?» або «Розкажіть мені про процес і методи автентифікації», і це приведе вас до корисних вказівок, щоб пролити світло на незнайому кодову базу. Сортування критичних змін під час оновлення залежностей Оновлення пакетів npm, особливо коли вони постачаються з критичними змінами, може бути виснажливою та трудомісткою роботою, яка змушує вас налагоджувати чимало регресій. Нещодавно мені довелося оновити бібліотеку візуалізації даних plotly.js до однієї основної версії з версії 2 на 3, і в результаті цього позначки осей на деяких графіках перестали працювати. Далі я запитав ChatGPT: "Я оновив свій проект Angular, який використовує Plotly. Я оновив пакет plotly.js — dist з версії 2.35.2 до 3.1.0 — і тепер мітки на осі x і y зникли. Що сталося?"
Агент негайно повернувся з рішенням (перегляньте самі нижче). Примітка. Перш ніж надіслати виправлення, я перевірив пояснення на відповідність офіційному посібнику з міграції.
Безпечне копіювання рефакторів між файлами Зростання кодових баз, безперечно, відкриває можливості для консолідації коду. Наприклад, ви помітили дублювання коду в файлах, які можна розпакувати в одну функцію чи компонент. У результаті ви вирішуєте створити спільний компонент, який можна включити натомість, і виконати цей рефакторинг в одному файлі. Тепер замість того, щоб вручну вносити ці зміни до файлів, що залишилися, ви просите свого агента розгорнути рефакторинг для вас. Агенти дозволяють вибрати кілька файлів як контекст. Після завершення рефакторингу для одного файлу я можу додати як рефакторинг, так і незмінний файл у контекст і запропонувати агенту розгорнути зміни в інших файлах ось так: «Також скопіюйте зміни, які я зробив у файлі A, у файл B». Реалізація функцій у незнайомих технологіях Одним із моїх улюблених ага-моментів, коли я використовував інструменти кодування штучного інтелекту, був той момент, коли він допоміг мені створити досить складну анімовану градієнтну анімацію на GLSL, мові, з якою я був доволі незнайомий. У недавньому проекті наші дизайнери придумали анімований градієнт як стан завантаження 3D-об’єкта. Мені дуже сподобалася концепція, і я хотів надати нашим клієнтам щось унікальне та захоплююче. Theпроблема: у мене було лише два дні, щоб реалізувати це, і GLSL має досить круту криву навчання. Знову ж таки, інструмент штучного інтелекту (у цьому випадку ChatGPT) став у нагоді, і я почав просто пропонувати йому створити для мене окремий HTML-файл, який відображає полотно та дуже простий анімований градієнт кольору. Крок за кроком я спонукав штучний інтелект додавати ще більше тонкощів, доки я не досяг пристойного результату, щоб я міг почати інтегрувати шейдер у свою фактичну кодову базу. Кінцевий результат: наші клієнти були дуже задоволені, і ми забезпечили складну функцію за короткий час завдяки ШІ. Написання контрольних робіт З мого досвіду, у проектах рідко вистачає часу, щоб постійно писати та підтримувати належний набір модульних та інтеграційних тестів, і, крім того, багатьом розробникам не дуже подобається писати тести. Запропонувати вашому помічнику штучного інтелекту налаштувати та написати тести для вас цілком можливо, і це можна зробити за невеликий проміжок часу. Звичайно, ви, як розробник, все одно повинні переконатися, що ваші тести фактично розглядають критичні частини вашої програми та дотримуються розумних принципів тестування, але ви можете «перенести» написання тестів на нашого помічника ШІ. Приклад підказки: "Напишіть модульні тести для цієї функції за допомогою Jest. Охопіть щасливий шлях, крайові випадки та режими невдач. Поясніть, чому існує кожен тест."
Ви навіть можете передати найкращі методи тестування гуру тестування Кента К. Доддса як рекомендації своєму агенту, як показано нижче:
Внутрішнє оснащення Дещо подібно до прикладу шейдера, згаданого раніше, я нещодавно отримав завдання проаналізувати дублювання коду в кодовій базі та порівняти до і після рефакторизму. Звичайно, це не тривіальне завдання, якщо ви не хочете порівнювати файли вручну, що забирає багато часу. За допомогою Copilot я створив сценарій, який аналізував дублювання коду для мене, упорядковував і впорядковував вивід у таблиці та експортував його в Excel. Тоді я зробив крок далі. Коли рефакторинг коду було завершено, я запропонував агенту взяти мій наявний аркуш Excel як базовий, додати поточний стан дублювання в окремих стовпцях і обчислити дельту. Оновлення коду, написаного давно Нещодавно мій старий клієнт звернувся до мене, оскільки з часом кілька функцій на його веб-сайті більше не працювали належним чином. Заковика: веб-сайт було створено майже десять років тому, і JavaScript і SCSS використовували досить старі інструменти компіляції, як-от requireJS, а для налаштування потрібна була старіша версія Node.js, яка навіть не запускалася на моєму MacBook 2025 року. Оновлення всього процесу збирання вручну зайняло б у мене кілька днів, тому я вирішив запитати агента штучного інтелекту: «Чи можете ви оновити процес збирання JS і SCSS до економного стеку 2025, як Vite?» Це точно так, і приблизно через годину доопрацювання з агентом я перемкнув збірку SCSS і JS на Vite, і я зміг зосередитися на фактичному виправленні помилок. Просто переконайтеся, що належним чином перевіряєте вихідні дані та скомпільовані файли, коли вносите такі невід’ємні зміни у ваш процес збірки. Підбиття підсумків і складання Чи хочете ви підсумувати всі останні зміни коду в одному реченні для повідомлення коміту, чи маєте довгий список комітів і бажаєте підсумувати їх у трьох пунктах? Не проблема, нехай ШІ подбає про це, але обов’язково перевірте його. Приклад підказки такий же простий, як повідомлення людині: «Будь ласка, підсумуйте мої останні зміни в коротких пунктах». Моя порада тут полягає в тому, щоб використовувати GPT для написання з обережністю, і, як і у випадку з кодом, будь ласка, перевірте вихід перед надсиланням або надсиланням. Рекомендації та найкращі практики Підказування Одна з не дуже очевидних переваг використання штучного інтелекту полягає в тому, що чим точнішими та адаптованими є ваші підказки, тим кращий результат. Процес підказки агенту штучного інтелекту змушує нас сформулювати наші вимоги якомога точніше, перш ніж писати та кодувати. Ось чому, як правило, я настійно рекомендую бути якомога конкретнішим у своїх підказках. Райан Флоренс, співавтор Remix, пропонує простий, але потужний спосіб покращити цей процес, завершивши початкову підказку реченням: «Перед тим, як ми почнемо, у вас є до мене запитання?»
На цьому етапі штучний інтелект зазвичай повертається з корисними запитаннями, де ви можете прояснити ваші конкретні наміри, керуючи агентом, щоб надати вам більш індивідуальний підхід до вашого завдання.
Використовуйте контроль версій і працюйте в засвоюваних фрагментах Використання контролю версій, як-от git, стане в нагоді не лише під час командної співпраці над єдиною кодовою базою, але й для надання вам якокремий учасник зі стабільними точками, до яких можна повернутися в разі надзвичайної ситуації. Через свою недетерміновану природу штучний інтелект іноді може стати шахраєм і внести зміни, які просто не принесуть користі для того, чого ви намагаєтеся досягти, і зрештою непоправно порушити роботу. Розподіл вашої роботи на кілька комітів допоможе вам створити стабільні точки, до яких можна повернутися, якщо щось піде не так. І ваші товариші по команді також будуть вам вдячні, оскільки їм буде легше переглядати ваш код, якщо він розділений на семантично добре структуровані блоки. Перегляньте ретельно Це скоріше загальна найкраща практика, але, на мою думку, вона стає ще важливішою при використанні інструментів штучного інтелекту для розробки: будьте першим критичним рецензентом свого коду. Обов’язково виділіть деякий час, щоб переглянути свої зміни рядок за рядком, так само, як ви переглядаєте чужий код, і надсилайте свою роботу лише після того, як вона пройде вашу власну перевірку. "Дві речі для мене зараз справедливі: агенти штучного інтелекту неймовірні та значно підвищують продуктивність. Вони також є величезними машинами для поміїв, якщо ви вимкнете свій мозок і повністю відпустите його", — Армін Роначер у своєму блозі "Психоз агента: чи ми божеволіємо?"
Висновок І Критичні Роздуми На мою думку, інструменти кодування штучного інтелекту можуть щоденно покращувати нашу продуктивність як розробників і вивільняти розумові здібності для більшого планування та мислення на високому рівні. Вони змушують нас сформулювати бажаний результат із прискіпливими деталями. Будь-який штучний інтелект іноді може галюцинувати, що в основному означає, що він говорить впевненим тоном. Тому обов’язково перевіряйте та тестуйте, особливо якщо у вас є сумніви. ШІ — це не срібна куля, і я вірю, що досконалість і здатність розробника вирішувати проблеми ніколи не вийде з моди. Для розробників, які тільки починають свою кар’єру, ці інструменти можуть викликати велику спокусу зробити за них більшу частину роботи. Що тут може бути втрачено, так це часто виснажлива та болісна робота над помилками та проблемами, які складно налагодити та вирішити, або ж «подрібнення». Навіть Лі Робінсон із Cursor AI ставить під сумнів це в одній зі своїх публікацій:
Інструменти кодування штучного інтелекту розвиваються швидкими темпами, і я в захваті від того, що буде далі. Сподіваюся, ця стаття та поради в ній були для вас корисними, і ви з радістю спробуєте деякі з них на собі.
