export interface Example {
sentence: string; //英文例句
translation: string; //中文翻譯
}
export interface VocabularyItem {
word: string; //單字
phonetic: string; //kk音標
translation: string; //翻譯
definition: string; //中文解釋
examples: Example[]; //例句
}
// API Response
export interface VocabularyResponse {
content: VocabularyItem[];
}
我想要做一個單字學習app
使用以下技術
- react
- typescript
- chakra ui
- vite react
- react router dom
請幫我設計路由 共有三個頁面 1.首頁 2.每日單字 3.我的筆記
1.首頁
有一個大icon 下面有文字 '每日記單字'
有輸入帳號密碼的輸入框及進入按鈕
2.每日單字
請根據提供的圖片幫製作 UI 畫面
頁面下方幫我加上按鈕 1.上一頁 2.下一頁
3.我的筆記
請根據提供的圖片幫製作 UI 畫面
- 共用 Header
有logo 登出 每日單字 我的筆記
- Layout
請幫我用現代時尚SPA 的自適應網頁設計方式建立UI,
以mobile first 設計原則 畫面居中
desktop 版本請底色還有兩邊都是白色底畫面居
整個網站當我按下喇叭的時候請使用web speach api 來發音
請幫我用 react vite ts 啟動專案
// -------------- AI 潤飾以後的提示詞 --------------
Design a single-page application (SPA) for vocabulary learning using React, TypeScript, Chakra UI, Vite React, and React Router DOM. The application should consist of three pages: Home, Daily Vocabulary, and My Notes. Develop the routing and structure as per the specifications below.
- **Home Page**
- Display a large icon with the text "每日記單字" beneath it.
- Include input fields for username and password along with a login button.
- **Daily Vocabulary Page**
- Design the UI according to the provided image for this page.
- Add buttons at the bottom of the page: "上一頁" (Previous) and "下一頁" (Next).
- **My Notes Page**
- Design the UI as per the provided image for this page.
- **Shared Components**
- Create a header with a logo and links to "登出" (Logout), "每日單字" (Daily Vocabulary), and "我的筆記" (My Notes).
- **Responsive Modern SPA Layout**
- Implement a modern, fashionable SPA with responsive design, following the mobile-first principle.
- Ensure the layout is centered on mobile, and in the desktop version, the background and sides should be white.
- **Web Speech API Integration**
- Implement functionality using the Web Speech API for pronunciation when a speaker icon is clicked.
- **Project Setup**
- Use React, Vite, and TypeScript to initialize and set up the project.
# Steps
1. Set up the project using Vite with React and TypeScript integration.
2. Create and configure routes using React Router DOM for seamless navigation between the Home, Daily Vocabulary, and My Notes pages.
3. Design and implement the UI for each page using Chakra UI, ensuring it's consistent with modern web aesthetics and responsive to different screen sizes (mobile-first).
4. Develop shared components like Header to be reused across pages.
5. Integrate the Web Speech API for pronunciation functionalities.
6. Test the application thoroughly across different devices to ensure performance and design consistency.
# Output Format
- Provide a detailed explanation of how the routing and pages should be configured.
- Include code snippets as needed to illustrate complex configurations or UI designs.
- The output should be presented in markdown format for readability.
# Examples
**Code Snippet for Routing Setup:**
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import DailyVocabulary from './pages/DailyVocabulary';
import MyNotes from './pages/MyNotes';
import Layout from './components/Layout';
function App() {
return (
<Router>
<Layout>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/daily-vocabulary" component={DailyVocabulary} />
<Route path="/my-notes" component={MyNotes} />
</Switch>
</Layout>
</Router>
);
}
export default App;
(Note: Ensure that HomePage, DailyVocabulary, and MyNotes components are implemented with Chakra UI styling as specified.)
- api/vocabulary 後端 Prompt:
```jsx
我想要架設一個由node js express 框架 的後端服務器
並安裝 cors
1./api/vocabulary API
vocabulary 接收到前端請求的時候 幫我打claude api
使用 'claude-3-sonnet-20240229'模型
並將以下結果回傳到前端
我的提示詞：
`請提供5個隨機的B2級別英語單詞，並為每個單詞提供以下信息：
- 這個詞本身。
- 相應的 KK 音標。
- 單詞的中文翻譯。
- 用繁體中文說明對單詞在英語中的含義的簡要說明。
- 在上下文中使用單詞的兩個例句。
- 每個例句的繁體中文翻譯。
- 每個單詞都應有簡潔明瞭的解釋，以增強學習者的理解。
請將結果直接以JSON格式返回，格式如下：
{
"content": [
{
"word": "單詞",
"phonetic": "音標",
"translation": "中文翻譯",
"definition": "繁體中文定義",
"examples": [
{
"sentence": "英文例句1",
"translation": "中文翻譯1"
},
{
"sentence": "英文例句2",
"translation": "中文翻譯2"
}
]
},
// ... 其他單詞 ...
]
}
請確保返回的是一個有效的JSON對象，包含一個名為"content"的數組，數組中的每個對象代表一個單詞及其相關信息。`;
接下來請使用 PostMan 打看看 …. api/vocabulary
前後端串接 Prompt:
我希望進到這一頁後 有一個 locading 動畫 並且 同時呼叫 api
/api/vocabulary 會取得一個 5 筆的json 陣列資料
請再幫我套用到 上ㄧ頁跟下一頁的功能上
第一筆不需要顯示prev按鈕 請disable
最後一筆的話不用顯示next按鈕 請disable
資料格式如下
{
"word": "accommodate",
"phonetic": "/əˈkɑmədeɪt/",
"translation": "容納",
"definition": "為某人或某事物提供需要的空間或條件。",
"examples": [
{
"sentence": "The hotel can accommodate up to 200 guests.",
"translation": "這家酒店最多可容納200位客人。"
},
{
"sentence": "We will try our best to accommodate your special dietary needs.",
"translation": "我們會盡力滿足您的特殊飲食需求。"
}
]
}
// 以下是ChatGPT 優化過後的 prompt
設計一個功能，當進入頁面後，顯示定位動畫並同時呼叫 API /api/vocabulary 以獲取 5 筆 JSON 陣列資料。
以下是實現此功能的要點與步驟：
- 當頁面加載時，顯示一個定位（loading）動畫。
- 並行調用 API /api/vocabulary 以獲取詞彙資料。
- 如果獲取的資料是第一頁，禁用 "prev" 按鈕。
- 如果獲取的資料是最後一頁，禁用 "next" 按鈕。
# 程序步驟
1. **定位動畫**：頁面加載時，立即觸發定位動畫。
2. **API 請求**：使用 AJAX 或 Fetch API 發送請求至 /api/vocabulary。
3. **資料處理**：接收並解析返回的 JSON 數據，反映在界面上。
- 顯示每條數據中的 `word`, `phonetic`, `translation`, `definition`。
- 每個詞條下顯示例句集。
4. **導航按鈕邏輯**：
- 檢查是否為第一筆資料：如果是，則禁用 "prev" 按鈕。
- 檢查是否為最後一筆資料：如果是，則禁用 "next" 按鈕。
# 輸出格式
- JSON 格式，輸出詞彙資料。
- 包括詞條及其詳細信息。
# 範例
### 輸入：
無需提供輸入，這是系統設計。
### 預期 JSON 輸出範例：
```json
[
{
"word": "accommodate",
"phonetic": "/əˈkɑmədeɪt/",
"translation": "容納",
"definition": "為某人或某事物提供需要的空間或條件。",
"examples": [
{
"sentence": "The hotel can accommodate up to 200 guests.",
"translation": "這家酒店最多可容納200位客人。"
},
{
"sentence": "We will try our best to accommodate your special dietary needs.",
"translation": "我們會盡力滿足您的特殊飲食需求。"
}
]
}
]
- api/addNote 後端：加入筆記
```jsx
請幫我新增一個api介面 讓我將單字存在 note.json 裡
api naem: addNote
儲存格式請參考TS型別：
interface Example {
sentence: string;
translation: string;
}
interface WordCardProps {
word: string;
phonetic: string;
translation: string;
definition: string;
examples: Example[];
onPrevious: () => void;
onNext: () => void;
}
interface Result {
content: WordCardProps[];
}
在按下筆記這個按鈕以後請幫我將該單字以及所有的物件內容 post 到後端api
/api/addNote