找素材的网站大全,php做网站的优势,移动前端开发需要学什么,企业网站用免费程序以下是「豆包MarsCode 体验官」优秀文章#xff0c;作者狼叔。 欢迎更多用户使用豆包MarsCode 并分享您的产品使用心得及反馈、创意项目开发等#xff0c;【有奖征集#xff5c;人人都是豆包MarsCode 测评官#xff01;】活动正在火热进行中#xff0c;欢迎大家投稿参加作者狼叔。 欢迎更多用户使用豆包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
│ │ ├── core
│ │ ├── proxy
│ │ ├── schema
│ │ ├── types
│ │ └── wrapper
│ └── united_manager_version
└── tsconfig.json10 directories, 18 files分析如下
使用 pnpm 做包管理器行业内最佳选择。采用 ts 编写代码非常规范可圈可点。核心分 api 和 runtime 2个文件夹api 是业务代码runtime 是 SDK把函数写法cli 等工具放进去的。后面会隐藏。当前是不错的学习材料。
请求分析
api 目录结构这是开发者平时改动最多的地方。
$ tree api
api
├── metadata.json
├── sayhi
│ └── hello.ts
└── todo├── consts.ts├── create.ts├── delete.ts├── edit.ts├── search.ts└── types.ts2 directories, 8 files它的服务详情藏的略深。需要点击项目名然后才能显示项目详情里面才有 Service Detail。它会显示当前项目的域名和路由对理解项目至关重要。 看了 Service Detail 和目录结构这里面的原理就比较容易理解了。
首先它是一个 Server 容器简单理解是 Docker。配置如上图2核4G内存10G硬盘。实话说这个配置给的很大方了。
有了 Server自然就有 IP 和端口这里 Functions 下面的 HOST 就是默认给的域名。
https://37iyzcv1c9g9m.ahost.marscode.site那个API Key 其实是 JWT 类似的机制来实现的。复制一个 curl 请求大致原理就能扒出来了。
$ curl --location --request POST https://37iyzcv1c9g9m.ahost.marscode.site/sayhi/hello --header Content-Type: application/json --header Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmdW5jdGlvbmlkIjoiMzdpeXpjdjFjOWc5bSIsImlhdCI6MTcyMDA5NjgwOCwianRpIjoiNjY4Njk4MjgwZWQ2ZDRiZmQ1MTQ0ODgyIiwidHlwZSI6ImZ1bmN0aW9uIiwidXNlcmlkIjoiQ0xPVURJREVfMWRrbnc5NTFuNXA1dm5fNzM4Nzc1NzM0ODkyMjcwNDkxMyIsInZlcnNpb24iOjJ9.qZuzik_o-lg4Qpo4XdQC2FjpaRpaZEL5fRebCV9PI0M --data {}
{message:hello world}% 从这个请求可以看出
POST 请求文件即路由。sayhi/hello.ts对应sayhi/hello请求。默认返回 JSON 格式默认做了 Authorization 鉴权我搜了一下 jwt 或 jsonwebtoken 都没有搜到可能是只实现了机制没用过对应的包。
函数写法
看一下函数
import { Args } from /runtime;export interface Input {// name of username?: string;
}export interface Output {// reply to greet the usermessage: string;
}/*** Say hello to the user when he introduces himself*/
export async function handler({ input, logger }: ArgsInput): PromiseOutput {const name input.name || world;logger.info(user name is ${name});return {message: hello ${name}};
}要点说明
输入 Args输出 Output对外导出 Async 函数
是不是发现这东西和 trpc 很像 对比一下
trpc 需要定义方法名MarsCode 里的 Async 函数名比如 handler。二者一模一样trpc 显式 input里面做了 zod 校验MarsCode 是 ts 类型也算异曲同工。图中的 trpc 是 query即 GET 方法然后是返回。而 MarsCode 全部是 POST其实更简单。
很明显这种函数写法是行业里最佳实践基于 FaaS隐藏了 HTTP 协议细节强类型采用约定式路由。
豆包MarsCode 函数写法上要更简单对于测试过程也能够做到极大的简化。在 MarsCode 里Api测试过程是非常简单的只需要4步结合AI可以提效。
1. 点击 API Test 按钮这时候会切换到 API Test panel
2. 点击 Auto Generate这部分是 AI 根据 Input 类型进行生产 Mock 数据看着还行
3. 点击 Send 按钮就可以发送了。 我猜测和上面的 curl 是一样的
4. 在 Output 区域输出 message 都是POST有问题吗
在豆包MarsCode 里所有的函数都采用 Post http verb 提供服务。如下图。 我之前猜测这是一个无心插柳的故事。和天猪求证隐藏协议的一个考虑点是「云函数是没有协议概念的」虽然一般会有个触发器的概念但 AI Plugin 场景没必要的。其实在约定式路由里表达 Verb 是件麻烦事要么代码里加要么加配置文件很明显都是有不少工作量的。
对于 API 而言都用 POST 有问题吗专业后端可能会拿 Restful API 说事为了语义表达等等这曾经是很多年被奉为圭臬的标准。咱且不论它到底好不好在落地上严格遵守的并不多。
参考github.com/jshttp/meth…
get,post,put,head,delete,options,trace,copy
,lock,mkcol,move,purge,propfind,proppatch,unlock,
report,mkactivity,checkout,merge,m-search,notify,
subscribe,unsubscribe,patch,search,connect如果再细分的话可以按照是否有 Body 分成2类典型的就是 GET 和 POST。GET 有一个 2048 字节的限制所以一些超长的请求会被截断。一般查询类的用 GET创建用 POST。
交代了上面这点背景之后我们来讨论一下只用 POST 是否 OK先说我的结论我认为是 OK 的。POST 是万能的它没有 GET 的限制如果不在意语义完全是可以的。业内从 trpc 到 httpc.dev都是有意的隐藏 HTTP 协议只要知道函数名和参数就能够完成调用。
这里以 [httpc.dev](httpc.dev) 举例
// Server
function add(x: number, y: number) {return x y;
};function greet(name: string) {return Hello ${name};
};export default {add,greet
}// Client
import createClient from your-package/api-client;const client createClient({endpoint: http://api.domain.com
});let result await client.add(1, 2);
// result: 3let message await client.greet(Edith);
// message: Hello Edith很明显这样的写法是极简的。它背后的实现原理也非常简单就是约定了请求写法如下图。 httpc 的写法所有的 Get 请求都把参数放到 $p 上然后取到的数组传给函数的参数这块就是call、apply 发挥的地方。处理 Post 请求更简单只需要把 Body 内容作为函数参数实现更简单。
这样let result await client.add(1, 2);这样的写法就抹去了 HTTP 细节。其实这就是 RPC 的玩法只是 HTTP2 流行了之后RPC 结合 HTTP 协议通过约定简化了写法。
在 ChatGPT 之前我其实也是 Restful 拥护者。但当我被问到一个问题结合 AI 你能提效70%吗问这话的是一个算法每天处理数据用 Python 写一写片汤代码。他确实可以但我为什么不可以呢是不是我对专业化放不开结合豆包MarsCode 上的函数实现一旦 Restful API 变成函数级调用AI 出码一定是效率更高的。
我想AI 发展必然会有现有技术栈对 AI 进行适配甚至是类似于 Moonbit 这样的在设计之初就为 AI 出发做了语法语义准备的新事物。我们以前用的技术栈真的对吗在2024年年中我想我们都需要考虑一下。
BaaS决定它的应用场景
在 create.ts 里有这样的代码。 const result await baas.redis.hset(TODOListKey,input.name,JSON.stringify({ name: input.name, state: TODOState.Active }));很明显就是一个 BaaS SDK 里有 Redis。在云函数里FaaS 是function as service。BaaS 是backend as service。BaaS SDK 就是和后端服务相关的 SDK也可以叫中间件。
在豆包MarsCode 函数项目里内置了 Redis 和文件存储。比如我通过 hgetall 来查一下我刚才创建的数据结果如下图。 它的文件用法也是非常简单的。参考[docs.marscode.com/reference/f…]
(docs.marscode.com/reference/f…
import { baas } from marscode/baas-sdk;// upload
const fileInfo await baas.file.upload(hello world, hello.txt);// download
const content await baas.file.download(fileInfo.url);从这个实现看大概率是本地文件。如果想利用免费服务器做点啥也是可行的。
至此我们基本就可以有一个结论从目前的文档和前面的总结来看豆包MarsCode 对 Node.js 和Python 支持是最好的。从 Node.js 实现上分析它对 BFF 支持极好如果要接云数据库(比如supabase\planetscale)也是极其简单的可以覆盖目前 Web 开发的所有场景。
豆包MarsCode 同时支持从模版创建项目和从 Git Repo 导入也就是说你可以使用任意技术栈任意框架它是一个通用的 WebIDE 运行环境。我个人最喜欢它的 Node.js 云函数项目模版简单实用结合 AI 代码提示写起来非常高效。
结合部署看一下全链路提效
在豆包MarsCode WebIDE 里是有终端的但你不需要自己启动服务它会自动帮你运行。API Test 前面大家都看到了下面我们再看看它的一键部署过程。
你只需要点击上面的 Deploy 按钮即可然后 MarsCode 就会帮你自动完成发布。 绑定域名 取到你的域名里把 cname 映射上就可以生效了。
对比 Vercel 和 MarsCode Vercel 是一个自动化部署环境。结合 Github对于 CI/CD 支持极好。 MarsCode 是 WebIDE提供了 AI 和自动化部署能力WebIDE 里内建的 CI/CD 更简单。 再看一下价格
Vercel价格参考[vercel.com/docs/pricin…](vercel.com/docs/pricin… MarsCode免费额度WebIDE运行环境和Server参考[docs.marscode.com/get-started…](docs.marscode.com/get-started… 最佳实践
先来看看我的几个尝试。
1.使用 React 项目我试了2个模版CRA 和Nextjs支持的都非常不错。想怀旧用 Koa 写 EJS 也是可以的。 2.API推荐采用云函数**Node.js for AI Plugin**
除了 Node.js 外还有 Python AI 插件当然你也可以选择 Go、JavaRust 等。前面已经讲了这里就不再重复了。
3.更多模版
从语言到模版已经非常全面了。其中对国产第一语言 Moonbit 的支持是行业里第一个支持断点调试了哦。 有了上面这些信息我们就可以给出最佳实践了。
前后端分离前端选 React后端选 Node.js 云函数这是一个常规技术选型。前后端分离 BFF前端选 ReactBFF 选 Node.js 云函数后端选 Node.js 云函数 云数据库。前端选 ReactBFF 选 Node.js 云函数后端选其他语言云函数 云数据库。
由于豆包MarsCode 目前是免费的且云函数是按需付费可以在很大范围内享受免费的红利。对于独立开发者或者小公司小团队是非常适合的。这里需要提醒一下自动发布仅限海外服务器对于出海的开发者来说会更友好。
这种组合的方式可以最大范围的使用免费额度。当然还可以有很多骚操作比如讲一个站点拆成多个页面然后通过微前端或者微模块的方式嵌入。只要你想省钱办法总比困难多哈哈哈哈。 AI
关于AI部分建议大家去看看阮一峰老师写的测评参考www.ruanyifeng.com/blog/2024/0… 这是他给的结论豆包MarsCode 完全可以替代Github Copilot。我一般都是眼见为实自己折腾了一些内容。
分析项目
豆包MarsCode IDE 通过提供开发模版让开发者能够快速进入项目而无需运维本地环境。借助原生集成的 AI 能力开发者不再需要自己去理解代码从而更高效地上手项目。发布会的时候现场演示了 Langchain 项目的导入和分析效果还是非常不错的。
我在 Node.js 云函数项目里也做了简单提问效果还可以。 截图下面还有一段如下。
项目使用PNPM来管理依赖项。您可以使用PNPM命令来安装依赖项例如pnpm add axios。项目还提供了OpenAPI Schema的生成工具
它可以根据Input和Output接口的类型描述和注释生成相应的Schema描述。
在构建和部署过程中将生成metadata.json文件并将其解析为最终的OpenAPI Schema。此外项目还提供了API测试工具可以帮助您测试API。
您可以在MarsCode中点击顶部的API Test按钮打开API测试面板并发送请求进行测试。最后项目还提供了集成的云函数托管功能您可以通过点击顶部的Deploy按钮快速部署云函数。如果您需要更详细的信息可以参考项目中的README.md文件或查阅MarsCode的文档。如果您有任何问题或反馈可以在MarsCode的Discord社区中提问或反馈。希望这些信息对您有所帮助如果您有任何与编程相关的问题我将很乐意帮助您。它描述的准确程度是非常棒的通过项目实战章节的内容相信大家都能有一个比较好的判断了。
OpenAPI Schema我是没提到的。内置的也确实是 pnpm执行 pnpm add axios这个确实是可行的。根据 Input 和 Output 接口的类型描述和注释生成相应的 Schema 描述上面我有讲到。在构建和部署过程中将生成 metadata.json 文件并将其解析为最终的 OpenAPI Schema我没写原因是我没看懂他就是一个空文件。API Test 和 Deploy 也是对的。
这块生成的还不错的甚至我觉得可能是项目组给 LLM 喂了很好的饲料。无论如何我自己的这个体验还是不错的。
问答
我日常用问答式的应用还是比较多的这里面我选了一个我最近常用的 AST Vistor 的写法分别测试一下。
豆包MarsCode 的返回结果如下图。 下面是 Chatgpt 3.5 返回的结果。 不清楚什么原因可以看出来的是豆包MarsCode 的回答很明显是更偏向于代码的。
其实自己买 Chatgpt 或者套壳服务还是需要一年 500 元以上的。开一个豆包MarsCode 去蹭他的免费额度还是很不错的。
创建User接口
AIGC 出现后我们都想着如何让 AI 帮我们自动化比如一句话让他帮我们打开车机功能智能家具功能很明显这已经比之前的人工智障的音箱好多了。还有很多人尝试过通过语音控制浏览器和Siri 类似但比 Siri 好用的多。我个人很喜欢 Vimium结合语音转文字文字通过 LLM 解释下找对最匹配的行为。甚至很多基于这种形式的硬件曾经我都很关注。
所以我想按照这个方式嚯嚯一下豆包MarsCode。于是向它提问帮我在 api 目录下新建 user 的 crud 接口。 豆包MarsCode 确实能够生成正确的基于它云函数的代码。但没有帮我创建目录和文件。
豆包MarsCode 生成的代码区块有3个操作
复制插入插入到当前选中文件会根据光标进行新建文件是 VSCode 的那种 cmdn不是真的新建文件。保存是需要自己进行的。
如下图。 还是比较保守按照当前的能力来说直接写入文件也可以的可能对算法还不是特别有信心毕竟现阶段AI还是不能替代程序员。当前AI能力局部上已经很强了但完整流程可控还有一些距离即时 MoAMixture-Of-Agents 也没法做的效果很好。
无论如何豆包MarsCode 在云函数这块能够出码准确还是不错的。
部分选中
Copilot 也有类似的功能这个就不多讲了。 生成文档
选中代码之后直接生成文档这个功能还是非常方便的。尤其是云函数这个模版里它的准确度是非常棒的。 生成测试
AI 上来之后最先折腾的就是测试然后设计然后前端。事实上局部代码生成测试用例是可行的这种就是能帮忙多少生成多少集成测试不行单元测试能生成也行。 看一下它生成的代码。
import { Args } from /runtime;
import { handler, Input, Output } from /api/sayhi/hello;async function testSayHi(): Promisevoid {const input: Input {name: John,};const args: ArgsInput {input,logger: console, // 使用控制台作为日志记录器};try {const result: Output await handler(args);console.log(result.message); // 打印返回的消息} catch (error) {console.error(Error:, error); // 打印错误信息}
}testSayHi();逻辑上没有问题只是没有套用任何测试框架而已直接用 node 命令执行更快。如果想换成 xv 测试框架只需要把 Node.js 断言加进来简单处理断言即可。
总结
豆包MarsCode 适用于通用 Web 开发的所有场景其 WebIDE 和全场景 AI 智能是特色在云函数基础服务上打造一站式智能开发平台。
豆包MarsCode 是可用的有创新的先进的基于 WebIDE 做 AI 是我非常欣赏的方向。我是坚定的 Web OS 信仰者未来浏览器可以搞定所有事情结合 AI 提效不管我们喜不喜欢它都一定会存在且演进至于能不能替代程序员还需要观察但善于用 AI 的程序员肯定是更抢手的。从豆包MarsCode 开始展望一下未来软件开发场景是一件很不错的事儿推荐大家试一试。
