嗨,你好,欢迎来到 cloud code 宇宙级保姆教程的第二节课,今天我将带大家去安装及配置 cloud code。 在 开始本节课之前,请先确保你满足以下两个条件,第一个你有 cloud code 账号,并且能够购买 cloud code 的 相关会员。 第二个是你需要有能够稳定运行 coco 的 的网络环境。那满足上述两个条件之后,我们即可开始今天的课程。首先我们先需要先弄清楚 coco 的是一个什么样的东西,他在哪些地方可以去使用。 其实 coco 的 官方给 coco 的 做了几个不同的版本,适用于不同的开发场景。 那我们对于新手来说,首推大家使用 cloud code 的 插件版本。首先第一个 cloud code 的 插件版本不是第三方做的,而是 cloud code 的 官方自己发布的,去适配主流的编程工具的能力很强大的插件。 第二个是编程工具。是什么编程工具?我们举两个主流的例子,第一个是 csc, 听过 cloud code 的 同学可能都听过 csc, 它同样是 ai, 编程能力很强,并且新手有好的编程工具。 第二个是有一些开发经验的同学可能听过或者使用过 vs code。 那 在 vs code 里面去使用 call code 的 版本也是我们非常推荐的一种做法。我们为什么给插件版本打上的新手推荐指数是五星,因为它具备以下的几个优势。 首先我们看一下这样的一个交互页面上面,我们在 cursor 或是 vs code 里面使用 cloud code 的 时候,我们大多数时候看到这个页面都是这样的,它是一个输入框,本质上是一个对话页面,我们通过输入我们想要的东西,告诉 cloud code, 它去帮我们执行修改, 那这样的一个页面就很新手友好,我们不需要去学习其他的跟编程相关的知识,它几乎是零门槛的。 有一个隐藏优势是,我们在 ctrl 或者 vs code 里面,我们是可以同时多开多个 call code 的 窗口的,有点像是浏览页里,浏览器里面你打开了几个窗口在做不同的事情。 call code 在 ctrl 或 vs code 里面的使用也是可以这样的,我们可以用窗口一去,比如说帮我的网站去写一个介绍, 我们可以用窗口二帮我处理一些 bug 或者是一些 ui 优化的问题,那我们同时可以去切换窗口,去监控不同任务的完成情况,是一个很方便的一个设计。 第三个就是 custom 和 vs code, 它们作为主流的编程工具,其实很多开发者会做一些插件发布到它们的插件市场, 那我们除了使用克拉扣的这样插件去帮我们开发之外,我们可能同时还能选择其他的插件去帮我们去完成一些其他开发任务。那插件版本它的唯一的劣势在哪呢?唯一的劣势在于插件的更新有时候可能没那么快,所以一些新的能力或新的特性, 它不会立即第一时间可能就更新。在插件版本上面,它有时候可能会更新在最优先更新在 c l i 版本上面,我们下面就会讲到 c l i。 那 么讲完插件版本之后, 总的来说还是推荐新手同学,我们先使用插件版本,在 kolor 或者是 vs code 里面去使用我们的 kolor code 插件。当然如果 kolor 的 你又在使用科斯,那我建议科斯加科奥扣的一起用是一个最好的选择。第二个就是 c o i 版本, c o i 版本其实它的本质上是它是在哪运行,它在我们电脑的本地终端运行,我们可以看到这个图,它其实就是我们本地终端窗口的一个界面, 他在这里去进行使用。我们给到的新手推荐指数是四颗星,他有几个好的点是在于第一个他的编码速度是很快的,他可能会比插件版本稍微快一点。 第二个是它的功能很完整,并且它的很多新特性和新的能力,它更新是最快的。那它的劣势在于什么?劣势是在于说这样的个页面看起来好像似乎不那么新手友好,同时你可能需要去熟悉一些编程同学可能比较知道的一些像是基础的命令行 怎么去使用,那对于纯小白来说是有一定的学习成本的,我们需要去学习这样一些命令行,所以才能够提高我们使用这个东西的效率。还有第三个版本是他 kliko 的 在做的一个网页版,就是我们可以直接打开网页去使用 kliko 的, 但是我们其实不太推荐大家去使用这个,因为即便它的优势还挺明显的,比如说它不用安装前面的两个方案插件,或者是 c o i 版本,我们其实都需要去做一个安装的一个流程, 同时它使用界面也是很清晰的,也是一个输入框加上一个对话页面,如果你输入了东西, call call 的 给你回应,那它就会在这边出现。但是它劣势也很明显,因为它是在 web 端,因为它是在线上, 所以他不是在本地,他没有办法去操作你的很多本地的文件,他拓展性相对是弱一点的。举个例子,比如说你想让他去帮你修改某个本地文件夹里面的某个表格或者某一个文档,让他去帮你修改当中的内容,他没有办法直接操作, 其实是很不方便的。或者是你想调用本地的一些数据去帮你去完成开发中的一些事情或者文档,也是很难做到的,也是需要经过一些复杂处理,所以非常不建议大家去使用 qq 的 网页版,其实我觉得这个设计相对来说比较鸡肋的,那接下来我们讲一下 我们推荐大家使用 curl code 的 插件,那我们今天的课程就会围绕着怎么去安装 curl code 的 插件,作为我们主要的实操的示范。 第一步我们需要下载 qs 或者是 vs code, 我 这里其实已经下载完了,大家回头可以去 直接搜索科室点 com, 其实就能够直接进入到这个对应的网页,也可以在我附的这样的一个学文文字学习资料里面直接打开科室的官网或 vs code 的 官网,我们直接去访问这个对应的页面, 然后去把它下载下来。第二步其实就是在这个应用当中去安装我们的克拉扣的插件。第三步其实就是我们需要去安装完之后,需要去授权跟克拉扣的取得一个授权,让他知道说我们在使用插件版本,我们能,我们就可以在 ctrl 或者 bs code 当中去使用 cloud code, 那 我们话不多说,开始实操, ok, 那 我们打开 ctrl, 点击 ctrl 右上角有一个展开侧边栏的按钮, 然后侧边栏上面我们点击上面的第四个按钮,进入 ctrl 的 插件市场,我们在搜索框里面输入 cloud code, 然后我们就能看到有一个搜索结果。 第一个 osfif 官方推出的 curlcode for bscode 的 一个版本就是我们要下载的插件版本,我们点击 install k, 这代表已经下载成功了。 下载成功了之后,我们点击这里的三个点,点击 curlcode 冒号 open 的 这个按钮,就已经打开了 curlcode 的 这个使用页面。我们接下来要做一件什么事?我们需要去让 curlcode 的 官方给我们授权,让我们能去使用 在 cursor 或者 vs code 里面的 cloud code 版本,那我们先需要去购买 cloud code 的 会员,购买完成之后,我们在这里点击 cloud code cloud ai 的 一个订阅,通过这种方式去进行授权,点击之后我们会出现我们会打开一个网页,这网页上有一个授权弹窗, 我们只需要点击授权按钮即可,授权成功之后就会变成一个授权成功的页面,我们把这个页面关了,我们打开 cursor, 我们就能看到这个页面已经变成一个正常可以使用 coco 的 状态了,我们在这里输入一个文字,比如说我们输入嗨, 测试一下 coco 的 会怎么回应, ok, 那 他已经能正常回应,就代表我们已经启动成功了,可以正常使用 coco 的。 coco 的 插件版本就介绍到这里,如果大家想要去安装我们刚刚说的 c l i 的 版本的话,在我们的资料文档里面也有详细的安装步骤, 如果大家对于怎么安装 c o i 有 任何问题,也可以在我们视频的评论区进行提问,今天课程就到这里了。
粉丝128获赞493


大家好,今天教大家 curl code 的 一些常用指令和快捷操作。虽然我们在 web coding 时,大多数时候都是用自然语言描述需求让 curl code 写代码, 但是掌握一些常用指令和快捷操作能极大的提高我们开发效率,让 curl code 成为你更丝滑的代码助手。首先我们要怎么快捷调用指令?我们以 vs code 的 curl code 插件为例,我们在输入框里面输入斜杠 就可以看到一个指令的面板,这里面有很多指令。今天教大家几个非常常用的指令,在我们的课程资料中给大家列出了所有指令以及对应的作用,我们还分了插件版本和 cli 版本。今天先跟大家讲一些常用的指令。第一个是 attack file, 就是 上传文件作为提问的内容。 很多时候 cloud code 不 仅作为一个写代码的神器,它还能帮我们去处理一些文件,比如我们可以上传一个 word, 让它去修改其中的一些内容。我们也可以上传一个 excel, 让它去分析一些数据,得出结论。 如果你在某次开发任务中,希望 cloud 去参考你的电脑本地的某一些文件的规范,比如说一个代码的规范,或者是一个数据的规范,输出格式的规范等等。你也可以上传某一个文件,让它去进行参考。 第二个是 mention five from this project, 就是 at, 它其实是针对某一个已经在开发中的一个项目,你想让 call 帮你针对某一个文件进行修改的话,你就可以使用这个功能。我们输入 at 和输入杠选择 mention five from this project, 它作用是一致的。 第三个就是 switch model, 就是 切换模型,不同模型在处理不同类型的任务的能力以及性价比上是不一样的,我们目前默认使用的是 default, 就是 默认模型,它其实就是呃之前一直使用的 sonnet 四点五, 它其实处理大部分的任务都是比较游刃有余,并且精确度还是比较高的,同时它性价比是比较适中的。第二个 opus 四点五就是最近推出的一个最新最强的模型,它处理复杂任务是是最好的, 比如说我们想让它去设计一些后端架构,我们让它去设计一些推荐算法,让它去做一些需要多步推理和重复的一些思考的一些任务。我们可能就用 open 四点五,但是它的缺点就是比较贵, 输入输出都是相对来说比较贵的。第三个就是嗨酷,嗨酷四点五就是一个比较轻量的模型,它的优点就是快, 因为它不需要去执行太多的思考步骤,但它也比较适合去执行的是简单任务,不要把复杂任务交给嗨库。 所以我们在实际的开发过程中,根据自己对于任务的判定,我们应该能够逐渐去摸索出一套经验,知道说什么时候应该使用 default, 什么时候应该使用 opus, 什么时候应该使用嗨库去切换使用。 第四个就是开启或关闭思考模式,我们如果再执行一些复杂任务,需要大模型长时间思考,比如说一些算法让或者是让大模型去设计一个多 agent 的 一些写作架构等等的一系列复杂任务,我们都适合开的是思考模式, 因为它可以思考的时间更长,它得出来的思考结果是更值得推敲以及更有质量的那一些常规的。比如说像我们写一个前端页面,或者是一些简单的问答,我们就不要用 thinking 模式 思考模式,它本身也是一个比较贵的一个模式,所以不太建议大家做常规任务的时候用 thinking 模式。那我们下面还有一些指令是关于 n c p hooks, 然后 agent 的 memory 这样的一些东西的,我们都会在后面逐渐深度的 cloud code 的 开发教程里面跟大家提及这些东西具体怎么去使用。还有几个比较常用的一个跟上下文相关的指令, 第一个是 compad, compad 其实就是压缩当前的绘画的历史内容,然后我们只保留之前历史内容的一些关键的上下文的信息, 这样能够让大模型在接下来跟你去对话的时候,它就不用去带太多的历史对话,它每一次回应的时间会更快一些,以及它每一次处理问题的效率会更高一些。第二个是 context, context 其实就是显示我们当前对话的上下文的占用情况, 我们可以从从这个 context 里面知道说当前这个绘画已经使用的透根数量以及它上下文空间是有限的。还有一个叫 cost, cost 的 值就是花费, 它可以直接显示你当前整体上下文 token 的 花费情况是多少都有。一个是 review 了, review, 其实比如说你让 cloud 已经写完了一段代码,然后你想让它去自动审查的话,你就可以用杠 review 的 这样的命令让它去自动审查它刚刚写过的代码。 最后再跟大家介绍两个 color code 中非常常用的快捷键组合。第一个是切换模式,首先模式是什么?我们能看到 color code 输入框左下角有一个这个按钮, 这个按钮它其代表的是 color code 的 它的一个写代码,或者是它执行任务的自主程度。 第一个选项是 sb for editing, 就是 它在编辑之前,所有编辑操作之前都会先征得你的同意再进行编辑。 第二个是 edit automatically, 就是 它可以自主编辑,它能完成所有的编辑操作,不需要经过你的同意。第三个就是 plan mode, 它会在做一个事儿之前,先把所有对应的事项全都向列一个计划清单一个列出来,它再根据这个订单一项一项去执行任务。 其实我们在进行很多开发任务之前,都是跟他描述好需求之后,让他先去把使用这个 plan mode, 把对应的计划清单全都列出来之后,再一步步去执行对应的计划的。那我们快捷去切换模式的按钮,就是 shift 加 tab, 我 们看这里 我们使用 shift 加 tab 就 可以去快捷去切换我们对应的不同的模式。 第二个就是打开命令面板,这个命令面板其实是一些 curl code 的 常用的一些全局性的一些命令, 比如说我们这个时候用 command 加 shift 加 p 试一下,我们就会打开一个搜索栏,下面有这样的一个面板,我们输入 curl 的 就能看到这里面有很多 curl 的 一些命令,比如说在新的窗口或者 tab 里面去打开 curl 的, 或者是在密洛就是终端里面打开 curl code, 或者是我们可以通过这个地方去查看一些日记。好了,我们今天的分享就到这里了,如果你对本次课程感兴趣,想获得 cloud code 的 全套学习资料,请在评论区留下。求资料我们会把资料发给你,我们下期视频继续。

cloud code 最新版现在已经原生支持调用 chrome 浏览器了,我们只需要将 cloud code 升级到最新版本,然后在 cloud code 中使用斜杠命令加上 chrome, 就 可以进入 chrome 浏览器的设置。 在是否默认起用这里我这里设为了起用,而且这里还可以管理权限,点击之后这里就会自动打开浏览器,并且在这个扩展这里我们就可以设置权限。如果大家没有安装扩展的话,到这一步应该会提示安装扩展,大家只需要按照它的提示安装扩展就可以。 当这些设置好之后,大家就可以在 cloud code 中原声调用 chrome 浏览器。在之前的视频中,我为大家演示过 chrome devtools 在 chrome code 中以及在 codex 中的使用,用来实现浏览器自动化以及 ui 调试。 但是 chrome devtools 为了安全,它打开的浏览器是一个新的实力,当我们需要执行浏览器自动化任务的时候,我们就需要重新登录所有的账号,像这样的话就非常麻烦,而且非常浪费时间。 但 cloud code 它原生支持的 chrome 浏览器调用它打开了浏览器就保存了我们日常使用的一切信息,包括账号登录状态以及浏览记录,还有 chrome 的 扩展插件等功能。 所以我们在 cloud code 中直接调用 chrome, 既适合 ui 验证,也适合端到端的自动化。而且它支持多种交互操作,包括点击输入,表单填写, 还有多标签管理,还可以对标签进行分组管理,而且它可以读取 cancel logs 还有 network requests, 并且可以结合盗墓状态来定位 ui 以及逻辑问题。好,本期视频将为大家深度测试 cloud code 调用 com 浏览器 完成自动化任务、 u i 调试任务以及 api 接口自动化测试等任务。下面我们可以先用一个最简单的任务进行测试,我这里直接输入任务,让它打开我的簿刻,点击进入第一篇簿刻,并将它改写为一篇 x post, 然后发布到我的 x 账号, 我们直接运行,先测试一下它最简单的浏览器自动化能力。好,可以看到这里它自动打开了我的簿刻, 然后它自动点击了我博客的第一篇文章,然后我们回到终端,就可以看到这里它正在执行这个任务,现在已经阅读完了博客文章,正在改写帖子。然后这里它需要申请权限,我们直接给它权限,然后它就自动打开了 x 平台。 好,可以看到它自动点击了发布, 这样的话这篇 x post 就 发布成功。整个过程不需要我们重新登录 x 账号,因为它会自动调用我们日常使用的 chrome 浏览器的配置。我们再测试一下 cloud code, 调用 chrome 浏览器 实现信息搜索,并且将搜索到的信息填写到谷歌的表格中,我们看一下他能否准确操作谷歌表格。这里我们输入提示词,使用奎姆搜索特斯拉近七天的股票信息,并且打开谷歌表格,将内容填入到表格中,我们直接运行 自动打开了谷歌浏览器,然后这里需要我们授权给他。好,可以看到他打开了谷歌,并且搜索了特斯拉的股价相关的内容。 好,这里他进入了雅虎 finance。 好, 可以看到他能准确点击并且复制相关内容。 好,可以看到他提取了特斯拉七天的股票数据,现在他打开了谷歌表格,我们看一下他能否将这些数据准确的填入谷歌表格中。 好,可以看到他在第一个单元格中输入了日期,然后定位到了第二个单元格。好,现在又在第三个单元格中输入了内容,现在这个表格的表头已经输入好了,然后这里提示他开始点击第二个单元格,开始输入数据。 好,这里他填完了十二月十八号的数据,现在在填十七号的数据 好,这里提示所有数据已经输出完成,这里我们就看到了它填入的特斯拉股价相关的信息,而且整个过程都是由它自动化完成。这样看来这个效果还是非常不错的,因为它能对这些非常复杂的表格进行精细化操作, 通过测试可以发现它的浏览器自动化能力还是非常强大的。好,刚才我们测试的是浏览器自动化任务,下面我们还可以测试一下让 cloud code 调用 chrome 实现 ui 调试。我们可以先在 cloud code 中让它为我们开发一个 react 组建。 我们可以先看一下这个提示词,让它使用叉款 ui 创建一个语言学习的 react 组建。这里是技术站 里,是页面结构,还有核心功能,还有设计要求,包括主题字体等,还有响应要求,以及数据结构,还有交互细节,还有性能。在最后这里我们让它创建一个完整的可交互的应用原型,要求任务完成之后,使用 crm 自动测试所有功能是否正常。 然后我们完整地粘贴这个提示词发送给 cloud code, 让它为我们开发这个 react。 组建,并且自动调用 chrome 浏览器进行测试,这是它生成的开发任务。最后一个任务就是在 chrome 浏览器中进行测试。 好,为了节省时间,开发步骤这里就略过,我们直接跳到它打开 chrome 浏览器的步骤。 five minutes later。 好,这里他已经完成了开发,现在正在安装依赖,这里他需要我们授权他权限,现在他就自动打开了浏览器,我们看一下他能否自动点击页面上的这些内容,对页面进行测试。 好,可以看到他自动点击了单词卡片,单词卡片翻转之后,这个单词出现了镜像翻转,我们看一下他是否会修复这样的问题。 好,这里他提示他看到卡片翻转有一些 css 效果的问题,他需要修复这个问题,这样的话,他就通过调用浏览器自动点击发现了这些问题。好,现在他正在测试练习页面。 好,他还选择了一个正确的答案。这里点击了进度。好,可以看到这里他输出答题反馈功能完美。好,这里提示进度页面非常漂亮。他继续测试设置页面。好,这里他提示页面显示空白,他需要检查控制台是否有错误, 然后这里他发现了这个错误,他正在修复这个错误。好,这里提示修复完成,他刷新页面, 可以看到他现在点击了设置。好,这里他提示设置页面所有功能都正常,他现在需要修复首页单词卡片翻转的问题,他需要创建一个简单可靠的翻转实线,替换当前的三 d 动画。 好,现在他又切换到了首页,然后我们看一下这次单词卡片的翻转是否修复好, 可以看到它自动点击了单词卡片,这次单词卡片翻转就正常,就显示了单词的中文翻译好,这里提示单词卡片翻转效果现在完美工作, 并且提示所有功能都测试通过,然后这里就输出了已经完成的这些功能。这样的话,我们没有经过任何干预, cloud code 就 调用 chrome 浏览器实现了自动开发,自动测试,并且发现了单词卡片翻转出现了问题,然后 cloud code 进行了自动修复, 可以发现整个步骤非常流畅,完全由 cloud code 全自动完成。刚才我们测试的是在 cloud code 中调试前端 ui 项目,下面我们还可以测试一下用 cloud code 调用 chrome 对 api 进行测试。 我们可以先看一下我准备的这个开发任务的提示词,让它创建一个 node js 加 express 的 代办事项, api 包含 get 请求获取所有代办事项, post 请求创办代办事项,还有 put 与 delete, 并且集成 swag ui express 自动生成 api 文档。 启动服务后,在 com 中进行下面的操作,并且将测试结果汇总,如果测试过程发现 bug, 直接修复并且验证。 然后我们回到 cloud code, 直接粘贴刚才的提示词,直接运行。像这样的话,我们使用 cloud code 调用 chrome 对 api 进行测试,在一定程度上甚至可以取代 postman。 这里它生成了开发任务,这里我们要稍等一下。 five minutes later 可以看到这里他开始对 api 进行测试,然后这里提示 get 端点已展开,他将点击这个按钮,这里提示点击 execute 执行 get 请求,并且提示需要滚动查看响应,这里他又重新点击了 execute 按钮, 好,这里提示 get 请求。测试成功,返回了两个代办事项,现在它需要测试 post 的 端点,创建新的代办事项。这里点击了 post 进行展开,然后这里提示它需要使用 find 工具定位 post 按钮 好,可以看到他将 post 进行了展开,这里提示他需要点击这个按钮,这里提示 post 的 成功,他创建了代办事项,现在他需要继续测试 put 还有 delete, 然后这里提示 put 和 delete 都创建成功, 这里提示他需要在 swag ui 中执行一个请求来捕获网络请求,这个任务执行完成,这里是生成的测试结果汇总报告, 包括 api 端点测试结果,这些端点都测试成功,而且这里还有响应时间,这里就是错误处理测试。下面这里就是 network 面板验证, 这里给出了总结,所有测试都通过,没有 bug, 发现 api 功能完整,错误处理,正确响应时间均在毫秒级。这样的话就在 cloud code 中自动调用 chrome 浏览器完成了 api 的 测试, 而且整个过程全部都是由 cloud code 自动完成的,不需要我们进行任何干预。通过我们在 cloud code 中调用 chrome 浏览器测试浏览器自动化以及前端 ui 调试,还有后端 api 的 测试,可以发现在 cloud code 中调用 chrome 浏览器效果非常不错, 它们全自动为我们完成各种复杂的任务。 cloud code 有 了 chrome 浏览器的加持,就变得越来越实用,越来越强大了。
