10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线

10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线

在以前,我们开发一个网站,动辄几千上万元,历时1-3个月+

再后来,开发一个APP,动辄5位数,历时3-6个月+

作为不懂代码的小白,要是想从零开始学习到开发一个APP,那不得学个一年半载?

在2024年初,我用ChatGPT-4开发了pluglink系统,那时全用的是对话框说需求,然后生成代码,自己思考整个架构,一个功能一个功能地与GPT对话后生成。

一年多后的今天,我用Trae IDE+Claude Code CLI仅用10天完成了VicroCode的平台,作品如下:

https://www.vicrocode.com/

支持代码快速在线部署与发布,无需复杂配置,一键上线应用。同时搭建代码交易生态,让开发者的优质代码直接转化为收益,助力个人与企业高效实现技术价值,让每一段代码都能创造商业与实用价值。

以前学编程,买一大堆书,或者去搜索引擎搜答案,想报班都不知道去哪报,只能自学,现在不懂就截图问AI,一步步教你怎么做。

告诉它想要构建一个什么样的产品,它给你出PRD、结构图、生成文件……前后不过几分钟。

图片

这是Trae的IDE界面

除了Trae,还有Cursor/Qoder/VScode等IDE工具。

整个开发过程你不需要懂代码,但是你得懂得怎么跟AI沟通。

接下来我分享一下我完成VicroCode平台的过程:

第一步:前端

前端的界面我用的是coze的AI生成应用功能,如下图:

图片

进去之后,是这样的一个界面:

图片

可以生成APP或是网页的前端,coze个人用户每月可以生成2个,团队用户可以生成10个。tonken量为1000万。

反正是够用了。

如果你是接客户单不够用的话,往下看还有其它办法。

在文本框中输入你的需求,下面是VicroCode早期的需求模板(这个也是AI生成的):项目概述项目名称 :VicroCode网站定位 :连接开发者与使用者的轻量工具交易平台技术栈 :

前端:React + TypeScript 构建,确保跨端兼容性(网页 + 小程序)

我先有一些构思之后,告诉豆包,让豆包给我生成简单的需求文档,把这个提示词再给coze。

接着,它就会一步步引导你完成任务:

图片

它会先跟你确认PRD(需求文档),这个你要认真看,不然后面生成出来不是你想要的。

接下它就会跟你确认首页风格:

图片

其实风格定下来之后就差不多了,不用在这个页面耗太长时间,因为后面你到IDE之后你还会再改的。

确认首页风格之后就生成原型图:

图片

最后生成网站后,点右上角下载源码:

图片

前端就这样完成了,大概十来分钟吧。

前端生成除了coze之外,也可以用v0,网址:

https://v0.app/

这个需要网络,可以复刻网站什么的。

如果你想要做产品去变现,可以到下面这个网站的飙升版找:

https://www.toolify.ai/zh/

同样,网络!

第二步:导入IDE工具

下载后导入IDE工具,我个人习惯用Trae,你也可以用别的IDE,下面是我常用的IDE:

图片

这些IDE你记住名字去搜索后下载吧,这里不再复述。

安装好IDE之后,导入文件夹:

图片

然后,你就可以在右边开始输入你的程序实现要求了:

图片

简单说一下,上面这个有多个功能:

图片

点击后有三个内置智能体:

图片

Chat就是只聊天不修改;

Builder就是既聊天同时也帮你执行任务;

最后一个是MCP任务。

你也可以自定义智能体。

下面是选择模型:

图片

这是国内版默认的几个模型,我常用的是GLM和Qwen

但事实上嘛,国内的这些模型因为能在这个IDE上用,所以操作体验感很好,改完代码会给你标注,可撤回等等人性化的功能,但是不足之处就是有点傻,我曾经有一次的体验就是:

用他们这几个模型(中途换了好几个)要解决一个问题,他们花了5个小时搞不定,我用Claude Code(sonnet4.5)只需要3分钟就搞定!

要不是它太贵,我真心不会用别的了。Claude Code只有CLI界面:

图片

它是在命令行输入的。

对小白来说不太友好。

本身Trae不带这个功能,这个是自己在CMD中安装的,可以找我拿手册。

接下来我会逐步创建共学营,大家一起互相学习,一起变现。

有人问我,他是小白,想学点有前景的AI技术,该往哪个方向走?

我给了两点建议:1.智能体;2.AI编程。

为什么选这两门?

AI变数很大,相比两年多以前,它现在的振幅相对小了很多,以前每周一变,现在一两个月一变,前面大模型碾压了一批初创公司,大家开始变得小心。

行业也在渐渐走向成熟。

那么从长远发展来看,智能体会继续演变,因为机器人需要这个;AI编程也会继续演变,因为超级人工智能(ASI)时代的超级智能体(Super Agents)需要其部件驱动,以后你一句话就能开发自己想要的东西,并投入到超级智能体中去运算。

你现在学这两门,机会很多,从短期上看,一方面有足够的信息差,不同渠道的价格相去千里,而且其实很多中小企业还并不具备AI开发能力,就业也相对机会更多。

从长期上看,不管AI怎么演变,智能体开发和AI开发都能为你的未来奠定基础,就像以前你学编程,短期内你能找到一份好工作或副业做自己产品,而20年后的今天,有了AI编程,你立马丢掉过去的手搓开发模式转为智能开发,你可以迅速降维打击。

你正好踩在从专业玩家向大众普及的关键节点上——就像移动互联网爆发前夜学习APP开发的那批人,他们后来成了第一批吃到红利的人。

你现在看到的自动客服、智能导购只是冰山一角,未来每个行业都会需要专属的智能体来打通服务闭环。而AI编程则是给每个人配了一个“全栈工程师搭档”,从此代码不再是用键盘敲出来的,而是用逻辑思维编织出来的。

这两项技能会形成互补飞轮,当别人还在纠结该学什么时,你已经建立了完整的AI应用能力矩阵。

现在的开发模式正在裂变成“前后端分离”的全新形态:

前端:AI编程作为“总建筑师”
不再是手写每一行代码,而是用自然语言向AI描述需求——“做一个能智能推荐穿搭的小程序,界面要清新,能根据用户库存自动搭配”。AI瞬间生成前端页面、交互逻辑,甚至自动优化用户体验。你从“码农”变成了“产品导演”,专注在创意和逻辑层面把关。

后端:智能体军团作为“执行引擎”
这里不再是笨重的单体程序,而是一个个专业智能体组成的“特种部队”:

  • 一个用户画像智能体实时分析用户偏好
  • 一个穿搭规则智能体理解时尚搭配逻辑
  • 一个库存管理智能体追踪用户已有衣物
  • 一个反馈学习智能体从每次推荐中自我优化

它们各司其职又协同作战,你作为“指挥官”,用AI编程快速构建作战指挥部(前端界面和调度逻辑),然后调度后端的智能体军团(专业能力模块)去执行具体任务。

以前需要组建团队、分工协作数月才能完成的项目,现在一个人配上AI伙伴就能在几天内跑通闭环。

Read more

Java Web 开发环境搭建:IDEA+Tomcat 安装与部署超详细教程

Java Web 开发环境搭建:IDEA+Tomcat 安装与部署超详细教程

在 Java Web 开发中,IDEA 作为主流的集成开发工具,搭配 Tomcat 轻量级 Web 服务器是入门首选。本文将基于 Java Web 基础开发要求,从 JDK 环境配置、Tomcat 安装配置、IDEA 安装、Web 项目创建,到 Tomcat 在 IDEA 中的部署运行,进行一步一图式详细讲解,零基础也能轻松上手。 一、前置准备:JDK 环境配置 Java Web 开发的核心基础是 JDK,Tomcat 和 IDEA 的运行都依赖 JDK 环境,需先完成 JDK 的安装与环境变量配置。 1. 下载与安装

前端模块化开发:从面条代码到结构化代码的蜕变

前端模块化开发:从面条代码到结构化代码的蜕变 毒舌时刻 模块化开发?不就是把代码分成几个文件嘛,有什么大不了的?我见过很多所谓的模块化代码,其实就是把一堆函数随便塞进不同的文件里,根本没有任何结构可言。 你以为把代码分成模块就万事大吉了?别天真了!如果你的模块设计不合理,反而会让代码变得更加混乱。比如那些互相依赖的模块,就像一团乱麻,让你根本理不清头绪。 为什么你需要这个 1. 代码可维护性:模块化代码结构清晰,易于理解和维护,当需要修改某个功能时,只需要修改对应的模块即可。 2. 代码复用:模块化可以让你在不同的项目中复用相同的代码,减少重复开发的工作量。 3. 团队协作:模块化可以让不同的开发者负责不同的模块,减少代码冲突和沟通成本。 4. 性能优化:模块化可以帮助你实现代码分割,减少初始加载时间,提高应用的性能。 反面教材 // 这是一个典型的面条代码 let users = []; let products = []; function fetchUsers() { fetch('https://api.example.com/

Seedance 2.0 完整操作手册:AI 视频创作进入人人都是导演时代

Seedance 2.0 完整操作手册:AI 视频创作进入人人都是导演时代

这两天,字节的AI视频模型Seedance 2.0 彻底出圈了 到处都是 Seedance 2.0 的生成AI作品 有人用它做出了电影级的追逐戏,有人用它复刻了广告大片的运镜,还有人拿它做古装穿越剧和各种武打动作片,画面精致到让人分不清是AI生成的还是真人拍的。 不夸张地说,Seedance 2.0 这波更新,直接把AI视频生成的门槛踩到了地板上。 为什么这么火?因为它解决了一个所有创作者都头疼的问题:以前AI视频只能"生成",现在终于能"控制"了。 用图片、视频、音频、文字自由组合,人人都能当导演   我们都知道,以前做 AI 视频,你只能打字描述想要什么画面,或者最多放一张图当起始帧。说实话,这种方式表达能力太有限了——你脑子里想的是电影级别的镜头感,打出来的却只是干巴巴的一段话。 现在不一样了。 它不再只是一个"文生视频&

video-subtitle-remover(VSR)-- 开源AI去字幕方案深度解析

video-subtitle-remover(VSR)-- 开源AI去字幕方案深度解析

一、从“硬字幕”说起:为什么我们需要 VSR? 在视频剪辑、二创和影视加工场景里,“硬字幕”(内嵌到画面里的字幕)一直是特别棘手的问题: * 你无法通过关闭字幕轨道来清除; * 直接裁剪会破坏画面构图; * 简单模糊/马赛克又会在画面上留下明显的“补丁”。 传统做法要么牺牲画质,要么牺牲效率。而开源项目 video-subtitle-remover(VSR),则直接把问题拉到了“AI 视频修复”的维度:用深度学习模型自动检测字幕区域,再通过图像修复算法把文字“擦掉”,并用背景自然填补。 项目核心信息(来自 README): * 功能定位:- 去除视频 / 图片中的硬字幕、文本水印 * 无损分辨率输出 * 支持自定义字幕区域,或全视频自动去除所有文本 * 技术特点:- 完全本地运行,无需调用第三方 API * 支持多种 GPU 加速(CUDA / DirectML