|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在本指南中,我們將介紹如何使用 Cursor AI 建立 Web 應用程序,特別是加密貨幣價格轉換器。我們也將利用 CoinGecko API 來取得加密貨幣價格資料。
In this tutorial, we'll be building a cryptocurrency price converter web application using React and fetching crypto prices from the CoinGecko API. We'll also be utilizing Cursor AI, an AI-powered code editor, to streamline our development process.
在本教程中,我們將使用 React 建立一個加密貨幣價格轉換器 Web 應用程序,並從 CoinGecko API 獲取加密貨幣價格。我們還將利用 Cursor AI(一種人工智慧驅動的程式碼編輯器)來簡化我們的開發流程。
Prerequisites:
先決條件:
Basic knowledge of JavaScript and React (ES6+ features, React components, hooks, state management)
JavaScript 和 React 基礎(ES6+ 特性、React 元件、鉤子、狀態管理)
Familiarity with web scraping concepts
熟悉網頁抓取概念
A text editor or IDE (we'll be using Visual Studio Code)
文字編輯器或 IDE(我們將使用 Visual Studio Code)
Node.js and npm (for our development environment)
Node.js 和 npm(用於我們的開發環境)
CoinGecko API for crypto price and market data (Demo plan is sufficient)
用於加密價格和市場數據的 CoinGecko API(演示計劃就足夠了)
Step 1: Setting Up Cursor AI
第1步:設定遊標AI
Head over to www.cursor.com and download the latest version of the Cursor AI desktop application. Once installed, open the app.
前往 www.cursor.com 並下載最新版本的 Cursor AI 桌面應用程式。安裝後,打開應用程式。
Next, open a folder in Cursor AI where you want the source code to be saved. In the Terminal within the Cursor AI app, let's set up a basic React app using create-react-app.
接下來,在 Cursor AI 中開啟一個要儲存原始碼的資料夾。在 Cursor AI 應用程式的終端機中,讓我們使用 create-react-app 設定一個基本的 React 應用程式。
Run the following command:
運行以下命令:
This command will create a React boilerplate project in your designated folder.
此命令將在您指定的資料夾中建立一個 React 樣板專案。
Step 2: Using Cursor AI to Build the App
第 2 步:使用 Cursor AI 建立應用程式
Now that we have our development environment set up, let's start using Cursor AI to build our crypto price converter web app:
現在我們已經設定了開發環境,讓我們開始使用 Cursor AI 來建立我們的加密貨幣價格轉換器 Web 應用程式:
Open the App.js file in the Cursor AI editor.
在 Cursor AI 編輯器中開啟 App.js 檔案。
Select the existing UI code in App.js.
選擇App.js中現有的UI程式碼。
Press CTRL + K to edit the selected code.
按 CTRL + K 編輯所選代碼。
In the Cursor AI code editor, provide instructions for how you want the code to be modified. For our crypto price converter, you might use a prompt like: “Create a React component for a cryptocurrency price converter. Include input fields for the amount, 'from' currency, and 'to' currency. Add a button to trigger the conversion and display the result.”
在 Cursor AI 程式碼編輯器中,提供有關如何修改程式碼的說明。對於我們的加密貨幣價格轉換器,您可能會使用以下提示:「為加密貨幣價格轉換器建立一個 React 元件。包括金額、「起始」貨幣和「至」貨幣的輸入欄位。新增一個按鈕來觸發轉換並顯示結果。
Cursor AI will generate code based on your instructions. Review the generated code and decide whether to accept or reject it.
Cursor AI 將根據您的指令產生程式碼。檢查產生的程式碼並決定是否接受或拒絕它。
If needed, provide follow-up instructions to refine the generated code further.
如果需要,請提供後續說明以進一步完善產生的程式碼。
Step 3: Enhancing Styling and Functionality
第 3 步:增強樣式和功能
After accepting the initial code changes from Cursor AI, we'll iterate on our application's styling and functionality:
接受 Cursor AI 的初始程式碼變更後,我們將迭代應用程式的樣式和功能:
Use the same method as before to instruct Cursor AI to improve the styling of your component. For example: "Add CSS styles to make the converter visually appealing. Use a modern color scheme and ensure the layout is responsive."
使用與之前相同的方法來指示 Cursor AI 改進組件的樣式。例如:“添加 CSS 樣式以使轉換器具有視覺吸引力。使用現代配色方案並確保佈局具有響應能力。”
To add functionality for handling currency changes, provide instructions like: "Implement functions to handle changes in the input fields. Update the state when the user selects different currencies or enters an amount."
若要新增處理貨幣變更的功能,請提供以下說明:“實現函數來處理輸入欄位中的變更。當使用者選擇不同貨幣或輸入金額時更新狀態。”
Cursor AI will provide inline suggestions as you edit the code. You can incorporate these suggestions by pressing the 'Tab' key.
Cursor AI 將在您編輯程式碼時提供內聯建議。您可以按下“Tab”鍵合併這些建議。
To interact with the CoinGecko API, instruct Cursor AI to add the necessary API calls: "Add a function to fetch real-time exchange rates from the CoinGecko API when the user clicks the convert button."
要與 CoinGecko API 交互,請指示 Cursor AI 添加必要的 API 呼叫:“添加一個函數,以便在用戶單擊轉換按鈕時從 CoinGecko API 獲取實時匯率。”
Continue this iterative process, providing instructions and refining the code until you're satisfied with the result.
繼續這個迭代過程,提供說明並改進程式碼,直到您對結果感到滿意為止。
Step 4: Testing and Debugging
第四步:測試和調試
Once you've implemented the core functionality of your crypto price converter, it's time to test and debug:
一旦您實現了加密貨幣價格轉換器的核心功能,就可以進行測試和調試了:
Save your changes and run the development server by entering the following command in the terminal:
透過在終端機中輸入以下命令來儲存變更並執行開發伺服器:
Open your browser and navigate to http://localhost:3000 to see your application in action.
開啟瀏覽器並導航至 http://localhost:3000 以查看正在執行的應用程式。
Test various scenarios, such as converting different cryptocurrencies and entering various amounts.
測試各種場景,例如轉換不同的加密貨幣並輸入不同的金額。
If you encounter any issues, use Cursor AI's chat feature (accessible by pressing CTRL + L) to ask for help. For example: "The conversion result isn't displaying correctly. Can you help me debug this issue?"
如果您遇到任何問題,請使用 Cursor AI 的聊天功能(按 CTRL + L 存取)尋求協助。例如:“轉換結果顯示不正確。你能幫我調試這個問題嗎?”
Implement any necessary fixes or improvements suggested by Cursor AI.
實施 Cursor AI 建議的任何必要的修復或改進。
Essential Keyboard Shortcuts for Cursor AI
Cursor AI 的基本鍵盤快速鍵
Keyboard shortcuts are essential for maximizing productivity in any development environment, and Cursor AI is no exception. By mastering these shortcuts, you can significantly speed up your workflow and make the most of Cursor AI's powerful features.
鍵盤快速鍵對於在任何開發環境中最大限度地提高生產力至關重要,Cursor AI 也不例外。透過掌握這些快捷鍵,您可以大幅加快工作流程並充分利用 Cursor AI 的強大功能。
Essential Cursor AI Shortcuts
基本遊標 AI 快速鍵
Advanced Shortcuts and Techniques
進階快捷鍵和技術
Customizing Shortcuts
自訂快捷方式
To avoid conflicts with existing VS Code shortcuts, you can additionally customize Cursor AI's keyboard bindings:
為了避免與現有 VS Code 快捷鍵發生衝突,您也可以自訂 Cursor AI 的鍵盤綁定:
For example, you could remap the AI features to use CMD + U instead of CMD + K:
例如,您可以重新映射 AI 功能以使用 CMD + U 而不是 CMD + K:
Another example of how you could remap Cursor AI shortcuts, this time focusing on remapping the AI Pane shortcuts to use CMD + P instead of CMD + L:
如何重新映射遊標 AI 快捷方式的另一個範例,這次重點關注重新映射 AI 窗格快捷方式以使用 CMD + P 而不是 CMD + L:
In this configuration:
在此配置中:
We've retained the remapping of CMD + K to CMD + U from the previous example.
我們保留了上一個範例中 CMD + K 到 CMD + U 的重新映射。
We've added new mappings for the AI Pane:
我們為 AI 窗格新增了新的對應:
CMD + P now opens the AI Pane (replacing CMD + L)
CMD + P 現在開啟 AI 窗格(取代 CMD + L)
SHIFT + CMD + P opens the AI Pane with the selected text (replacing SHIFT + CMD + L)
SHIFT + CMD + P 開啟包含所選文字的 AI 窗格(取代 SHIFT + CMD + L)
ALT + CMD + P toggles the AI Pane visibility
ALT + CMD + P 切換 AI 窗格可見性
This configuration allows you to use CMD + P for AI Pane operations, which might be more intuitive if you'
此配置可讓您使用 CMD + P 進行 AI 窗格操作,如果您這樣做可能會更直觀
免責聲明:info@kdj.com
所提供的資訊並非交易建議。 kDJ.com對任何基於本文提供的資訊進行的投資不承擔任何責任。加密貨幣波動性較大,建議您充分研究後謹慎投資!
如果您認為本網站使用的內容侵犯了您的版權,請立即聯絡我們(info@kdj.com),我們將及時刪除。
-
- TRASTRA 推出萬事達卡品牌金融卡以促進加密貨幣的日常使用
- 2024-10-21 20:40:16
- 加密友善支付解決方案供應商 TRASTRA 與波蘭持牌支付服務供應商 Quicko 合作
-
- 以太幣(ETH)相對於比特幣(BTC)反彈,但這只是假象嗎?
- 2024-10-21 20:30:32
- 眾所周知,以太幣是當前牛市中表現最令人失望的加密貨幣之一,落後於比特幣和其他 Layer-1。