使用豆包MarsCode 编写 Node.js 全栈应用开发实践

原创 已于 2024-09-05 17:13:27 修改 · 2.7k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#node.js #人工智能 #ide #visual studio code #vscode #推荐算法

于 2024-09-05 16:53:33 首次发布

以下是「豆包MarsCode 体验官」优秀文章，作者狼叔。

欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等，【有奖征集｜人人都是豆包MarsCode 测评官！】活动正在火热进行中，欢迎大家投稿参加，惊喜大礼等着大家！

我基本上经历 Node.js 的几个部署阶段，从原始云服务，到 K8S 容器化，到无服务的 FaaS 云函数，也做过一些科普工作。2017年之后做过很多年 SSR ，也是从基本 Web 框架到 FaaS ，最多做个降级容灾等大流量下稳定性相关的工作，其他就是全栈场景了。现在基本上也就 TRPC 能够让我觉得眼前一亮，仔细想想，也不过是 SDK 一样的思路，至于 AI 和 Node.js 开发有什么好的实践，我还没看到，都是常规思路，当我试过 MarsCode 之后，还是有些激动的。

在豆包MarsCode 发布之前，我就是第一波邀测用户，发布会当天我也去了现场。这个项目的核心开发主要是天猪、死月、老雷、段鹏飞等 Node.js 中坚力量，无论出于何种想法，我都是应该是去支持的。下面结合我了解的一些信息和动手实践内容，简单介绍一下我理解的 MarsCode。

豆包MarsCode是什么？

官方说法：豆包MarsCode 是字节跳动推出的免费 AI 编程助手，提供了 AI 驱动的云端 IDE 版和支持 VSCode 和 JetBrains 等的扩展版。豆包MarsCode IDE 具备代码补全、生成、解释功能，支持 AI 问答和 BUG 修复功能。豆包MarsCode 还提供 AI 插件开发与部署工具，简化了 API 测试、存储管理和 Schema 管理。此外，它拥有一键部署功能，提供安全可靠的云开发环境，支持多种项目创建方式，无需配置即可开始开发，确保了快速稳定的开发体验。

官方说豆包MarsCode 主要包含了 AI 功能的编程助手和 Cloud IDE，我认为不全面。我理解豆包MarsCode 是 AI + WebIDE + 自动化部署平台。

  • 深度集成AI 功能，从 Chat 到选中到流程集成。
  • WebIDE，以前我们开玩笑说它最大的作用是为外包用，代码不落地。那时候是因为性能不够，加载市场较慢。现在 Chrome 和电脑硬件变强，加载速度已经很好了，甚至有人直接用 iPad 写代码。这是个趋势的，比如 Codespaces ，就是 Github 提供的 WebIDE。
  • 自动化部署平台，它有部署服务，做了非常多的简化工作。

发布会当天通过需求开发、修复 Bug、开源项目学习三个实际场景，详细演示了豆包MarsCode 的项目问答、代码补全、单测生成、Bug Fix 等功能。确实没翻车，演示的还算比较流程。

> 官方说：通过完整场景演示串联各功能的使用配合，展示出豆包MarsCode 在日常工作中的优秀落地能力，无论是新手程序员还是经验丰富的开发者，都能体验到豆包MarsCode 带来的助力和效率提升。

这句话我不敢说，通过下面一系列实践，让大家来真实感受，可能更靠谱。下面通过场景一个具体的项目来讲讲我对豆包MarsCode 的理解。

创建项目，WebIDE 速度非常快

首先，在官网场景一个 Node.js 项目。注意这里选择的是 Node.js for AI Plugin，这是官方推荐的模版。

从项目创建到加载非常快，体感上 2-5 秒左右，体感速度应该跟 replit 差不多持平，如下图。

安装 tree 命令，英语查看文件目录结构。备注：apt-get下个版本可能会干掉或局部支持。

通过 tree 和 du 查看文件数和存储大小。

18个文件，加上 npm 安装，总大小72M，加上 os，大约300多M。

我是第一批豆包MarsCode 邀测用户，大约是4月底。那个时候一个项目从创建到启动大约1-2分钟，现在基本上能够做到2-5s左右启动，同为 VSCode 的谷歌 idx，现在启动还是大概按分钟计算的，Codespace大约30s左右（[opulent-garbanzo-6vw4gx9xjv9h5qrq.github.dev/\](opulent-garbanzo-6vw4gx9xjv9h5qrq.github.dev/)）目前豆包MarsCode 这个性能，可以说是行业里是领先的，应该是 Top 3。我和天猪简单的聊聊几句，此处是有高级技巧的，他们连着加班搞了1个月，在 K8S 上优化了很多细节，具体还处于保密阶段。

项目实战

我个人对 Node.js 比较熟悉，就以这个角度来做分析是比较容易的。这里我选了 Node.js for AI Plugin 这个模版，它是专门服务 Chatgpt 插件场景的，豆包MarsCode 还有非常多的其他模版，支持社区绝大部分框架（比如 React、Vue、Python、Go、Rust 等），也支持从 Git Repo 导入，理论上支持所有语言和框架。

本小节从项目目录结构到写法，到和 Vercel 对比，希望深入浅出的剖析一下豆包MarsCode 实现的一些细节。

项目结构

直接看一下忽略 node_modules，只显示3层的结构，这样更便于理解。

$ tree -I node_modules -L 3
.
├── api
│   ├── metadata.json
│   ├── sayhi
│   │   └── hello.ts
│   └── todo
│       ├── consts.ts
│       ├── create.ts
│       ├── delete.ts
│       ├── edit.ts
│       ├── search.ts
│       └── types.ts
├── package.json
├── pnpm-lock.yaml
├── README.md
├── runtime
│   ├── cli
│   ├── current_revision
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── src
│   │   ├── cli.js
最低0.47元/天 解锁文章
TRAE.ai
关注
豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery
qq_35653974的博客
01-04 1129
@[豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery) 人工Ai 编程 推荐一Kimi https://kimi.moonshot.cn/ 推荐二 豆包https://www.doubao.com/ 实现效果图 html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
Nest.js全栈开发终极实践：TypeORM+微服务+Docker构建高可用企业级应用
weixin_49707375的博客
03-10 2462
从环境搭建到性能优化，10章完整项目驱动教学，快速掌握现代后端开发核心技能
javaScript进阶 ES6 详细全解，解构赋值，Proxy，箭头函数，class类， 模块，export和import，Promise，then 方法，async等等
cao919的专栏Net
10-20 1987
前言：读万卷书不如行万里路,行万里路不如名师指路，还是阅人无数？ 解构赋值 Proxy 6.class类 7.模块 export和import as 的用法& export default Promise&then方法 async javaScript进阶 一、作用域 JS的作用域简单来说就是变量（变量作用于又称上下文）和函数生效（能被访问）的区域 1.全局作用域 ...
node.js调用豆包AI
m0_46248994的博客
08-21 2086
node.js调用豆包AI。
让豆包MarsCode 写一个贪吃蛇游戏不过分吧，我负责CV就行 原创
DouBaoMarsCode的博客
11-13 792
不得不感叹 AI 的学习能力，不过下面的 js 让我有点头大，这个 updateSnake 方法之前没有，且仅给我部分代码，这让我很难办啊，我是只会 CV 的小菜鸡啊，小菜鸡本着能 AI 来就不可能自己动手的原则，于是咱又问。AI对程序员的影响是深远的，它既带来了自动化和效率提升的机遇，也带来了技能需求变化和工作角色转变的挑战。总体玩下来，咱好像就一开始动了一点小脑筋，自己加了一个 box-sizing，现在我后悔了，应该叫。至此，贪吃蛇游戏已经完成了，可以开始摸鱼坐等下班了。在刚刚生成的代码中，
豆包MarsCode实践：使用java写一个零钱通小程序是否可行？
m0_67417362的博客
12-12 560
下面是我给 MarsCode 的话用java写一个零钱通小程序： 要求1.先显示出零钱通菜单供用户选择，菜单包括零钱通明细、收益入账、消费和退出2.其中零钱通明细要输出用户的收益入账金额、时间和余额；收益入账让用户输入金额，输出余额；消费让用户输入消费金额，输出余额。收益入账和消费都会记录在零钱通明细中。如果用户选择退出，则提示“您已退出零钱通”之后退出程序。3.初始金额为0.0首先这个对于初学者来说是很友好的，给出了基本的代码逻辑，注释也非常清晰。如果用来辅助完成学校的编程作业是完全可以的。
程序员最强辅助——‘‘豆包Marscode” Apply功能上线爽爆了！一键生成贪吃蛇游戏！
爱因斯晨的博客
02-02 3546
作为一个程序猿，大家是不是跟我一样：每当程序出现bug想寻求AI帮助时，都要将一大段程序全部复制下来并写出我的需求。如此麻烦繁琐，有时还会出现驴头不对马尾的现象。有同学说了，使用Copilot呀~可以是可以，但是他每个月10$的价格真的很不美妙！于是，众望所致——Marscode应运而生！可谓不是copilot用不起，而MarsCode更有性价比!!豆包 Marscode由深耕人工智能领域、技术实力强大的字节跳动开发，旨在满足人们在信息获取、内容创作、技术支持等多方面需求。
王城波-豆包 MarsCode 在 AI Coding 的探索与实践.pdf
12-11
王城波所作的演讲《豆包 MarsCode 在 AI Coding 的探索与实践》详细介绍了AI Coding技术的历史发展、落地实践、带给集成开发环境（IDE）的变革以及未来的发展展望。AI Coding技术已经走过几个重要的发展阶段，包括...
字节跳动发布“豆包MarsCode”智能开发工具，面向国内开发者免费
前端程序员、项目经理、人工智能博主
07-03 1181
豆包MarsCode 用户组将由开发者自组织自运营，豆包MarsCode 团队不会参与到用户组的管理，但是会为用户组提供丰富的各类资源支持，支持各地用户组发展，例如场地资源、产品资源、活动物料、专家讲师支持等，帮助促进各地开发者更有效的探索 AI 编程新范式，助力我们的开发者学习成长。除了代码预测与补全，当编码中出现需要修复的代码 Lint 错误时，编程助手会直接在编辑器中主动给出修改代码，我们不需要去查看是什么报错原因，只需要判断修复结果是否正确，如果正确，一键采纳修复后的代码即可。
仅需一小时，教你用豆包MarsCode 学会图像物体识别
DouBaoMarsCode的博客
12-03 2603
以在 Visual Studio Code 中为例，需要先打开 VSCode 扩展窗口，在搜索框搜索MarsCode，找到豆包MarsCode 后单击 「install」，完成安装，登录后即可使用豆包MarsCode 编程助手。在其他常见的生活应用场景中，抖音的滤镜检测年龄玩法也是运用了类似的原理。通过更改代码中的图片路径，跟随图片操作运行代码即可对图像进行物体检测，得到如图效果，成功识别出照片中的人物。同样的，在模式选择中选择 3 并打开视频路径，类似的也可获得如下图效果👇。
【运营豆包MarsCode玩转Java】一个从0-1深度探索—编程碰撞秘密的空间
weixin_71202655的博客
12-11 960
同时，可以利用 Java 的类库来开发各种类型的应用程序，如桌面应用程序、Web 应用程序、移动应用程序等。除了IntelliJ IDEA和Eclipse，还有许多其他的IDE，如Visual Studio Code、NetBeans等，它们都提供了类似的功能和工具。IntelliJ IDEA 是一个流行的Java集成开发环境，它提供了丰富的功能和工具，以提高开发效率。循环，让用户不断输入猜测的数字，并根据用户的猜测给出相应的提示，直到猜对为止。：这是 Java 程序的入口点，程序从这里开始执行。
一秒钟带你学会利用“豆包MarsCode”制作自己的博客网站！
qq_60633200的博客
10-15 1123
通过豆包MarsCode创建博客项目，并且在AI项目中可以跑通运行，极大地缩减了搭建博客系统所花费的时间，值得大家一试！申请豆包MarsCode传送门：现在申请还有机会赢取京东e卡、甚至现金奖励，，快来试试吧！t=O83A。
爷青回系列！豆包MarsCode 助我实现打地鼠自由！
DouBaoMarsCode的博客
11-22 854
以在 Visual Studio Code 中为例，需要先打开 VSCode 扩展窗口，在搜索框搜索MarsCode，找到豆包MarsCode 后单击 「install」，完成安装，登录后即可使用豆包MarsCode 编程助手。可以看到如下图所示，豆包MarsCode 已经帮我们生成了打地鼠的基础样式。进行到这一步我们成功完善了地鼠的显示逻辑，现在为点击动作添加游戏反馈。现在游戏已经得到进一步完善，接下来需要我们继续完善地鼠的显示逻辑～到这里我们的打地鼠游戏就大功告成～获得了文章首页游戏的效果👇。
啥，字节扣子Bot通过API调用百度文心一言？
MumuLab
04-02 2479
扣子丰富的插件功能和灵活的Workflow深受开发者的好评，这不，扣子又推出了插件IDE，无需使用自己的IDE、无需使用自己的服务器就可以更好的写自己的插件（之前已经支持在Worflow中直接添加代码节点）。接着就可以发布自己的插件了，现在更新了下，需要确认是否会收集用户信息。4月1号扣子上新啦！
每天记录一个小知识9：async函数
gjjmQq的博客
10-17 714
console.log('数据获取成功')需要在异步操作完成后执行某个操作的场景。// 执行后续相应操作。// 执行后续相应操作。数据库操作或 API 调用等异步操作。需要依次执行多个异步操作的场景。
使用Coze IDE创建个人插件
javin4715的博客
08-04 1616
这里五个输入变量：sender_email、sender_password、receiver_email、subject、body；出现代码编辑和测试界面：如果有依赖包在1号位置下载安装依赖包。这里的输入、输入个数及名称必须与代码中的一一对应保持一致。编辑完成保存后就可以进行测试了：右上角自动生成输入变量（填写输入变量的值），点击运行，发送成功！以发送电子邮件为例，使用Cozen IDE创建个人插件及如何获取邮箱授权码。可以在个人空间插件列表看到新发布的插件。插件名称：自己写一个，英文或拼音。
TensorFlowJS 如何export一个async API
GL
09-27 887
下属代码讨论的都是位于tfjs-core里面。 容易想到的是，在browser.ts增加： async function fromPixelsAsync_( pixels: PixelData | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, numChannels = 3): Promise<Tensor3D> { return await fromPixels(
JavaScript中在script标签写export为什么会抛错？
分享前端工程化、动效魔法与性能之舞！
05-26 1055
本文介绍了JavaScript语法的基本规则，重点讲解了脚本与模块的区别、import/export声明、函数体类型以及预处理机制。JavaScript源文件分为脚本和模块两种，模块通过import/export实现代码复用。函数体有普通、异步、生成器和异步生成器四种类型，支持不同语句特性。预处理阶段会提前处理var、function和class等声明，其中var声明具有穿透性，而class声明会阻止提前访问。此外还介绍了指令序言机制，严格模式是其典型应用。
豆包与 Trae 编程 IDE：开启智能编程新时代
游戏乐趣的博客
03-16 1365
在当今数字化飞速发展的时代，人工智能（AI）技术正深刻地改变着编程领域的格局。字节跳动作为技术创新的领军者，推出了一系列令人瞩目的产品，其中豆包和 Trae 编程 IDE 尤为引人注目。今天，就让我们从技术的视角深入剖析这两款强大工具的魅力。
使用node.js+vue将豆包部署到本地
最新发布
10-09
参考提供的引用，并未直接提及使用Node.js和Vue将豆包部署到本地的具体步骤和方法，但可依据引用中的相关技术栈信息推测通用步骤： ### 后端（Node.js）部分 1. **创建项目并安装依赖**：创建Node.js项目，安装Express等所需的npm包。 ```bash mkdir nodejs-backend cd nodejs-backend npm init -y npm install express ``` 2. **编写后端代码**：编写处理业务逻辑、数据处理以及与前端的数据交互的代码，同时实现与MySQL数据库的连接。以下是一个简单的Express示例： ```javascript const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello from Node.js backend'); }); const port = 3000; app.listen(port, () => { console.log(`Server running on port ${port}`); }); ``` 3. **运行后端服务**：在终端中运行以下命令启动后端服务。 ```bash node app.js ``` ### 前端（Vue.js）部分 1. **创建Vue项目**：使用Vue CLI创建一个新的Vue项目。 ```bash npm install -g @vue/cli vue create vue-frontend cd vue-frontend ``` 2. **编写前端代码**：编写用户界面和用户交互逻辑，与后端进行数据交互。例如在`src/App.vue`中： ```vue <template> <div id="app"> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'App', data() { return { message: 'Hello from Vue.js frontend' }; } }; </script> ``` 3. **运行前端项目**：在终端中运行以下命令启动前端开发服务器。 ```bash npm run serve ``` ### 前后端联调 确保前端代码中正确配置了后端API的请求地址，例如在Vue项目中可以使用`axios`库进行请求： ```bash npm install axios ``` ```javascript import axios from 'axios'; axios.get('http://localhost:3000') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` ### 部署到本地 如果要将项目部署到本地，可以使用Docker等工具。以下是一个简单的Dockerfile示例： ```Dockerfile # 后端Dockerfile FROM node:14 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "app.js"] # 前端Dockerfile FROM node:14 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:1.19.0-alpine COPY --from=0 /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 构建并运行Docker镜像： ```bash docker build -t nodejs-backend . docker run -p 3000:3000 nodejs-backend docker build -t vue-frontend . docker run -p 80:80 vue-frontend ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值