Codepen交互界面教程

前面我们已经分别学了前端、后端、数据库和编程语言，今天就把它们全部组合起来，带大家看懂一个完整的 web 应用到底是怎么工作的。 目前最主流的开发模式就是前后端分离架构，他的核心思想特别简单，前端专门负责展示和交互，就是我们在浏览器里看到的所有界面。后端专门负责数据处理和业务逻辑，在服务器上默默运行， 而前后端之间靠 api 来沟通，相当于两者的沟通桥梁。给大家画个简单的架构图，一看就懂。最上层是用户，然后是前端运行在浏览器，靠 html、 css、 js 实现， 前端通过 api 请求和后端通信，后端运行在服务器，用 python、 java、 go 等语言在和数据库存储数据，比如 my、 sql、 mongod、 db 交互，这就是完整的 web 应用。三层架构缺一不可， 光说架构太抽象，我们拿淘宝下单这个场景看看数据到底是怎么流动的，每一步都很清晰。第一步，你打开商品详情页，前端会向后端发请求要这个商品的信息， 后端去数据库查询，把商品名称、价格、库存返回给前端，前端再渲染成你看到的页面。第二步，你点击立即购买， 前端会先检查你有没有选规格，填地址，验证通过后就向后端发送创建订单的请求，带上商品 id、 数量、收货地址这些信息。 第三步，后端开始处理订单，先验证你是不是登录状态，再检查库存够不够，计算最终价格，然后生成订单号。 第四步，后端会把订单数据写入数据库，同时扣减商品库存记录操作日记，然后告诉后端订单创建成功。第五步，后端把订单信息返回给前端，前端跳转到订单成功页面，显示订单号，预计送达时间。 之后你支付商家发货，你确认收货。都是同样的流程，数据在这条链路上来回传递。 总结一下，数据流向请求链路是从上到下，用户操作前端后端数据库响应链路是从下到上数据库后端、前端用户每次你点击一下数据都要跑这样一个来回。 要理解这个架构，关键是分清每一层的职责。前端是展示层，负责把数据变成我们看得懂的界面，接收我们的操作，发送、请求、处理、响应。 核心是用户体验好不好，交互流不流畅。后端是业务逻辑层，负责接收前端的请求，执行核心业务规则，比如计算价格、验证权限，还要操作数据库，保障系统安全稳定。 核心是响应快不快，能不能扛住高并发数据库是数据层，负责持久保存所有数据，比如订单、商品、用户信息。核心是查询快，存储安全，数据准确。 而前后端协助的关键就是 api， 就 像餐厅菜单，前端只能按菜单接口定义点单，不用管后端怎么做菜，实现细节对前端是透明的。 不同项目会选不同的技术站组合。给大家举几个常见的经典全站用 react， node js、 my school， 前后端都用 javascript， 开发效率高。企业级应用用 view 加 java 加 oracle， 稳定可靠。创业公司快速开发用 html css、 python plus， post gre， sql， 开发速度快。高并发症场景用 react plus、 go plus、 mexico plus、 radius， 性能拉满。选技术站没有最好的，只有最适合的，优先选团队熟悉的、符合项目需求的，还要考虑生态成熟度和长期可维护性。 最后，我们用一张图总结整个架构，用户通过浏览器访问，前端负责展示交互，通过网络协议传输请求，后端处理业务逻辑、数据库存储数据，还可以对接支付、 短信等第三方服务，数据在其中循环流转，就构成了我们每天使用的各种 web 应用。 再快速回顾一下核心概念，前端是用户看到的部分，后端处理业务逻辑、数据库存储数据，编程语言是编写程序的工具， api 是 前后端的沟通桥梁，服务器是后端的运行载体，这些概念不是孤立的，组合起来才是一个完整的 web 应用系统。 总结一下，前后端分离架构的核心就是前端管展示，后端管逻辑，通过 api 写作数据，在用户前端、后端、数据库之间流转，构成完整的交互。

谁小时候没有一个钢铁侠梦？这次我直接照着电影做了一套贾维斯智能交互系统，整个超炫酷的科幻界面， 全程都是 ai 自动写代码实现的，不用我一点点手动敲，还搭配了摄像头和手势识别，不用鼠标键盘，直接隔空就能操控。再配上未来感拉满的科幻音效， 每一步操作都有音效反馈，氛围感直接拉满，瞬间就像走进漫威电影，圆了自己的钢铁侠梦。想要圆码和教程的评论区扣贾维斯我直接安排！

这节课我们讲程序怎么和用户进行交互，首先我们新建一个拍摄文件，在 t 七这个文件夹上面点击鼠标右键选择六拍成 fire 名字我们就叫隐私杠，与用户交互，与用户交互的意思就是用户给你输入什么内容，然后你给用户反馈什么内容，这就叫与用户交互 的例子。你选了一款翻译软件，首先肯定需要用户给你输入一段翻译的内容吧，然后用户给你输入了一个 hello 给你，然后 你这款翻译软件是不是就要把翻译结果你好输出给用户，输出给用户的这个功能我们已经学过了，就是 please 加括号，那么接受用户输入也有一个功能叫音谱加括号，这个括号里我们可以用支付串写一些提示信息，信息这里我就写一句提示信息， 请输入你的名字冒号，然后一运行之后，程序就会停在这里等待用户输入，现在我在这里输入一个张 大仙撬回车，这时候张大仙这个纸就传给了计算机，然后这个纸会被印铺的这个功能接收，印铺的接收到这个纸之后，会把它加上引号，保存成一个这不串类型，在当前为止生成一个纸。 如果我直接这样写的话，这行代码运行完之后，立马就会被当成垃圾回收掉了。因为这个纸没有绑定任何变量名，所以我这样给他绑定一个变量名类，但是这个名字不是我们自己在程序里直接定义的。这个 这是刚刚我们用音铺的这个功能接收到的用户输入的内容，然后下一步我们 point 一下这个内容，就是把用户输入的内容打印出来，然后再打印一下他的内心，然后我们再运行一下 这里输入张大仙一回车就打印了张大仙致富传类型，这样我们就实现了程序与用户交互的功能，当你拿到用户输入的信息之后，你可以对他进行任意的操作，比如致富传拼接，还有前面我们学过的致富传和数字相乘，然后把结果打印出来都是可以的。 这里我们要明白一件事，在拍成三中，因不得会把用户输入的任何内容都存成支付穿类型，现在我再运行一次，这里我输入一个七十三，最后打印的结果还是支付穿类型，如果是输入的用户名的话，存成支付穿还比较合理，但是如果要让用户输入他的年龄， 然后普韵提一下 a g tf a g 李运行这里，让我们输入年龄，我就输入八十四叫回车，但还是给我们成长了支付穿类型，这就太不合理了吧。 作为年龄，我们可能会把它当成整形，对他进行数学运算，比如过了一年，我要对这个年龄进行加一操作，如果你给我存成这幅串的话，我是不是就没办法操作了？把这个结果打印一下，这样运行的话，程序就直接报错了，做 type arrow， 内心错误，这幅串只能和这幅串相加，不能和 一这个整形相加。这时候就有一个新的功能出来了，叫硬的加括号表示调用一个功能，我们把 a 级写在括号里，这样就把 把支付赚 a 级转成了整形转换的结果，我们把它复制给变量 a 可以吧？同样也可以复制给 a 级吧，这样 a 级的值就变成整形八十四了，原来的支付赚八十四由于和 a 级结束了绑定，他就变成垃圾被回收了。 现在我们在运行输入八十四敲回车，结果就变成八十五整形了。但我们要注意的是，硬底加括号这个功能，只能把纯数字的支付钻转成整形，意思就是印特的括号里我们写一个引号，然后里面写一二三，这样是可以转成整形的，但是如果是一二点三就转不了， 如果你这个字母串里还有字母、汉字或者其他符号的话，就更加转不了了。带小数点的字母串怎么转成数字？我们后面再讲。

给大家展示一下我用 ai 编程工具 cloud code 开发的一款 ai native 的 原声 c r m 软件，那我觉得这款 c r m 软件可以展现出一个未来 c r m 软件的形态。我先来给大家展示一下功能，这是我用的开发的环境编辑器啊。我们先来演示功能， 首先呢，我们要把这个系统的数据库做个抽象，这个脚本都是 cloud code， cloud 帮我生成的。好，现在数据抽象可以进入进行演示了。点 start b a t 启动，这个网站的实力好，很快呢这个网站就会启动，这个脚本也是 ai 帮我自动生成的。其实所有的工作都是 ai 帮我生成的，我基本上只是告诉他指令。我们先来展示一个销售的账号， 大家看到这个登录的界面呢，就是一个传统的 crm 的 界面，它有数据，有我的线索，公共线索库，我的客户等等。那我们很多时候 crm 销售人员做的工作就是去填写拜访记录，填写客户信息等等，非常繁琐，所以很多人不愿意用。虽然我们演示的是一个网页版啊，但其实手机版本上遇到的情况都一样。那么 什么叫 ai native 的 cr 应用呢？就是可以通过一个聊天对话框，它背后有个智能体，直接完成销售业务的管理。现在我们来演示一下啊，在这呢，我用了一个 ai 语音输入法的工具，叫 tabis， 所以 我现在直接对着它说就可以了，请帮我查询出我名下所有的线索。 这个网页呢是运行在我本地的，但是它背后的这个 ai agent 调用的大模型呢，是我配好的 deepsea 的， 我们来看一下效果啊，好，查出来了，目前 deepsea 会跟这个系统进行一个 function calling 的 互动，它有一些技术的原理啊，总之就可以把我们业务系统的客户线索数据查出来了，这是我想要的， 这是一个基本的查询功能啊，我们现在再来演示一个录入功能，比如说我拜访了数字颗粒这家公司的老板，那按照以前的这个拜访 crm 需要自己去填拜访记录的，但是现在有了这种 原生的 ai 一 阵的能力以后，我是直接通过录入语音的方式就可以把这个拜访记录录进去，甚至可以在跟客户沟通的时候，让手机或者一些外挂的设备全程记录，然后自动完成整个拜访的录入，以及客户的沟通内容的录入。我们先来演示一下，我前天拜访了数字颗粒的 一个普通员工小李，他跟我说他们公司领导王总觉得这事有戏，我们要持续保持关注。 好，现在语音被识别了，我们输进去看他能不能唤醒一个录入拜访记录的动作啊。这也是一个典型的场景，这个动作以前都是需要人手工去填写表单数据的， 现在 ai 给出来反馈了啊，我们来看他这输出一段代码是什么？好，其实这不是一段代码，这是一个按钮，现在点这个按钮会发现页面被带入到了数字颗粒这个公司的表单页面，然后在拜访记录这自动的把我刚刚说的那段话录进去了，然后呢就可以点添加跟进，这样子跟进记录就被添进去了，所以 这是一个很有意思的设计交互方式啊，我没有让 ai 直接把拜访记录录入系统，而是让 ai 把拜访记录填写到了表单页面中，由人去确认，完了以后再去手工提交。这就是一个经典的 tob 软件设计，经常会采用的 copilot 的 设计模式，或者叫交互范式。因为 ai 很多时候给的东西 须由人来确认才能录进去，所以在这个系统的设计里边，我也采用了这样的一种方案。那么我们现在再来演示一个啊，比如说想销售，想让 ai 给他一些客户跟进的建议，我现在有哪些线索需要着急尽快跟进，或者是有些哪些客户需要着急尽快跟进，你能给我一些建议吗？我们来看一下啊。 接下来 ai 就 进一步的分析，他先把客户列表查出来了，我问了线索和客户，我们看看他会只查线索还是同时线索，客户都会查， 他查到了意向线索，第一优先级高。意向这个状态是什么？紧急程度高，建议行动。第二优先级呢，是即将超时线索啊，这是他自己背后是有一套思考的决策逻辑的。第一优先级可能是意向度高，第二优先级呢，是超时线索。 好，这个首先这个实验是成功的啊， ai 帮我们给出了销售的建议，当然这只是测试这种能力的场景啊，那实际的系统里面肯定是需要有更加严格的基于行业认知的和公司最佳实践的一些 决策的策略配进去，例如通过 skills， skills 的 这种方式配进去。在这呢，我们还没涉及到那么复杂的能力，但是 ai 单纯的让大模型去基于业务数据分析，他已经给出来一本分析建议了，这个就很有意思了，我觉得个人的演示到这了，我们再来看一个管理人员的 manager， 零一一二三四五， 管理人员呢，同样也可以跟 ai 来对话。呃，我之前测了一个场景，给大家演示一下，请帮我分析一下我团队下面谁最近偷懒不干活。 像这种诉求的话，以前其实是很难分析的，是需要开发团队写一些报表，把一些思路明确了以后写出来的。但是现在呢，把这些团队的业务动作、行为数据都图给 ai 以后，大模型本身是能给一个分析判断的啊。大家来看现在他给出的分析结果， 我们来看一眼啊，这是一个基本的各个成员的跟进情况，这是团队成员的情况啊，王晓明，所有线索都在尽快在跟跟进，陈队长好像表现是良好，跟的不是特别特别积极，但是有这么几个人。大家来看啊，这是 ai 识别出来的，张磊和李思远他们俩对 ai 的 这个线索都没有及时的跟进啊，甚至会出现这种掉库的风险， 那尤其是张磊下面负责的四条线索，那他有十天未跟进，所以这里边有一些管理建议啊，包括你应该去找谁先去联系，否则会掉库什么的。 这个里边因为我没有对大元模型做一些提示词的约束啊，其实在我之前自己去测试的时候，我上一轮的对话，他甚至还会给出来一些按钮啊，直接能让我去跳转，去看这些客户的情况什么的， 但是这次对话就没有出现这个按钮，这个其实也是因为大元模型的概率性了。当然这种问题也很好解决，就是把不同场景下提示词回复的策略和呈现的内容做一个精准的编排就可以了。但是这个案例已经足够掩饰这个系统的智能程度了，所以我们能看到现在这套 c r m 系统，它本质上就是 一个基于跟 ai 对 话，能完全理解业务系统背后的数据，并且去控制业务系统的一些能力，做一些操作的，这跟传统的 crm 已经区别非常大了。那我们今天的这个视频主要还是演示这个 crm 的 能力啊，我简单说一下这个 crm 是 怎么构建的。其实这次做这个 crm 我 也并没有写什么 p r d 什么的啊，我本质上就是采用了现在比较流行的 spec coding 规范驱动编程的方式，通过把业务场景、业务策略、业务逻辑说清楚，然后呢， ai 就 会在这个 spec 下面生成一些相关的文档， md 文档描述了业务的一些关键信息，然 然后我用了一个插件叫 speckit 啊，那这里边这这些关键的 md 文件都是 speckit 这个工具生成的。有了这些文档以后呢， ai 就 可以基于这套框架和泛式去生成具体的代码了，这样子能保证 ai 生成的代码是在一个泛式框架之下，不容易出现偏差啊。整体大概是这样子的一个思路，那从 背后的这种技术站来讲的话，数据模型底层采用了 panter 公司的 ontology 的 文体论的设计方法论啊，其实它也没有特别的，另外就是加入了对前端所有交互界面的 api 化，方便 ai 和前端能够有个充分的理解和互动，以及 采用了 copilot 就是 刚刚演示的人机交互的这种模式和范式啊，在这些理念和技术站的驱动支撑之下，实现了这样子一个系统。 那么后面的视频呢？我会给大家逐个去分享我最近使用 v s code 加 cloud code 的 一些感受啊，我觉得这个工具真的是非常的强大，它已经不仅能帮我实现 web coding， 它本质上还能帮我去做很多的提效，例如去让我去生成 p r d， 去检查 p r d 啊，或者我本身是给企业做培训的，把我的课程设计全部都 做成上下文 context 的 话，以后呢，它可以智能地理解我的课程，帮我输出针对性的定制化的刻章。总之呢， cloud code 的 这个工具已经不单纯是一个 外部编程工具了，它更多的已经融入到我的日常生活中了。那我相信未来的工作状态一定就是把身边所有的信息都做成 contacts， md 文件。然后呢， ai 其实可以帮你处理一切，这本质上也是小龙虾在干的活，但因为它使用了这种 vs code 的 编辑器 id 开发环境，所以它更白活，更可控。好，今天就讲到这，以后会跟大家做更多的分享。其实我这一系列的工作也都写成了公众号的文章，发在我的公众号上，也欢迎大家关注。

哈喽。

如何在单面机上实现一个终端来控制我们的 led 灯？大家好，今天我们来继续学习 zf， 这次我要带大家在单面机上实现一个类似 linux 终端的交互界面。借助 zf 内置的事务主键，我们可以快速搭建一个简易命令行终端， 还能用它来控制硬件外设。接下来我们就一步一步实现它。第一步，打开炫舞功能。首先在项目的 prg 点 com 格配置文件中打开炫舞相对应的红， 你可以修改炫舞相关的红自定义终端的名称，这里我把它改成了 n 叉 p。 第二步，编辑赛欧命令模块，新建一个 app 赛欧点 c 源文件，并添加命令处理代码。我这里以控制三色 led 灯为例，代码中定义了 on、 off 等命令，用于控制 led 的 亮面和颜色。第三步， 将模块加入构建系统，别忘了在 cmake 历史的点 tst 中添加这个新文件，这样编一时才能把它包含进去。 第四步，编辑和烧录。完成代码后编辑项目，并将附件下载到开发板上。第五步，打开我们的窗口，这里是支持上下来切换。我们之前输入过的命令和另一个终端很类似，这里我们把 led 打开， 可以看到绿色 led 亮了起来，我们把它关闭。关错了，我应该是关绿色的，它也支持查看历史。这些都是我们输入的历史，它也是支持太步步全的，大家可以上手试一下，我们一起学习，一起进步。

hello， 欢迎大家来到用翠开发微信小程序第七期，上一期呢，我们用一个 ui scale 加一个 ui designer 的 智能体，完成了我们前端初步的交互和视觉， 但实际的结果非常的丑啊。同时呢，上期我们也用 a、 d、 b 尝试结合微信的帧机调试，想让 ai 完成一些自动化的调试和优化，最后在我的尝试下放弃了。主要的两个原因是，第一个，微信小程序甄姬调试，每次都要打包上传，然后扫码才可以， 这样的话，我们的自动化还是要由人工去介入，而且效率很慢。第二个呢，是因为小程序是运行在微信的 app 里的，所以我们的 idb 不 能像原生的安卓程序一样拿到它的页面和布局信息，只能通过大模型的 ocr 识别去读取， 这样的话既浪费时间，效率又低，而且容易出错，烦死了。因此呢，我们这期的内容呢，主要还是回归到我们的主线，就是前后端连条。当然在这开始之前，我也会介绍如何使用 pencil 的 mcp 在 在 tree 里面完成我们现有的交互界面的视觉优化，然后分享 tree 前后端联调的一些实战心得，尤其是当 ai 反复卡壳的时候，如何高效的排查并指导它解决问题。 ok， 那 我们现在就开始吧， 上期我们的界面太丑了，然后我最终使用 pencil 重新设计的一个发票助手的交互。先给大家看一下， 这里呢，我们可以用微信一键登录，然后这我已经接了很多后端的接口，所以说这都不是加数据了，那我是怎么把我的账户变成这样子的 呢？首先呢，我们在群里面切换到这个 id 模式，然后这里有一个扩展，在这里搜 pencil， 然后看到这里有两个我们可以装这个，这是一个插件，安装完毕以后呢，它就是这个样子的，这里我的这个插件正好更新了，那我们就重新装一下，然后它这里要求我输一个 token 去使用， 但实际上我去查了下官网，现在还没有这个东西，它现在是免费的，所以我们就按 esc 取消就可以了。然后安装完怎么用它呢？我们 可以在 id 用，也可以切换到 solo 模式，在 solo 模式里我们要先去配置它的 mcp 服务，这里我已经配置好了，然后给大家看一下整个配置的方式，我们要把这个 mcp 服务找到，然后放上去， 这个配置我会分享在评论区里，然后这个 mcp 服务配置好以后，我们就可以开始使用它去帮我们完成设计了。 nice， 这里可以看到我给他的任务是调用 pencil server 服务，要求他先仔细阅读我们之前 p r d 文档中关于发票管理小程序的交互设计规范，这是一个相对来说比较详细的一个要求，然后我们就让他去开始工作， 这个过程比较久啊，我大概等了可能有半个多小时，然后他基本上把我们要的页面都已经生成好了，但是有一些重叠是因为前面一些失败的， 最终呢，我是整理了一下，然后他给我的设计文档最终是这个样子的。牛逼，因为上次我们已经有了小程序的界面，所以这次我们应用设计稿是希望他能跟代码比较，然后把这个新的设计应用到我们的小程序上， 所以我们给他的指令是让他和现在的代码去做比较，把新的设计稿应用在上面。去，这里呢也不是一次成功，因为我们现在是微信小程序，他不是一个标准的 web 小 程序，所以有一些布局和样式的出入。 因此呢，我们也是做了很多轮的对话，才把整个设计稿初步的应用到了我们的小程序中。 那接下来呢，我们就进入到今天的前后端连条，这里的调试过程呢非常的繁琐，我使用的步骤是一个模块一个模块去调 试，然后我会集中展示我们的登录和用户信息，获取相关的模块的连条。在这个过程中呢，我遇到了前端 ai 和后端 ai 互相扯皮的现象，都说应该是对方要去排查， 但实际上问题到底是什么？我们通过自然语言的描述，或者说直接去让 ai 修改，已经没有办法去解决这个问题，因此需要我们进入项目，然后去排查，或者说给予 ai 更多的思路去排查这个问题。好， 这里呢，我先让他整理一版微信小程序的 sdk， 这样的话方便我们用微信小程序去接入 a few moments later。 好 的，这里呢，他已经把 sdk 创建好了，我们可以看一下，只需要去 将这个 readme 和 sdk 里面的这个慢点 gs 压缩版呢，复制到我们的微信小程序即可， 这个 readme 也传给我们的 ai 就 可以了。我们就要告诉我们的前端， 因为我们的前后端状态可能不是很一样，特别是我们看到前端实际上有很多界面，有可能后端没有接口，所以这里呢就要求它适配的过程中， 要将前端的需求，要将 sdk 未满足 需求的接口整理出来，生成一个 markdown 文档， 方便后端进行评估和开发。这样一来呢，我们先进行第一轮适配，然后在适配过程中呢，会去检测我们的 s， d、 k 是 否满足我们前端的需求，如果不满足的话，那我们就让 ai 生成一个 markdown 的 文档， 将这些不满足的需求全部整理出来，这样的话我们可以拿着这个文档再交给后端去评估，然后进行二次开发。好，现在开始工作了。 later， 我 看他们回到正题，我刚才看到他已经把 sdk 的 适配做了一遍啊，但是呢，缺失了这么多。我们先不管，我们先调登录 在这里的连调呢，实际上我们不能完全大规模的交给，这样容易出错。这里我常用的方式就是一个接口一个接口的去调，或说一个模块一个模块去调，比如说现在我们要去调登录，我们先来重新编一下，看一下现在小程序是一个什么情况， 这里我看到还是用了很多 mac 数据啊，所以这里我们要求呢前端清除所有假数据的调用。 那这一步呢，主要是把原来 g s 和布局里面所有塞的我们的假数据全部清理掉，让它去调用我们真实的接口。如果我们真实接口没有提供呢，就让它去调用我们提供的备选接口，备在备选接口里面返回假数。 这样的话，我们可以统一将所有业务逻辑的调用都归纳到 api 点 g s 和我们自己的 s、 d、 k 里面，然后后后续呢？方便我们去调试排查，这里先让他去干吧。 ok， 我 还没干完呢， later， ok， 现在他第一轮呢，这个 s d k 是 配按照我们的要求是改完了啊，我们先来看一下整个这里有很多错误，我们先全部甩给他，让他去 修复一下。然后与此同时呢，我也看了一下我们前端整理的后端缺失的清单，这里其实都挺全的，但是有一些我认为是不需要的， 比如说这个发票的收藏，因为我们是希望把所有的发票包括发票的管理全部放在本地来做，这样的话我们服务器不会占用太多的存储，这个我们到后面再去做调整。现在先让他去修这个 bug， 刚才看到这个 bug 实际上有一个是 sdk 的 问题，但是 前端又去修复了，所以我们得把这个问题发给后端。 嗯，在后端去修改这个的时候呢，因为前端刚才已经改了，我们先接着调，我们先看下微信小程序报了什么错。首先第一个就是不让你去请求不在合法的域名列表中，这里面有两个问题，第一个是我 的小程序这里要勾选这个不叫验合法域名，这样的话我们才可以在本地做调试。然后第二个是这个幺 server 点 com， 我 们需要改成我们现在虚拟机的 ip 地址，我们自己直接改吧。保存一下以后呢，这里它先出了一个 这个啊， ok， 刚才是我们这里少写了端口，现在的话 on override 的 就就算是正常了，因为四零幺是一个正确的一个返回， 那我们直接把这个甩给 ai， 让它去处理，因为在我的经验里面，就是因为小程序还没有走整个登录和认证的流程， 就直接去调用这个发票列表的请求肯定是不对的。但如果大家是小白或说没有相关的这个 认知的话，那就可以直接把它丢给 ai， 让 ai 去处理。那我们这里偷个懒，直接让 ai 去处理。这里可以去看一下代码，代码里面微信小程序实际上启动运行的第一个是在我们这里是这个，然后它首先去触发了这个 s d k 传入了请求的这个 a p i 地址以及超时的时间。然后这里它实际上是调用了 s d k 的 get token 去获取 token， 如果 token 获取成功了，去检查这个 登录状态是否有效，否则的话应该我们应该是要去登录的，但是这里就没有去写，所以这个 logging 这个 和 logout 没有被调用。然后我们看一下 ai 是 怎么处理这个事情，这里就是他已经观察到了是一个四零幺的未授权错误，然后发现了我们缺少登录页面，后端需要身份验证，创建一个简单的登录页面。 这里呢我们看一下他创建登录页面在视觉上是不是和我们整个 app 是 相符的，如果不相符的话，那我们还有进一步的要求，要让他创建的是相符的，你看他说要一个微信图标，我们先去给他找一个微信图标。 我们认为在这个 web coding， 实际上我觉得大家如果想去学的话，那就要紧盯这个 ai 的 整个思考过程和它在做什么。因为现在如果有 ai 的 话，我们整个学习的方式可能要做一些改变，现在我们先来看一下啊，它没有登录的话，我们就 登录一下，我先把这个图标告诉他，让他先把图标切换一下，我们来测试一下微信一键登录，这里显示登录成功，其实这里我们要去确认一下后端的日制是不是正常的。登录成功了，我们可以看一下这里有没有日制是 出的。 new user create 三月十二日十七点三十四，这里看到是成功的啊，那说明我们这个 a p i 是 没有问题的，那说明我们之前的整个测试是有效的，因为接下来我们调用这里是看不到的，正常我们调试是要加一些日期的，所以在这里我会要求他， 要不然的话我们实际上他不报错的话，不知道他到底运行了什么，所以让他先去加一下。 这里我们需要去改一下这个后端接口需求文档，对于发票的收藏，还有发票筛选这些呢，我们需要把它放在本地来去做这些我们是不要的。这里呢等会我也让 ai 来去改，这里我们可以再加一个任务，然后告诉他 这里呢，我们回到刚才那个任务啊，前段还是在疯狂的去改这个 sdk， 那 这个我们一定要在项目里面做一些限制，要不然的话是非常的不合理的，我们 在这里加一个，我让他这样啊，一定要把他限制住。 tomorrow， ok， 登录成功以后呢，我们先来调这个，我们先来调这个界面啊，这里看到这些都还是有问题的，我们先把这个报错先解决一下， 你们也不要让这个直接把这个文档丢给我们的后端 ai， 然后告诉他，让他按照之前前端给的后端接口确实文档来开发新的接口。 ok， 这边他修复好以后，我们再编一下， 然后点到设置这里的用户，一二三四五六。嗯，我们看一下这边返回的结果啊，这个 nick name 是 no， 所以 我们可以在这里去测试一下改昵称行不行？ 这里我刚才尝试修改昵称是 ok 的， 然后现在测试一下上传头像，我们随便找一个这里上传图片是有问题的，然后再把它甩给 ai。 接下来呢就是对一个功能一个功能的测试，现在大概就是这样的一个过程啊，那在这个过程中呢，我们也可以把这些错误呢认真的去看一下，然后看下 ai 是 怎么去分析，然后 怎么去解决的，这样的话也有助于我们去学习，比如说学习微信小程序，或者说去学习 java script 这些语言。 这里可以看到实际上我们要调用这个上传头像的接口，但是我们的 a p i 里面没有，所以造成了刚才的错误。他的修复呢是用一个临时方案，用模拟实现，这个是不符合我们预期的。那现在呢，我们就要去看一下我们后端的适配是不是完成了，因为我们 刚才有一个，我们刚才有一个后端接口需求，文档里面已经标记了我们需要上传头像，修改密码和推 去登录这三个接口。那刚才呢，我已经让我们的后端 ai 拿着这个文档开始开发了，那现在我们就是等它全部开发完，然后做一轮简单的测试，再更新给前端， 然后接着去调试 later， 这里呢，后端已经按照我们这个发票助手后端接口需求文档做了一波更新，然后也做了一波自测。现在呢，我们就让前端再重新 进行适配。这里因为我们在做用户和登录这块的调试，所以要求他，特别是这块的要关注一下 later。 ok， 现在他适配完了啊，我们先看一下。这里呢，我们每次都重新编一下，这里可以看到这样用这个出了一个 internal server error 的 这个， 这个是需要后端去解决的，然后把这个错误发给后端。 好，我们来试一下啊。 ok， 这里看他已经改好了，我们先不管他，看这里这个地方没有去主动拿用户的信息啊，这拿了，但是他的显示是有问题的，看到这里我已经将昵称改成了 苦苦菜，所以我们要他来修改这个页面。这里呢，我建议大家一定要把这个页面的名字告诉 ai， 所以这里的提示词呢，我们要写的尽量详细一点，比如说并没有按照 get all the default 接口返回，当然是假数据， 这样的话他就知道是这个页面里面，包括就是之前都用的这个接口的数据并没有正确的展示，那我们给到这些信息尽可能多的话， ai 分 析起来会快一点。 我们看到它的处理实际上是修改了这个 settings user info 中 log settings 的 方法，然后继续去掉 sdk 里面的接口去获取用户信息，这样虽然能解决问题啊，但是我们发现在日制里面 之前已经调用过，说明这个信息是被拿过的，但是他为了在这里显示他会又掉一次，那这样的话，有一个问题，就是我们其实在展示这个业务的时候，请求了两次同样的接口，这个是不合理的，所以我们继续跟他对话，然后我们就告诉他 这个用户的数据呢，应该是在小程序验证 token 之后呢，立即获取，并且是一个全局变量在全局保存的，这样的话就不需要每次使用的时候再去调用接口请求我们的服务器， 同时需要他注意，就是我们修改了用户的昵称或者头像的时候呢，本地的这个全局数据也是要去更新的。所以这也能看出来，我们用 ai 去编程，并不是说跟他讲完以后就不管了，去等结果，而是要去看他是怎么做的， 他的做法是否符合我们的预期，这个非常的重要啊，厉害。 ok， 他 已经按照我的要求做了重构，嗯，这样看上去就优雅一点啊。然后我们来验证一下， 这个名字还是张三是不对的，但是这个交给爱去做，我感觉有点，怎么说呢？有点没有必要啊， 所以我们直接在这里看一下，这个是兜底的优乐音否，然后我们在这里可以看到 user info 的 nickname， 如果是空的话，它就会用张三，所以我们得去查一下这个 user info 的 nickname。 我 这里有一个 load user info， 然后从这儿获取后呢， 它的 user info 的 name 又变成了 nickname， 这个是有点问题的啊，没有对上，这正常，我们希望它能对上吧，我们都用 nickname， 然后再改成 nickname， 刚才这里也改成 nickname， 让我们找一下所有的是不是都改了， 编辑一下， ok， 这个我们自己手动解决一下这个 bug， 然后油箱管理这里也有问题啊，这个应该是空的，但是它有一个 user s qq dot com， 这个是，这个是在 item 的 email 里面，看一下这个 item 是 email list， 去搜这个 email list， 因为我们现在是在 sentence 里面是没有这个 email list， 他只有在叉秒里面去用了，但是我们的 gs 里面是没有去用，那这个说明缺失的太多了啊，我们直接告诉 ai 去修复这个问题， 烦死了，我们看到他改了以后，这里还是有一个 user qq 的 这么一个邮箱，我们看一下是怎么改的。为什么还有这个问题？看一下这个 email account 是 怎么用的啊？这里面是两两个 email， 看，我们把这个， 把这个 account 打印出来看一下啊，让它再调用一下，看一下这个是空的，所以这个 email account 是 空的，这个应该是零，但是我们的这里呢？叉 ml 这里并没有用到 email account。 邮箱管理这里有个邦的 email， 他 是用的这个东西，这没有对上啊。 no no， no no， 所以 我们要给 ai， 嗯，我们现在要他以 gs 为准， 可以看到很多时候我们没有办法去很快的修复这些问题，就是因为这个 ai 有 时候确实对我们上下文理解不是很透彻啊，然后它确实去在 g s 里面修复了功能，但是 ui 是 没有修复的。看现在这里 已绑定零的邮箱， ok， 现在这个是对了，先不管他，我们继续看一下这个这个用户界面，用户界面现在更换头像这个功能，我们再测试一下，随便选一张可以，他这里不支持的文件里仅支持 g p g 拼机，但是我这个是拼机的，让他修复一下， 我们让后端整理一下整个服务的日制输出，然后创建一个日制输出等级的管理方式，方便我们前后端连调的时候 bug。 现在我们先回到前端的任务，我们看它判断是 sdk 的 文件类型判断有问题，然后它现在确实按照规则它不会去更改我们的 sdk 了。 现在它的解法是把前端调用的微信 pos 一 麦换成微信 pos 一 点，我们现在来先测试一下，必须用这个还是一样的啊，还是不能上传头像，换一个看一下 也不行，那我们找一个洁癖肌的也不行，所以说这个是有问题的，那我们就只能等后端把日历整理完以后再去弄。这里我们看到这个 uplog， 这里并没有打印它的 message 是 什么东西， 这个可能是有问题的，所以这个还是要后端去检查。 s d k later， 然后这里他已经把这个做好了，我们看一下吧， 服务也已经重启了，之前后端还有一个上传头像的问题，我们还是要后端去修改的。这里我已经让前端把邮箱授权的功能调试的差不多了，把它复制过来，然后告诉后端，让他去排查一下这个问题。 later， 他 已经修改了哈，然后我看一下他修改的是 是后端的无法识别的，这测速已经用 cpu 来判断我们两个是不在我们家扩散。这个前端是调 sdk 的， 所以它要更新 sdk， 所以 这里我们要它更新一下 sdk， 然后重启服务生效。 later， 现在我们再把这个 redmi 给它更新一下，然后告诉前端，让它继续去修这个头像的 bug。 现在好像有点问题了，很多都打不开了， 这个还是有问题。知道，所以我们一换新的对话，他把很多东西都忘了，之前出现的问题他又出现，所以我推荐大家用翠的话，还是建议大家能在这里去压缩上下文。就压缩上下文，如果是新建任务的话，一定是 要做一些跟原来关联性不大的东西，要不然的话他很容易忘记他这一忘我们就要再重新再搞弄过来试一下吧。 ok， 我 们现在来他已经编辑成功了，我们再重新再编 一下，然后来去检测一下这个更换头像的这个功能。还是不支持啊？还是不支持呢？还是在 s d k 里面 告诉他问题？依旧让他去看服务器的日制排查问题，因为我们刚才不是做了一个日制系统，现在这个日制就记录的比较完善，我们看到他们两边是都想通过自己去解决问题，这个实际上是不对的啊，后端应该对前端 出一些要求啊。嗯，我们再试一下吧，然后如果不行的话就告诉他，这还是不行哦。但现在这个问题又变了，又变成一个调用，这个应该是一个自创分割的， 我们应该让后端给前端提些需求，而不是让后端一直去适配前端。这里 我想去看到前端到底传了个什么玩意。这个 sdk 和这个日制看的不是很清楚啊，等下再 看一下他这个修改。我只能说后端不报错而已，但是能不能成功报说仍然是不支持的文件类型。那现在有一个问题就是我们看不到他到底是怎么请求的，所以我需要这个， 我需要他在 sdk 中加入明显的 api 调用时请求和响应的具体数据， 要不然的话我们不知道他发了什么，就没有办法去指导 ai 去做。现在就是变成了两边在磨洋工 可以尝试把这个把这个错误再丢给前端呢，前端又说是后端的问题，然后后端说前端的没有传递，就变成两两边扯皮了，我们就改不好这个问题了。这里我让他把所有的 ipi 的 雕像都加一下吧，要不然的话我没有办法知道我们到底请求了个什么东西。 ok， 我 刚才让他把这个 sdk 里面所有调用 api 的 日期呢，给我整理了一遍啊，我们现在更新一下，然后让前端呢给我好好的把这个 bug 的 字输出出来，要不然的话他们就会一直扯皮啊，两边一直扯皮就就改不好代码。这里他提示我达到五十轮新建任务效果更好，我就不建啊，我就压缩一下。更新了以后呢，我们先重新编一下，确认他是没有问题，有打印的，这个之前也是有打印， 现在我们来看上传头像这个问题，更换头像点一下，我们看一下啊，我们是传了一个 http 的 tamper 这么一个拼机，然后它 response 的是不支持的类型，仅支持 gpg 拼接 gif 和。这个这里我感觉这个我感觉怪怪的，我觉得是后端实现的问题，我觉得这个这个上传头像实现的问题是有问题的。 我们现在不用这个 auto 了，这个 auto 有 点太笨了，我让他看一下这个方案，但是他这里我感觉他也只理解了一半啊，他这里只把这个下载的给做好了，但是我们上传的还是没有做好，等他弄完以后我们再测试一下，如果不行的话再让他，哎呀，好累啊， 你看他只做了这个后端的返回啊，这个肯定也不对啊，测都不用测了，肯定不行的，所以现在我们要非常清晰明确的告诉他，我们让这个接口能够提供一个文件上传的符，这里他检查完认为这个符是正常的， 但是问题还存在，所以这里看到他加了一些日制来去排查问题，我们现在又加了一些日制， 现在呢，我们可以看到后端这里是有一些新的日制人，让他再去看一下到底什么问题。目前看应该是 m i m e 类型不匹配，就说这个扩展是没有的， 所以说要求他们把这个完整的请求全部都打印出来才能看得到，要不然的话没有日制是没有办法 de bug 的。 这就解释为什么大家 web coding 很多时候也没有办法去让 ai 自主的完成， 因为有时候就是要去看日制，那有时候 ai 也会说去添加详细的日制，但是这些日制出来以后，我们还是要通过提示词的方法告诉 ai 去阅读这个日制，它才能判断，这样的话我们按照他说的，我们再请求一次， ok， 然后看一下日制，这里呢就已经打印出来了 它的这个上传信息，因为我们调用的是微信 upload file， 这个是微信封装的接口， 所以说有可能跟 ai 认为的通用的一些是不一样的，有出入的，所以要去兼容这个他收到节气后收到的实际上和他想要的是不一样的， 所以他需要修改代码来兼容不同的这个情况。 later， ok， 这幅重启了，我们现在直接在这里保险起见把前端重新编一下，就更换头像这功能。 好的，现在这个错误是变了啊，错误变了就好，他不是那个错误就好。这里呢，我们看到这个报错还是在 s d k 里面，所以继续把它交给后端去分析， 我感觉就是怎么说呢，明明上面有这些，但是他只修改了一个地方，修改了这个，但是这个他也没有修改，一点也不聪明，我觉得 每次都要确认一下，我们的服务器已经启动了哈。 ok， 现在现在我们看到我们传这个图应该是成功了哈， 但是呢，这里图片链接这里报错了，这个是前端的，包括这个有一个配对使用的问题，我们把它全部都甩给前端去解决。 后面呢，我们还有很多要去连调的地方，这里我就不会在视频里面给大家去记录了。然后相信在我刚才介绍的一些调试过程中呢，大家也能学到一些与 ai 写作编程去调试的 bug 的 技巧。 这里面其实也没有什么深奥的东西，说白了就还是回到最原始的信息差和沟通的问题，我们一定要想方设法的去抹平信息差，然后把事情状况搞清楚，描述清楚，这样的话 ai 才能 准确地去帮我们解决问题。因为现在很多情况，比如说我们的代码在运行的时候，只单纯从逻辑去判断的话，很多情况是不能 cover 的， 我们一 要从实际的表现拿到实际的表现的结果，再反过来去分析问题，才能得到最终正确的答案。现在这个头像呢，我们是没有办法下载下来的，是因为这个 http 我 们没有配，所以说这个 这个地址好像也不是很对啊，我们要让后端去排查一下， 我们让他去排查一下哈。 ok， 我 们来试一下他这个正确的 u i l。 先试一下能不能看到这个绿坨坨，这就对了嘛，这是我们传的绿坨坨， 那这个问题基本上就解决了哈。好的，我们也来重新试一下啊，直接看这里啊，这还是 up 啊，这肯定还不对，我们再上传一下试一下啊。 啊，我知道了，我们换了图是对的，是他这个获取用户信息的这个接口返回的是错的，那还有一个原因是因为之前错过的东西已经存在数据库了，所以没有更新啊，我明白了，应该是这个原因， 那我们再试一下现在这个应该就是这个头像，那就没有问题了。 ok， ok， 搞定。开不开心？ ok， 视频到这里呢，我们来做个小小的总结。 这天其实调试了很多功能，虽然这期最后详细展示的只是一个更换头像的功能，没有什么技术含量，但是整个调试过程恰恰能反出很多朋友用 ai 编程时候 bug 的 痛点，尤其是没有编程基础，缺乏调试经验的朋友，往往只能告诉 ai 最终的结果和表面现象，却忽略了代码 运行过程中的关键信息，导致 ai 反复的卡壳一直打转转，问题始终没有办法去解决，本质上就是微信小程序分装的数据格式和后端期望的不匹配，只要能看到日记里的关键信息，问题就会一目了然。所以这里我也想重点强调， 制系统对于的 bug 来说真的非常的重要，而且非常的实用，它能够快速帮助我们精准的定位问题，少走很多弯路。最后和大家分享一些我对项目规划的理解。有些朋友可能会把前后端放在同一个工程里维护，说实话，对于 ai 编程而言 的确有优势，一个 ai 能完整的读取前后端所有的代码，反而前后端分离呢，人为上制造了一些信息隔离，两个 ai 有 可能无法高效的协助。但这里有一个非常现实的问题，就是上下文的限制，因为如果是前后端都在一个工程，由一个 ai 负责的话， 他每次读取的信息可能会非常的多，有非常容易导致上下文的截断，最终导致结果出现偏差。所以从这个角度出发呢， 我建议大家至少要做到前后端的分离开发。除此之外呢，做好有效分工其实也非常的关键，一来能让 ai 负责业务模块，有效的结偶，二来呢，能锻炼我们自身的系统架构思维，最后就是提升开发效率， 可以并行推进。当然分工之后呢，不同模块之间的信息交换就非常的重要，就像我们这个项目产品的 pid 文档是所有模块的共识。 前后端呢，则用 sdk 作为沟通的桥梁，前端只负责调用，后端负责实现和维护，这样能够避免信息的脱节。这期视频呢，确实很长，能看到这里的朋友真的非常感谢大家的耐心。下期内容呢，我们就把核心的邮箱发票整理，发票识别功能全部打通， 让整个小程序的核心功能真正跑起来。如果屏幕前的你也对 ai 编程非常感兴趣，想和我一起实践学习，欢迎点个关注。非常感谢，拜拜。

怎么样用一句话把这样的线框图转化成高保真圆形图，并产出交互说明？进入磨刀，选择圆形设计图片转圆形，上传线框图，输入口语化的描述，直接生成 补充内容的选项，等于生成前和我的一次深入沟通，考虑了风格、颜色、延展等方方面面，等待几分钟，就能得到这样的高保真圆形图设计了。 左侧还能继续补充关联页面，或者直接生成交互说明文档下载多格式到本地。跟着这个思路，片头的疗愈 ui 界面也是这样完成的。 如果你还想进一步细划和调整呢？导出进行在线编辑，丰富的设计组建也是大大提升了效率。 就这样，不管是什么样的抽象原型，都可以一键生成高保帧，甚至输出交互文档，还能完成细节上的调整。这样的全站式流程，从两三天的工时就减到几小时，你学会了吗？我是落落，希望我的分享对你有帮助，下次见哦！

你们有没有发现一个特别有意思的现象，二零二五年到二零二六年，全球最顶尖的 ai 公司都在做同一件事，让程序员回到那个黑底白字的老旧命令行界面。 open ai 出了 code c o i， anthropic 出了 cloud code， 连 google 都开圆了。 jimmy， c o i， 这是要干嘛？ ai 不是 应该让操作越来越简单吗？怎么反而让咱们倒退回去了？ 我一开始也觉得挺反直觉的，但仔细研究了一下，发现这里头门道还挺深的。首先啊，命令行有一个超级大的优势，干净。你想啊，在 ide 里，各种窗口、标签、项目、文件， ai 需要处理很多无关的东西。 但在命令行里， ai 只专注文件本身，效率完全不一样的。而且，命令行还有一个关键点， ai 每执行一个命令，你都能看到输出日制，它的思考过程对你来说是完全可见的， 这对于企业级应用来说太重要了。我要知道 ai 在 干什么，能不能控制它？再加上命令行可以直接操作整个操作系统，创建文件、安装依赖运行脚本、部署服务器，一条龙服务， 而且它天然支持自动化，写进脚本里，效率能提升百分之四十以上。所以啊，这场复古真的不是简单的怀旧。当 ai 从被动的工具变成主动执行的智能体的时候，命令行这种简洁透明的方式，恰好找到了自己最合适的位置。 说到底， ai 时代的人机交互正在从操作界面变成意图接口，关键不是 c o i 还是 g u i， 而是怎么让人类的想法准确传给 ai， 让 ai 的 执行能被我们理解和掌控。

炸裂了！朋友们快看！刚刚开源的网页文字排版神器 pretext！ 它由前端开发者 chanel 发布，是一个轻量级的 type script 库， 核心是用 canvas 直接测量和排版多型文字，完全绕过档，避免浏览器卡顿。以前做复杂文字界面时，经常遇到滚动卡、布局乱，不同设备不一致的问题。现在 pretext 让这些变得简单很多， 实际效果非常惊人。几万个不同高度的文字卡片组成，瀑布流滑动依然能保持一百二十帧流畅。聊天气泡根据文字长度自动完美贴合。动态多栏布局，像杂志一样随屏幕实时调整。自动展开的输入框， 受风琴、多行文字句中等常见需求也能轻松实现。它体积很小，支持全球所有语言和复杂文字方向，在浏览器里跨平台表现高度一致，性能比传统方式快几百倍。 对前端页面来说，这意味着文字密集的界面也能做到既美观又极致流畅。 pretext 已经开源， github 和官方 demo 页面都有大量例子，强烈推荐大家去试试！

各位朋友们晚上好，这两天设置 gpt 发了一个涉及令人愉快的前端，大致讲的就是你需要怎么去用它的 codex， 然后去设计 你的前端页面，然后使前端页面变得精美。它大概讲的是首先使用技巧，你可以基于它的这个入门提示词来进行修改， 你要先选择较低的推理水平，这是他建议的。其次就是说你需要告诉 codex 您的设计限制条件，例如字体调色板，布局， 大概它第三点是提供你提供需要参考的情绪模板，例如截屏各种各样的提示词，具体怎么做是跟用 chat g p 四，它这边已经有讲使用 code x 的 chat g p 四的一个模型创建 情绪模板，这里的情绪模板灵感来自于纽约咖啡文化的 y k 美学，就是你先创造一个大致的一个美术的一个风格，也就是情绪模板页面的一个情绪模板，再 给到它的 gpt 四或者 codex， 基于这个模板，基于这个情绪再去创造，那么会更好一些。总的来说给了我们一个入门的提示词，你可以根据这个入门的提示词去进行修改，再进行操作， 后面的其实就没有了。它还给了一个 skills， 你 可以根据 skills 来完善你自己的题词风格。这个安装的命令就在这边可以直接安装，根据这个 skills 来更加完善你的风格。 这个就是我基于它前面的一个介绍的一个风格来简单的设计了一下，用它给的一个体式词，我感觉我个人看过来还是挺不错的。