文章目录
主线任务:制作蕃茄时钟
环境准备
- 豆包在线IDE
本次蕃茄时钟是基于WEB三贱客(HTML、CSS、JS)来实现的,选择HTML/CSS/JS来创建工程即可。
如下图所示,我们的项目就创建完毕了。
编写代码
请你基于html、tailwind css和javascript,帮我设计一个“番茄时钟”。要求UI简洁美观大方,同时具有呼吸感,点击开始计时、点击暂停计时和重置计时的功能能够完美实现
将我们想要的蕃茄时钟的要求交给豆包IDE,就可以让豆包按照我们的要求生成代码。
然后将生成好的代码按照格式cp到工程对应的文件里,如图所示。
点击运行。
支线任务1:豆包MarsCode の其它初体验
1.代码AI修复
豆包的C++ IDE自带代码静态检测,只需要把鼠标移动到红色下波浪线的位置即可看到报错信息。
豆包在线IDE自带AI Fix,也就是AI修复。只需要点击AI Fix就可以体验啦。
这里是拿了一个C++的示范来演示,本来觉得这学期学完了JAVA感觉将面向对象编程的思想应用在C++上应该也是差不多的,结果发现C++是有自己一套面向对象编程范式的。 AI Fix的时间很快,经过Thinking和Print,大概5秒钟左右就出来了。可以看到AI Fix生成出来的正确标绿代码放在了右侧,与错误的原代码进行对比(什么插件也没有的VSC使用者看哭)。此时在输入框继续输入你的需求Prompt,可以接着进一步对代码进行更改,如果对生成出来的修正代码满意的话,就可以点击蓝色的Accept按钮,将错误代码替换成生成出来的修正代码。
2. 解释代码、AI注释
在线IDE版
在线IDE提供了很方便的快速解释代码、注释、生成单侧的方法。只需要用鼠标选上需要豆包解释的代码,IDE会自动弹出一个菜单栏,点击Explain\解释代码就会让豆包进行解释了。同理,点击Doc\注释 就会让豆包给现有的代码添加注释。
插件版
在本地IDE安装豆包插件后,豆包会在每一个代码块、函数、方法前加入小菜单栏。点击解释代码就可以让MarsCode帮你解释代码。很实用的功能,至少不会再打开浏览器,再复制粘贴到XX AI上了。(笑)
3. 单测
点击单测让豆包为代码生成测试点以便检测代码的鲁棒性。很适合在工程开发和刷题的时候配合食用。在线IDE的单测功能跟上面的同理,“划词”即用。
4. 在Code-server/其他IDE/编辑器使用豆包
目前豆包MarsCode官方提供支持嵌入Visual Studio Code和JetBrains全家桶两种流行编程使用软件。本人平时使用自己在服务器搭建的Code-Server,但是code-server里的商店并没有提供豆包安装包(应该是被CodeServer隐藏起来了,我安装的时候反正是没有搜到),而且豆包在Code-Server登录授权逻辑有些问题(在IDE中需要登录账号后会弹出到外面的浏览器,然后在浏览器登录成功后会向豆包返回一个登录Token,但是我的Code-Server并不是在本地的。。。),总之希望未来豆包能够修复这些问题吧。
Code-Server效果如上图所示。
想在VSC和JetBrains全家桶用就很简单了,进入官网后直接点击对应按钮即可。
支线任务2:思考
关于Prompt
Prompt用来引导模型进行输入和输出,直观来讲,有的时候AI系统可能无法直接识别用户对AI输入的内容里超级超级长的句子,但是包含了Prompt,或者AI系统会把这些句子转化成AI可以识别的Prompt,这样才可以让AI系统理解用户的要求,并按照用户的要求(Prompt)来进行内容的生成。
在主线任务中,我们要求AI生成一个基于HTML、Tailwind CSS和JavaScript的“番茄时钟”。这个时钟需要拥有简洁美观大方的UI设计,并且具有呼吸感(即界面元素有轻微的动态变化,给人一种放松、自然的感觉)。此外,它还必须包括点击开始计时、点击暂停计时和重置计时的功能。
在MarsCode的视角中,它首先会捕捉这些重要信息:html,tailwind css,JavaScript。这些信息奠定了生成的内容是基于什么技术栈来实现的。用户指定了使用WEB三贱客来生成内容,豆包就不会用C++生成代码,也不会用Julia来生成代码,也不会用cangjie来生成代码。。。(真的是够了)
这些Prompt关键词对于AI是极为重要的。拿与人的沟通交流举个例子,老师对小明说,“小明,请你拿着我的杯子,去隔壁的水房帮我打个热水。”小明就会捕捉到关键信息:拿着老师的杯子,去水房打热水。捕捉正确的关键信息才会更好地理解、执行实现用户想要的内容效果。在AI系统中,Prompt中的关键词也是帮助AI理解用户意图和生成符合期望内容的关键。AI会分析这些关键词,理解其语义和上下文,从而生成与用户需求相匹配的内容或执行相应的操作。
主线作业:井字棋
请你基于html、tailwind css和javascript,帮我设计一个“井字棋游戏”。要求UI简洁美观大方,同时具有呼吸感,人类玩家以及电脑玩家放置棋子,游戏胜负平局判定条件能够完美实现
实现效果
修复问题
格子BUG1
点击格子后会出现bug,即点击一个格子后其他的格子也会被自动点亮。
function makeMove(index) {
if (board[index] === '') {
board[index] = currentPlayer;
console.log('Updated board:', board); // 添加日志输出
updateBoard();
checkWinner();
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
if (currentPlayer === 'O') {
setTimeout(makeComputerMove, 1000);
}
}
}
格子BUG2
最终实现效果
感想(碎碎念话痨时刻)
很赞同Datawhale 冬令营第2题Baseline里的一句话,AI时代下的编程,要更好地与AI协作解决问题。 身边的同学有使用ChatGPT来构建基于抓取校园信息的校园AI助手系统,我自己也是使用MarsCode和FittenCode(嗯,有一说一跟豆包比还要继续努力啊)来搭建自己的基于Vue-Vite-Electron的深度定制AI聊天助手HoshinoProject(详情见24年Datawhale夏令营哈哈)。
目前计算机可以实现很多华丽的效果,但是这确实是一个庞大的工程量,也许实现一个动效就要动辄几百行代码。合理使用AI工具确实提高了软件的开发效率,让开发者能够节省出来一些时间去思考其他的问题。
随着技术的不断发展,任何人都需要不断适应技术变革,掌握新技术,正如历史所展示的那样,才能在未来更自如地面对变化和挑战。 合理使用AI技术,也不能完全依赖于AI,将其作为一款辅助开发的工具,才能让自己的水平和开发效率继续提升。
OK,这是本人第三次参加DataWhale冬令营,非常感谢科鲸再次给我这次机会学习AI(来自双非SE学生的苦笑)。距离参加上次的夏令营已经有一学期(半年)的时间了,感觉大二的时间真的很宝贵,也觉得时间特别的稀有,原本参加完夏令营后立Flag要在这学期里没事的时候看看DataWahle的AI,补一补深度学习和PyTroch,结果还是犯懒了。这学期参加了XCPC,也是学到了JAVA面向对象编程的思想,反过来再看一看之前所学的内容,确实比以前轻松了很多。希望这个假期接着与Datawhale和冬令营的小伙伴们一起学习,一起进步,一起收获。
2024.12.24 ~~写文章用时一节日语课和一个晚饭的功夫~~
于明阳湖畔~~的10教~~