我用 ChatGPT 写了一个 ChatGPT 指令大全网站

2023年12月12日

ChatGPT 教學專書
不僅教你 ChatGPT 指令,更帶你實作出創新應用!前往了解

去年底横空出世的 ChatGPT 在网路上有越来越多的应用,但网路上有人提到使用 ChatGPT 收到的答覆并没有太大帮助。之所以会这样,是因为指令给的不够精确与到位。在网路上其实已经有一些 ChatGPT 插件,让你可以用快捷键生成 ChatGPT 指令。只是这些插件对于不熟悉 ChatGPT 的人来说,光是安装就有难度。

于是我们决定写一个简易的小网页,让大家能够一键复制精准有效的 ChatGPT 指令,然后修改成符合自己需求的指令,然后将指令贴上 ChatGPT,就可以得到更有帮助的回覆。我们分别做了中文版与英文版的指令大全。

而这个 ChatGPT 指令大全网站,正是在 ChatGPT 的帮助下完成的。透过这篇文章,希望跟其他同为前端工程师的人分享,可以如何透过 ChatGPT 加速完成你的工作;同时也想跟非工程师的人分享,现在有了这些 AI 工具,如果你有自己想做的 side project,不一定需要找工程师,也可能一步步把功能实践出来。

用 ChatGPT 帮忙写程式的注意事项

请 ChatGPT 协助写程式时有一些注意事项,包含

  • 用什么语言写:要让它知道用什么语言、框架来写。可以透过指令 Act as an expert of [某个程式语言] 来做到,例如 Act as an expert of python
  • 注明典范或设计模式:如果你想要它用特定的典范或设计模式写,要记得特别标注。因为要达成某项功能,通常能有很多种不同实践方式。如果你想让 ChatGPT 的写法跟你平时的风格一致的话,你必须给它这个指令。举例来说,透过 Implement [某个功能] using functional programming 可以让它用函式编程来写该功能。
  • 描述要清楚:你的逻辑描述要够清楚。虽然后多人会戏称有 ChatGPT 帮忙后可以用嘴巴写程式,但要真的做得好,你嘴巴说出来的逻辑要是够明确的。假如你讲得不清楚或有误,可能会导致 ChatGPT 写不出你真正想要的东西。
  • 提供例子:如果能提供例子,会有助于 ChatGPT 更明白你想要的。假如要请它帮忙写一个函式,你可以提供一个输入,以及预期的输出。
  • 写测试:虽然 ChatGPT 可以帮忙写,但是请务必还是自己测试一下,确保功能有如你的预期。如果你想要比较自动化地验证程式的正确性,可以请 ChatGPT 帮忙写测试案例,然后跑一下那些测试案例来确认没问题。这可以透过 Write 5 test cases for [某段代码] 来做到。

在了解以上的注意事项后,接着让我们一起来看看可以如何透过 ChatGPT 帮忙写程式。为了不让这篇文章的篇幅过长,文章会举三个实际请 ChatGPT 写的例子。这三个都是有代表性的例子,因为都是一般 React 与 JavaScript 新手需要花时间去查才写得出来的功能。

根据特定字串来画重点

在逛 ChatGPT 指令大全 时,你可以看到每个指令中,要替换掉的字词,我们都有用浅蓝色来画重点。这件事该怎么做到呢? 我们当然不是每个指令都去画一次重点,不然如果有一千个指令,就要画一千次。用程式的角度来看,我们可以透过特定格式,让程式看到该格式后,自动帮忙做转换。

用程式来帮你自动画重点
用程式来帮你自动画重点

但是这件事要如何做到呢? 该如何把 你现在是一个 [程式语言] 专家 的程式语言自动画上重点? 如果没有 ChatGPT,大概会是这样执行:

  • 先想办法判断 [] 在一个字串中,有没有符合这个规则的文字
  • 要判断这个,通常会用正规表达式 (Regex),但因为我不熟正规表达,所以去 StackOverflow (一个工程师们查东西的网站) 上面查,然后根据 StackOverflow 上的回答来试试。很多时候上面回答品质不佳,所以要试很多次才能做到
  • 在能判断出 [] 这个规则后,接着需要写一个函式,把 [] 的文字替换成具有画重点效果的。

基本上,如果能够描述出上面的想法,就可以让 ChatGPT 根据上面的内容,来帮你写程式。下面这段是我输入到 ChatGPT 的指令。

请帮我用 TypeScript 写一个 highlightText 函式,它会接收一个字串,接收的字串中可能带有[文字],这个函式会辨别[文字],然后把[] 内的文字改成用<span className="bg-sky-100 text-slate-800"> 包住。

举例来说, 输入:你现在是一个 [程式语言] 专家 输出:你现在是一个 <span className="bg-sky-100 text-slate-800">程式语言</span>

透过上面的指令,来看看 ChatGPT 写出了什么。成果非常惊人,首先它给了一个正确的正规表达式const regExp = /\[(.*?)\]/g; 然后透过splitmap 方法,帮我把每一个[ ] 都替换成有画重点的字。只花五分钟不到,我就完成了这个画重点的功能。

用ChatGPT 帮忙完成画重点功能
用ChatGPT 帮忙完成画重点功能

实作点击后滑动到最上方的按钮

在使用ChatGPT 指令大全 时,如果你往下滑动,你会看到网页的右下角,有一个圆形的按钮,里面有个向上的箭头。这是许多网站都有的功能,当使用者点击后,页面会自动滑到最上方。这个常见的功能该如何实作呢? 直接请 ChatGPT 来帮忙吧。

我给 ChatGPT 的指令如下

你现在是名精通 TypeScript、React 与 TailwindCSS 的专家。今天我想用这三个技术,写一个元件。这个元件是一个放置在页面右下方的圆形按钮,只有在页面往下滑动后才会出现,假如页面在最上方时不要出现。当使用者点击时,要让页面滑动回最上方,在滑动到最上方时,这个按钮要隐藏,直到使用者又向下滑动才显示

一起来看看 ChatGPT 帮忙写的成果。

用ChatGPT 帮忙写滑动到最上方的按钮
用ChatGPT 帮忙写滑动到最上方的按钮

因为代码有点长,上面的截图仅截到逻辑的部份。可以看到 ChatGPT 帮你在三十秒内写完了这个功能。它透过 const [showButton, setShowButton] = useState(false); 来控制按钮的呈现状态,然后透过 window.pageYOffset > 0 这个判断让按钮只有在向下滑动后才出现。

因为是用 React 写,ChatGPT 知道如果要跟 React 以外的外部系统互动 (这边是跟浏览器中的执行环境),必须把逻辑写到 useEffect 里面。同时因为在这边注册了一个 scroll 监听器,在 React 元件的生命周期最后,要把这个监听给移除,这样才能避免记忆体外泄。这是很多 React 新手会忘记做的事情,但是 ChatGPT 没有忘记,它有记得用 removeEventListener 来移除监听。

useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

你可以自己试试看,把上面那段指令丢到 ChatGPT,你会发现你也做得出来在许多网站中常见的,点击滑动回页面最上方的按钮了 😉

类别与过滤

最后来讲另一个许多网站中常见的功能 — 类别与过滤。在 ChatGPT 指令大全 的网页最上方,有一排 ChatGPT 色的类别,当你点击后,会自动帮你过滤到你所选的类别。这个功能常见的实作方式有两种,一种是资料量比较小时,会直接把所有资料放在前端,然后在前端进行过滤;另一种是资料量大时,把资料存在资料库,然后当使用者点击某个类别时,带上该类别的参数,让后端过滤完后,重送过滤后的资料到前端展示。

因为ChatGPT 指令大全 目前有的指令数还没有多到要把指令资料额外放到资料库(我们实测后,这边如果额外打 API 拿资料,网路传输来回的时间成本让我们觉得暂时还不值得这样做),所以我们暂时先都放在前端,然后让前端这边直接过滤。

一起来看看我下的指令,以及 ChatGPT 写出来的成果吧。再一次地,ChatGPT 让我用不到一分钟,打完指令后就帮我写出这个基本功能。必须说,ChatGPT 在变数命名上,都命的清楚好懂,真心觉得有这个帮手真好 😎

用 ChatGPT 帮忙写过滤功能
用 ChatGPT 帮忙写过滤功能

小结论 — 快速原型制作

这次做这个简易的 ChatGPT 指令大全,比我过往在做 side project 的原型 (prototype) 都快非常多,这多亏了 ChatGPT 的帮忙。在 Copilot 与 ChatGPT 相继问世后,让我深深感觉到,要做一个网站原型的成本又比过去小非常多,这也意味着,如果你有创意与想法,实践这个想法的阻碍变得更小。所以如果你有任何想要尝试做的网站,不要踌躇不前,快找 ChatGPT 帮忙加速实现吧!

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們