我如何使用 ChatGPT 作为前端开发人员（5 种方式）ChatGPT 教程——让 AI 完成重复性任务作为一个前端

ChatGPT 教程——让 AI 完成重复性任务

作为一个前端开发人员，我们自己做Next.js和使用各种UI库，做基本的事情是非常耗时的。但是，如果我可以使用ChatGPT，为什么我不应该使用它。

因此，这篇文章讨论了我如何使用 ChatGPT 完成一些前端任务的 5 种方法。

1. 格式化 JSON

作为前端开发人员，我必须处理来自多个 API 的大量数据，它们通常以 JSON 格式返回数据。

在 React Native 上处理 API 时，如果不使用 JS 远程调试器，所有来自 console.log 语句的数据都会显示在 VS Code 的控制台上。它将是未格式化的、丑陋的且非常难以阅读的。

因此，我从控制台复制该数据，打开 ChatGPT 并输入以下提示：

“格式化此 JSON”

我将复制的数据粘贴到此提示下方。

然后 ChatGPT 生成一个格式良好的 JSON。

转存失败，建议直接上传图片文件

很酷，对吧？

这使得它具有很高的可读性，我能够清楚地区分多个属性并在前端代码中使用它。

聊天链接

2. 创建 UI 骨架

显示骨架而不是简单的加载微调器是增强 UI/UX 的好方法，因为它会创建快速加载网站的错觉。此外，它还准确地告诉用户数据将显示在哪里。

我尝试尽可能使用骨架，为了创建它们，我使用 ChatGPT。

例如，如果我将 Material UI 库与 Next.js 一起使用，我将执行以下操作：

在UI上单击要创建其框架的组件的屏幕截图

Open ChatGPT and write the below prompt:

“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 (    <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 用户界面的最终结果（一个在线讨论平台，我构建的项目）

3. Generate Random Data (Array, Objects)

Whenever I need to test some UI or basic JavaScript, I take help of some random data in the form of dummy array or object. And I use ChatGPT to give me that data.

For example:

Suppose I need an array of some book names, I just type the below prompt and let ChatGPT do the magic.

“Give me an array of strings consisting of random book names (JSON)”

Here, ChatGPT has generated an array of some book names.

[    "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"]

Chat link

This is a fantastic way of putting the focus on the actual work instead of writing your own dummy data.

4. Regular Expressions

Believe it or not, this might be one of the biggest use cases of ChatGPT. The concept of regular expressions seem to be from some another planet as there are multiple things to remember in this.

When you play with strings on your code, there will be a time when you are bound to encounter regular expressions.