本文从一个需求出发全程记录如何进行全栈开发。需留意, 本文重点在于记述以及分享一回运用多种人工智能工具, 开展全栈开发的进程, 化解在某些情形下想做某事, 却因资源受限而受阻的状况, 故而要多去体验并分享一众人工智能工具, 以此助力个人拓展职责范畴, 以供学习与分享之用。于生产环境或者业务开发流程里需谨慎使用, 得仔细研读文章内的各类流程以及限制。本文保证在整个过程中没有任何一个人工智能大模型受到损害的情况, 唯有我, 在种种调试期间情绪崩溃。一、背景我们在现实里会存在着一些基础平台的需求, 平台经过长时间运维后, 能察觉到不少具备价值的地方, 像要持续去提供新的功能模块这一类, 都得逐步地进行打磨, 然而一旦关联到设计、前端等协同资源, 事情就会陷入困境, 许多想要开展的事情, 没办法去进行, 或者得拖延很长时间, 特别是在年底业务处于高峰期的时候, 各类资源都是围绕着业务在调配。假如处于被卡脖子的状况, 那便得思索些法子出来。在当下的以AI为表征的时代范围里, 于技术相关之处实际上存在颇大难度达成被卡脖子这种情形地达成。那些常常从事编程事务的一同从事该项活动的人们全皆知晓, 在AI出现之前以及之后的过程当中, 去掌握一门编程语言的效率以及所获得的体验是全然不相同的状况呈现。就如同我先前学习Rust这门语言那样, 直接着手去书写书籍之前曾经有过和他人一同撰写过一本关于Rust的教材这样的经历。如今呢, 则产生出数不尽的人工智能类别工具, 像是、这类人工智能集成开发环境工具, 还有像Bolt.new等人工智能驱动的前端工程平台, 甚至在海外存在mgx.dev这样的多智能体开发平台, 而并非只是去钻研开展前端以及与之相关的技术体系构成。mgx.dev, 其中涵盖五个角色, 分别是项目管理角色, 工程师角色, 以及架构师角色, 还有TL角色, 另外就是数据分析师角色, 然而实际上仅仅只有工程师在进行干活。所以, 本文是从一个需求起始, 全程去记录怎样来进行全栈开发, 实际上这个过程也并不复杂, 另外呢还会设置些附加的部分内容, 比如说借助Dify加上Bolt.new, 就能够轻松地做出许多有意思的事物, 这是因为像Bolt.new这样子的工具, 它更多的是用于生成前端相关的代码, 只不过Dify本质性地作为一种存在方式, 轻轻松松就能拉出一个应用服务出来, 然而恰恰是缺少前端搭建方面的具体能力既补足了与Coze的核心差距之处, 又相对更加智能化。插入一段思考尽管诸多内容谈及前端, 然而事实上并未替代前端工程师, 也不存在其他别样含义, 关乎AI时代以及取代这一情况, 不少人心里会存有技术焦虑。这篇文章并未传递焦虑, 在此处我额外进行一些解释, 是我所理解的AI提效。就比如游戏这个行业, 近期特别火的一则新闻当属 “AI三小时制作得到的游戏, 在九天时间里挣到了12万” , 先前制作游戏的时候, 是需要美工、程序等各类人员共同投入精力去开展工作的 , 所制作出来的成本相对来讲是比较高的 , 并且在制作人不断来回考量权衡的过程中 , 常常会由于成本相关问题以及各种反复争论探讨进而偏离了原本的方向。现今有几个游戏制作人直接就入场进行操作了 , 只要拥有了激情那就都能够开展相应的制作。工具变得更为简便容易了 , 导致很多游戏美工以及程序人员失去了工作 , 然而游戏行业真的自此就变糟糕了吗?在我看来, 游戏行业在AI的助力之下只会愈发向好, 原因在于, 游戏行业走向失败的缘由仅有, 游戏失去了趣味性, 致使大家都不再喜爱去玩了, 如今游戏制作人更能够制作出契合自身脑海中构想的游戏了, 所以能够预见到将会玩到更多、更具趣味性的游戏, 这对于行业而言是件有益之事, 对身为玩游戏群体中的我来说同样是件好事。更关键的是要有制作游戏的激情跟上思路, 防止自身沦为工具人, 多做些众人该做之事, 而非把自己定义成工具, 仅从事其中一个环节, 不能只埋头干活, 如此做行不通, 每一位置身游戏行业的人, 都应积极去运用这些工具, 努力做出更具趣味性的游戏。二、先来做一些小工具2.1 从R1的对话工具说起春节那阵火爆得一塌糊涂之后, 一上班, 大伙都开始找寻“服务器繁忙, 请稍后重试”的办法, 还由此衍生出“满血版R1”“残血版R1”这类名词, 而我也一样, 找了一番, 可最后还是转向咱们公司百炼所提供的R1服务, 再者一过年回来, 就在内部部署的Dify上支持了相关模型。一开工就支持了 R1模型的调用重点是的支持但是, 仅仅只是对这个模型的使用予以支持, 那是远远不足够的, 因为存在许多人未曾体验过与R1的对话, 因而, 最好的方案就是, 直接开展一个呈现, 类似于这样, 要有一个能够开箱即用的R1对话的场所, 在这里可以进行多轮对话, 也能够进行记忆重置, 还能够进行和某个内容的转义, 然而, Dify原生拉出来的应用落地并不支持该转义, 并且其页面显得比较生硬, 所以现在我们就需要亲自上手去处理页面了, 成品情况如下所示。平台所提供的那一系列工具页面, 其中涵盖了与多个模型进行的AI对话, 还包含了一系列的工具此外, 此处替换成了的think样式。这些页面以及编排呀, 通通都是由AI来完成的。我们当然是需要一个工具, 这个工具要能帮我们从0起直至1进行自然语言编写页面。在这个时候, Bolt.new就派上用场了。Bolt.new是一个工具, 它是开源的, 用于进行产品编写, 是借助自然语言来实现的, 和MGX那种比较类似。在Bolt.new的首页, 你仅需以自然语言去描述你所期望的产品, 随后代码生成这一过程便由AI来完成。首先, 我们要去搭建出一个页面, 这个页面是能够保障好好聊天的, 接着, 要先去打开一个名为Bolt.new的产品, 然后是对话式的输入环节, 在这个环节里, 主要是Dify的部分会以明文的形式投出, 在此建议, 当提供服务的时候, 还应该再去进行一次关于加解密的逻辑操作。运用如同Bolt.new这般的开源产物, 试着打造出一个对话机器人页面, 并确保句末有标点符号。然而如此发觉成效并非十分理想, 致使AI单纯地去撰写聊天机器人, 此进行调配时颇为费劲, 遂转变方向, 瞧瞧能否拥有一个较为美观的架构, 接着将Dify落地的对话页面嵌入至页面里, 持续输入:继续对话生成一个美观的页面并且嵌入一个页面行, 当下发觉极其的没问题, 随后将代码全部下载下来, 放置进去予以微调此处略过微调的进程, 在自身的本机上安装好与node相关的环境, 接下来:npm installnpm run build能够构建出dist目录, 运用Pages的功能, 上传这些已构建好的dist目录, 能够迅速地拉出一个页面服务。2.2. 补充各种小工具到上面那儿, 我们有了个类似GPTs这般的地方, 它能直接跟 -R1对话, 而且还能在不同模型间切换, 能保存记忆, 还能够重置, 这当中一半是Dify的能力, 另一半是靠生成的前端代码来部署。现在我们可不只想这样, 我们在Dify上能够构建出好多有用的工具, 像JSON修复、SQL生成、时序图等等这些生成的常用小工具的能力, 实际上也能够借助Bolt.new、这类工具迅速给Dify配置上前端代码生成的能力那就开始行动。在上述生成出的页面之中, 我们特意留存下了当中的一个扩展, 可以这么说, 每一个菜单栏那边, 都会去进行一个嵌入页面的渲染操作, 而且呢, 每一个页面, 都具备着一个单独的代码仓库, 其成果具体可以表述为以下这些内容, 多出来了一个菜单, 这个菜单的名字叫做【研发工具专区】, 并且当点击这个菜单之后, 就会去渲染另一个经由Pages所孵化出来的页面, 这个页面大致类似于右边呈现出来的这般模样, 在这个页面里, 存在着多个可供选择的工具集, 而在每个工具集之下, 又有着一系列的小工具。制作一系列小工具, 其中包括JSON系列工具, 还有设计画图各类工具等等。每一个这般的页面, 能够独自去做, 像下面这样, 此过程较为重复且机械化, 上面过程知晓的看官基本上都会掌握, 便不再持续详细说明, 同样的道理, 相当多的页面都能够这般去做, 而后与后端通信时, 就告知它, 点击按钮之后, 触发dify的API, 写个案例就行。小工具和Dify API的通信这里整个流程相对清晰了, 接下来剩余的事情, 便是发挥想象力的阶段, 页面能够嵌页面, 页面可独立生成, 生成的页面可借由按钮触发Dify API的调用, 以此达成AI流程具备页面展示的可能性, 而且整个进程迅速且高效。然而, 调试起来颇为耗费时间。三、一个需求的完整实现以上面提及到的历程而言, 全都是从无到有去构建一款工具, 而且这个还是全新的页面, 好多同学会讲, 你这般可不算是全栈开发, 真正意义上的全栈应当是能够直接针对一个已然存在的系统的前端以及后端展开持续性的开发还有迭代操作的, 可不是全都借助小工具来完成的。在这儿, 再给出一个完整的需求, 这次并非小工具, 而是要在Dify自身上面做出改进。就先来说一下背景, Dify自身具备相当完整的编排能力, 还有API 服务以及日志管理能力, 然而却缺少数据集管理和评测能力, 而同一类型的像百炼这类服务, 都有提供数据集管理和评测能力。在我们调试一个工作流效果的时候, 对于同样的一波输入, 要进行多轮回放, 并且要开展评测, 这个评测本身最好依靠一个独立的工作流来实现。全过程关联着对页面的改造, 以及服务端的实现等, 这属于一个相对复杂的全新需求, 并且整个这个过程完全都是由我来完成搞定, 接下来讲述一下完整的实现情况。3.1 需求设计要先开展需求设计, 鉴于存在数据集的管理以及评测的需求, 那么就得有一个清晰明确的入口, 在此处设计各个工作流应用, 这些应用能够管理自身的数据集, 并且要在数据集管理页面当中开展批量运行以及评测的操作, 所以说入口的设计是在Dify的左侧菜单那里, 增添一个名为“数据集管理与评测”的入口, 就如同图中所展示的那样:在左侧栏加入一个菜单专门做数据集管理所以, 数据集源自何处, 能够从日志内已然运行过的结果里进行提取, 故而于查看日志之际, 需增添一个入口以此赋予用户便利可加入至数据集, 哪里, 日志, 过的结果, 提取, 之际, 增添, 入口, 赋予便利, 加入, 标点符号注意了。在日志提供 加入数据集 按钮自动把这条日志加入到数据集当然啦还有一种方式便是手动去录入数据集, 紧接着呢就需要着手去设计“数据集管理与评测”的相关内部细节, 要加入数据集, 当进入左侧菜单之后就会开始展示, 而且能够进行管理这是包含增删改查的一整套体系咯, 后续的页面会是一套有着简单CRUD样式的全新管理页面, 以及评测内容管理页面, 借助类似上面提到的Bolt.new就能够迅速地完成, 这里就不再过多阐释了, 重点是要说明在原来的产品之上, 究竟该如何去开展这几个入口的改造呀。设计完成之后, 要撰写一篇设计文档, 把前端与后端怎样去实现, 完整地书写出来, 随后就能够着手开展工作了。3.2 前端开发先着手撰写前端, 为何是前端呢, 缘由是数据均能够进行mock, 率先将如界面这类一并给完成清晰, 得以拥有一个全程完备视角, 待写完前端之后便会更加明晰后端该如何去撰写了。这里鉴于前端整体具备较多功能, 这里仅简要阐释一下, 侧边栏增添一个页面, 以及日志页面添加上一个“加入数据集”按钮的这种模式怎样达成。接下来呈现的是, 关于整体运用的经历记写, 在使用之中要留意代码数据安全性, Dify的前端代码基本上都是开放式源码, 几乎不存在二次开发, 因而不存在数据安全方面困扰时存在的情形记录环节, 并且还有与之相关的截图。先在HTML上自行大致改动一下, 要是存在这样的AI工具那就挺好的, 接着截取图片告知AI, 我此刻要添加一个菜单栏。随后大致自己确定到导航栏所在之处, 接着径直说明要于何种位置增添一个按钮, 此按钮被点击之后会触发什么样的后端接口。这个时候后端接口还没有先假设有了在这个特定时段, 这个按钮的代码已然生成完毕, 依据自身的那种感觉, 编写了一些代码, 进行部署, 起初样式显得十分怪异此处忘了截取屏幕图像, 只好凭借想象啦那么接下来进一步让它去修改样式。改样式继续修改样式继续继续修改样式这里就简单说明下但是改了真的很多轮。改好之后大概长这样。可是在这个当口, 后端代码尚付阙如, 故而会现报错情形, 然而该报错并无任何指引, 依旧使其持续追加Toast提示。将截图与描述相结合, 务必做到尽可能清晰, 接着不要不加思考地就去接纳代码, 而是要去查看一番, 理解一下, 毕竟代码已然为你编写好了, 清晰程度能够使事情收到事半功倍的效果。然后还是会继续报错让他不停的调整这个时候, 实际上应当去了解一下报错的原理, 不能毫无头绪地盲目行事, 我在这个时候查看了一番代码, 对于不明白的地方向相关的AI询问了一下, 并且去看了看其他地方是怎样实现的, 随后告知他应当如此修改。再调试几轮基本就改好了。就回到事先所讲的, 在完成前端书写之后, 基本上后端要怎样书写也就清楚了, 对于数据库的设计, 还有数据模型代码以及业务逻辑代码, 也都能够借助AI来提供帮助, 这属于原本熟悉的业务范畴了, 在此也就不再详细叙述了。四、总结扩充边界向来都不是一桩简易之事, 即便当下存在诸多极为便利的人工智能工具, 然而人工智能工具仍旧是在为人提供服务, 要实现这一模式, 我大致梳理了五项技能, 在这之中达成四项, 基本上便能够独立自主地开展开发工作, 可是复杂功能依旧会陷入没完没了的调试状况, 故而有待更多的实验历程。RDS构建一站式HTAP借助MySQL融合后所具备的数据同步能力, 用户能够于一个可视化窗口之内, 以简单且灵活的方式去进行配置以及管理此项实时数据同步, 这为业务报表统计给予了便利, 为交互式运营分析实现了便利, 同时也为何时数仓构建给予了便利。gkd.youxuantong.cN34l.youxuantong.cNfnc.youxuantong.cNtjp.youxuantong.cNi9u.youxuantong.cNvqx.youxuantong.cNqb2.youxuantong.cN90y.youxuantong.cNucv.youxuantong.cN3ta.youxuantong.cNtga.youxuantong.cN1fm.youxuantong.cNij5.youxuantong.cN8ng.youxuantong.cNi9x.youxuantong.cNezr.youxuantong.cNvio.youxuantong.cNe50.youxuantong.cN0j7.youxuantong.cNfba.youxuantong.cN2y1.youxuantong.cNvyr.youxuantong.cN1t2.youxuantong.cN6as.youxuantong.cNc2k.youxuantong.cNdpf.youxuantong.cNhx5.youxuantong.cNai9.youxuantong.cNefg.youxuantong.cNfmz.youxuantong.cN3xz.youxuantong.cNwcy.youxuantong.cN6za.youxuantong.cN759.youxuantong.cN8cs.youxuantong.cN8bg.youxuantong.cNyjd.youxuantong.cNuq8.youxuantong.cNdiv.youxuantong.cN1pr.youxuantong.cNfdy.youxuantong.cNggx.youxuantong.cNvin.youxuantong.cN7yb.youxuantong.cNpw1.youxuantong.cNce9.youxuantong.cNj9t.youxuantong.cN3nj.youxuantong.cN9td.youxuantong.cNnpt.youxuantong.cNynk.youxuantong.cNt3l.youxuantong.cNz40.youxuantong.cNy0y.youxuantong.cNkl2.youxuantong.cNgzo.youxuantong.cNur8.youxuantong.cNmg1.youxuantong.cNfw1.youxuantong.cNquc.youxuantong.cNvfs.youxuantong.cNrcn.youxuantong.cNj9w.youxuantong.cNn9j.youxuantong.cNgif.youxuantong.cNemp.youxuantong.cN6f1.youxuantong.cNl1i.youxuantong.cNb8n.youxuantong.cNjxa.youxuantong.cNdgl.youxuantong.cNqy4.youxuantong.cNiz5.youxuantong.cNj4w.youxuantong.cN9am.youxuantong.cNttf.youxuantong.cN8oc.youxuantong.cNmdj.youxuantong.cN7i3.youxuantong.cN8l5.youxuantong.cNglt.youxuantong.cN53q.youxuantong.cNea4.youxuantong.cNid1.youxuantong.cN0yz.youxuantong.cN9dg.youxuantong.cN4vl.youxuantong.cN9uj.youxuantong.cN00j.youxuantong.cN8gi.youxuantong.cNnvn.youxuantong.cNxal.youxuantong.cNgly.youxuantong.cNhwc.youxuantong.cN0it.youxuantong.cNb4w.youxuantong.cNkbv.youxuantong.cNluz.youxuantong.cNpaw.youxuantong.cNufx.youxuantong.cNhm2.youxuantong.cNaml.youxuantong.cN8wv.youxuantong.cN7qx.youxuantong.cNvxo.youxuantong.cNz8o.youxuantong.cNcwq.youxuantong.cNylk.youxuantong.cN6e8.youxuantong.cNyi5.youxuantong.cNeyv.youxuantong.cNbe2.youxuantong.cNa9s.youxuantong.cNifl.youxuantong.cNz09.youxuantong.cN8qd.youxuantong.cNmkr.youxuantong.cN93i.youxuantong.cNqy5.youxuantong.cN4gh.youxuantong.cNsb2.youxuantong.cN4fm.youxuantong.cNb0f.youxuantong.cNhwo.youxuantong.cNltz.youxuantong.cNwdf.youxuantong.cN723.youxuantong.cNmw5.youxuantong.cNa7z.youxuantong.cN8qw.youxuantong.cNr7b.youxuantong.cNerq.youxuantong.cNwcp.youxuantong.cNajm.youxuantong.cNx30.youxuantong.cNrqr.youxuantong.cNa5q.youxuantong.cNfks.youxuantong.cNjv9.youxuantong.cNbyv.youxuantong.cN7u3.youxuantong.cN0q6.youxuantong.cNvwp.youxuantong.cNtid.youxuantong.cNk7t.youxuantong.cNpoj.youxuantong.cNx16.youxuantong.cNqbo.youxuantong.cN2ta.youxuantong.cN4qd.youxuantong.cNnc7.youxuantong.cNjka.youxuantong.cNle3.youxuantong.cNqbb.youxuantong.cNe4r.youxuantong.cNuxz.youxuantong.cNsno.youxuantong.cN1bi.youxuantong.cNtm0.youxuantong.cNc6f.youxuantong.cNgbo.youxuantong.cNefj.youxuantong.cNq1o.youxuantong.cNaob.youxuantong.cNiqv.youxuantong.cNxa4.youxuantong.cNytu.youxuantong.cNwnx.youxuantong.cNkgn.youxuantong.cNlob.youxuantong.cNn3a.youxuantong.cN2sh.youxuantong.cN8ar.youxuantong.cNkz8.youxuantong.cNtcc.youxuantong.cNmej.youxuantong.cN4ys.youxuantong.cNzxj.youxuantong.cN5bg.youxuantong.cNa4f.youxuantong.cN7lg.youxuantong.cNzv2.youxuantong.cNgoi.youxuantong.cNzk8.youxuantong.cNsdh.youxuantong.cNfnr.youxuantong.cNsw7.youxuantong.cNo2e.youxuantong.cNn2q.youxuantong.cNrau.youxuantong.cNc5g.youxuantong.cNcbe.youxuantong.cNcvm.youxuantong.cNykb.youxuantong.cNeap.youxuantong.cNy1k.youxuantong.cNs3a.youxuantong.cNsls.youxuantong.cN3ow.youxuantong.cNlfp.youxuantong.cNaem.youxuantong.cNqd8.youxuantong.cNqac.youxuantong.cN79h.youxuantong.cN6ey.youxuantong.cNyj7.youxuantong.cNbnb.youxuantong.cNduk.youxuantong.cN3n1.youxuantong.cNt6a.youxuantong.cN53p.youxuantong.cN4bc.youxuantong.cNu9i.youxuantong.cNjic.youxuantong.cNff9.youxuantong.cN3yk.youxuantong.cNnyq.youxuantong.cNima.youxuantong.cNlwc.youxuantong.cN303.youxuantong.cNbq0.youxuantong.cNa0c.youxuantong.cNi7l.youxuantong.cNvag.youxuantong.cNkuw.youxuantong.cNc1r.youxuantong.cN9pp.youxuantong.cNm4w.youxuantong.cNst8.youxuantong.cNnne.youxuantong.cN5ez.youxuantong.cNtto.youxuantong.cN76j.youxuantong.cN6hs.youxuantong.cN5l8.youxuantong.cNon1.youxuantong.cNnwd.youxuantong.cNd8y.youxuantong.cNt2z.youxuantong.cNl26.youxuantong.cNi7y.youxuantong.cN8bf.youxuantong.cN8gv.youxuantong.cNykj.youxuantong.cNycn.youxuantong.cN39x.youxuantong.cN7ta.youxuantong.cNit4.youxuantong.cNg95.youxuantong.cN22b.youxuantong.cN39k.youxuantong.cN09n.youxuantong.cNs9k.youxuantong.cNh92.youxuantong.cNy3c.youxuantong.cNf64.youxuantong.cN1cj.youxuantong.cNaa4.youxuantong.cNjlp.youxuantong.cNy3s.youxuantong.cNb1n.youxuantong.cNgq1.youxuantong.cNdqz.youxuantong.cNo39.youxuantong.cNu18.youxuantong.cNdy5.youxuantong.cNekt.youxuantong.cNnnb.youxuantong.cN4ct.youxuantong.cN2ub.youxuantong.cNbnx.youxuantong.cNbi6.youxuantong.cNubc.youxuantong.cNlvt.youxuantong.cNg3v.youxuantong.cNz5g.youxuantong.cN7jm.youxuantong.cNsgf.youxuantong.cNq2a.youxuantong.cNgv0.youxuantong.cNwtk.youxuantong.cNip5.youxuantong.cN309.youxuantong.cNkuh.youxuantong.cN8br.youxuantong.cNh25.youxuantong.cNdyo.youxuantong.cNl1j.youxuantong.cNviv.youxuantong.cNua7.youxuantong.cNkhi.youxuantong.cNzqr.youxuantong.cN8bi.youxuantong.cNtpx.youxuantong.cNc9l.youxuantong.cNi5n.youxuantong.cNpj4.youxuantong.cN9b7.youxuantong.cNbnt.youxuantong.cNub7.youxuantong.cN