云端IDE如何重界说开发体验

豆包 MarsCode 是一个集成了AI功能的编程助手和云端IDE，旨在提高开发效率和质量。它支持多种编程语言和IDE，提供智能代码补全、代码解释、单元测试生成和问题修复等功能，同时具备AI对话视图和开发工具。

豆包 MarsCode

豆包 MarsCode 编程助手支持的 IDE: 支持Visual Studio Code 1.67.0及以上版本，以及JetBrains系列IDE，如IntelliJ IDEA、Pycharm等，版本要求为221.5080.210及以上。
豆包 MarsCode IDE 是一个云端 AI 集成开发情况(IDE)，具备原生 AI 编程助手，提供代码补全、生成、优化等功能，支持多种编程语言和框架，无需本地资源，实现随时随地的开发。
豆包 MarsCode官方文档地址：https://docs.marscode.cn/introduction
故事起源

故事要从上周六说起。周五下班时大家都兴致勃勃，冲动之下，我也顾不上带电脑，径直开车上高速回家，急着与家里的丫头玩耍。但一到家才发现，书包居然没带。但我手头上还有一些未完成的开源项目工作，以及一个即将停止的征文活动，这些都必要我尽快完成。面对家中没有集成开发情况（IDE）的电脑，可愁死我了，正好当时我在欣赏技术社区掘金时，偶然发现了豆包 MarsCode IDE，便立即开始使用这款在线IDE。
用的很不错，正好把我使用的体验感受写一下分享给大家。
先说体验

时间效率

在整个流程中，毫无疑问，使用豆包 IDE 比起先装情况要快得多。程序员们最头疼的就是情况安装，特别是在老式电脑上，我甚至担心会浪费时间。因此，使用豆包 IDE 的直观感受是它快速而稳定。整个情况安装再加上认识豆包 IDE，总共花了不到一个小时就可以正常启动项目，其中约莫30分钟用在了配置mvn依赖上。这个过程有点坑，难怪会耽误时间。但如果是一个正常的项目，我相信在30分钟内就能搞定。
代码质量

其次，再谈谈我对AI功能的使用体验。实际上，最常用的是代码解释，因为大多数程序员包括我在内，不太喜欢写解释。使用云端IDE平台带来的便利在于，首先无需安装额外的编程助手；其次，通过AI悬挂图标直接选中问题或代码段，能快速解决困扰。如许做非常方便，而且最重要的是可以提升代码质量：一方面减少了对变量名的纠结，另一方面也让代码解释变得更为到位。
深度体验豆包 MarsCode IDE

以下是团体流程的详细描述，以确保信息清晰和逻辑连贯，防止大家头脑杂乱：

登录豆包 MarsCode IDE 工作台 ——> 导入 GitHub 堆栈 ——> 选择开发情况模板 ——> 配置项目 ——> 运行项目 ——> 体验项目 ——> 代码提交

spring-ai

使用云端 IDE 的重要优势之一是其适用于个人开发者，而大公司通常有自己的代码堆栈。对于个人开发者而言，选择云端 IDE 编写开源项目再合适不过，特别是豆包 IDE 提供的资源分配非常富足。这意味着不必担心本地情况可能导致的宕机、电脑死机或磁盘损坏等问题。
然而，对我来说，稳定的网络连接是最关键的因素。在家里，访问 Github 时常常面临网络连接问题或速率极慢的情况，这对开发效率有显著影响。因此，我决定通过编写我的开源项目【spring-ai-demo】来深入体验豆包 IDE 的功能和性能。
快速导入GitHub 堆栈

请访问豆包 MarsCode AI IDE 的官方网站：https://www.marscode.cn/dashboard
在开始之前，请登录豆包 MarsCode IDE 工作台，并导入我们的GitHub堆栈项目，操纵步骤如下所示：

在举行 GitHub 授权后，你可以访问自己的堆栈项目列表。在选择要开发的项目时，体系会自动识别适用的语言模板，比方，如果你选择的项目是 Java 的话，它会自动识别为 Java 模板。

tips：单个账号在豆包 MarsCode IDE 上创建的项目数量不得超过 10 个

当你导入创建项目时，速率非常快，根本可以在几秒钟内完成，而且还会自动识别为 Maven 项目。

依赖情况

拿到新项目后，我们的操纵步骤与通常一样，唯一的不同是无需搭建运行情况，只需下载依赖即可。更方便的是，我们可以直接从阿里云堆栈下载依赖，无需单独配置mvn的setting文件，这一点特别贴心。
这一步直接报错了。按照官方的依赖包下载的话，在阿里云镜像中是找不到的，具体如下所示：

tips：在pom中指定了repositories堆栈地址，也不会生效，可以以为只能去阿里云堆栈

当即使指定了下载包堆栈，仍旧无法成功时，我出于好奇查看了阿里的镜像，发现其不存在。进一步观察后发现，阿里云的镜像groupid已经更改。因此，我也必要相应地举行修改：

修改后，终于成功实现了正常的下载功能，但我仍不清晰是否损失了哪些功能。这可能被视为一个缺陷，因为我的项目是开源的。如果某些小公司内部依赖于私有堆栈的包，那么他们可能会遇到问题。
启动项目

在启动项目时，这里会持续提示各种配置项，只需直接启用它们，即可顺遂完成启动操纵。

确保在启动任何maven项目之前，务必确保项目已成功编译完成，否则可能会导致出现各种文件找不到的错误。

同样地，你也可以在这里配置适合自己风俗的操纵方式：如clean install -DskipTests=true

体验项目

启动成功后，将会表现相应的路径及其所监听的端口信息，让我们来查看一下吧。

这里是我们项目真正使用的端口监听。如果必要详细相识，请查看项目配置文件中的相关信息。好的，让我们举行访问。

当我们查看 web-view 时，请将输入的路径转换成对应的路径。举例来说，如果我直接访问 swagger-ui，那么输入的路径就是 doc.html。

别的，除了这些路径，我只需在此页面上点击即可查看和操纵剩余的所有路径。

固然，如果你不盼望在这里使用webview，也可以复制路径并在欣赏器中打开以访问。总体而言，项目启动的根本情况依赖操纵通常可以在30分钟内完成。

在这里，不仅可以根据相应的路径找到对应的控制器，还可以观察到垃圾回收器的工作状态，这使得这个视图变得非常有效和优秀。

当鼠标悬停在注解上时，甚至可以表现出本类中的对象是如何被注入的。这对于研究源码来说也是非常有效的功能。

小操纵的一项优化是支持文件重命名时，同时修改其中的类名。

编辑项目

完成了上述根本操纵后，接下来我们将开始本日的主题：继续维护我的开源项目spring-ai-demo。本日我们将深入探讨函数调用。
大型语言模型（LLM）在练习完成后被冻结，导致其知识陈旧，并限定了其访问和修改外部数据的能力。
为相识决这些问题，函数调用机制应运而生。这种机制允许你注册自界说函数，将大型语言模型连接到外部体系的API。这些外部体系可以或许为LLM提供及时数据，并代表它实行数据处置惩罚操纵。
Spring AI简化了支持函数调用所需的代码编写。它处置惩罚了函数调用的对话流程，使你可以或许轻松地注册函数。你只需提供函数的Bean名称作为a，然后在提示选项中选择该名称以激该死函数。别的，您还可以在单个提示中界说和引用多个函数。

• 实行聊天哀求及函数界说信息的处置惩罚，比方解释模型何时应该调用函数以及函数的输入参数模式。
  
• 模型决定调用函数时，会传递输入参数给相应的函数，并将输出结果返回给模型。
  
• Spring AI 管理此对话流程，将函数调用分发给适当的函数，并将结果传送回模型。
  
• 模型可以实行多个函数调用以获取所需的所有信息。
  
• 一旦网络到所有必要信息，模型将生成响应。
  

补全代码

这里先快速写一个入口，tab补全代码

报错修复

在复制粘贴过程中，IDE并不会自动添加相关的依赖包。因此，每当遇到类报错时，如果IDE提供了快速修复选项，请优先点击实行修复操纵；如果没有快速修复选项，则建议参考AI fix的建议举行手动修复。

代码解释

这个功能简直是太赞了，我真的很喜欢它。因为有时间实在懒得打字，但在线IDE可以根据我的输入自动明白代码的意图，并且根据我的简短提示自动生成后续的解释。这对于我这种懒人来说简直是福音啊！就看看它的结果吧。

AI 问答

有任何报错，无论是来自控制台还是其他地方，他都可以或许利用智能问答举行优化息争决。

同样也有历史记录举行维护，如许可以方便回顾和查看之前的错误记录。在记录问题时，根据解决方法详细描述，以确保下次不会再犯同样的错误。

最后重新启动项目即可。尽管已经举行了函数回调，但由于地址传错，无法避免。毕竟这些API都由开发者自行管理，最初我以为是官方的问题，但询问后发现与官方无关。

tips：这里注意下每个路径都是有时间限定的，以是如果长时间不刷新，路径也将会失效，点击刷新即可。url路径是不会改变的

提交变更

当你完成开发并维护相关代码之后，可以直接使用此接口举行Git提交，从而实现一站式的服务。

前端UI聊天交互页面

前几天有粉丝在评论区建议增长一个前端交互页面，以为这会使体验更加丰富，于是我们便安排了这个任务。我们重要探索了两种不同的前端页面设计：一种是采用豆包的React模版，另一种是直接使用HTML模版，还有一种特殊的Python模版。好的，言归正传，让我们首先来探索React模版。
React

项目模版创建

我掌握了一些HTML、JavaScript和CSS的根本操纵，对React框架险些没有经验。因此，我会使用IDE提供的模板来创建项目，而不必过多关注情况依赖，直接启动即可成功。好的，那么让我们开始吧。

当你进入这个页面时，你会发现官方提供了一份贴心的README文件，可以帮助你快速相识如何启动这个程序。

UI交互

启动竣事后，我欣赏了一下页面，但我对这个东西根本上一头雾水，页面上的元素我都不认识。好的，我想通过AI来相识一下，看看它是否可以或许满意我的需求。

tips：这里注意下，问问题的时间，一定要选择修改的页面，如果选的不对，AI也是无法直接回答问题的。

生成的结果看起来确实不错，但幸好我有一些前端基础知识，因此可以或许发现生成的属性有问题。经过修改后，问题得以解决。

接着立即观察生成的结果。

tips：这里发现个问题，webview无法表现alter弹窗信息，不过复制出来在欣赏器中使用即可，无伤风雅

好的，我们已经确定了根本组件。剩下的优化工作我们稍后再举行，先完成后优化师我开发的原则。接下来要做的是生成按钮点击后要跳转的页面。让AI来帮我整理一下吧。

好吧，生成的内容一直报错，而且他们还不给修复。

那么我们可以思量另一种解决方案。思量到这是一个框架，应该有专门的组件可以直接完成这项任务，特别是在当今LLM流行的情况下，聊天页面也正迎来了蓬勃发展。

ChatSDK

找了半天，确实没找到满意的解决方案。于是我向各位前端大佬请教了一下，毕竟我在前端框架方面险些没有经验。他们根据我的需求推荐了一个非常强大的一站式UI解决方案——阿里的chatSDK，你可以在以下地址找到它：
https://chatbot.console.aliyun.com/ChatSDK#/sdk

这就是我想要的结果，不过在配置的过程中遇到了很多问题，因为我对此一无所知。尽管如此，我仍旧坚持学习并逐步掌握。幸运的是，通过查阅官方文档，我得以解决了这些狐疑，即便我的AI助手也跟我一样陷入了困境。

Rsbuild

没错，就是指的rsbuild。固然文档写得很详细，但我还是去看了如何设置index.html。结果发现操纵很简单，只必要简单配置一下就行。可能是因为rsbuild并不像webpack那样流行，以是网上关于它的配置信息不多，我一直找不到相关的资料。

这里来详细介绍一下rsbuild。为什么在React项目中选择自动集成rsbuild，而不是像市面上流行的webpack等其他工具呢？
Rsbuild是一个基于Rspack的高性能构建工具，它不仅提供丰富的构立功能和优化的配置选项，还支持多种前端UI框架。Rsbuild的特点包括出色的性能表现、简便的配置方式、丰富的插件生态体系、稳定可靠的构建产物以及与各种前端框架的无缝兼容性。与类似的工具如Vite、Create React App和Vue CLI相比，Rsbuild不仅可以或许实现更高效的构建过程，而且可以或许更好地融入复杂的生态体系中。

Rsbuild，由字节跳动推出，旨在构建一个开放的技术生态体系，以积极推动前端技术的进步和发展。
因此，首先，Rsbuild 拥有更高的构建性能，可以或许提供比基于 Webpack 的 Create React App 和 Vue CLI 等工具高达 5 到 10 倍的效率，同时还具备更为轻量的依赖体积。其次，Rsbuild 与豆包一样是属于一家公司的产物，以是成为了一个优选的选择。
这里唯一的不足是社区问题太少，当我遇到错误时，很难找到解决方法，只能自己苦苦探索，甚至要通过Google搜索来解决。有时甚至连关键字【Rsbuild+问题】都无法搜索到相关信息。这方面值得进一步优化。
实在一句话即可。我们去看下去

设置成功后，我们将按照阿里提供的SDK快速开发文档举行配置，然后启动应用程序举行测试。

可以看到，所有必要的内容已经成功添加到体系中。接下来，我们将继续开发以实现跳转到聊天页面的功能。首先，我们必要美满各种路由的配置，确保统统就绪后再继续举行跳转功能的开发。这一步骤只必要完成一个小组件即可。

1. import React from 'react';
2. import ReactDOM from 'react-dom/client';
3. import App from './App';
4. import ChatHome from '../components/chat';
5. import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
6. const root = ReactDOM.createRoot(document.getElementById('root')!);
7. root.render(
8.   <React.StrictMode>
9.     <Router>
10.         <Routes>
11.             <Route path='/talk' element={<ChatHome />}></Route>
12.             <Route path='/' element={<App />}></Route>
13.         </Routes>
14.     </Router>
15.   </React.StrictMode>,
16. );

复制代码

当必要添加链接时，剩下的任务就是在合适的位置插入超链接。可以简单地使用代码自动补全完成这个任务。

当最后成功集成进来时，所带来的结果如下所示：

优化后端

接下来，我们将继续对接之前我们开发的spring-ai项目，以实现一个真正交互式的界面。

那么为什么不能直接使用record返回呢？因为前端不仅仅支持文本，还有其他方案。以是还是自己写吧。总之，目前即便是AI也可能会堕落，即使指定返回特定格式，也不一定正确。
具体修改后如下：

1. @PostMapping("/ai")
2. ChatDataPO generationByText(@RequestParam("userInput")  String userInput) {
3.     String content = this.myChatClientWithSystem.prompt()
4.                 .user(userInput)
5.                 .call()
6.                 .content();
7.     log.info("content: {}", content);
8.     ChatDataPO chatDataPO = ChatDataPO.builder().code("text").data(ChildData.builder().text(content).build()).build();;
9.     return chatDataPO;
10. }

复制代码

在启动后端的spring-ai-demo项目后，我们可以复制networking目次下的URL路径。如许做是为了确保前后端项目可以或许同时成功启动。

接下来必要对前端发送的 API 接口信息举行修改和优化。

1. send: function send(msg) {
2.       let sessionId = 'M9u913BFyxIuTdRv7O73nx9SfkWgerhk';
4.       return {
5.         url: 'https://jtdedyc1-kbb5pits-q02qbpq08o1p.c1.mcprev.cn/ai',
6.         data: {
7.           userInput: msg.content.text,
8.           // sessionId: sessionId,
9.         },
10.         method: 'POST'
11.       };
12.     }

复制代码

结果演示

前端项目启动完成后，我们可以继续前往演示其结果。

Python

我们再创建一个新的项目，这次以Python为模板，为了确保项目从一开始就符合我们的需求，我们必要对初始模板举行一些调整。首先，我们将删除原有的代码，因为它们仅是构建一个基础的Python HTTP服务项目标基础，而并非我们项目所需的具体功能。
我们要以Streamlit这一强大的工具为主，Streamlit不仅以其强大的功能和易用性著称，还能让我们以前所未有的速率构建出具有流式打字机结果的聊天应用。、
对于那些像我一样对复杂的前端代码感到畏惧的开发者来说，Streamlit无疑是一个巨大的福音。它简化了开发流程，让我们可以或许专注于应用的核心功能和逻辑，而无需深陷前端开发。
streamlit

在这次实操中，我们将跳过那些深奥的理论知识，将全部的注意力会合在实际的操纵和应用上。
首先，我们必要确保基础情况已经搭建好。幸运的是，基础情况的搭建工作已经顺遂完成，我们不必要再为此耗费额外的时间和精力。接下来，我们必要做的就是安装一些必要的开发情况即可：

pip install streamlit

在举行项目开发的过程中，我们常常会遇到必要从外部获取各种资源和依赖的情况。豆包IDE默认已经不再是官方源了，而是国内的堆栈。、
接下来，我们将举行一个简单的测试，以验证我们的情况配置是否正确。首先，我们必要将示例代码复制到我们的开发情况中。启动后，检查是否可以或许正常访问，页面是否表现预期的内容。

1. import streamlit as st
2. import random
3. import time
5. # Streamed response emulator
6. def response_generator():
7.     response = random.choice(
8.         [
9.             "Hello there! How can I assist you today?",
10.             "Hi, human! Is there anything I can help you with?",
11.             "Do you need help?",
12.         ]
13.     )
14.     for word in response.split():
15.         yield word + " "
16.         time.sleep(0.05)
18. st.title("Simple chat")
20. # Initialize chat history
21. if "messages" not in st.session_state:
22.     st.session_state.messages = []
24. # Display chat messages from history on app rerun
25. for message in st.session_state.messages:
26.     with st.chat_message(message["role"]):
27.         st.markdown(message["content"])
29. # Accept user input
30. if prompt := st.chat_input("What is up?"):
31.     # Add user message to chat history
32.     st.session_state.messages.append({"role": "user", "content": prompt})
33.     # Display user message in chat message container
34.     with st.chat_message("user"):
35.         st.markdown(prompt)
37.     # Display assistant response in chat message container
38.     with st.chat_message("assistant"):
39.         response = st.write_stream(response_generator())
40.     # Add assistant response to chat history
41.     st.session_state.messages.append({"role": "assistant", "content": response})

复制代码

streamlit run main.py

在启动Streamlit项目标过程中，我们直接选择使用命令行工具来实行，而不是依赖于图形界面的“运行”按钮。
后端优化

我们之前的文章开发过程基于对接大模型的。而这一次，我们计划采用Spring-AI后台举行对接，以开发及时交互聊天功能。
首先，我们必要对代码举行相应的修改。

1. @PostMapping("/ai-stream")
2. Flux<String> generationByStream(@RequestParam("userInput") String userInput) {
3.     Flux<String> output = chatClient.prompt()
4.             .user(userInput)
5.             .stream()
6.             .content();
7.     return output;
8. }

复制代码

代码生成

启动成功后，我们要求AI协助生成哀求代码。

这段代码拿过来后必要简单修改一下，因为我们必要走流式回答，并不是阻塞式的调用。最后代码如下：

1. def response_generator(prompt):
2.     url = 'https://fq5jh3sk-kr95txxo-prhof0hgd4fs.c1.mcprev.cn/ai-stream'
3.     url += '?userInput=' + prompt
4.     headers = {
5.         'Accept': '*/*',
6.         'Content-Type': 'application/x-www-form-urlencoded'
7.     }
9.     # 发送POST请求
10.     response = requests.get(url, headers=headers, stream=True)
12.     # print(response.text)
13.     # 处理流式响应
14.     if response.status_code == 200:
15.         # 获取可读流
16.         for chunk in response.iter_content(chunk_size=1024):
17.             if chunk:
18.                 # 在这里处理你的业务逻辑，例如打印或者其他操作
19.                 yield chunk.decode('utf-8')  # 假设服务器返回UTF-8编码的文本
20.     else:
21.         print(f"Error fetching data: {response.status_code}")

复制代码

tips：这里必要注意的是，请不要在后端调用其他豆包启动的项目，因为如许可能会被体系拦截。不像前端页面那样可以直接跳转，后端如果直接调用 API 是行不通的。因此，我在本地启动了一次联调。

演示结果

Python的实现相称简单，我们现在来看一下它的调用结果：

总结

豆包 MarsCode 是当代开发者的利器，其集成了强大的AI功能和云端IDE，极大地提升了开发效率和代码质量。通过支持多种主流编程语言和IDE，豆包 MarsCode 不仅简化了情况配置过程，还提供了智能代码补全、单元测试生成、问题修复等多项AI驱动的功能，使开发者可以或许专注于创造性工作而非繁琐的设置。
在实际使用中，我深刻体验到豆包 MarsCode 的便利。无论是快速导入GitHub堆栈、自动识别项目语言模板，还是轻松配置和启动项目，它都显现了出色的稳定性和高效性。与传统的本地IDE相比，豆包 MarsCode 的云端特性更加灵活，使我可以或许随时随地举行开发，无需担心硬件或网络情况的限定。
特别是在代码质量的提升方面，豆包 MarsCode 的AI功能显现了其独特优势。自动代码解释、智能问题解决建议，以及对话式AI视图的应用，不仅简化了一样平常开发中的繁琐任务，还显著提高了代码的可读性和可维护性。这些功能不仅让我在繁忙的开发过程中节省了大量时间，还使我的开发工作更加高效和愉悦。
总的来说，豆包 MarsCode 不仅是一个工具，更是当代软件开发中不可或缺的助手。它的出现不仅推动了开发工具的技术进步，更为开发者们带来了全新的开发体验和工作方式。期待未来豆包 MarsCode 在AI驱动开发范畴继续创新，为全球开发者提供更多实用且强大的功能。
我是努力的小雨，一名 Java 服务端码农，潜心研究着 AI 技术的奥秘。我热爱技术交流与分享，对开源社区充满热情。身兼掘金优秀作者、腾讯云内容共创官、阿里云专家博主、华为云云享专家等多重身份。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。