ChatGPT就像你的程式設計拍檔
目錄
前言
在之前的節目中,我們創建了一個可以移動的方塊,就像圖形編輯器中的那種元素一樣,可以拖動它在畫布上移動。而今天,我們將繼續進行,並為方塊添加旋轉行為。本期節目將比較短,因為我將不會編寫任何代碼。相反,我將與ChatGPT合作,它將完成所有繁重的工作,而我將作為一個解釋器,可以運行GPT為我撰寫的代碼,這是一個很好的例子,展示了ChatGPT或其他語言模型如何增強您的工作流程。這不是取代您的工作,而是一個工具,讓您專注於任務,而不用通過關卡並試圖弄清為什麼某些事情不像應該的那樣工作。您仍然在學習的過程中,但您是根據其他人(例如GPT)告訴您的東西來學習,所以這是一種有趣的工作流程。當然,它並不是100%正確的,人類也不總是正確的,所以驗證ChatGPT所說的是一個好主意,您可以通過Google進行驗證。首先,我們將向ChatGPT提出第一個提示,要求它為我們寫一個在React中可以旋轉的矩形。我們將使用useEffect和一些CSS進行設置代碼,並將其全部輸入到CodeSandbox。您可以看到它的運行效果,它還不完美,但基本的想法在這裡,這是個好的起點。
使用 ChatGPT 創建可旋轉的方塊
ChatGPT可以在日常工作中很好地配合UI的創建和編寫任何類型的軟件程序。例如,我使用它來為ffmpeg編寫配置。ffmpeg是一個用於組合視頻的命令行工具,它使用一種奇怪的DSL來描述如何將元素組合在一起,對我來說記住其中的所有內容非常困難。所以我通常會請ChatGPT幫我寫相應的查詢字符串,它的效果非常好。
設定網頁環境
首先,我們需要設置我們的網頁環境。為此,我們需要使用React以及一些其他庫和設定。
import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const blockRef = useRef(null);
const canvasRef = useRef(null);
const [rotation, setRotation] = useState(0);
useEffect(() => {
// 網頁初始化邏輯
}, []);
return (
<div className="App">
<canvas ref={canvasRef} className="canvas"></canvas>
<div ref={blockRef} className="block"></div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
此代碼片段聲明了一個名為App的React組件,並將其渲染到具有id為root的HTML元素中。組件中使用了React的useRef
和useEffect
鉤子,以及React DOM的ReactDOM.render
方法。
為方塊添加旋轉行為
現在,讓我們為方塊添加旋轉行為。根據滑鼠與方塊的距離調整旋轉速度是為了實現這一行為。根據滑鼠的位置旋轉方塊則是根據滑鼠的位置,而僅在按下滑鼠時旋轉方塊是只有在按下滑鼠按鈕時才會觸發方塊的旋轉。
讓我們一步步來完成這些功能。