利用Cursor-聊个天就完成应用开发
工具介绍：
Cursor IDE (https://www.cursor.com/)是一个基于人工智能的代码编辑器，它集成了先进的大型语言模型（如GPT-4），旨在帮助开发者更快速、更智能地编写和编辑代码。以下是对Cursor IDE的简单介绍以及一些常用的快捷操作命令：
Cursor IDE 介绍
Cursor IDE 允许开发者通过自然语言与代码进行交互，提供了智能代码补全、代码生成、代码编辑和聊天功能。它通过内置的LLMs（大型语言模型）如GPT-4和Claude3.5来辅助编程，使得代码能力非常强悍。Cursor IDE 提供了三种计划：Free、Pro 和 Business，新用户可以享受2周的免费Pro计划。要将Cursor IDE设置为中文菜单，可以按照以下步骤操作：
- 安装中文扩展：
打开Cursor IDE的扩展管理，搜索“chinese”，然后安装简体中文语言包，安装完成后重启IDE即可。 - 使用快捷键组合设置中文：
使用快捷键组合Ctrl+Shift+p，在搜索框中输入“configure display language”，选择中文进行配置。 - 配置交流语言为中文：
直接在输入框中输入ZH-CN ONLY，这样设置后，Cursor IDE的交流语言将被设置为中文。
以上步骤可以帮助你将Cursor IDE的菜单和界面设置为中文，以便更符合中文用户的使用习惯。
快捷操作命令总结
- Tab：自动填充代码补全建议。按 Tab 接受建议，或按 Esc 取消。
- Ctrl/Cmd + K：编辑代码或生成新代码。可以选择代码后使用此快捷键进行编辑，或者在没有选择任何内容的情况下使用它来生成全新的代码。
- Ctrl/Cmd + L：打开聊天窗口，可以针对选中的代码或整个项目进行问答，也可以提出代码编辑要求。
- Ctrl/Cmd + I：打开Composer，这是一个特殊功能，允许在一个对话窗口里同时对多个文件进行修改。
这些快捷键使得Cursor IDE成为一个强大的工具，它通过人工智能技术提高了编程效率和体验。开发者可以在Cursor IDE中完成代码编写、编辑和问题解决，而无需频繁切换到其他工具或搜索引擎。
开始我第一个H5网页应用- 英文造句
创建新项目
- 创建新项目，在文件夹里面新建一个空文件夹，然后在Cursor IDE中"文件"选择"打开文件夹"。
- 创建一个文件，在Cursor IDE中，使用快捷键Ctrl+N（或Cmd+N在Mac上）创建一个新的文件。输入文件名称，例如“README.md”。
- 在文档里面描述你的网页应用的构思。比如现在我想做一个AI小应用，输入一个英文单词，让AI帮我造句子，并且能够发音，同时做一个历史记录，记录每次的询问的结果。以下是是提示词参考：
这是使用Cursor编写的一个H5应用，叫做英文单词学习助手，这是初始化项目的描述1. 你是一个经验丰富的UI设计师和前端开发工程师，负责设计H5应用的UI界面，需要设计出美观、简洁、易用的界面。
2. 我需要是一个单页面H5应用，页面中有一个输入框，按钮和历史记录
3. 当用户输入英文单词后，点击按钮会调用coze大模型的api接口，接口返回一个json数据，json数据中包含字符串和一个MP3文件，具体api接口后面补充
4. 历史记录需要展示用户曾经查询的文字和对应的MP3文件，点击可以播放MP3文件
-
打开对话框（Ctrl/Cmd + I）， 简单交代事情，可以这样说"请根据文档的描述，帮忙创建一个应用，谢谢"，让AI帮忙创建应用。等待一会，然后点击"Accept all"，应用就做好了。
-
在文件夹中用浏览器打开index.html
页面就出来了，当然现在点击"播放发音"肯定没有声音，因为我们还需要增加接口。下面开始增加难度了，但不用害怕，只要给足够的信息和准确的描述，它都可以完成。
- 完成Coze的API调用，我已经提前做好了一个Coze的单词造句的工作流，然后我们先告诉AI如何调用Coze的API，把官方例子复制过去，然后把自己的工作流返回的数据格式告诉AI，这样它就会帮我们完成API的调用。
想了解如何做工作流，请看这个文章。
官方例子 文档
curl --location --request POST 'https://api.coze.cn/v1/workflow/run' \
--header 'Authorization: Bearer pat_hfwkehfncaf****' \
--header 'Content-Type: application/json' \
--data-raw '{"workflow_id": "73664689170551*****","parameters": {"user_id":"12345","user_name":"George"}
}'{"code": 0,"cost": "0","data": "{\"output\":\"北京的经度为116.4074°E，纬度为39.9042°N。\"}","debug_url": "https://www.coze.cn/work_flow?execute_id=741364789030728****&space_id=736142423532160****&workflow_id=738958910358870****","msg": "Success","token": 98
}
我自己的工作流返回的数据格式说明
从图中可以看到，工作流是分了2步，第一步通过大模型给英文单词造句，然后把句子转为MP3音频，最终数据为
{"message": "Our school has many interesting clubs, such as the art club and the music club.","output": {"message": "","url": "https://lf-bot-studio-plugin-resource.coze.cn/obj/bot-studio-platform-plugin-tos/sami/tts/0605f7cebad24eccb30de9bd219fa304.mp3"}
}
综合上面的所有信息，AI就可以帮忙我们实现API的调用。
注意，要去项目里面找到"workflowId"的id和 “API_TOKEN”之类的关键词，替换我们真实的token和工作流ID。
我们都是开发小白，当然相信AI，继续点击"Accept all"。然后重新打开index.html，点击"查询"便可以完成。
后面你可以继续和AI对话，然它帮你完善界面，增加其他功能，比如多一个下载音频按钮，增加删除历史记录按钮，增加收藏按钮等。
