跟我一起學習用Chat GPT API建立網頁應用程式
目錄
- 🎯 概述
- 🛠️ 開始之前
- 💻 建立 Chart GPT 應用程式
- 🗂️ 檔案結構
- 📥 安裝相依套件
- ⚙️ 設定環境變數
- 📝 撰寫 Chart GPT 邏輯
- 🌐 處理網頁請求
- 📊 測試與除錯
- 🚀 部署應用程式
文章
🎯 概述
有關 Chart GPT 的熱度不斷攀升,也許你心中湧起一個問題,即如何在你的應用程式中使用 Chart GPT?這裡的應用程式可以是網頁應用程式或移動應用程式。作為本教學影片的一部分,我想向你展示如何建立一個內部使用 Chart GPT 的隨機餐廳推薦系統,它非常容易建立。讓我在這裡輸入一個城市名稱,並向你展示它將隨機為我推薦一家餐廳。

如你所見,它給我一個輸出,而內部使用的是 Chart GPT API。要建立這個應用程式,很簡單。我會分享所有連結,所以不用擔心,你可以在說明中找到它們。
讓我們開始吧!
🛠️ 開始之前
在開始之前,我們需要安裝 Node.js 和一些相關的工具。確保你在本地環境中已經安裝了這些工具。如果還沒有安裝,請根據你的操作系統進行安裝。
接下來,我們將使用一個本地環境來開發我們的應用程式。你可以使用你喜歡的編輯器,但我們建議使用 Visual Studio Code(VSCode),因為它提供了非常好的開發體驗。
現在,讓我們打開終端機,並準備好開始建立我們的 Chart GPT 應用程式。
💻 建立 Chart GPT 應用程式
首先,我們需要在本地環境中創建一個新的資料夾來放置我們的應用程式代碼。打開終端機,並使用以下命令創建資料夾並進入:
mkdir chart-gpt-app
cd chart-gpt-app
現在,我們已經在本地環境中創建了我們的資料夾,接下來我們將對資料夾進行初始化,並創建一個新的 Node.js 應用程式:
npm init -y
這將創建一個新的 Node.js 應用程式,並生成一個 Package.json
文件,其中包含我們的應用程式相關的配置信息。
現在,我們可以開始安裝我們的相依套件了。在終端機中輸入以下命令來安裝相關套件:
npm install express OpenAI react react-dom
這將安裝我們需要的套件:Express.js、OpenAI、React 和 React DOM。
🗂️ 檔案結構
現在,讓我們來組織我們的應用程式代碼。在根目錄下創建一個名為 src
的文件夾,在其中創建以下文件和文件夾:
src/index.js
:這是我們的應用程式的入口點。
src/generate.js
:這是我們實現 Chart GPT 邏輯的文件。
src/components
:這個文件夾將包含我們的 React 組件。
現在,讓我們打開我們的項目文件夾並使用你喜歡的編輯器編輯這些文件。
⚙️ 設定環境變數
在我們繼續之前,我們需要設置一些環境變數來存儲我們的敏感資訊,如 OpenAI 的 API 金鑰。在根目錄下創建一個新的文件,命名為 .env
。打開這個文件並添加以下內容:
OPENAI_API_KEY=your-api-key
將 your-api-key
替換為你從 OpenAI 獲取的 API 金鑰。請確保 不要 將這些敏感資訊提交到源代碼庫或公開共享。
📝 撰寫 Chart GPT 邏輯
現在,我們來實現我們的 Chart GPT 邏輯。打開 src/generate.js
文件並添加以下內容:
const openai = require('openai');
const openaiApi = new openai.OpenAIApi(process.env.OPENAI_API_KEY);
const generateRestaurantName = async (city) => {
const instruction = `Suggest a restaurant in the following city: ${city}`;
const completion = await openaiApi.createCompletion('davinci', {
prompt: instruction,
max_tokens: 25,
temperature: 0.6,
n: 1,
stop: ['\n'],
});
return completion.choices[0].text.trim();
};
module.exports = {
generateRestaurantName,
};
這個文件導出了一個 generateRestaurantName
函數,該函數接受一個城市的參數並返回一個隨機的餐廳名稱。
🌐 處理網頁請求
現在,我們要處理我們的網頁請求。打開 src/index.js
文件並添加以下內容:
const express = require('express');
const { generateRestaurantName } = require('./generate');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.get('/', (req, res) => {
res.sendFile('index.html', { root: __dirname + '/public' });
});
app.post('/recommend', async (req, res) => {
const { city } = req.body;
const restaurantName = await generateRestaurantName(city);
res.json({ restaurantName });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
這個文件引入了我們在 generate.js
中實現的 generateRestaurantName
函數。它創建了一個 Express.js 應用程式,處理根路徑的 GET 請求並返回我們的網頁。同時,它還處理 /recommend
路徑的 POST 請求,並使用 generateRestaurantName
函數生成隨機餐廳名稱。
📊 測試與除錯
到目前為止,我們已經完成了我們的 Chart GPT 應用程式的開發。現在,我們要測試和除錯我們的應用程式。在終端機中輸入以下命令來啟動我們的應用程式:
npm start
這將在指定的端口上啟動我們的應用程式。打開你的瀏覽器,並在網址欄中輸入 http://localhost:3000
(或你指定的端口號)。
你應該能夠看到我們的應用程式在瀏覽器中運行。嘗試在城市輸入框中輸入城市名稱並提交表單。你應該能夠在頁面上看到一個隨機的餐廳名稱。
如果你遇到任何問題,你可以檢查你的終端機以查看錯誤消息,並嘗試解決它們。
🚀 部署應用程式
恭喜你完成了 Chart GPT 應用程式的開發!現在是時候將你的應用程式部署到生產環境中了。我們使用 Vercel 來部署我們的應用程式,它提供了頻寬不限、全球 CDN、SSL 和自動縮放等功能。
以下是將你的應用程式部署到 Vercel 的步驟:
- 在 Vercel 上創建一個新的帳戶(如果你還沒有)。
- 在你的 Vercel 儀表板中,點擊「導入項目」按鈕。
- 選擇你的 Chart GPT 應用程式的 Git 存儲庫,並遵循屏幕上的指示完成導入。
- 在 Vercel 上根據你的喜好進行任何必要的配置,然後點擊「部署」按鈕。
- 等待片刻,你的應用程式將部署到 Vercel 上並可立即使用。
現在,你可以與他人分享你的 Chart GPT 應用程式,也可以在任何地方使用它。
希望這篇文章對你有所幫助!如果你有任何疑問或需要進一步的幫助,請隨時留下評論。
結論
在本文中,我們學習了如何在應用程式中使用 Chart GPT。我們以建立一個隨機餐廳推薦系統為例,演示了如何使用 Chart GPT 生成隨機的餐廳名稱。我們使用了 Node.js、Express.js、React 和 OpenAI API 來實現這個應用程式,並使用 Vercel 來部署我們的應用程式。
希望你喜歡這個教程。謝謝你的閱讀!如果你有任何問題,請隨時留言。
[資源]