在了解了豆包MarsCode，也在网上看到了很多的征文，正好也想实战模拟coze生成bot的logo，就试用一下这款新的云端集成开发环境(IDE)吧，看看编译AI全栈项目的感觉怎么样。
MarsCode概览与功能
MarsCode是豆包科技推出的一款云端集成开发环境(IDE)，旨在为开发者提供一个高效、便捷且无须复杂配置即可开始编程的平台。它不仅融合了现代IDE的诸多强大特性，还充分利用了云技术的优势，让代码编辑、调试、版本控制、协作及部署等操作变得前所未有的流畅。而且还推出了一款编程助手，直接在vscode里面就可以下载这个扩展，直接开用。以至于我们不仅可以在本地上使用，还能在浏览器中使用，直接是太方便了吧。
主要功能：
-
云原生开发环境 ：MarsCode基于云基础设施构建，用户无需在本地安装任何软件，只需通过网络浏览器即可访问一个完全功能的开发环境。
-
多语言支持 ：涵盖Java、Python、JavaScript、TypeScript等多种主流编程语言，满足不同项目的开发需求。可谓是应有尽有。
-
实时协作：支持团队成员间的实时代码编辑和审查，促进远程工作和团队合作。
- 智能代码补全：借助AI技术提供智能代码建议，提高编码效率。不过代码补全的使用次数有上限。
- 一键式部署：集成DevOps工具链，简化从代码到生产环境的部署流程。
- AI提问：内嵌AI技术，有代码的解释、注释、修补等快捷功能。
- 个性化定制：用户可以根据自己的喜好和需求调整编辑器主题、字体大小等界面元素。
- 快捷键修改：这个IDE本就带有快捷键设置，考虑到每个用户的习惯，还提供了快捷键的修改。
- 具有丰富的插件：
- 编程助手：marscode不仅能在浏览器上运行，他还有一个marscode的插件，我们可以在我们经常用的vscode中（本地）下载并使用，也能用到他的AI的一系列功能。
-开箱即用：当你创建一个新的项目时，MarsCode可以自动为用户设置好开发环境，包括必要的运行时和库，用户就可以直接开始编码，而无需担心本地环境的配置问题。
-跨域问题：在开发阶段，MarsCode的云端环境可能允许更宽松的CORS（跨源资源共享）策略，以便于前后端开发的测试和调试；不过，这并不意味着在生产部署时也会有同样的宽松政策。只是在开发阶段方便一点。
项目实践
先来看看coze里面生成logo的相关功能吧
第一次使用marscode还是有点小陌生的，不过，页面布局看起来还是挺亲切的，但是好像当AI助手出来的时候，编译代码的地方不会自动换行，稍微有点难受吧。
前端开发代码
为了方便快捷，我直接调用bootstrap的css样式吧，这样我们就可以敲好多css样式了，起飞。而在写完之后，还能动用AI自动生成注释，忘记了的知识，也可以直接问。可谓是方便快捷。不仅如此吧，都不用自己的复制粘贴，AI聊天框中都有直接插入。又给我省事了。
代码片段
html
<div class="container">
<div class="row">
<div class="col-md-6 col-ma-offset-3">
<form name="logoForm">
<div class="form-group">
<label for="titleInput"> Bot名称:</label>
<input type="text" id="titleInput"
name="title"
class="form-control"
placeholder="请输入名称"
required
>
</div>
<div class="form-group">
<label for="descInput"> Bot功能介绍:</label>
<textarea name="desc" id="descInput" class="form-control" row="3"></textarea>
</div>
<div class="from-group">
<button name="loginButton" type="primary" class="btn btn-primary">生成图标</button>
</div>
</form>
</div>
<div class="col-md-6" id="result">
</div>
</div>
</div>
<script>
// 获取表单元素
const oFrom =document.forms["logoForm"]
// 为表单添加提交事件监听器
oFrom.addEventListener("submit",function(event){
// 阻止表单的默认提交行为
event.preventDefault();
// 获取标题输入框的值，并去除两端的空白
const title = this["title"].value.trim();
// 如果标题为空，退出函数
if(!title)return;
// 获取提交按钮
const btn = this["loginButton"]
// 禁用提交按钮，防止重复提交
btn.disabled=true
// 获取描述文本框的值，并去除两端的空白
const desc = this["desc"].value.trim();
// console.log(title)
// 创建一个包含标题和描述的对象
let data ={
// ES6 语法糖，当键和值相同时可以省略
title,
desc
};
// 使用 fetch 发送 POST 请求到服务器
fetch('http://localhost:3000/logo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body:JSON.stringify(data),
})
// 响应解析成 json'
.then(res=>res.json())
.then(data=>{
// 提交后启用按钮
btn.disabled=false;
console.log(data)
// 判断响应状态是否为 200
if(data.status==200){
// 获取响应中的图片 url
let url=data.url;
// 动态更新页面上显示结果的 div 内容
document.getElementById('result').innerHTML+=
`<img src="${url}" alt="">`
}
})
})
</script>感觉还可以吧目前，在写代码的过程中，也有代码提示，直接预判我的预判。而且在我们在敲代码的过程中，直接点击上的run，就会使项目跑起来，跑起来就算了，还能直接在旁边看到效果，感觉有点像指哪打哪。
后端代码
考虑到开箱即用，我都不用去安装我需要的一系列的安装包，直接导入就行了。不过考虑到只有开发阶段不用考虑，我还是加上相关的操作。
代码片段
js
// 导入 Koa 模块，用于创建 Web 应用
import Koa from 'koa';
// 导入 Router 模块，用于创建路由
import Router from 'koa-router';
// 导入 body-parser 中间件，用于处理 POST 请求
import { bodyParser } from '@koa/bodyparser';
// 导入跨域中间件，允许来自不同源的请求
import cors from '@koa/cors';
// 导入 OpenAI 模块，用于调用 OpenAI API
import OpenAI from 'openai';
// 使用提供的 API 密钥和自定义的 baseURL 创建 OpenAI 客户端
const client = new OpenAI({
apiKey: 'xxxxxxxxxxxxxxxxxxx',
baseURL: 'https://api.302.ai/v1'
});
// 创建 Koa 应用实例
const app = new Koa();
// 创建 Router 实例
const router = new Router();
// 使用 bodyParser 中间件来解析请求体
app.use(bodyParser());
// 使用 cors 中间件来处理跨域请求
app.use(cors());
// 定义 POST 请求的 '/logo' 路由处理逻辑
router.post('/logo', async (ctx) => {
// 从请求体中提取标题和描述
let { title, desc } = ctx.request.body;
// 构建提示字符串，用于发送给 OpenAI
const prompt = `
你是一个资深的设计师，
请你为标题为${title}，功能为${desc}的应用设计一款logo图标
要求高端大气上档次，能够生动形象展示出来
`;
try {
// 调用 OpenAI API 以生成图像
const response = await client.images.generate({
model: 'dall-e-3',
prompt,
n: 1,
size: '1024x1024',
});
// 设置响应状态为 200，并返回 URL
ctx.body = {
status: 200,
url: response.data[0].url,
};
} catch {
// 设置响应状态为 500，表示生成失败
ctx.body = {
status: 500,
error: '生成失败',
};
}
});
// 定义 GET 请求的 '/' 路由，用于返回 "首页" 字符串
router.get('/', ctx => {
ctx.body = '首页';
});
// 将路由中间件应用到 Koa 应用中，使其生效
app.use(router.routes());
// 启动服务器并监听 3000 端口，并在控制台输出服务器运行信息
app.listen(3000, () => {
console.log('server is running at http://localhost:3000');
});一样的，直接插入注释。安装包都不用去下载，直接引入调用就好。
项目成果
轻轻松松感觉还不错吧，就是写到后面的时候，AI补全代码的功能会有次数限制。而且生成图标的时候，响应的不是很快，等了好久，还以为是代码哪里出问题了。
体验感悟
体验MarsCode之后，我对其在云端IDE领域中的创新感到印象深刻。作为一名长期在本地开发环境的开发者，MarsCode��我看到了未来开发方式的转变------更加灵活、协作和智能。它的实时协作功能尤其让人眼前一亮，这对于那些经常需要与远程团队成员协同工作的开发者来说，是一个巨大的福音。出差或者请假的时候，那将是方便至极。
然而，尽管MarsCode提供了卓越的开发体验，但也存在一些潜在的挑战，比如对网络连接的依赖性，以及对于大型项目或特定硬件要求较高的任务，云环境可能不如本地环境那样响应迅速。此外，虽然MarsCode预装了常用库，但在处理特定或不常见的开发需求时，用户可能需要自己进行额外的配置或安装。并且，虽然能实时看到编译效果，但是有些报错还是得在浏览器上检查查看才行，毕竟他会一直运行。可能更适合有多年经验的开发者吧，我这个小白还是太菜了。
总的来说，MarsCode为开发者提供了一个全新的视角，展示了云端开发环境的潜力和未来趋势。它不仅简化了开发流程，还促进了团队之间的协作，是值得探索和尝试的创新工具。