Với vai trò là một nhà phát triển frontend làm việc với Next.js và sử dụng nhiều thư viện giao diện người dùng khác nhau, việc thực hiện các công việc cơ bản một mình rất tốn thời gian. Nhưng nếu tôi có ChatGPT bên cạnh, tại sao tôi lại không sử dụng nó?
Do đó, bài viết này sẽ thảo luận về 5 cách mà tôi sử dụng ChatGPT để thực hiện một số tác vụ frontend.
1. Format JSON
Với tư cách là Frontend Developer, tôi phải xử lý rất nhiều dữ liệu đến từ nhiều API và chúng thường trả về dữ liệu ở định dạng JSON.
Khi xử lý API trên React Native, nếu bạn không sử dụng trình gỡ lỗi từ xa của JS, tất cả dữ liệu đến từ câu lệnh console.log sẽ được hiển thị trên bảng điều khiển của VS Code. Và nó sẽ không được định dạng, rất xấu và rất khó đọc.
Do đó, tôi sao chép dữ liệu đó từ bảng điều khiển, mở ChatGPT và nhập lệnh sau:
“Format this JSON”
Và tôi dán dữ liệu đã sao chép vào bên dưới lệnh đó.
Sau đó, ChatGPT sẽ tạo ra một JSON được định dạng đẹp.
Thật tuyệt phải không?
Điều này làm cho dữ liệu trở nên rất dễ đọc, và tôi có thể phân biệt rõ ràng giữa các thuộc tính khác nhau và sử dụng nó trong code frontend.
2. Create UI Skeletons
Hiển thị các skeletons thay vì chỉ sử dụng một biểu tượng tải đơn giản là một cách tuyệt vời để nâng cao UI/UX, vì nó tạo ra ảo giác về một trang web tải nhanh. Hơn nữa, nó cho người dùng biết chính xác nơi dữ liệu sẽ được hiển thị.
Tôi cố gắng sử dụng skeletons ở bất kỳ đâu có thể, và để tạo ra chúng, tôi sử dụng ChatGPT.
Ví dụ, nếu tôi đang sử dụng thư viện Material UI với Next.js, tôi thực hiện các bước sau:
- Nhấp vào ảnh chụp màn hình của một thành phần trên giao diện người dùng mà tôi muốn tạo skeleton cho nó.
- Mở ChatGPT và viết lệnh sau:
“Generate an MUI skeleton for this component in Next.js”
- Sau đó, tôi dán ảnh chụp màn hình và lệnh vào ô nhập. ChatGPT sẽ tạo mã cho skeleton.
Để làm việc này, nó đã tạo ra code sau:
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;
Thường thì nó không hoàn toàn chính xác đến từng pixel, vì vậy tôi phải điều chỉnh một chút mã, chủ yếu là về chiều rộng, chiều cao và cách bố trí hàng hoặc cột.
Tuy nhiên, ChatGPT đã hoàn thành khoảng 80% công việc, nên tôi nghĩ như vậy là tốt.
Dưới đây là kết quả cuối cùng trên giao diện của Libertas (một nền tảng thảo luận trực tuyến, dự án mà tôi đã xây dựng).
3. Generate Random Data (Array, Objects)
Mỗi khi tôi cần kiểm tra một số giao diện người dùng hoặc JavaScript cơ bản, tôi thường sử dụng dữ liệu ngẫu nhiên dưới dạng mảng hoặc đối tượng giả. Và tôi sử dụng ChatGPT để cung cấp cho tôi những dữ liệu đó.
Ví dụ: Giả sử tôi cần một mảng gồm tên các cuốn sách, tôi chỉ cần nhập lệnh dưới đây và để ChatGPT thực hiện phép màu.
“Give me an array of strings consisting of random book names (JSON)”
Ở đây, ChatGPT đã tạo ra một mảng gồm các tên sách.
[
"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"
Đây là một cách tuyệt vời để tập trung vào công việc thực tế thay vì phải viết dữ liệu giả của riêng bạn.
4. Regular Expressions
Dù bạn có tin hay không thì đây có thể là một trong những trường hợp sử dụng ChatGPT lớn nhất. Khái niệm về biểu thức chính quy dường như đến từ một hành tinh khác vì có nhiều điều cần nhớ về điều này.
Khi bạn chơi với các chuỗi trong mã của mình, sẽ có lúc bạn gặp phải các biểu thức chính quy.
Ví dụ, hãy xem xét tình huống này.
Đây là một URL: https://google.com/media_element/54788?type=video&embedded=true"
Tôi muốn trích xuất số 5 chữ số: 54788
Ở đây, thay vì tự mình suy nghĩ, tôi hỏi ChatGPT.
“Làm thế nào để trích xuất số 5 chữ số từ URL này (54788)? (JavaScript)”
Bây giờ, tôi có thể tiếp tục và đóng gói điều này vào một hàm. Hoặc… chỉ cần yêu cầu ChatGPT làm điều đó :)
5. Find Code Solutions
À, việc “hỏi AI để tìm giải pháp” vẫn luôn hữu ích.
Trong tình huống của tôi, tôi muốn tạo một tính năng “Sao chép liên kết” để sao chép URL hiện tại trên thanh tìm kiếm của trình duyệt. Tôi đã sử dụng ChatGPT để thực hiện điều này.
Lệnh: “Tôi có một URL, làm thế nào để sao chép URL đó trong Next.js với tính năng gọi là ‘Sao chép liên kết’?”
ChatGPT đã cung cấp cho tôi một phản hồi bao gồm việc tạo dự án Next.js và sử dụng API Clipboard để sao chép liên kết.
Việc hỏi AI về bất kỳ giải pháp nào là một trường hợp sử dụng cơ bản, nhưng nó thực sự rất hữu ích.
Kết luận
ChatGPT có hữu ích không? Tôi cá là có.
Hy vọng bạn đã học được điều gì đó mới từ bài viết này và cách bạn có thể sử dụng công cụ AI này để thực hiện các nhiệm vụ frontend của mình.
Hãy cho tôi biết bạn sử dụng ChatGPT cho những nhiệm vụ nào nhé.
bài viết gốc tại đây.
Bình luận