Як ChatGPT допомагає розробнику вирішувати щоденні рутинні завдання

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Привіт! Мене звати Дмитро Вакуленко. Я — Conversational Frontend Engineer в IT-компанії Master of Code Global.

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

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

Ви дізнаєтесь:

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

Як згенерувати якісний технічний промпт у ChatGPT

Щоб отримати максимально корисну відповідь від ChatGPT на питання з програмування, важливо сконструювати правильний технічний промпт. Це важливо, оскільки технічні промпти мають дещо іншу структуру та вимагають іншого підходу, порівняно з промптами для загальних запитань.

Основні правила для створення технічного промпту в ChatGPT:

1. Використовуйте конкретні слова і терміни, які використовуються у програмуванні, такі як «функція», «об’єкт», «масив» тощо.
2. Використовуйте запитання з чітко визначеними відповідями, наприклад: «Як зробити X в Y мові програмування?».
3. Специфікуйте, яка версія фреймворку, мови програмування, платформи або іншої технології вас цікавить.
4. Ставте запитання конкретно, з точністю до деталей. Це допоможе зменшити можливість отримання некоректної відповіді або відповіді на «не те» запитання.

Крім цього, технічні промпти можуть бути довшими та складними, тому важливо формулювати їх якомога чіткіше та лаконічніше.

Зазвичай, структура виглядає ось так:

You are a senior ${programming_language} developer with 10 years of experience.

You know all the details about the ${programming_framework} framework.

Help me to ${do_something}.

Тепер, коли ми зрозуміли, як правильно сконструювати технічний промпт, розглянемо приклади використання ChatGPT з промптами для вирішення питань з програмування. Ми можемо скористатись ChatGPT для створення якісних технічних промптів, які допоможуть нам отримати точні та повні відповіді від моделі.

Наприклад, поставити питання на кшталт «як правильно сформулювати промпт для отримання детальної відповіді на запитання про оптимізацію бази даних?» і отримати відповідь з рекомендаціями щодо правильної формулювання промпта.

Подивимось на кейс нижче з використанням GPT-4 моделі:

I want you to act as ChatGPT prompt developer with 10 years of experience.

You know all the details about ChatGPT and know how to build a professional prompt which GPT will understand.

You carefully read instructions from the user and try to build the prompt.

Також в якості альтернативи можна використовувати сервіс/ плагін «Perfect Prompt». Це тул, призначений для допомоги користувачам у формуванні оптимальних запитів для AI-чатботів. Перевага Prompt Perfect полягає в тому, що він може переписати весь запит, надаючи ChatGPT детальні та специфічні інструкції, що дозволяє AI-чатботу генерувати обізнаніші і точніші відповіді.

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

Як використовувати ChatGPT в якості ментора для пояснення чи вивчення чогось нового

Навчання програмуванню та постійне вдосконалення навичок є необхідною складовою для будь-якого програміста. Проте процес самостійного вивчення може бути складним, особливо коли з’являються нові концепції, технології або поняття, з якими програміст ще не стикався. Саме тут ChatGPT, зі своїми широкими знаннями та можливостями, може стати надійним ментором для програміста.

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

Наступною перевагою ChatGPT є його доступність і готовність надати допомогу в будь-який час. Програмування не обмежується робочими годинами, і часто виникають запитання або проблеми, коли немає можливості звернутися до живого наставника або колеги.

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

Розгляньмо приклад використання ChatGPT для навчання програміста роутингу в фреймворку React. У програміста, який тільки починає працювати з React, може виникнути питання, як налаштувати роутінг у своєму застосунку. Замість довгих пошуків та експериментів, він може звернутися до ChatGPT з таким запитанням: «Які кроки потрібно виконати для налаштування роутингу в React?»

Спочатку задаймо ChatGPT його роль:

I want you to act as a Senior Frontend Developer with 10 years of experience.

You know everything about HTML, CSS, JS, and TypeScript.

You know everything about React and Angular, about any secret details and best practices.

You will help me as mentor and will solve problems for me.

If you understand me, simply answer «yes».

А після цього ми можемо попросити його пояснити нам, як працює роутинг:

Tell me the best way of doing routing in my React application.

I will have three pages:

— Login

— Dashboard

— Settings

Dashboard and Settings pages should have a shared layout with Header, Main, and Footer.

Бачимо, що ChatGPT пояснив нам, як краще зробити роутинг для трьох сторінок, включаючи те, що ми маємо спільну розмітку для двох із них.

Як створювати документацію для коду за допомогою ChatGPT

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

Також великим плюсом буде додавання прикладів використання, що може бути корисно для наступних розробників. Розглянемо приклад з документуванням складних TypeScript типів:

You are a Senior TypeScript developer.

You know all the best practices for JSDOC.

Write jsdoc for this code.

Append @param tags in each jsdoc block.

Append the @example tag in each jsdoc block.

```

type HasArrayOrObject<T> = T extends any[] | object ? true : never;

export type ObjectValues<T extends object> = T[keyof T];

export type ObjectRequiredField<T extends object, R, S = never> = HasArray<ObjectValues<T>> extends never ? S : R;

```

Як ми бачимо, ChatGPT зміг проаналізувати і ефективно описати кожен елемент.

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

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

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

Окрім цього, ChatGPT може допомогти з коментуванням коду. Він може вказати, де потрібно додати коментарі для кращого розуміння або, навпаки, видалити непотрібні або зайві коментарі, щоб уникнути зайвого шуму в коді. Ці рекомендації можуть допомогти розробникам зосередитись на важливих аспектах коду і зробити його більш організованим і легким для сприйняття.

Як генерувати тестові дані

ChatGPT може бути надзвичайно корисним при генерації тестових даних. Розробники часто витрачають чимало часу на створення тестових датасетів, які відповідають вимогам до даних їхніх програм. Саме тут AI може стати в нагоді.

Якщо у вас є TypeScript інтерфейс, ChatGPT може створити відповідні тестові дані.
Давайте уявимо, що у нас є User інтерфейс на 15 полів, який ще має вкладені поля.
Якщо нам потрібно створити 10 юзерів для тестування, нам доведеться витратити доволі багато часу на створення унікальних обʼєктів, або ж ми можемо просто продублювати один, що не завжди підходить.

І в цій задачі ChatGPT може дуже допомогти створити унікальні, цікаві і різноманітні дані за лічені секунди. Давайте розглянемо приклад такого запиту:

You are a TypeScript developer.

I want you to help me to generate test mock data in this chat.

I will send you TS interfaces and object amounts needed to generate and you will create objects for me.

If you understand, simply answer «yes».

Тепер, коли ми ввели цей промпт, ми можемо надіслати інтерфейс, який ми хочемо візуалізувати:

Як готувати освітні матеріали за допомогою ChatGPT

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

Наприклад, нещодавно я проводив воркшоп в IT-компанії Master of Code Global на тему «Complete TypeScript Workshop». Я зробив поверхневий план програми навчання та розумів, які теми хотів розкрити протягом воркшопу, але ChatGPT допоміг мені створити програму воркшопу та подробиці кожного її елементу. Я побудував всю структуру воркшопу, користуючись MD-файлами, які ChatGPT здатен чудово генерувати.

Давайте розглянемо приклад:

You’re tasked with designing a workshop program to teach others how to effectively use TypeScript, covering both basic and complex ideas. Your program should include the difference between interface and types, generics, why to use the never type, why to use the unknown type, what is conditional type, and what is infer in TypeScript.

Here is a rough outline of the workshop program:

```
Introduction to TypeScript
Types
Interfaces
Functions
Generics
```

У цьому прикладі ви могли помітити, що я виділив програму особливо. Використання спеціального синтаксису з ``` має свою вагому роль у взаємодії з ChatGPT. Цей синтаксис дозволяє нам виділити особливі блоки тексту, які відображають дані, що ми надаємо ChatGPT. Це допомагає у точному розрізненні інформації та отримати очікуваний результат.

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

І ось яку відповідь ми отримали:

Після створення програми, ми можемо попросити ChatGPT згенерувати нам README файл, де ми опишемо про що наш воркшоп.

Тепер, коли є README, можна починати працювати над основним текстом. Давайте перейдемо відразу до топіку з strict опцією в TypeScript.

Написання такого матеріалу самостійно зайняло би не одну годину часу, але ChatGPT допоміг підготувати його за лічені хвилини.

Тому, якщо мені знову знадобиться підготовка до нового воркшопу чи мітапу, я із задоволенням використовуватиму ChatGPT для генерації тексту, прикладів і фіналізації матеріалу.

Крім того, ChatGPT може бути корисним не лише для написання освітніх матеріалів, але й для створення тексту, розробки прикладів і фіналізації будь-якого іншого типу матеріалу, пов’язаного з програмуванням. Він відкриває нові можливості для покращення продуктивності та якості роботи розробників.

Висновок

У моїй практиці використання ChatGPT прискорює процес розробки програмного забезпечення, допомагає уникати помилок і покращує якість роботи, оптимізуючи код і вирішуючи щоденну рутину.

Завдяки знанням, технічній експертизі та здатності до генерації тексту, ChatGPT є моїм особистим помічником та ментором у різних аспектах програмування. Через декілька років вже буде важко навіть уявити, як ми працювали колись без ChatGPT.