Qoder实战教程:基于 Qwen3.7‑Max 生成 HTML 记账本,本地存储 + 月度统计图表实现

简介: Qoder一句话AI编码实战教程:零基础新手也能上手!通过「出码→自审修复」两轮Agent循环,用单HTML文件实现记账本——支持本地存储、月度统计、分类饼图(Canvas手绘)、响应式适配。注册即赠800次Qwen3.7-Max调用!阿里云Qoder官网:https://t.aliyun.com/U/CpdGPQ

Qoder一句话AI编码实战教程,新手0基础也能上手本,本案例是以一个单文件 HTML 记账本跑通「出码 → 自审修复」两轮 Agent 编码循环,首先让Qoder模型出代码,再让Qoder以代码审查者身份自查边界问题并修复,最终产出可直接运行的记账本。阿里云Qoder官网:https://www.aliyun.com/product/qoder   注册Qoder账号免费领800次3.8-Max模型调用。

Qoder.jpg

AI Coding 玩法

使用Qoder 一句话,让其生成HTML记账本,然后让其以代码审查者身份自查边界问题并修复,最终产出可直接运行的记账本。


所需工具:


操作步骤

步骤一:生成html代码

在 Qoder 里把下面的需求发给 qwen3.7-max

帮我做一个单文件 HTML 记账本:
支持记录 日期/分类/金额/备注,数据存 localStorage,
顶部显示本月支出总额和分类饼图(不用外部库,Canvas 手绘),
手机浏览器可用,配色清爽治愈系。输出完整可运行的单文件 HTML。

步骤二:自审修复(Agent 循环关键步)

请你以严格代码审查者身份自查上面的代码:找出功能缺陷、边界问题
(如金额非法输入、localStorage 解析失败、饼图无数据时的显示),
修复后输出最终完整单文件 HTML。只输出最终版。


实测产出

以一个单文件 HTML 记账本跑通,输出的运行界面(示例数据):

image.png


说明

  • 消耗:本玩法涉及 2 轮编码循环(出码 → 自审修复),第 2 轮要回读全部代码,所以明显比第 1 轮贵。
  • 产出:最终产出 23.8K 字符、可直接运行的单文件记账本。
相关文章
|
5天前
|
人工智能 数据挖掘 BI
千问办公QwenWork深度解析:基于Qwen3.8,六大核心能力重构企业全自动化工作流与计费选型指南
AI办公应用快速普及的今天,大量工具依旧停留在对话问答层面,只能输出文本草稿,很难直接产出可以投入业务使用的最终产物。企业日常办公当中,员工需要在多款软件之间来回切换,沟通协作、文档撰写、数据分析、网页制作分别对应不同平台,复制粘贴操作占用大量工作时间。即便借助普通大模型生成内容,也经常遇到格式错乱、表格缺少计算公式、生成网页还需要额外部署上线等各类问题,AI产出物需要大量二次加工才可以使用。除此之外,企业内部数据相互割裂,AI无法直接读取群聊记录、会议纪要、审批单据、内部知识库,业务需求需要人工重新复述;面对法务审核、电商数据分析、代码开发这类垂直任务,使用者需要编写复杂冗长提示词才能够得到
256 2
|
3天前
|
缓存
阿里云Token Plan的Credits是如何计费的?1个Credits相当于多少Token?
阿里云百炼Token Plan采用动态Credits计费,1 Credits不固定对应Token数,实际消耗由模型类型、Token用量、思考模式及工具调用等共同决定。以qwen3.6-plus为例,输入/缓存/输出Token折算系数各异,百万Tokens成本低至1.12元,较按量计费最高省44%。新用户赠7000万Tokens。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
|
6天前
|
存储 监控 IDE
阿里云百炼新人免费 Token 每个模型多少?每个模型免费100Tokens指南,你关心的问题都在这!
新用户首次开通阿里云百炼(华北2北京地域),自动获赠超7000万Tokens免费额度,覆盖Qwen、GLM、DeepSeek等70+主流模型,每模型100万Token,有效期90天,仅限实时推理调用。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
150 0
|
7天前
|
人工智能 数据可视化 安全
阿里云百炼是什么?百炼是干什么的?AI模型如何收费?免费Token怎么领取?
阿里云百炼是大模型一站式服务平台,集成千问全系及DeepSeek、Kimi等主流模型。支持OpenAI兼容API与可视化应用构建,覆盖智能体、知识库等场景。新用户赠7000万Tokens,兼顾开发者高效调用与业务人员零代码开发,降低AI应用门槛。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
121 0
|
7天前
|
人工智能 API 开发者
阿里云百炼 Token Plan 个人版 39 元起:Lite/Standard/Pro 套餐对比与选型指南
阿里云百炼Token Plan重磅升级:个人版正式上线,Lite档仅39元/月,支持Qwen3.8-Max、DeepSeek-V4-Pro等旗舰模型;企业版同步降价,覆盖150+多模态模型,统一Credits抵扣,API兼容OpenAI协议。阿里云百炼Token Plan官网:https://t.aliyun.com/U/EsRjVx
192 0
|
5天前
|
人工智能
Token Plan 实战案例:AI 生成小红书标题正文标签,同时输出带标题渲染的 3:4 竖版封面图
本文介绍如何用阿里云百炼平台高效制作小红书内容:先调用qwen3.7-plus生成「夏日清凉系家居布置」主题的爆款标题、正文与标签;再用wan2.7-image文生图模型,一键生成含标题文字渲染的3:4竖版封面图,全程无需PS,实测免费额度充足。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
51 1
|
4天前
|
人工智能 IDE API
阿里云百炼怎么获取API Key?新手API Key调用全流程及问题解答FAQ
阿里云百炼是AI大模型服务平台,新用户开通即赠超7000万免费Tokens。本文详解API Key获取三步法:登录控制台→进入API Key管理→创建并妥善保存Key,支持环境变量及第三方工具配置,操作简单、安全可控。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
|
2天前
|
存储 安全 网络安全
高价值目标 OAuth 授权同意钓鱼攻击威胁与防护研究
OAuth授权同意钓鱼是新型身份攻击,利用协议合法机制诱导高价值目标主动授权,绕过多因素认证。本文以FBI 2026年预警事件为样本,还原攻击链,剖析协议缺陷与认知盲区,提出覆盖服务商、用户、机构及执法的四维闭环防御体系。(239字)
32 2
|
3天前
|
缓存
TokenPlan的Credits怎么计费?1个Credits不等于固定Token数,Qwen3.6‑Plus计算示例解析
阿里云百炼Token Plan按Credits动态计费,1 Credits不等于固定Token数。消耗由模型类型(如qwen3.6-plus)、Token数量、思考模式、工具调用及缓存命中等共同决定。示例显示:8,349输入Token≈1.67 Credits,573输出Token≈0.69 Credits,合计约4 Credits。百万Tokens成本低至1.12元,较按量计费最高省44%。详情以官网为准。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
63 3
|
6天前
|
存储 人工智能 自然语言处理
我使用Qoder一句话自建贪吃蛇小游戏,点击就能运行,太简单了!
Qoder实战教程:用一句话描述玩法,调用qwen3.8-max模型,自动生成纯HTML/CSS/JS的贪吃蛇小游戏——Canvas手绘、零依赖、浏览器打开即玩,支持得分存储与重开,适合教学、营销与快速Demo。阿里云Qoder官网:https://t.aliyun.com/U/CpdGPQ

热门文章

最新文章