codebuddy安装git

这是我用克拉巴黎从零到一搭建的一个小程序啊，一个点咖啡的，那这边的话可以选择咖啡，然后可以选择规格， 然后加入到购物车，购物车这边数据能正常显示，也能去结算，然后提交订单。那么这边不仅仅有小程序端，还有一个这样的后台管理系统去可以去管理这样的商品信息啊，那么我是怎么做到呢？那本视频就是从啊全程的录制啊，然后从零到一整个的实践过程， 而且我也准备了一个这样的文档，把我每一个步骤实现的过程，然后里面的关键的提示词以及一些关键的点啊，都录到这个视频里面去，录到这个文档里面去了，你可以按照这个文档从零到一完完全全的能够实现。 ok， 那 话不多说，我们开始 qq 八里这个软件，其实我很早之前就分享过，当时我对它的评价是不怎么好用，但是这几个月过去之后，我把它重新下载下来的时候，我当时是很惊讶的，那我惊讶在哪呢？第一它这个模型啊，全部都是 gbt 五点一和五点一 codex， 那 么这个是非常非常不错的，那为什么呢？目前就是除了这个专门的这个前端能力非常出色的这个 gmbn 三 pro 之外，它后端是 gbt 五 点一或五点二 code x 是 跟 cloudsonet 四点五和 opus 是 有一竞争之力的，所以的话它有了这个模型之后，那对于实现起来是非常方便。那第一个是它模型比之前丰富了很多，那第二个呢，就是 它增加了非常非常多利于这个 web coding 的 这种啊功能啊，比如说啊，它有支持 prime 模式，就它的 prime 模式跟 cos 的 prime 模式很像，通过你的一个啊想法，它能把它 形成一个具体的一个啊，含有突出历史的和设计的一个文档啊，比如说我举个例子，我在实现这个过，实现这个项目过程中，那么这边也是有啊生成这样的文档，非常详细的文档。 那么我在过程中呢，也是看他的设计啊，或者什么都是非常专业的，有这样的模卖的图啊，有这样的一个接口的说明啊，所以说非常非常的专业。那么除了这个之外，那还有就是他也支持这个啊多智能体，你可以在这边去配置， 你可以在这边去配置多个子智能体，也就像啊 clock code 啊，或者像 tree 里面都可以配置不同智能的这个子智能体，然后在整个对话中能够智能去调用。比如说你这个智能体是负责前端设计的，那么他也去能去智能去调用。 还有呢支持还支持 skis， 这个就非常非常难得了，目前很多工具啊都不支持 skis， 但是他目前支持了，也就说你在 clock code 里面用了的很好用的这些 skills 啊，你都可以把它导到这边去，它能去调用。还有呢，它也有记忆的功能，以及以及它最出色的跟它自己的这个 cloud base 是 深度集成的，也就是说你可以不用 去购买服务器，不用去购买域名，你不用去操心这些啊运维的事情，那么你可以用它的这个 cloudbase， 或者说你用 superbase 也行，来完成数据库的读取啊，认证啊那些很麻烦的事情，这样的话你专注于自己的这个业务，业务代码就行了，所以说非常非常方便。还有呢就是 你把代码都弄完之后啊，这边也提供这种啊一键部署的能力点部署，比如说刚我现在要演示这个项目，那最终是可以把这个项目都部署到这个 一个网址里面去，你可以有自己域名来进行替换。然后这边的话还有啊斐格码这些组建，可以直接使用斐格码的方方式啊，把这个你的想法变成界面，那么我这个点咖啡的这个小程序就是这么做的， 就这么所以说它目前看下来就是整个是一个非常成熟的，跟我几个月前用的话是变化非常非常大，所以我在整个用的过程中 非常非常顺利啊，基本上没有卡壳的地方。如果你在国内想要去开发小程序，那么它这个东西是最好的一个 ai 编程工具了，因为它集齐了太多太多关于小程序啊云开发方面的，这我们可以看一下它这个 source 就非常非常多，它自己系系统内部集成了非常多的这种路由， t、 c、 b 就是 cloudbase 里面的带这些路由，你看 它所有的这些调用啊，小程序相关的全部都有，全部都有，所以说这是非常非常不错，就算你不用开发小程序，开发其他的，你也需要后端，对不对？那么你也去是可以去使用这个 cloudbase 的， 所以我在整个过程中啊，真的是非常非常顺畅，也非常推荐大家去下载使用。那么在开始之前呢，你要创建一个这样的文件夹，因为我们现在这一次的演示是为了开发一个包含啊小程序和一个包含后台系统的一个完整的系统。所以呢你一定要先创建一个文件夹，比如说我们这次搞的是个小商城， 那么在这个商城里面这个文件夹里面可能会包含一个小程序，对吧？然后还有一个后台 要把这个文件目录建好，这样的话，你的这样的话，这样的话你的 ai 编辑工具啊，打开这个文件夹就会有两个目录啊，能方便的去做这种上下文的管理。 ok， 我 们优先先去创建这样的一个小程序啊，比如说我们现在先选择目录 小程序，这边就创就选择你的这个小程序目录就行了，因为他们这个后台跟这个是没有关系的。用这个微信语音开发，然后的话这边选择不使用选择测试啊，选择测试然后点创建。 那为什么要使用微信语音开发呢？这样就避免你去自己去买服务器啊，去创建数据库啊，去做服务器运维啊，就非常麻烦。 那么微信小程序里面其实集成了这个微信云开发的很多很多功能啊，你能很方便的就不用去太关注福气、玉米这些繁琐的事情，然后能做到就是你专注于你自己业务开发就行了。 那么你创建完之后会得到一个这样的一个界面啊，一个这样的一个这样的出手化的一个这样的 的环境啊，这边的话，你会看到你这边已经有一个这样默认的 crawl 一 这样的环境，点开这个云开发，这边的话会有一个默认的免费的开发环境，你在做测试的时候其实完全够用的。那这边会有一个这样的一个 crawl crawl 环境的 id 啊，把它给复制过来，然后的话回到你的这个目录里面去，然后打开这个啊小程序目录里面这个 app 点 js 啊，然后把这个 a、 p、 d 个云环境的 id 复制到这里去， ok， 那 么你就完成这个项目的一个出水化了，那这个时候你就基本上可以把它最小化啊，可以暂时可以不管他，然后的话你可以就是用你这个口袋包里去打开刚刚的那个文件啊，刚刚这个文件啊，这个默 打开之后，那么你就会看到啊，会看到有两个目录，这样的话相当于就是管理起来了。那么接下来就是你要来写一个最基础最基础的这个全局的一个这样的一个说明文件啊，告诉这个 ai 你 这个两个目录是干什么用的，那么我们会用啊，这里边的这个路由 啊，项目规则创建规则，那么我们把它它命名成 project 规则类型啊，总是也就说每一次这个 ai 的 请求啊，都会把你这个规则里面的内容 啊放到你的对话的上下文里面去，这个叫总是那手动的，就是需要你把这个规则文件啊拖到这个对话框里面去，告诉他去读取这个规则文件里面的内容。那么我们在前面已经说过，规则其实就是你来约束 ai 开发的一些规范的， 虽然我们这次是要告诉他，总是因为我们是要来说明我们整个项目是干什么的规则内容，所以我们就大概就简单介绍一下这个项目是干什么的呢？项目的价格是什么？这样的话他就生成代码的时候会去参考你这样的一个建议啊， 然后我们会使用 cloudbase 来作为我们的后台服务，就说我们不需要去搭建一个这样像 python 这样的后台服务的处理啊，点击确定 ok 就 ok。 好 了，那后面如果你有一些自己在开发过程中啊，有一些新的变化，比如说出现一些问题需要去规避的话，那么你也可以加到这边去做一些，比如说你你希望他不要去做什么事，或者说你建议他去做什么事，那这个文档可以慢慢去完善。那接下来呢，就是我们要进行下一步，就是我们要去 啊链接啊链接这个 clockbase， 那 为什么这一为什么这样做呢？其实你可以认为就说啊，我们在这个项目很干净的时候啊，需要去做一个触手化，因为我们点击链接之后啊，其实链接 clockbase 其实也是啊， call the body 在 后续后面会把这个 call the base 里面相关的东西啊，生成很多规则文件，这样的话你后面的请求才不会有问题。然后的话你这边微信登录之后啊，你就会看到它需要获取这么多授权，那你授权给它，授权完成之后啊，你就会再看到 call the body 下面的 rules 里面会有很多啊这个函数，这个 call the base 里面相关的这个函数啊，各种各样的， 那么它其实就是可以在下一次的请求里面会自动去识别这里面的这里面的东西了。这也就为什么我说一定要在项目出手话的时候先把这个，如果你要用这个 codebase 啊，如果你要用这个 codebase， 那 么你就先把它给连上去，先把它连上去 这边他已经出示完了，那出示完了之后呢，会有一个问题，就是他自己出使化会得到一个这样的一个环境的 id 啊，也就是我们的云平台的一个 id， 跟我们当时小程序创建的是不一样的，这时候你就可以告诉他啊，我真实的这个 id 是 这个， 到目前为止啊，就相当于把这个环境啊代码出使化已经做好了，那接下来就是一个实际的从一个产品到一个完成品的一个过程了。 那所以现在这一步呢，就是啊，假设你现在有个想法，对吧？你要把想法变成产品，那么我们就要要把这个长这个想法具体化，那么就是我们要生成一个这样的一个啊，说明文档。有了这个文档之后啊，那大模型啊、编程工具啊什么都知道，我们到底的是具体的需求是什么？ 那么你可以用这段提示词放到我们的这个口袋里面去啊，让它生成一个这样的一个标准的一个 prd 文档， 你可以选择这个啊，这个模型其实都一样啊，你可以选择这个 max 也可以。 ok， 那 我们就让它生成一下，那这个文呢，其实作用是什么呢？是啊，明白你这个产品是干什么的，然后它的 信息页面的结构是什么样子的，然后他会给你一个这样的一个页面的一个参考啊，就比如这个页面怎么设计，对吧？然后如果说你要更详细，还可以输出这样的接口的定义，但是那样的话会导致这个文件非常的大，所以说我们就暂时不用那么麻烦。我们先其实就是把你的这个想法，比如说我现在想 做一个这样的点咖啡的小程序啊，然后把你这个这个想法更加细致化一点，他这边已经生成完了，生成完之后我们就把这个文字啊拷贝到我们的这个文档里面去啊， 这边的话我们新建一个文件叫这个名字啊，拷贝过去，拷贝去，过去之后呢，我们可以大概来浏览一下他目前给你设计的啊这个东西啊，定位节省时间，目标用户核心功能用户测 啊，选择这个规格下单支付个人中心小程序端啊，这就是给你的在规划你的页面结构了，在规划你的页面结构了，然后后台， 那么后台其实我们是啊不需要他来做这个种啊界面的管理，因为我们后台会根据功能去做 对应的这个后台管理啊，所以呢其实更重要就是看他的这个小程序的这边的设计，如果说你对这边调整啊，有你自己的想法，你也可以来修改，比如说首页啊，首页的话我们就希望就是啊展示一个开屏键面，对吧？ 分类商品卡排序详情， 优惠券我们就不要搞那么复杂，我们就直接就不需要优惠券，我们不需要，这个配送方式我们不需要，哎，简单订单列表 ok， 取餐进度条好， 优惠券也不用啊，我们都不用， ok， 我 们基本上就是可以把它这整个就看完了，看完之后接下来这一步就是要把你这个东西要变成界面，那怎么变成界面呢？那就要有一个设计工具，或者这有几种方法啊？第一种方法是你直接让这个 copy body 去读取这个小程序的这一块的描述， 这一块的描述，然后呢去生成界面，还有呢你借助第三方专门的这个设计工具啊，来来生成这样的界面，那我们就是可以啊，使用这个 control body 本身已经集成了这个 fig 码，那我们就用 fig 码来做一个这样的界面，做这一套界面 在刚刚生成 prd 文档的时候，其实它帮我们生成这个设计的规范，因为我们其实要求它生成设计规范，看到没有？我们是要求它生成这样的设计规范的，所以我们等会把这个也拷贝过去。 ok， 我 们打开 fig 码，点这个 我们使用啊这里的这个 make， 那 这个 make 其实就是可以通过提示词直接创建页面，不需要我们去啊，有这种啊专门的这种设计的能力啊，因为作为一个啊，不是专门的设计的话，你要去用这个码去做设计出来一个好的界面，其实是有点难度的，那我们就把这个， 我们把这个拷贝一下， 然后呢我们把再把这一块放过去， 那 ok， 那 就让他去设计就行了，那这边设计的时候肯定会出现一些页面的这个问题啊，这个需要来自己来调整的，这个倒是问题不大，那这样的话他就有一个这样的你的一个内容的参考，一个设计规范的参考，然后他就会去生成这样的界面。 ok， 他 这边已经跑完了，也就说你这个其实如果你发现啊，就是你这个效果不好啊，你可以重新再 调整一下，你看我这是已经是改了一次了，他第一次效果是不好的，那我把这个啊，他的这个设计规范给去掉了，直接把这个页面需求发给他，让他去生成。 因为这个 facebook 背后也是一个大模型吗？但是不知道他用的是哪个大模型，他也是能理解你这个啊，你的这个要求的页面啊，然后去生成这样的一个界面啊，所以说你这个也是相当于抽卡限制的，如果不行的话，就是你让他再去调整，直到你满意为止，那么你也可以去调，可以去修改，比如说这个 购物车这个零不应该显示在这个地方，你可以点击这个，然后再点击这块位置啊他妈，那么你就可以去修改，让他 把这个购物车的数量放到这个右上角。接下来这一步就是要把这个 figure mark 的 这个这个界面，怎么把它挪到这个 code body 里面去。那么如果你是使用普通的这种 design 模式啊，就是普通的设计模式啊，那是 就是这边是可以直接点这个按钮的。如果是像我一样用这个 mac 模式，那你就要啊用一点其他的办法，比如说你要用这个点这个拷贝，把这个拷贝一下，然后呢回到这个啊，他的这个主页呢，去创建 创建一个这样设计稿，然后的话去比如说这个页面是一个首页写个名字，把它给复制一下啊，复制一下， 那么你就能把这个结构啊复制过来。那么有了这个复制之后呢，然后在那个一个界面一个界面去拷贝啊，第二个你就这样去依次去打开每个界面去拷贝过来就行了。 这边全部拷贝完之后啊，注意了，你这边选择一个这样的层，在这里选择这个层，这边会有一个这个添加到对话，然后这边就可以点击了， 你点击一下，然后他就会把这个资源的文件放到这里面去进行一个转化。但是这里面要特别注意啊，就是他这个转化是会转化成 html 语言的，所以你这边在这边要要求他转化成微信小程序，那么我们可以写一个通用的文件来方便，就是来一个进行一个转化啊， 好，就写一下，要求我这边写完一个大概一个这样的命令啊。方，就是就是为了方便我们后面每次都是不需要在这边敲文字，拖过去之后这边就在这里面放着了，然后的话我们就可以直接让他去生成 代码。 ok， 他 这边已经全部弄完了，这个首页啊，我在他弄的时候发现他会把 figma 的 这些图标啊这些东西下载下来，然后复制到这个我们的这个小程序的这个目录里面去复制到这里面去，你看，所以这个是非常棒的，我们来看下效果， 来看下这个效果啊，有一点问题啊，就是他没有显示一行两个，这个没问题，你看主要是我们看这些细节，比如说这些图标小图标他已经拷贝过来了，然后这些效果也有 切换的效果，也有那底部的菜单也是一把就过来了，不需要我们再去配置。现在唯一的问题就是我们调整一下细节就可以了，我们怎么来调整这个问题呢？其实就是把页面的名字啊，比如首页把这个你就这个问题描述一遍，对吧？首页的商品啊，必须是一行两列 就足够，剪短就行了，你也可以更加描述啊，详细一点，比如说首页要怎么展示空隙是多少，这个就属于专业的角度了，如果你 啊不是，如果前端专业的话，你就告诉他要一行两业，让他调完，调完之后再来改，包括后面所有的这个问题的调整，其实都是这种方式，你看到页面有什么问题，你直接如实去表达出来就行了，他是能够完全理解你的话的。这边已经调整完了，那么这个效果其实是还行 啊，目前最起码跟 figma 最少有九成以上是相似的，那么接下来就是每个页面都这么操作就行了。 ok， 我 们用刚刚的方法把所有页面都已经转化到这个 control body 里面去了，然后我们看一下最终的效果， 基本上就是还原了我们的这个 figma 里面的设计的效果，有些小瑕疵，你可以去逐步去调整 啊。这种比如说因为我们在飞哥嘛，这边是一个单独的一个弹框效果，那么你在做的时候啊，在刻的巴丁里面做的时候，你就告诉他这是哪个哪一个路口的一个弹框的效果，那么他去读取的时候，自然就会把这个东西啊给你加上去。 比如说我这边是怎么写，比如说我现在这里的啊，这个界面是购物车点击结算的弹出界面，请实现啊，是这个， 这是这一块是弹簧，那你选择是选择这个啊，这个这一块内容选择是这个这块区域添加到对话，然后加上我这个这个提示词， 就是这句啊，这个界面是购物车点击结算的弹出界面，那么他就会在这里面加上去点点击，然后会弹出，那整个下来的话，他这个还原度是非常非常高的，而且特别是一些图标啊， 这图标完全全部是图片，那么他在这边会生成好多飞格玛里面的图片，看到没，直接可以一一对应起来，这就解决了我们去到处去找图片那个问题了。 所以说整个下来啊，很关键的这一步啊，从飞格码转到这个微信的原声代码，整个过程是非常顺畅的，已经超乎我的意料啊，我也是第一次用这个啊飞格码进行转化，那效果是非常不错的，而且我们的代码全部是原声代码。那你做完这个事之后呢？那接下来这一步就是要去 让 ai 去阅读你的项目和产品文档，来做一个数据库的设计。那为什么要做这一步呢？其实是为了我们后面这个，我们的后端程序也好，我们的微信小程序也好， 能够去啊读取我们这样的一个数据库的一个设计结构啊，方便后面所有的这个前后端的数据的对接。因为现在你看了所有的数据其实都是假的数据 啊，都是测试数据，不是真实的在数据库里存储的数据。所以这一步我们一定要提前，相当于打好一个地基啊，做好一个设计图一样，让 ai 在 生成代码来说能参考这样数据库设计，这样，因为我们所有的这个 对接或者我们的功能啊，是分散在各个系统的各个地方，比如说你在这里有商品列表，对吧？你在订单里面也能看到商品的信息， 你可能在后台的这个页面里面也能看到商品信息，那这个商品必须来自于同一个数据库集合，如果你不提前做好，很有可能就是大模型在上下文长度超过之后 啊，在这个地方用的是数据库集合 a， 在 另外一个地方用的是数据库集合 b 了，那这样会导致重复设计，可能会产生不必要的这个问题啊。所以在这一步我们要让他去帮我们去先设计一份基础的这个数据库集合。那在这一步 如果你是有编程的基础的话，你是可以根据啊页面上这些元素啊，比如说商品有哪些信息，比如分类，对吧？然后小图标，然后名称啊，类型，名称、价格， 那么你可以根据这些元素呢，根据你的这个自己的这个产品的定义文档，自己去设计这个数据库也可以，那如果你没有变成基础了你，那你就让 ai 家帮你设计一份数据库，可能会有问题，到时候再去调整，这个就是看你自己了，一般 如果说有技术基础啊，建议还是自己去设计，这样的话你会比较容易去掌握，比较好修改。那我们这次演示还是让 ai 来帮我们去设计吧，就我们让 ai 去阅读这个 prd 文档，然后呢去阅读这个目录下面的所有的这个小程序目录，因为小程序的页面里面其实有很多这样的交互数据的， 有很多，这样的交互数据就我们希望他阅读完这些所有的数据之后啊，自己能思考推导出来啊，设计一个符合我们这个标准的一个啊，这样的一个数据库集合，如果这个项目很大，那这样的读取肯定是不可行， 不可行的，所以你的项目如果很大，你肯定最好是人人工去设计一份数据库集合，那这种小的项目你可以让他自己去扫描 好的，他这边设计出来了一份这样的数据库设计文档，就如果你看懂的话，你可以大概看一下， 就因为很有可能这里会有一些过渡设计啊，比如说有些功能可能是不要的，那么你就直接告诉他，比如说 啊，我这边优惠券这边不需要，那我就可以给他去掉就优惠券，而且还有别的设计，你自己觉得你可以去参考，去筛选，如果你自己看不懂的话，你就可以不看，让他去走下一步就行了。 接下来呢，你就是要去在这个 rules 里面去啊，要去做一个调整，那为什么要这样做呢？就我们在我们的工程这个目录里面啊，要特地的说明一下，如果有针对这个原数据库的修改啊，一定要先访问这个文件，就是 ai 一 旦 要对数据库进行读取啊，增加编辑啊，那么去阅读这个文件，因为你已经帮他设计好了，他需要去遵循这个设计规范就行了，不需要自己再去额外去做一些重复的事情，所以这里面是非常重要的啊， ok， 你 就这边写一下，就是如果是要需要使用和设计员数据库，请参考 the base 点 design 点 md， 如果新增 ok， 你 这边加好，那么他后续的所有跟数据库相关的设计变更都会以这个文件来作为一个中转和参考的对象。 那么在数据库设计完之后，你就要开始去做这个后台管理系统。为什么要做后台管理系统呢？是为了方便我们在小程序前端的时候进行一个数据连调，因为现在小程序端其实展示数据是模拟数据， 加上这个系统他也不算大，对吧？我们可以先把那个后台管理系统先搭建起来，这样的话我们可以添加数据，然后前后端能联调起来，就非常方便了。 那么在创建这个后台管理系统之前呢，我们一定要想一下，就是后台管理系统到底要管理什么？可以去观察小程序端这个每一个页面中的元素的这些展示的这些元素啊，然后比如说名称啊，描述啊，价格啊，那么这些就是商品就要管理的东西。 然后的话我们采用的是什么呢？是一个页面，一个页面来创建，如果你一次性让它生成太多页面，很有可能会有问题。 所以呢我们准备了这样的一个提示词，来让这个克里巴里去阅读我们的这样的一个情况，然后选择这个 prime 模式，最好是选择这个 max 这个大模型， 然后呢提交之后呢，那在这里的时候，大可能包里很可能会从这段电话里面啊拆出两个 part 出来，就说他会去，因为我们有了这个数据库设计文档，但是其实我们的 cloud base 里面是没有任何数据，也没有建数据集的，所以需要他帮我们去部署化， 要么就自己你手动去啊，云函数里去云数据库里面去创建数据库，要么就让他自己去抽象。那么我在发送这个提示字之后，他就在跟我提问，然后呢发现这边要抽象这个 color base， 然后这边呢我提供一些信息，然后就开始去执行这样的抽象了。 如果你在发布这个提示词之后，没有出现，没有出现这个数据库出式化的话，你也可以单独写提示词，让他去阅读这样的一个数据库设计文档，然后出式化到 cloud base 里面去，那么他也会向你索要这些啊 cloud id。 那 弄完之后呢，我们就可以看到，那弄完之后呢，我们会看到打开这样语音开发， 然后在你这个云开发里面就会有几九个集合啊，这个就是刚刚他出使化完，出使根据我们数据库设计文档出使化的一些基础的数据了，那这样的话相当于就数据库就搭建好了，搭建好了那我们就 啊继续我们的这样的一个后台管理系统。那我们把提示词再重新录进去之后啊，把重新 重新弄进去之后呢，它会给我们一些提问啊，我们去回答就好了，那么它就会生成一个这样的一个计划文档啊，然后你可以看一下它的一些说明，还有一些技术站，技术站我们已经要求它必须使用 element ui， 然后的话是一些数据流， 这些弄完之后没什么问题，那么你就可以点击这个 build 来进行一个开始的一些开始编码了。 ok， 他 这边已经执行完了第一个计划，他执行完之后呢，本身这个项目应该是在这个阿德密目录，但是他目前是放在外面这个目录，所以说他的所有的后端代码都在这里，跟这个 wechat 是 平级的，相当于他是个主目录了。但没关系啊，执行完之后呢， 那这边的话就是，呃，会有一些问题啊，打开页面之后啊，会有一些问题， 比如说，哦，他这边跑完之后啊，因为我出手画的时候是有一部分数据在这里面的，所以打开就能看到那分类，也能看到其实页面的样子不是说很美观啊，这个你都可以自己去调，主要是看他啊，有没有连接我们的 cloud base 的 数据库，对吧？ 那我们可以看一下，比如说我现在编辑一个，那么在这里的时候出现一个问题什么呢？就是你上传图片可能会上传失败，那我这边也是让他来修复这个问题，那么在修复的时候他就告诉我要去 call the base 配置一个安全域名，那么这边也是给到了这个链接，那你点击之后去配置就可以了。 那我们这边可以上传一个咖啡图片看一下。 ok 啊，这边是可以的，那么我们这边就是保存一下，好，保存一下，然后图片看一下它有没有显示正确， 如果说没有显示正确，那我们就要去看一下它是不是保存有问题，这就是需要我们一个页面一个页面一个问题一个问题去调整了。目前来看我们先新增一个吧，我们新增一个商品 保存成功啊，在这里新增的商品这个图片是有的，编辑的时候这个图片没有保存成功，相当于是那我们就会让他来修改这个问题，通过刚刚的方法呢，我们就一个页面一个页面去实现就行了，这边也会有统一的这个提示词， 这边呢也有这样的提示词来辅助大家去完成啊。接下来的页面你可以使用这种学习的方法，就让他看一下你已经完成的页面是什么样子的，然后呢他这边的话就很快能够去做出来，做完之后 啊，做完之后你大概是这样子，有四个这样的管理的入口啊，然后比如说分类啊，商品。那么在商品这部分呢，一开始第一把的时候，他是没有去啊，去有规格这样信息的录入的，就在我们的小程序里面是有些规格商品啊，比如说，呃，你看啊，比如说这个 在我们小程序端点开这个加号会出来这么多规格，那么一开始第一版的时候在后台是没有这样的配置的，那你也可以在对话的提示里面加上这个，就是让他去阅读这个数据库里面的设计，因为我们数据库设计里面是涉及到了产品跟规格是有个绑定关系的，所以为什么说这个 啊？数据库文件设计文件非常重要，就在于这里，就是你可以去发现一些不一缺失的东西啊，然后让他去读这个数据库设计文档，然后他去补全这样的功能， 那很可能你每次的这个这个完成都不一样，就是你要去检查一下是否缺少啊，缺少这个不一样的功能，那么检查完成之后啊，就是你后台录入数据没有问题，读取数据也没有问题，那么你就要接下来一步，就是把小程序前端 啊这里的模拟数据，每一个页面的这个模拟数据要对接真实的这个我们的这个 cloudbase 里面的真实数据会有没数据了，所以接下来一步就是小程序的转换，我们再把这个小程序啊对接这个真实 cloudbase。 之前呢，我们可以看一下，就说我们这个页面数如果不多啊，比如说我们这个现在的页面数其实不是太多 啊，只有几个五六个页面，而且我们现在其实只要替换的是小程序里面的模拟数据，替换成真实接口，所以呢我们可以在一次替换中让 club clubbody 去完成所有的这个 club clubbase 的 这个对接。所以呢提示词这里面有几个关键的点。第一个关键的点是什么？就是 我们一定要让他按照我们的数据库设计文档里面数据结构去对接，因为这个数据库设计文档是前端后端全部的功能都包含在里面的字段是能对齐的，这个是非常关键的。那第二个呢，就是 我们是让他要保证就说只修改我们的这个模拟数据，我们界面的这个元素啊，界面这些代码是不用动的，因为小程序这个界面是 全部使用的是我们的模拟数据，它使用的是数据，是跟我们这次的改动是没有关系的。所以呢我们在这个提示词里面一定要去告诉他，就说你这次的修改，你这次的修改只针对我们这 colorbase 的 对接，然后的话是不需要去修改我们的这个 不需要修改我们页面中的元素的，然后的话就是这边就这两个是最重要，一个是什么，一个是要参考我们的这个数据库设计文档。第二呢就是啊，我们只改这个数据层的对接 啊，其他都不要动。那你发给他之后，那我这边发给他之后，他就开始去找这边微叉的这个目录里面的所有的页面，然后把这个数据都抽出来，出来之后去阅读我们的数据库设计文档，然后去一个个去退换，你看他每一个都， 每一个每一个这个页面的这个 index 点 j s 这个文件啊，都去读取了啊，都去读取了，然后把对应的这个模拟数据替换成我们的 cloudbase， 我 可以就这样看，一直替换一直替换，那你弄完之后你就能看到是这样一个效果，那么这里展示就是真实数据，我们可以看一下后台也是这三个商品，然后的话 你可以去把它测试一下，比如加到购物车，那你在这边就能看到， 那这边就能加载正确的这个图片名称，那你可以去改变它的数量，然后的话你可以点击去结算， ok， 下单， 就是在这边能看到所有的请求都都是调用的这个 d b 点 collection， 说明我们已经跟 cloudbase 已经对接上了，那么你如果有什么其他的问题，就是如果说，哎这个数据加载不出来，那么你去把把这个错误啊，比如说我这个错误你可以直接复制，然后呢 放到你的 control box 里面去，让他去解决你这样的错误啊，就是这一步，在这一步替换，替换的这个过程中啊，大概能够百分之九十的基本上的错误，能够完成百分之九十的功能。如果你缺少功能呢？就你个个一个去调，比如说我这下面也是进行了一些小的一个一个调整啊，比如说 啊，比如说我们需要这个上面列表点击的时候，需要弹出这个规格的选择啊，就是在这个地方 就这个这个是来自于我们后台维护的数据，那么他之前弹出来的是一个啊，是一个假的数据，所以我们在第一次替换的时候，他是没有把它替换掉的，所以我们要去跟他去绿化，让他去替换。还有一些别的错误啊，都是一个个去调。 那这到这一步其实就是你的一个具体的页面调整了，是在一个大的框架已经完成了，所以这样的话是很快的，因为你的 基本上所有的页面都出来了，那么大模型在对你的这个整个页面里的某个局部界面调整的话，它的准确率是非常高的，因为你上下文已经有了，页面的结构已经有了，总比从零到以一这个过程是非常简单的。 那你所有的调完之后，像我这样调整完成之后呢，你就能看到订单啊，这些数据全部都是从后台这边加载过来的，就能看到这个，你就点这个所有的数据都是从这里加载出来的。那你也可以去云开发这边，这里面去啊，数据库里面去查看你的这个产生数据啊，他这边也是有的。 那这样呢，像你全部调完之后，包括后台啊、小程序啊，跟我们的真实数据库对接商对接完，你测试没有什么问题，那么你就可以去给他部署到线上去了。那小程序上线呢，是非常简单的， 因为我们使用的是云开发这种方式啊，那么直接去点上传这个就可以了，那么你还有一个后台呢，比如说你现在这个后台系统，那怎么去部署呢？也非常简单，那 clubbody 这边 提供了这种集成的方式，你点这个啊，点这个部署，那么你就能像我这样，就是出现一个这样的一个任务列表，它就会把这个项目啊推到它这个 cloud studio 里面去，然后部署完之后会有一个这样的链接地址， 那这个链接地址呢？就是可以直接上打开可以看到，那么如果你想要自己的域名的话，你也可以去这个啊，腾讯的这个后台里面去配置你的这个自定义域名，然后解析到你的这个地址里面去，那你这样就完成一个前端的上线了。最后我们来总结一下，我们在使用 color body 的 时候啊，从设计， 对吧？使用 fig 码的这个 make 功能啊，根据我们的想法，从设计生成的界面，然后再从把界面从 fig 码的界面，因为它是用 react 啊，转成我们的微信小程序的前端代码。然后呢我们再让这个 colorababy 给我们生成数据库设计文档，最后 生成数据库设计文档之后再生成我们的后台管理系统，然后再去完成小程序的对接。所以整个过程其实是从界面就是你 你的产品的思想啊，是一个文字，那么变成一个具体可见的界面，然后再把这个界面转成我们的小程序的语言， 转完之后，你开始需要去总结一个数据库设计文档，因为这个文档是所有的前后端的一个扭扭转的一个流行，一个核心是一个核心的东西，如果你没有这个东西，那么很有可能会导致就是你的数据库设计，你的集合的设计是混乱的。 如果你是有经验，你可以自己去设计，如果你没有经验，那么你可以让 ai 来帮你设计，让他来遵循这个文档。那这样我们前后端所有字段都是对齐的。那最后你最后你完成前端对接的时候，那么只要改的是 我们的模拟数据那一块，你不要去动页面，那个页面出来的效果就跟你当时在斐格玛设计的那个界面效果是一样，这样的改动是最小的，也是效率最高的。那 ok， 那 本期视频就到这样，如果你对 ai 编程感兴趣的话，可以多多关注我。

很多人一听到 clock code， 也就是我们说的 cc， 第一反应就是，哦，又一个写代码的工具，大错特错。如果你只拿它写代码，那真是大材小用了。 这东西根本就不是一个简单的编辑器插件，它本质上是一个系统级 a 人。什么叫系统级？就是只要你给了权限，它就能直接接管你的电脑。它不像网页版的 gpt， 说完话还得你自己动手复制粘贴。 c c 是 能直接帮你改本地文件，跑数据分析爬虫，甚至读写 word 和 excel 的。 简单说，他就是一个住在你命令行里的超级管家，只要你一句大白话指令，凡是你电脑能干的事，他基本都能直接替你干了。 要想把这尊大神请进电脑，得先查查户口，他依赖 node js 和 git 这两个环境。别管你是 windows 还是 mac， 打开你的终端或者命令行， 照着屏幕敲这两个命令，只要能蹦出具体的版本号，说明环境没问题。要是报错说找不到命令，那就赶紧去官网下一个装上，这不属于基本功，咱就不展开手把手教了。环境搞定后，安装其实就是一句话的事， 把屏幕上这行 m p o 命令复制进终端，千万注意中间这个杠 g 的 参数。这是局安装的意思？ 逗了，他回头，不管是调用还是升级都一堆麻烦，输完直接回车等着进度条跑完就行。装完了别急着兴奋，我们先验个货，在命令行里输入 clod， 后面跟两个杠 version， 只要他痛快地吐出一个具体的版本号，比如零点二点二九，那就起火了。 这就意味着这套系统级 agent 已经在你的电脑里安家落户了， c c 装好只是第一步，现在他还是个没脑子的空壳。 默认的 cloud 模型 a p i 申请极其麻烦，还得搞定海外支付，对国内用户来说纯属劝退。这里我直接给个最优解，别折腾原生的了，直接用国产平替。比如智普的 glm 四点七，我实测下来 再写代码，这个垂直领域，如果说满血版 gl 的 能打九十八分，国产这几个模型基本都在九十分以上，日常用起来体感差距非常小。 关键是门槛和成本完全是一个天一个地。方案定了，咱们准备两样东西，去智普开放平台注册个号，在后台复制你的 api key， 这串字母自己留好，别乱发。关键是第二步，记得在里面订阅一个叫 coding plan 的 套餐，这个非常重要，它是专门针对写代码优化的，而且价格很香，一个月也就一杯奶茶钱，比你按量付费划算的多，能省不少银子。 拿到 key 之后，千万别去手动改什么环境变量，哪怕多打一个空格都得报错。直接用智普官方出的这个自动化工具，一行命令全搞定。在终端里输入屏幕上这行 npx 指令，回车之后，它会弹出一个全中文的界面， 你只需要跟着提示选中文确认套餐。把刚才复制的 key 粘贴进去，它会自动帮你把底层的连接配置全部写好，新手绝对不会出错。 把 c c 叫醒之后，你得适应一下他的工作方式，这不是咱们习惯的图形界面，没那么多按钮，给你点全靠键盘。第一件事，你得给他划进个工作区，也就是告诉他该读哪里的文件。最简单的办法，直接用 cd 命令进到你的项目文件夹，再启动它。 如果在聊的过程中想加别的文件夹，直接敲斜杠 a d 二，把它拉进上下文里。记住，对 c c 来说，文件夹不仅仅是存东西的地方，那是它的知识边界。 这里教大家一个极其好用的隐藏操作。很多人都不知道，以前在命令行里输文件路径得敲半天，还容易错。在 c c 里， 你直接把要把要分析的文件或者整个代码库文件夹用鼠标拖进这个黑框框里，松手回车。这一招叫物理投喂，不管是几十个代码文件还是复杂的文档，拖进去他就能瞬间读取。 这是扩充他上下文最快最暴力的手段，没有之一。最后说个最容易让人抓狂的坑，就是粘贴在终端这块地盘上，千万别在那狂按 ctrl v， 把键盘按烂了也没反应。想粘代码或者文本，直接按鼠标右键。如果要发图片给他看，快捷键是 alt v， 但是注意听，这里有个大坑。你不能在文件夹里复制那个图片文件，你得把图片打开或者直接截图复制图片的内容，这时候按 alt v 才能传上去， 这点非常反直觉，一定要记住了，熟悉了交互，接下来这几个斜杠指令，就是你每天都要打交道的工具了。第一个是斜杠 clear， 每当你打算开始一个新任务的时候，一定要记得先执行它，这相当于给 ai 换个干净的大脑，防止之前的对话干扰它的逻辑。 第二个是斜杠 comp， 这个太有用了，如果一个任务聊得太久，你会发现 c c 反应变慢，或者开始胡言乱语。 这时候用它给对话设个身，它会把之前的废话压缩成摘药瞬间，节省大量内存和费用。最后就是斜杠 cost， 建议你没事就敲一下，看看这波操作花了多少钱。毕竟咱们用的虽然是平替，但也得精打细算不是？ 如果你觉得每次改文件都要点确认太麻烦，那咱们就玩点大的。启动 c c 的 时候，在后面加上两个杠， dangerously skip permissions， 这就进入了传说中的危险模式。这个模式的精髓就六个字， 别问我，直接干！比如你想把几百个文件名全部统一规范化，如果是普通模式，你得点几百次确认。 但在危险模式下，你把要求一丢，去喝杯咖啡回来，他就已经全部改好了，他会自动尝试报错重试，直到把结果交到你手里。不过丑话说在前头，这个模式权限非常大，用之前一定要做好备份，千万别在系统核心目录下乱玩。 如果你觉得危险模式已经很强了，那 m c p 简直就是给 cc 穿上了一套外挂机甲。简单说，这个协议能让 ai 走出终端， 直接去操控你的浏览器、数据库或者其他软件。举个最接地气的例子，很多博主每天要统计公众号后台数据，手动点开复制粘贴到 excel 表格，这活干半小时能让人心力交瘁。现在你只要装上这个 chrome 调试外挂， 一句话， cc 就 会自己打开浏览器，一页一页翻把数据抓下来，最后再亲手给你做一个 excel 表格发过来。整个过程你只需要看着原来半小时的体力活，现在五分钟全自动搞定， 这才是真正的生产力解放。最后再给你安利一个神器叫 skills， 你 可以把它理解成别人已经封装好的顶级工作流，你只需要借过来用就行了。最牛的一点是，它用完即走，不占你的大脑内存，也就是不浪费 top。 比如这个前端设计技能包，简直是审美救星。你只需要把一个长得挺丑的网页链接丢给他，让他优化一下， cc 就 会调用设计技能，自动重构布局、调整配色。几分钟功夫，一个极具现代感的网页就出来了， 而且里面的链接全都能真实点击。最棒的是，现在用国产模型也能完美运行这些技能不需要登录任何海外账号。以后不管是写代码还是改 u i， 只要你有 c c， 你 就不是一个人在战斗，你背后站着一整套官方技能库。

codebodycode 二点零重磅升级，开放 sdk 被集成，通过 acp 协议标准化输出 agent 能力，助力企业低成本构建 ai 应用，全面兼容开发者工具生态，支持 plug in 插件市场和自定义智能体， 提供 container 一 二 b 隔离沙箱环境保障代码安全执行，增强工程记忆 lsp 诊断，并支持 gm、 四 gpt 等高级模型，打造 ai native 团队开发新范式，实现近百分之一百代码 ai 自生成。

今天主要就是讲编辑 fmpg 的 wiki 的 一个一个 wiki 或者一个书籍，然后周期大概是一周。那目前，呃借助 ai 的 话，大概两三个小时可以完成上面的一个成果，我可以给大家看一下， 给配置打开看到没有？这个是大概借助 ai 可能是两三个小时左右就可以一个完整的一个案例。你看这边前面是有一个一进来就是 主要了一个项目介绍，看本项目是一个完成，这全程是由 ai 生成的啊，后面还没有经过一个微调。你看这个主要内容，完整的一个视频剪辑流程，然后基础站啊，这东西全部是 ai 生成的，我都没有人工参与。 看项目结构啊，进阶篇这边都是有，这边有明确有详细的一个文文档， 还有代码，当然因为没有经过一个调调试，或者没有经过 ai 的 一个再次修复，可能是有一些写的不是那么完美，但是它基本的骨架已经做出来了，看到没有啊？ 然后我们今天就讲一讲这个是怎么样生成的， 然后前提条件是，呃，因为我们使用的是那个 dos file， 所以 它需要用安装那个 noirs， 当然开发的话需要 idea， 那 你没有也行啊，最好是有 idea， 因为我们的 刻的八 d 是 装在那个 i d a i d a 里面去的，然后装个 j d k， 因为它是，我们这是用 java 写的一个 demo， 然后需要装那个 mac 啊，这是前提条件。 然后我们目前使用的工具有 dosify， 就是 刚才讲的是我们是通过它去生成了这么一个啊 vkey 啊，因为它的样式就免了，就不需要大家去写这个样式了，写那个通过 bugdown 就 行了，通过 bugdown 直接生成一个 vkey， 然后安装就很简单，这个就这么一条命令，然后我们出水挖一个项目，然后启动的话访问就是本地访问就是三千端口。 然后我们正式发布的时候是用 gitup， 所以 我们代码用 gitup。 为什么用 gitup 不 用 git git 一 呢？ 不用 git 的 原因是因为它 gitp 功能已经下线了，所以我们要借助 gitup 的 这个 gitp 功能进行一个发布。那好，这这样的话你不用去买域名啊，就可以把自己自己的一个 vk 啊发布到一个互联网上去， 大概是这样子，然后因为这个 github 有 可能不太稳定啊，所以我们是把代码是做了一份同步同步到 get 一 里面去了啊， get 一 里面它是可以是可以一键同步的，你可以看到 这地方可以通过这个加新建项目的时候，你可以点击导入， 导入是导入了 github 仓库，当然 github 的 我是那个之前是认证过了，没有的话它可能会认证一下，然后把你的可能都给你这个导过来，然后进行一个 导入，导入的话就可以导入到我们，你看就可以导入到那个， 导入到那个 git 里面仓库里面，然后这是我导入了，然后呢导入它的还是同步的，你看它可以定可以强制同步啊，这样这样的话呢？ git 哈普和 git git 一 里面它完全是同步的， 然后这就是 f m p e g 的 一个官网， 然后我们先打开一下那个我们的代码，这就是我们的 fmpg， 这是我新建的一个项目啊，这边是 called body 的 一个插件啊， 然后我是怎么怎么怎么动，怎么开始，怎么弄的呢？首先我们要做这个， 就是写一本那个有关写 wiki 啊，或者写书，你要有这方面的一个思路，就是我要什么样一个目录结构，所以的话我是 就是参考或者用 ai 给你生成，或者参考的话，参考线上可以弄出就是把书的一个目录，你看 这书的目录，我是通过 ai 或者互联网上考的，这考过来啊， 然后呢打开 color body， 因为这个是我之前已经做了，然后我直接就跟他讲是看根据这个目录， 因为我这个是我自己创建的，刚才那个是多个 dos， 是 用那个命令直接创建了一个目录，然后这一张破，这是我自己定义的，放在一个代码的地方，所以你可以在里面你自己去新建一个那个麦的一个空的一个项目啊， 然后这个你看我怎么跟他讲的，就是把这个考给他，跟着克勒巴蒂说按上面的目录内容，在这个 d、 o、 c、 s 的 目录中按序列号对应相应的什么叉点零三啊， 依次剪辑内容，如果代码有案例，就写了一个粘泡的 memo 里面去。为什么呢？我这边是从零三开始呢？因为零一零二我已经创建了， 就这个就这个零一零二，所以你可以说从你新建一个从零一开始，这样的话，他就会根据我创建的目录，然后开始创建，创建创建，然后一步往下往下，这样你看他会一直完成，并且看使用单， 它也会根据这个零三这边会写 demo， 包括里面也会写文档啊，当然因为它那个大家用那个 ai 都都知道它有个一个 token 的 限制，所以呢，如果是它 token 就是已经超了，你看就是已经停掉了，可以说继续啊，继续完成多少道多少道的内容，还继续往下写，往下写啊，然后最终可能形成了就是就是这个样子，嗯， 写成这样子，然后我们就把那个代码提交到那个 github 上去看，提交到啊，我 github， 然后这是比如这是我提交的提交了过后，然后我们把它发布成那个 gitp， 发布，发布成那个 wiki， 然后这边可能是选一下，选一下你，你在哪个目录下 啊？然后选一下就可以了，然后这边就会有一个地址啊，这就是你这就是这个一个产品啊发布的一个地址，大概是这样的， 当然这个是要经过一些加工的，因为这些都写的应该是比较简单啊，比较简单需要经过加工的，但是他基本的一个骨架，至少骨架给弄出来了，后面只是针对某一个这个微调，那个做一下那个微调。那我下次就 就是因为这个项目也是公开的嘛，下次的话你可以我不断的进行一个迭代啊，到时候最终形成一个相对而言可用的比较简单的一个 vk 的， 就是基于，就是使用 java， 基于 fmpg 开发那个视频处理的项目啊，今天就到这里。

什么 id 擅长快速开发微信小程序呢？排在第一位的一定是 codeboard， 它与小程序语法智能适配，通过提示值高效生成代码，结合内置 cloudbase 进行深度研开发。今天我们就挑战十五分钟开发一款证件照制作小程序，零编程小白也能出大制作。现在一键三连开始开撸， 使用 codeboard 看一下右边这个下载按钮， 点击它就可以进行下载，不知道如何下载安装的，可以看一下我上期视频，酷狗等下载。安装到自己的电脑之后，我们需要呢做这样一些准备工作。首先呢我们需要呢注册一个小程序账号，通过这个页面，我们点击前往注册，按照这个提示一步一步进行注册，最终呢会生成一个小程序账号， 接着我们登录小程序账号，登录成功之后呢，它的一个界面就是这个界面，我们看一下右下角这边呢就表示我已经登录成功了。点击账号设置，我们需要用到账号里面的一个 app id， 这个后期的开发我们会用到，同时我们需要通过小程序账号，然后登录 cloudbase， cloudbase 可以 实现云端的开发和部署。有了 cloudbase， 我 们后台的开发呢就变得非常的简单。 首先打开 clubbody， 我 们来创建一个空的项目，点击文件夹给项目起个名称，回车，点击左边的一个侧边栏，我们看到这个空的项目就创建成功了，这是一个空的项目，里面什么东西都没有。点击配置集成，选择 cloudbase， 点击连接， 我们首先要连接一下 cloudbase， 需要登录登录呢，它的方式有很多种，因为我这个项目是个小程序，我们的强烈建议呢是通过小程序公众号这种方式进行登录，这样的话通过小程序开发者工具呢进行调试就非常的方便， 以后这个项目也是通过小程序这种方式呢部署上线，所以我们这边选择小程序公众号扫码登录，这边需要填写一下验证码，可的 body 需要获取这样一些权限，我们这边点击授权，当出现这个 success 就 说明连接成功。我们看一下左边这个文件夹，其实是一个空的文件夹，也就说下面我们要对这个项目呢进行粗化。 在右边的对话框里面，我们输入开发一款微信小程序，使用什么模板比较好？模式我们选择 crafty， 这边有很多些模型可以选择，我这边就使用 default 这边的模型，根据自己的喜好进行选择， 然后点击发送。他这边呢给我们推荐一个小程序的模板，同时呢他将这个模板呢已经下载到我们的一个左边的目录里面， 它检测到我们的一个 cloudbase， 它的环境那个 id 尾号是五九 b b， 对 我们的项目的结构呢进行一个介绍，那么接下来我们应该做什么呢？首先的话，我们要配置 app id， 需要你提供微信小程序的 app id， ai 会帮你配置到这个文件里面， 小程序的 app id 从哪里获取到哪？首先呢我们要登录小程序，此时我已经登录小程序，我们点击左下方的头像，选择，在这边呢，我们找到账号信息，这边有个 app id， 我们将它进行复制，返回到 control body， 粘贴到对话框发送，这个时候 ai 呢就帮我们进行配置，他这边说好的我帮你配置微信小程序 app id， 我 们来看一下它在这个地方呢就给我们增加了这个参数，这边呢我们只要点击 keep， 或者你点击这边的保留都可以。下一步的话我们需要呢打开微信开发者工具，可以通过终端命令这种方式将它复制粘贴到终端，你也可以手动的打开， 我们找到自己的微信开发者工具，打开它之后我们可以呢创建一个项目，可以先将它关闭进入小程序的主页，这个时候我们需要通过微信开发者工具呢去打开我们的 myphoto 这个工程，那么怎么办呢？我们可以点击导入找到我们刚刚创建的这个项目，这个项目我们点击选择， 同时我们给这个项目呢起个名称，名称我们可以保持一致。这边我们需要选择 appid， 我 们注意呢我们刚刚呢发送过来的 appid 的 尾号是三八四五，我们这个地方呢也要选择这个三八四五。后台服务呢，我们是使用原开发，这是没有问题的， 需要改变它。这边显示当前的小程序 app id 已经开通了云开发开发模式是小程序也没有问题。这边呢点击创建，在开发者工具这一端呢，我们的项目就创建成功了，我们可以呢通过开发者工具呢对我们的项目进行个预览，此时项目已经启动成功，这个就是小程序模板的界面， 我们在它的基础上进行二次开发，非常的方便。回到客户管理，在对话框我们输入我们的开发的需求提示时，我已经准备好了，把它放到视频的配套文档里面， 我需要开发一个微信小程序，用于呢证件照的制作，它的主要的核心的功能，第一个是图片的上传，第二的话是照片尺寸的选择，第三的话是智能的裁剪，第四的话是图像位置的微调，第五是背景的替换， 第六是照片的一个导出，同时它的整个的一个交互流程。首先呢我们先上传照片，然后选择尺寸，接着点击下一步， 接着我们收放证件照位置，也调整背景颜色的设置，然后再点击下部，接着预览，接着呢保存到相册，需要这个提示的小伙伴可以在评论区滴滴这边我们点击发送。首先呢它给我们生成一个设计的规范，接着呢列出这个任务的清单， 他整个呢要执行这样的七步七个步骤，按照这样的一个任务清单，他一步一步的执行，还是比较智能的。等待七个任务都完成之后，这边显示项目已经开发完成，我们这边可以来看一下他，同时呢给我们呢创建了一个二十七个文件， 对于这二十七个文件呢，我们可以呢点击保存，接下来我们可以预览一下，预览我们是通过微信开发者工具，我们选择微信开发者工具，当我们打开微信开发者工具呢，它自动的编辑，我们可以进行手动的编辑，首先呢我们把呢历史的一个缓存都给它清理掉，全部清理， 点击这边的一个编辑，这个就是我们小程序的一个界面，整个的界面还是比较美观大方的，我们可以来测试一下。首先呢第一步呢，我们是上传照片，点击从相册选择，我们这边随便选择一张照片，点击打开好的照片，它就打开了，那么下一步呢，我们是选择尺寸，点击 尺寸呢，它这边分为一寸两寸这样的常见的尺寸，还有比如说你一些场景的一些尺寸，比如身份证啊，驾照啊， 护照啊，签证啊，同时话你也可以选择自定义尺寸，在这边呢我们输入宽和高，不过这边的一个布局有点问题，后期的话我们可以进行调整，我们这边就选择最常见的尺寸，一寸照片点击下一步，这个时候我们就可以对这个照片呢进行编辑， 比如这边呢我们可以呢缩放，就是对图片的大小进行缩放，点击减号就缩小，点击加号就是放大，也可以进行点击重置。 接下来我们可以选择背景，点击下一步给它呢进行一个背景的一个修饰，我们可以呢首先是返回上一步，将它进行缩小，然后再点击背景，下一步选择蓝色，它就蓝色背景，红色就红色背景，当然这个没有达到我们预期， 我希望呢它能够实现呢抠图的同时给它添加个红色的背景，接着就有个智能抠图这样功能，我们可以通过这个功能对它进行智能抠图， 点击开始抠图，这边显示呢已抠图，但是我们发现呢它的背景呢还是在存在的，所以这个需要我们后期的调整。再去点击预览保存，进入到预览页面，我们发现呢它是没有保存这个按钮，也就没有办法进行本地化的保存，这个也需要我们后期进行调整，不 过整体上它已经实现了功能的百分之八十和九十，对于这样的效果你觉得能够打几分呢？ 现在我们对这个小程序呢进行一个调整，发现其中的一些问题，一个问题一个问题的去解决它。首先我们发现这个界面呢比较宽松，而且呢右边是有滚动条的，在手机端呢我们需要进行滚动， 非常的不方便，我们可以呢调整一下界面，打开 control body， 在 这里面输入整个界面紧凑一点，不要使用滚动条发送它。这边回复界面的优化已经完成了，对五个页面的进行个页面的优化，界面呢更加的紧凑，不会出现滚动条。我们来看一下打开开外的工具，这个时候我们会发现呢它没有出现滚动条， 我们可以呢换一下其他的设备，在不同的机型下他也是没有滚动条的，这个时候呢我们可以呢再上传一张照片，来看一下其他的页面是什么样子，点击下一步这个界面也没有滚动条，我们这时候呢可以选择这个尺寸都是正常的，但是我们会发现呢自定义这个地方是有问题的，你在这边呢输入一百一百， 我们建议呢把这个按钮呢放在自定义尺寸的下面，这个时候我们可以截个图，把它粘贴到我们这边的可乐包点上一次对话生成的文件，我们可以点击保存，因为我们检查完之后发现是没有问题，在对话框呢我们粘贴提示时写在自定义尺寸下面， 呈现确认按钮，可以吗？他这边说好的，我调整一下自定义尺寸的布局，将确认按钮呢放在输入框下面 显示呢他已经调整成功了，我们来看一下。好的，确实他已经调整成功了，没有多大问题。我们在这边呢输入一百乘以两百，点击确认， 这边显示呢已经设置成功。这时候我们可以点击下一幅编辑照片，他这边显示制定一百乘以两百，就是宽是一百，高是两百，这个时候我们发现呢就要缩放，这个是可以的，但是呢他的界面是有问题的，而且下面这两个功能呢都被遮住了，我们看不到。那我们可以呢把整个这个界面呢进行截图，让他进行重新布局， 在这边粘贴。同时呢我们保存上一次生成的一个文件，这个界面呢是一个边地照片的界面，但是整体上呢它实现的功能呢并不是很好，我们可以呢让它重新再来生成一次。 在这个界面呢我们要实现这么三个功能，第一个呢是智能裁剪的功能，第二是头像位置的一个微调，第三的话是背景的一个替换。这边的提示时呢我们修改一下，在该界面 实现如下优化，如下功能，同时保持整个界面的一个紧凑，不要出现滚动条，点击发送，他已经定位到，这个是编辑键面对他进行优化， 比如说位置未调和背景替换，还有一个智能，一个裁剪，同时保持界面那个紧凑无滚动条，说明他理解的还是比较好的。好的，他已经生成成功了，最终呢他一个界面的布局是这个样子，我们来看一下，回到开发者的布局是这个样子，这个界面比刚刚呢要好一点，但是我们发现呢，这个说法，这个按钮都比较大， 我们可以让他进行一个调整，依旧呢是截个图在这边呢，让按钮调节小一点，到这边粘贴，截图中的按钮太宽了，点击保存，将上一次的修改呢，我们把它保留下来。我们这边说截图中的按钮，看他能不能识别到上面的按钮，如果他识别不到的话，我们提示要重新写，写的更加具体一点， 比如说缩放的一个左右的按钮和那位置的这个按钮。好了，我们看到了它有一定的调整，往左边移动了一下，它这边显示调整内容，叫方向键的一个按钮和这间加减的按钮，它都进行了调整。我这边呢可以重新编辑，再来看一下，然后再次上传照片，点击下一步，选择尺寸，点击下一步，我们觉得呢它还是有点宽， 不过呢这个功能的优化呢，它的优先级不是很高，我们可以以后去完善它，暂时就保持，这样不影响使用。 我们发现在预览保存页面，我们希望将这个照片保存下来，但是它这边的按钮呢是重新制作， 我们需要呢将这个按钮进行修改，在这边截个图，回到 control point 粘贴，将重新制作按钮改成保存到本地按钮，实现照片的保存发送。这边显示呢它已经修改成功了，我们来看一下按钮确实已经修改了，我们点击它这边可以选择到保存到手机相册这边点击允许， 好的，这时候呢就可以呢保存到我的一个电脑上，因为我使用电脑开发的嘛，这边选择一个路径保存，这样就保存成功了，是不是非常的厉害， 我们发现这个小程序呢，它是没有登录功能的，我们给它添加一个登录功能，在对话框里面输入给该小程序添加登录功能发送它。这边说根据 cloudbase 开发的规则，小程序呢想要添加登录的话，是要使用小程序原生的登录方式，同时话它给我们打开了这个网页，那我们就使用这个 下面这个账号，然后使用微信扫一扫，输入验证码，这个时候呢需要进行授权，点击确认授权，显示授权成功。接着可能宝典呢就开始创建登录的页面和用户的信息页面， 然后添加用户登录的状态和登录的逻辑，这边显示登录功能已经添加成功，我们来预览一下，打开开发者工具呢，我们这边是启动不了的，可以将这个错误的日记复制到这边呢，我们粘贴发送，让他给我们修复一下，这边说是因为图片路径的一个问题，应该很快就能修复， 这边显示呢已经修复成功，我们来看一下使用它之前呢，首先呢要进行微信一键登录，这边我们可以点击，登录成功后，我们可以呢进行下面的操作，虽然这边显示登录成功，但是呢我们无法进行图片的上传，点击下面的按钮都没有任何的作用，我们在提示值里面输入登录成功后 无法跳转到照片上传页面发送好的，这边显示已经呢修复成功，我们来看一下，我们再来测试一下，点击登录好了，登录成功之后呢，它就跳转到我们的照片制作这个页面，在这边呢我们就可以上传照片，同时这边呢有个退出，我们点击退出，出现个弹窗，问你是否确定退出，我们点击确认好了， 到这一步呢，登录和退出的功能就实现成功了，是不是非常的厉害。 我们发现照片的背景色是有的，但是呢需要进行个抠图，让人物的背景呢都呈现为红色，这个时候我们这边有个智能抠图这个按钮，但是这个功能没有实现，我们可以实现一下回到抠的 body， 在 这边提示时写实现抠图效果如何？设计发送它，这整个的实现的过程是后端的一个语音函数， 通过 imagine matching 实现抠图，然后前端呢进行一个编辑页的一个设计，实现页面的交互，整个的工作流是用户上传图片， 然后调用云函数，调用腾讯云的 c i a p i。 接着呢是返回抠图的结果，显示一个透明背景的图片，我们这边来测试一下，指示我们这边呢点击智能抠图，这个时候这图片的背景色就被我们去掉了，可以调整一下图片那个缩放，让它变大一点，抠图的功能我们就实现了，是不是非常的完美， 我们发现呢对着图片呢进行缩放，只能呢通过这种按键的方式给它放大缩小，移动位置呢也是这种按键的方式，有一种方式就是可以是通过手指缩放，这样的方式呢就比较方便一点，尤其在手机端操作的时候，用户的体验非常好，这个功能我们来实现一下， 回到可乐包里，打开一个新的窗口，在这边输入，实现手指缩放功能发送，这边呢他就在照片的一个编辑页面添加了双指缩放的功能， 我们来看一下效果，现在我们来进行双指缩放，右边的控制台呢是有输出的变化，说明这个功能已经实现了，但是在电脑端呢不方便演示，我们需要在手机端上面演示， 下面我们可以进行真机调试，点击真机调试，选择这边的自动真机调试，选择启动 ios， 如果你是苹果手机的话，你就选择这个，你是安卓手机的话，你就选择上面这个，我这边选择苹果，点击翻译并自动调试， 这个时候你可以打开手机的微信在手机，当我们首先呢点击微信一键登录，登录成功后呢上传照片，选择照片完成，点击下一步，选择尺寸，我们选择凹出来，点击下一步，可以双指对照片进行缩放，选择一个合适的位置，点击这边的背景， 我们首先可以扣一下头，点击智能抠图，然后选择一个背景色为红色，这个时候可以将照片放大或者缩小，你也可以点击蓝色，接着点击完成编辑，这个时候就可以将照片保存到本地，点击保存到本地，保存到手机，我们这时候就可以回到手机的一个相册，这就是我们刚刚制作好的一个图片，是不是非常的完美。 整个小程序的开发过程中，我们使用了云存储和云函数，点击这边的云开发，我们来看一下 点击这边的存储，我们在给图片去背景的时候呢，就用到这里面的一个存储空间，以这个图片为例，点击这个图片其实就是我们抠完图之后的图片，除了使用云存储之外，我们还使用了云函数，点击云函数主要就设计了这么三个函数， 一个是获得用户的 open id， 还有一个进行一个图片的抠图，还有一个就移除背景。整个的云存储和云函数呢，都是 ai 帮我们自动实现的，不需要我们自己人工的去编辑代码，是不是非常的智能。 整个小程序它的一些基本的功能或者是核心的功能我们都开发成功了，下一步的话，我们如何将小程序进行部署上线呢？我们可以点击这边的一个集成工具，到这边选择 deployment 部署，在这里我们可以选择 cloudbase 进行部署，点击连接这边，我们需要进行登录一下，还是选择小程序公众号进行登录，我们再次点击它，点击部署 codebase 呢，就帮我们实现了一个自动的部署 好了。到这一步，他说恭喜证件小程序呢，已经成功地部署到 clientbase 上面。后端呢是云函数，可以正常运行，同时支持登录和 ai 处理。 前端呢是静态托管，已启动 c、 d、 n 全球的加速。到现在呢，小程序的整个功能就已经就绪了，可以正常地使用。 小程序的整个的开发流程我们就走完了，借助于刻豆包点到这一步，是不是觉得自己特别的厉害呢？使用刻豆包点，大幅度缩短开发周期，降低小程序的技术门槛，不信你也试试。本期视频的所有内容整理成配套文档，欢迎评论区滴滴记得一键三连，我们下期再见！

微信支付到账九十九元，今天我们讲一下微信支付功能的实现。首先要准备两个网站，第一个网站是微信支付的商户平台，可以直接复制我的红框里圈起来这个网站域名，点击 a p i 安全，然后将 a p i 安全里的所有的密钥和商户证书等按照它的流程去设置好，然后发给克里巴蒂或者是任何 ai 平台的 id， 这个时候他会告诉你 app id 不 符，这个时候是缺少一个 app id 的。 然后打开微信公众平台，里面会有小程序符号和公众号三个选项，任选其中一个都可以去绑定这个 app id， 这里我选择的是小程序，你可以直接输入我红框里圈起来的这个域名地址，直接打开这个页面去注册一个企业账号，企业账号的这里一定要选择是微信认证， 注册好了之后回到首页，点击这个微信认证，然后按照他的流程去一步步操作就好了，最后要支付微信认证的费用是三百元，然后他显示一到三个工作日审核，其实， 嗯，提交好了之后，大概过个半个小时到一个小时左右，就有工作人给你打电话确认确认，然后他就可以再过半个小时审核完成。审核完成之后返回小程序的首页，选择这个开发管理，然后复制这个 app id， 复制到微信支付这个页面里，选择产品中心里的 app id， 将刚才复制的 id 输入进去，点击关联 app id， 然后这里会显示提交成功，然后等待 app id 管理员审核，这时候返回小程序的页面，选择这个微信支付标签栏下的 点击授权，然后就可以成功了，这里要避个坑，就是不要去到微信开放平台去找 app id， 因为这个 app id 是 只负责微信登录功能的。没错，就这么简单，祝你开发成功哦！

codebodycode 二点零重磅升级，开放 sdk 被集成，通过 acp 协议标准化输出 agent 能力，助力企业低成本构建 ai 应用，全面兼容开发者工具生态，支持 plug in 插件市场和自定义智能体， 提供 container 一 二 b 隔离沙箱环境保障代码安全执行，增强工程记忆 lsp 诊断，并支持 glm、 四 gpt 等高级模型，打造 ai native 团队开发新范式，实现近百分之一百代码 ai 自生成。

大家好，今天带大家体验一个超实用的 ai 工具 calladay， 看看它如何帮我们把 word 文档一键转成 ppt。 首先打开 calladay， 我 准备了一份 word 文档，想让它转换，结果系统提示无法读取。别急，这是因为 calladay 需要先安装对应的技能包。 我来到 github， 找到了 sorbike 官方的文档处理技能库，这里包含了 word 和 ppt 处理的完整技能包。一键下载后，在 call 第八 d 中导入这些技能， 检查一下技能状态，完美 word 技能和 ppt 技能都已经成功加载，现在可以开始真正的魔法了。输入提示词，请将附件内容转为 ppt copy body， 立即开始工作。可以看到它正在调用我们刚刚导入的专业文档处理技能， 大约一分钟后，转换完成，系统不仅成功创建了 ppt， 还贴心的给出了内容总结，来看看最终效果。虽然 ppt 的 样式还比较朴素，但转换效果真的令人惊艳。从 word 到 ppt 的 智能转换就这么简单！