Як фронтенд-розробник, який працює з Next.js і використовує різні бібліотеки UI, часто витрачаю багато часу на виконання базових завдань самостійно. Але якщо у мене є доступ до ChatGPT, чому б не скористатися ним?
Тому в цьому пості я розповім про 5 способів, як я використовую ChatGPT для виконання деяких фронтенд-завдань.
1. Форматування JSON
Як фронтенд-розробник, мені часто доводиться працювати з великими обсягами даних, які надходять з кількох API, і зазвичай ці дані повертаються у форматі JSON.
Під час роботи з API в React Native, якщо ви не використовуєте віддалений налагоджувач JS, усі дані, що надходять з операторів console.log, відображатимуться в консолі VS Code.
І це буде неформатоване, неохайне і дуже важке для читання.
Тому я копіюю ці дані з консолі, відкриваю ChatGPT і вводжу наступний запит:
“Форматуй цей JSON”
І вставляю скопійовані дані під цим запитом.
Потім ChatGPT генерує добре відформатований JSON.
Круто, правда?
Це робить його дуже зручним для читання, і я можу чітко розрізняти різні властивості та використовувати їх у фронтенд-коді.
2. Створення каркасів інтерфейсу
Відображення каркасів замість простого спінера завантаження — це чудовий спосіб покращити UI/UX, оскільки це створює ілюзію швидкого завантаження сайту.
Більше того, це чітко показує користувачеві, де саме будуть відображатися дані.
Я намагаюся використовувати каркасні елементи (skeletons) де тільки можливо, і для їх створення я використовую ChatGPT.
Наприклад, якщо я використовую бібліотеку Material UI разом з Next.js, я роблю наступне:
- Клацаю на знімок екрану компонента в інтерфейсі, для якого я хочу створити каркас
- Відкриваю ChatGPT і пишу наступний запит:
“Generate an MUI skeleton for this component in Next.js”
- І вставляю знімок екрану та запит в поле вводу.
ChatGPT генерує код для каркасного елемента.
Для цього він згенерував наступний код:
import React from 'react';
import Skeleton from '@mui/material/Skeleton';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import Link from '@mui/material/Link';
const PostSkeleton = () =\> {
return (
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
);
};
export default PostSkeleton;
Зазвичай він не є піксель-ідеальним, тому я вношу невеликі корективи в код, здебільшого змінюючи ширину і висоту, а також макет рядків чи стовпців.
Але ChatGPT робить приблизно 80% роботи, тож вважаю, що це добре.
Ось фінальний результат на інтерфейсі Libertas (онлайн-платформи для обговорень, проект, який я створив)
3.
Генерація випадкових даних (масиви, об'єкти)
Кожного разу, коли мені потрібно протестувати якийсь інтерфейс або основний JavaScript, я користуюсь випадковими даними у вигляді фіктивного масиву або об'єкта.
І я використовую ChatGPT, щоб отримати ці дані.
Наприклад:
Припустимо, мені потрібно створити масив з назв книг. Я просто набираю наступний запит і даю ChatGPT зробити свою магію.
“Дайте мені масив рядків, що містить випадкові назви книг (JSON)”
Ось, ChatGPT згенерував масив з деякими назвами книг.
[
"The Whispering Shadows",
"Echoes of Eternity",
"The Enchanted Forest",
"Lost in the City",
"The Silent Witness",
"Mysteries of the Deep",
"Journey to the Unknown",
"The Forgotten Realm",
"Beyond the Horizon",
"The Hidden Truth",
"Tales of the Ancient World",
"A Stolen Dream",
"The Last Guardian",
"Secrets of the Past",
"The Phantom's Curse",
"The Crystal Cavern",
"The Time Traveler's Quest",
"Legends of the Night",
"The Eternal Flame",
"Winds of Change"
]
Це фантастичний спосіб зосередитися на реальній роботі, замість того, щоб писати свої власні фіктивні дані.
4.
Регулярні вирази
Вірте чи ні, але це може бути одним з найбільших варіантів використання ChatGPT. Концепція регулярних виразів здається чимось з іншої планети, адже є багато різних аспектів, які потрібно пам'ятати.
Коли ви працюєте з рядками в своєму коді, настане момент, коли вам обов'язково доведеться зіткнутися з регулярними виразами.
Наприклад, розглянемо таку ситуацію.
Ось URL: https://google.com/media_element/54788?type=video&embedded=true%22
Мені потрібно витягнути 5-значне число: 54788
Замість того, щоб використовувати свій мозок, я питаю ChatGPT.
“Як витягнути це 5-значне число з цього URL (54788)? (JavaScript)”
Тепер я можу йти далі і обгорнути це у функцію. Або ... просто попросити ChatGPT зробити це 🙂
5.
Знаходження рішень для коду
Ах ... стара добра справа "попросити ШІ про рішення".
Так, це часто дуже корисно.
У моєму випадку я хотів створити функцію "Копіювати посилання", яка копіюватиме поточну URL-адресу, що знаходиться в рядку пошуку браузера. Для цього я використав ChatGPT.
Запит: “У мене є URL, як мені скопіювати цей URL в Next.js як функцію під назвою "Копіювати посилання"?”
ChatGPT відповів мені, що потрібно створити проект Next.js і використати Clipboard API для копіювання посилання.
Питання до ШІ для будь-якого рішення — це досить базовий випадок використання, але він справді корисний.
Висновок
Хіба ChatGPT не корисний? Боюсь, що він дійсно корисний.
Сподіваюся, ви дізналися щось нове з цього посту і тепер знаєте, як використовувати цей інструмент ШІ для виконання ваших завдань у фронтенді.
Дайте знати, для яких завдань ви використовуєте ChatGPT.
Перекладено з: How I Use ChatGPT as a Frontend Developer (5 Ways)