分析网站建设前期的seo准备工作,怎么提交网站关键词,网站设计目的与规划,帝国网站管理系统前台以下是「豆包 MarsCode 体验官」优秀文章#xff0c;作者努力的小雨。 豆包 MarsCode
豆包MarsCode 编程助手支持的 IDE: 支持 Visual Studio Code 1.67.0 及以上版本#xff0c;以及 JetBrains 系列 IDE#xff0c;如 IntelliJ IDEA、Pycharm 等#xff0c;版本要求为 22… 以下是「豆包 MarsCode 体验官」优秀文章作者努力的小雨。 豆包 MarsCode
豆包MarsCode 编程助手支持的 IDE: 支持 Visual Studio Code 1.67.0 及以上版本以及 JetBrains 系列 IDE如 IntelliJ IDEA、Pycharm 等版本要求为 221.5080.210 及以上。
豆包MarsCode IDE 是一个云端 AI 集成开发环境(IDE)具备原生 AI 编程助手提供代码补全、生成、优化等功能支持多种编程语言和框架无需本地资源实现随时随地的开发。 故事起源
故事要从上周六说起。周五下班时大家都兴致勃勃冲动之下我也顾不上带电脑径直开车上高速回家急着与家里的丫头玩耍。但一到家才发现书包居然没带。但我手头上还有一些未完成的开源项目工作以及一个即将截止的征文活动这些都需要我尽快完成。面对家中没有集成开发环境IDE的电脑可愁死我了正好当时我在浏览技术社区掘金时偶然发现了豆包MarsCode IDE便立即开始使用这款在线 IDE。
用的还不错吧虽然小问题一堆但是没啥大毛病正好把我使用的体验感受写一下分享给大家。 先说体验
时间效率
在整个流程中毫无疑问使用豆包 IDE 比起先装环境要快得多。程序员们最头疼的就是环境安装特别是在老式电脑上我甚至担心会浪费时间。因此使用豆包MarsCode IDE 的直观感受是它快速而稳定。整个环境安装再加上熟悉豆包MarsCode IDE总共花了不到一个小时就可以正常启动项目其中大约 30 分钟用在了配置 mvn 依赖上。这个过程有点坑难怪会耽误时间。但如果是一个正常的项目我相信在 30 分钟内就能搞定。
代码质量
其次再谈谈我对 AI 功能的使用体验。实际上最常用的是代码注释因为大多数程序员包括我在内不太喜欢写注释。使用云端 IDE 平台带来的便利在于首先无需安装额外的编程助手其次通过 AI 悬挂图标直接选中问题或代码段能快速解决困扰。这样做非常方便而且最重要的是可以提升代码质量一方面减少了对变量名的纠结另一方面也让代码注释变得更为到位。 深度体验豆包 MarsCode IDE
以下是整体流程的详细描述以确保信息清晰和逻辑连贯防止大家头脑混乱 登录豆包 MarsCode IDE 工作台 —— 导入 GitHub 仓库 —— 选择开发环境模板 —— 配置项目 —— 运行项目 —— 体验项目 —— 代码提交 spring-ai
使用云端 IDE 的主要优势之一是其适用于个人开发者而大公司通常有自己的代码仓库。对于个人开发者而言选择云端 IDE 编写开源项目再合适不过特别是豆包 IDE 提供的资源分配非常充足。这意味着不必担心本地环境可能导致的宕机、电脑死机或磁盘损坏等问题。
然而对我来说稳定的网络连接是最关键的因素。在家里访问 Github 时经常面临网络连接问题或速度极慢的情况这对开发效率有显著影响。因此我决定通过编写我的开源项目【spring-ai-demo】来深入体验豆包 IDE 的功能和性能。
快速导入 GitHub 仓库
在开始之前请登录豆包MarsCode IDE 工作台并导入我们的 GitHub 仓库项目操作步骤如下所示 在进行 GitHub 授权后你可以访问自己的仓库项目列表。在选择要开发的项目时系统会自动识别适用的语言模板例如如果你选择的项目是 Java 的话它会自动识别为 Java 模板。 tips单个账号在豆包MarsCode IDE 上创建的项目数量不得超过 10 个 当你导入创建项目时速度非常快基本可以在几秒钟内完成而且还会自动识别为 Maven 项目。 依赖环境
拿到新项目后我们的操作步骤与通常一样唯一的不同是无需搭建运行环境只需下载依赖即可。更方便的是我们可以直接从阿里云仓库下载依赖无需单独配置 mvn 的 setting 文件这一点特别贴心。
这一步直接报错了。按照官方的依赖包下载的话在阿里云镜像中是找不到的具体如下所示 tips在 pom 中指定了 repositories 仓库地址也不会生效可以认为只能去阿里云仓库 当即使指定了下载包仓库仍然无法成功时我出于好奇查看了阿里的镜像发现其不存在。进一步调查后发现阿里云的镜像 groupid 已经更改。因此我也需要相应地进行修改 修改后终于成功实现了正常的下载功能但我仍不清楚是否损失了哪些功能。这可能被视为一个缺陷因为我的项目是开源的。如果某些小公司内部依赖于私有仓库的包那么他们可能会遇到问题。 启动项目
在启动项目时这里会持续提示各种配置项只需直接启用它们即可顺利完成启动操作。 确保在启动任何 maven 项目之前务必确保项目已成功编译完成否则可能会导致出现各种文件找不到的错误。 同样地你也可以在这里配置适合自己习惯的操作方式
如clean install -DskipTeststrue 体验项目
启动成功后将会显示相应的路径及其所监听的端口信息让我们来查看一下吧。 这里是我们项目真正使用的端口监听。如果需要详细了解请查看项目配置文件中的相关信息。好的让我们进行访问。 当我们查看 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 聊天交互页面
前几天有粉丝在评论区建议增加一个前端交互页面认为这会使体验更加丰富于是我们便安排了这个任务。我们主要探索了两种不同的前端页面设计一种是采用豆包MarsCode 的 React 模版另一种是直接使用 HTML 模版还有一种特殊的 Python 模版。好的言归正传让我们首先来探索 React 模版。
React
项目模版创建
我掌握了一些 HTML、JavaScript 和 CSS 的基本操作对 React 框架几乎没有经验。因此我会使用 IDE 提供的模板来创建项目而不必过多关注环境依赖直接启动即可成功。好的那么让我们开始吧。 当你进入这个页面时你会发现官方提供了一份贴心的 README 文件可以帮助你快速了解如何启动这个程序。 UI 交互
启动结束后我浏览了一下页面但我对这个东西基本上一头雾水页面上的元素我都不认识。好的我想通过 AI 来了解一下看看它是否能够满足我的需求。 tips这里注意下问问题的时候一定要选择修改的页面如果选的不对AI 也是无法直接回答问题的。 生成的结果看起来确实不错但幸好我有一些前端基础知识因此能够发现生成的属性有问题。经过修改后问题得以解决。 接着立即观察生成的结果。 tips这里发现个问题webview 无法显示 alter 弹窗信息不过复制出来在浏览器中使用即可无伤大雅 好的我们已经确定了基本组件。剩下的优化工作我们稍后再进行先完成后优化师我开发的原则。接下来要做的是生成按钮点击后要跳转的页面。让 AI 来帮我整理一下吧。 好吧生成的内容一直报错而且他们还不给修复。 那么我们可以考虑另一种解决方案。考虑到这是一个框架应该有专门的组件可以直接完成这项任务特别是在当今 LLM 流行的环境下聊天页面也正迎来了蓬勃发展。 ChatSDK
找了半天确实没找到满意的解决方案。于是我向各位前端大佬请教了一下毕竟我在前端框架方面几乎没有经验。他们根据我的需求推荐了一个非常强大的一站式 UI 解决方案——阿里的 chatSDK你可以在以下地址找到它
chatbot.console.aliyun.com/ChatSDK#/sd… 这就是我想要的结果不过在配置的过程中遇到了很多问题因为我对此一无所知。尽管如此我仍然坚持学习并逐步掌握。幸运的是通过查阅官方文档我得以解决了这些困惑即便我的 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 与豆包MarsCode 一样是属于一家公司的产品所以成为了一个优选的选择。
这里唯一的不足是社区问题太少当我遇到错误时很难找到解决方法只能自己苦苦探索甚至要通过 Google 搜索来解决。有时甚至连关键字【Rsbuild问题】都无法搜索到相关信息。这方面值得进一步优化。
其实一句话即可。我们去看下去 设置成功后我们将按照阿里提供的 SDK 快速开发文档进行配置然后启动应用程序进行测试 可以看到所有必要的内容已经成功添加到系统中。接下来我们将继续开发以实现跳转到聊天页面的功能。首先我们需要完善各种路由的配置确保一切就绪后再继续进行跳转功能的开发。这一步骤只需要完成一个小组件即可。
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import ChatHome from ../components/chat;
import { BrowserRouter as Router, Routes, Route } from react-router-dom
const root ReactDOM.createRoot(document.getElementById(root)!);
root.render(React.StrictMode RouterRoutesRoute path/talk element{ChatHome /}/RouteRoute path/ element{App /}/Route/Routes/Router/React.StrictMode,
);当需要添加链接时剩下的任务就是在合适的位置插入超链接。可以简单地使用代码自动补全完成这个任务。 当最后成功集成进来时所带来的效果如下所示 优化后端
接下来我们将继续对接之前我们开发的 spring-ai 项目以实现一个真正交互式的界面。 那么为什么不能直接使用 record 返回呢因为前端不仅仅支持文本还有其他方案。所以还是自己写吧。总之目前即便是 AI 也可能会出错即使指定返回特定格式也不一定正确。
具体修改后如下
PostMapping(/ai)
ChatDataPO generationByText(RequestParam(userInput) String userInput) {String content this.myChatClientWithSystem.prompt().user(userInput).call().content();log.info(content: {}, content);ChatDataPO chatDataPO ChatDataPO.builder().code(text).data(ChildData.builder().text(content).build()).build();;return chatDataPO;
}
在启动后端的 spring-ai-demo 项目后我们可以复制 networking 目录下的 URL 路径。这样做是为了确保前后端项目能够同时成功启动。
接下来需要对前端发送的 API 接口信息进行修改和优化。 return {url: https://jtdedyc1-kbb5pits-q02qbpq08o1p.c1.mcprev.cn/ai,data: {userInput: msg.content.text,// sessionId: sessionId,},method: POST};
}
效果演示
前端项目启动完成后我们可以继续前往演示其效果。 Python
我们再创建一个新的项目这次以 Python 为模板为了确保项目从一开始就符合我们的需求我们需要对初始模板进行一些调整。首先我们将删除原有的代码因为它们仅是构建一个基础的 Python HTTP 服务项目的基础而并非我们项目所需的具体功能。
我们要以 Streamlit 这一强大的工具为主Streamlit 不仅以其强大的功能和易用性著称还能让我们以前所未有的速度构建出具有流式打字机效果的聊天应用。
对于那些像我一样对复杂的前端代码感到畏惧的开发者来说Streamlit 无疑是一个巨大的福音。它简化了开发流程让我们能够专注于应用的核心功能和逻辑而无需深陷前端开发。 streamlit
在这次实操中我们将跳过那些深奥的理论知识将全部的注意力集中在实际的操作和应用上。
首先我们需要确保基础环境已经搭建好。幸运的是基础环境的搭建工作已经顺利完成我们不需要再为此花费额外的时间和精力。接下来我们需要做的就是安装一些必要的开发环境即可 pip install streamlit 在进行项目开发的过程中我们常常会遇到需要从外部获取各种资源和依赖的情况。豆包MarsCode IDE 默认已经不再是官方源了而是国内的仓库。
接下来我们将进行一个简单的测试以验证我们的环境配置是否正确。首先我们需要将示例代码复制到我们的开发环境中。启动后检查是否能够正常访问页面是否显示预期的内容。
import streamlit as st
import random
import time# Streamed response emulator
def response_generator():response random.choice([Hello there! How can I assist you today?,Hi, human! Is there anything I can help you with?,Do you need help?,])for word in response.split():yield word time.sleep(0.05)st.title(Simple chat)# Initialize chat history
if messages not in st.session_state:st.session_state.messages []# Display chat messages from history on app rerun
for message in st.session_state.messages:with st.chat_message(message[role]):st.markdown(message[content])# Accept user input
if prompt : st.chat_input(What is up?):# Add user message to chat historyst.session_state.messages.append({role: user, content: prompt})# Display user message in chat message containerwith st.chat_message(user):st.markdown(prompt)# Display assistant response in chat message containerwith st.chat_message(assistant):response st.write_stream(response_generator())# Add assistant response to chat historyst.session_state.messages.append({role: assistant, content: response})streamlit run main.py 在启动Streamlit项目的过程中我们直接选择使用命令行工具来执行而不是依赖于图形界面的“运行”按钮。 后端优化
我们之前的文章开发过程基于对接大模型的。而这一次我们计划采用Spring-AI后台进行对接以开发实时交互聊天功能。
首先我们需要对代码进行相应的修改。
PostMapping(/ai-stream)
FluxString generationByStream(RequestParam(userInput) String userInput) {FluxString output chatClient.prompt().user(userInput).stream().content();return output;
}代码生成
启动成功后我们要求AI协助生成请求代码。 这段代码拿过来后需要简单修改一下因为我们需要走流式回答并不是阻塞式的调用。最后代码如下
def response_generator(prompt):url https://fq5jh3sk-kr95txxo-prhof0hgd4fs.c1.mcprev.cn/ai-streamurl ?userInput promptheaders {Accept: */*,Content-Type: application/x-www-form-urlencoded}# 发送POST请求response requests.get(url, headersheaders, streamTrue)# print(response.text)# 处理流式响应if response.status_code 200:# 获取可读流for chunk in response.iter_content(chunk_size1024):if chunk:# 在这里处理你的业务逻辑例如打印或者其他操作yield chunk.decode(utf-8) # 假设服务器返回UTF-8编码的文本else:print(fError fetching data: {response.status_code})tips这里需要注意的是请不要在后端调用其他豆包启动的项目因为这样可能会被系统拦截。不像前端页面那样可以直接跳转后端如果直接调用 API 是行不通的。因此我在本地启动了一次联调。 演示效果
Python的实现相当简单我们现在来看一下它的调用结果 好的我们这期更新工作已经全部完成。原本还有一部分关于编写HTML模板的内容要完成不过我使用了一下HTML模版总的来说除了上文提到的一些优缺点外目前没有其他需要特别注意的地方。因此我决定不再进一步详细讨论HTML模板的编辑工作。
还是上面那句话用起来是可以的特别是在开源项目中。它能够快速实现功能无需额外的环境配置。当然我希望豆包MarsCode IDE 在未来能够进一步改进毕竟在使用了Java、Python、React、HTML模版一整套下来会遇到一些小问题。但这些问题并不影响个人开发的使用体验。
总结
豆包MarsCode 是现代开发者的利器其集成了强大的 AI 功能和云端IDE极大地提升了开发效率和代码质量。通过支持多种主流编程语言和IDE豆包 MarsCode 不仅简化了环境配置过程还提供了智能代码补全、单元测试生成、问题修复等多项AI驱动的功能使开发者能够专注于创造性工作而非繁琐的设置。
在实际使用中我深刻体验到豆包MarsCode 的便利。无论是快速导入GitHub仓库、自动识别项目语言模板还是轻松配置和启动项目它都展现了出色的稳定性和高效性。与传统的本地IDE相比豆包MarsCode 的云端特性更加灵活使我能够随时随地进行开发无需担心硬件或网络环境的限制。
特别是在代码质量的提升方面豆包MarsCode的AI功能展现了其独特优势。自动代码注释、智能问题解决建议以及对话式AI视图的应用不仅简化了日常开发中的繁琐任务还显著提高了代码的可读性和可维护性。这些功能不仅让我在忙碌的开发过程中节省了大量时间还使我的开发工作更加高效和愉悦。
总的来说豆包MarsCode 不仅是一个工具更是现代软件开发中不可或缺的助手。它的出现不仅推动了开发工具的技术进步更为开发者们带来了全新的开发体验和工作方式。期待未来豆包 MarsCode在AI驱动开发领域继续创新为全球开发者提供更多实用且强大的功能。
