|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在本指南中,我们将介绍如何使用 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),我们将及时删除。
-
- 以太坊(ETH)相对于比特币(BTC)反弹,但这只是假象吗?
- 2024-10-21 20:30:32
- 众所周知,以太坊是当前牛市中表现最令人失望的加密货币之一,落后于比特币和其他 Layer-1。
-
- 日本承诺大幅削减加密货币税收以促进创新和吸引投资
- 2024-10-21 20:25:01
- 一位著名政党领导人承诺,如果当选,将大幅削减数字资产的税收,以吸引日本快速增长的加密货币社区。