AI IDE尝鲜：使用Trae开发新闻阅读小程序 点击关注公众号，“技术干货”及时达！ 引言「背景」：之前为了锻炼自己的全栈能力，我开发了一个全栈练习项目，包含了一个以 NodeJS 为技术栈后端服务，一个以 Vue.js 为技术栈的新闻后端管理项目，一个以 Vue.js 为技术栈的新闻网站项目。恰逢掘金邀请广大开发者们分享 Trae 这款全新的智能协作 AI IDE 使用体验。我又想动手学习一下写小程序，所以决定使用 Trae 开发一个新闻阅读的小程序端。 「目的」：利用 AI IDE Trae 来帮助我学习并写出一款微信小程序应用。 计划「初步想法」：在我还不了解小程序语法的情况下，先画出自己想要的东西，非常简单，三个页面，首页、列表页、详情页， 首页：展示导航、轮播图、热门新闻。有一个热门新闻的接口请求，导航的菜单内容可以在页头组件中使用接口请求。 列表页：展示导航、面包屑分类、新闻列表。只有一个新闻列表的接口请求。 详情页：展示导航、面包屑分类、新闻详情。有一个新闻详情的接口请求。 接口：一共就 3 个接口请求。 服务端：已经使用 nodejs 开发完毕，我们开发完小程序直接调用就好。 「新建项目」：使用 Trae 帮我新建小程序项目。 「开发调试」：根据 Trae 的指导和代码补全等功能完成我的项目开发和调试。 「效果展示」：将编写的小程序展示出来。 新建项目1，使用 Trae 的右侧对话区，提问我想使用你新建一个微信小程序项目 该怎么做。按照它的指导，我新建了 TS+SASS 模版的小程序项目。 2，我还提问了一些诸如： 微信小程序 AppID 的点击注册和使用测试号有什么区别？ 使用测试号开发的程序可以更换成正式 AppID 吗？ 微信小程序发布上线 会将小程序发布到哪里 需要自己准备服务器来部署吗？ 我的后端服务还没有域名 只有 ip 和端口 小程序的前端可以访问到吗？ 小结：到这还没有体现出使用 Trae 有什么优势，跟我们用其他 AI 工具没啥区别，真正惊艳的在后面。 开发调试1，我提问你能识别图片的内容吗，「将我的设计图给它，它可以识别我的设计！」 这太棒啦！ 2，我继续提问：好 我想做这样一个小程序 接下来该怎么做，它开始指导我如何写代码。这里最让人惊艳的地方是：「生成的回答中，有可交互的按钮（下图中红框部分），可以与我们的项目产生交互，可以创建文件夹、创建文件、直接定位到代码并修改代码。非常的方便！」 3，持续提问，Trae AI 结合我的现有代码和我的提问，给出了我修改意见。我按照它给的修改意见三点两点，很快我们的项目就初具雏形。下图是应用代码产生的效果，你可以选择是否应用某些更改，跟日常 diff 代码一样： 4，关键提问：这是新闻列表的返回值 该怎么更改我的首页。 { "code": 200, "msg": "Success", "data": { "list": [ { "id": "2ca73523-57cb-45bf-9cc5-70272a945e4d", "title": "Sample Article Title", "content": "This is the content of the sample article. It can be a long text with HTML formatting.", "summary": "This is a brief summary of the sample article.", "thumbnail": "http://example.com/thumbnail.jpg", "isPublish": 1, "createTime": "2024-06-28 14:43:19", "updateTime": "2024-06-28 14:43:19", "categoryId": "cat5", "categoryName": "人工智能", "categoryParentId": "cat1", "tagIds": [ "tag1", "tag2", "tag3" ], "tagNames": [ "编程", "人工智能", "健身" ] }, ], "pageNum": 1, "pageSize": 8, "total": 3 } } 根据答案迅速调整可以适配我已有接口的小程序代码。 4，我还提问了诸如：帮我实现列表页和详情页、帮我配置实际的 API 接口地址、微信小程序本地开发测试 如何设置不校验合法域名等问题。 5，另一个提效的地方，是在编辑器中使用 AI，可以直接针对代码提问，让 AI 给出修改意见，然后将修改的代码应用到项目中，如下图： 效果展示经过一阵愉快的对话，拥有三个页面，有路由、有接口请求的小程序就开发好啦，如下图展示。 总结这次 Trae IDE 的初尝试，给到我非常好的编程体验，让我一个还不太熟悉小程序 API 的前端程序员，快速的上手和开发了一个小程序。以下总结我体会到的一些优点： 1，相较于传统的 AI 对话框，它可以识别到代码上下文，给出更符合你项目的答案。 2，相较于传统的 AI 对话框，代码的应用变得非常便利，不需要再粘来粘去。 3，可以实时检测代码中的错误和潜在问题，并提供修复建议，甚至可以自动修复常见错误。 4，可以帮助开发者便开发边学习。大大提升学习一门新技术的效率。 综合来看，Trae 结合了传统 IDE 的强大功能和 AI 的智能优势，为开发者提供了更高效、智能和个性化的开发体验。强烈推荐体验。 点击关注公众号，“技术干货”及时达！ 阅读原文