markdown
Ви можете прочитати цей пост поза середовищем Medium також.
Як Розробник Frontend, що працює з Next.js та використовує різні бібліотеки інтерфейсу користувача, дуже часови затратно робити базові речі самостійно. Та якщо у мене є ChatGPT на володінні, чому б мені не скористатися ним.
Отже, в цьому пості будуть обговорені 5 способів, як я використовую ChatGPT для виконання деяких завдань фронтенду.
1. Форматування JSON
Як Розробник Frontend, мені потрібно мати справу з великою кількістю даних, що приходять з різних API, і вони, як правило, повертають дані у форматі JSON.
При роботі з API в React Native, якщо ви не використовуєте віддалений зневаджувач JS, всі дані, що приходять з console.log, відображатимуться в консолі VS Code. І вони будуть не відформатовані, неприємні й дуже важко читати.
Тому, я копіюю ці дані з консолі, відкриваю ChatGPT і набираю це підказку:
“Форматуй цей JSON”
І вставляю скопійовані дані нижче цієї підказки.
Потім ChatGPT генерує добре відформатований JSON.
Це дуже зручно і я можу чітко відрізняти між кількома властивостями та використовувати його в коді фронтенду.
2. Створення скелетів користувацького інтерфейсу
Відображення скелетів замість звичайного крутильного кружечка завантаження є великим способом поліпшення інтерфейсу користувача та створює ілюзію швидкого завантаження веб-сайту. Більше того, воно повідомляє користувачеві, де саме будуть відображені дані.
Я стараюся використовувати скелети в будь-якому можливому випадку і для їх створення я використовую ChatGPT.
Наприклад, якщо я використовую бібліотеку Material UI з Next.js, я виконую наступне:
- Клікаю знімок елемента користувача на Інтерфейсі, для якого я хочу створити скелет
- Відкриваю ChatGPT та пишу вказану нижче підказку:
“Згенеруйте скелет MUI для цього елемента в Next."
Генерація коду скелету за допомогою ChatGPT (React)
- Я вставляю знімок екрану та запит на ввід. 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 (
<Box sx={{ p: 2, border: '1px solid #333', borderRadius: 2, backgroundColor: '#000', color: '#fff' }}>
<Stack direction="row" alignItems="center" spacing={2}>
<Avatar sx={{ bgcolor: '#555' }}>
<Skeleton variant="circular" width={40} height={40} />
</Avatar>
<Stack>
<Skeleton width={100} height={20} />
<Skeleton width={80} height={15} />
</Stack>
</Stack>
<Box mt={2}>
<Skeleton width="60%" height={25} />
<Skeleton width="90%" height={20} />
<Skeleton width="40%" height={20} />
</Box>
<Stack direction="row" alignItems="center" spacing={1} mt={2}>
<ThumbUpIcon sx={{ color: '#888' }} />
<Skeleton width={20} height={20} />
<ThumbDownIcon sx={{ color: '#888' }} />
<Skeleton width={20} height={20} />
</Stack>
<Link href="#" sx={{ mt: 2, display: 'block', color: '#888' }}>
<Skeleton width="30%" height={20} />
</Link>
</Box>
);
};
export default PostSkeleton;
Зазвичай це не є ідеальним за розмірами, тому я роблю кілька виправлень в коді, переважно з розмірами та макетом рядка чи колонки.
Але ChatGPT робить близько 80% роботи, тому я вважаю це добре.
Ось кінцевий результат на інтерфейсі Libertas (онлайн платформа обговорень, проект, який я розробив)
Кожного разу, коли мені потрібно протестувати деякий інтерфейс користувача або простий JavaScript, я використовую допомогу випадкових даних у вигляді масиву або об'єкта. І я використовую ChatGPT, щоб отримати ці дані.
Наприклад:
Припустимо, що мені потрібен масив з назвами деяких книг, я просто ввожу такий запит та дозволяю ChatGPT зробити магію.
"Дайте мені масив рядків, які складаються з випадкових назв книг (JSON)"
Ось, ChatGPT згенерував масив деяких назв книг:
[
"Тіні, що Шепочуть",
"Луна Вічності",
"Зачарований Ліс",
"Загублені у Місті",
"Мовчазний Свідок",
"Таємниці Глибин",
"Подорож у Невідоме",
"Забутий Світ",
"Поза Горизонтом",
"Прихована Правда",
"Оповідання Стародавнього Світу",
"Викрадений Сон",
"Останній Страж",
"Секрети Минулого",
"Прокляття Фантома",
"Кришталева Печера",
"Пошук Подорожника в Часі",
"Легенди Ночі",
"Вічне Полум'я",
"Вітри Змін"
]
Це чудовий спосіб сконцентруватися на роботі, не витрачаючи час на створення власних випадкових даних.
Регулярні вирази (Regular Expressions)
Вірте або ні, це може бути одним з найбільших використань ChatGPT. Поняття регулярних виразів здається від іншої планети, бо є багато різних речей, які потрібно запам'ятати.
Коли ви працюєте з рядками у своєму коді, буде час, коли вам буде доводиться мати справу з регулярними виразами.
Наприклад, розглянемо такий сценарій.
Ось URL: https://google.com/media_element/54788?type=video&embedded=true%22
Я хочу витягнути п'ятизначне число: 54788
Тут, замість використання мозку, я питаю ChatGPT.
Як витягнути п'ятизначний номер з цього URL (54788)? (JavaScript)
Тепер я можу піти далі і обгорнути це в функцію. Або ... просто запитайте ChatGPT, щоб він це зробив 🙂
5. Знайдіть рішення коду
О, це добре відома справа, коли запитуєш штучний інтелект про рішення.
Так, це багато в чому корисно.
У моєму випадку, я хотів створити функцію "Копіювати посилання", яка буде копіювати поточний URL, присутній в рядку пошуку браузера. Я скористався ChatGPT для цього.
Запит: "У мене є URL, як я можу скопіювати цей URL в Next.js як функцію під назвою «Copy link»?"
ChatGPT дав мені відповідь, в якій вказано, як створити проект Next.js і скористатися API буфера обміну для копіювання посилання.
Запитання будь-якого роду рішення від штучного інтелекту - це досить простий випадок використання, але дійсно корисний.
Висновок
Чи не корисний ChatGPT? Я впевнений, що так.
Сподіваюся, ви щось нове дізналися з цього посту і як ви можете використовувати цей інструмент штучного інтелекту для виконання ваших завдань фронтенду.
Повідомте мене, для яких завдань ви використовуєте ChatGPT.
Перекладено з: How I Use ChatGPT as a Frontend Developer (5 Ways)