Datawhale AI 冬令营 2期：使用豆包在线IDE制作蕃茄时钟(基于WEB)

最新推荐文章于 2025-05-20 21:08:02 发布

雪影丶小邱同学

最新推荐文章于 2025-05-20 21:08:02 发布

阅读量1k

点赞数 9

文章标签：人工智能 ide 前端 AI编程 javascript css html5

本文链接：https://blog.csdn.net/weixin_53056566/article/details/144696267

版权

文章目录

主线任务：制作蕃茄时钟
- 环境准备
- 编写代码
支线任务1：豆包MarsCode の其它初体验
支线任务2：思考
- 关于Prompt
主线作业：井字棋
感想（碎碎念话痨时刻）

主线任务：制作蕃茄时钟

环境准备

豆包在线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，将其作为一款辅助开发的工具，才能让自己的水平和开发效率继续提升。

一个AI代码自动补全的例子
OK，这是本人第三次参加DataWhale冬令营，非常感谢科鲸再次给我这次机会学习AI（来自双非SE学生的苦笑）。距离参加上次的夏令营已经有一学期（半年）的时间了，感觉大二的时间真的很宝贵，也觉得时间特别的稀有，原本参加完夏令营后立Flag要在这学期里没事的时候看看DataWahle的AI，补一补深度学习和PyTroch，~~结果还是犯懒了~~。这学期参加了XCPC，也是学到了JAVA面向对象编程的思想，反过来再看一看之前所学的内容，确实比以前轻松了很多。希望这个假期接着与Datawhale和冬令营的小伙伴们一起学习，一起进步，一起收获。