【案例共创】基于华为云码道从需求对话到生成「赛博老黄历」趣味应用

#华为云码道 #CodeArts #AI编程 #前端开发

前言

一个人搞项目又要写代码又要管部署还要跑测试，谁懂啊！本文记录了使用华为云码道（CodeArts）代码智能体，从一句需求对话到生成完整应用的全程。项目是一个融合传统黄历文化与现代API的趣味应用——赛博老黄历，包含干支纪年、今日宜忌、实时天气、每日一言、历史上的今天、赛博抽签六大功能模块。

📦 项目源码已开源：https://gitcode.com/cpyaxjq/cyber-almanac

欢迎 Star ⭐ 支持！

📦 项目源码已开源：https://gitcode.com/cpyaxjq/cyber-almanac

欢迎 Star ⭐ 支持！

一、需求描述

在华为云码道 IDE 中，我向 AI 智能体描述了如下需求：

“帮我做一个赛博老黄历网页应用，融合传统黄历和现代科技感。要求：1. 显示干支纪年和生肖；2. 趣味生成程序员专属的今日宜忌；3. 调用免费API查询实时天气，支持城市搜索；4. 每日一言金句展示；5. 历史上的今天；6. 赛博抽签互动小游戏。整体风格是国风×赛博朋克，深色背景配金色点缀，响应式布局。”

AI 智能体理解需求后，自动规划了项目结构，并依次生成了 HTML 结构、CSS 样式和 JavaScript 逻辑代码。

二、技术方案

技术选型

项目	选择	理由
前端框架	原生 HTML/CSS/JS	轻量级，无需构建，浏览器直接打开
天气API	Open-Meteo	免费且无需 API Key，支持全球城市
一言API	Hitokoto	免费开源，名言金句库丰富
字体	ZCOOL QingKe HuangYou + Noto Serif SC	国风手写体 + 衬线体，契合主题

项目结构

cyber-almanac/
├── index.html              # 主页面（语义化结构）
├── style.css               # 样式（国风×赛博朋克美学）
├── app.js                  # 业务逻辑 + API调用
├── README.md               # 项目说明
└── 文章-赛博老黄历.md       # 本案例文章

完整源码已托管至 GitCode：https://gitcode.com/cpyaxjq/cyber-almanac

三、核心功能实现

3.1 干支纪年计算

干支纪年是中国传统的纪年方式，由十天干和十二地支组合而成。以公元4年（甲子年）为基准，通过取模运算即可计算任意年份的干支：

const TIAN_GAN = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
const DI_ZHI = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
const SHENG_XIAO = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];

function getGanZhi(year) {
    const offset = year - 4;
    const gan = TIAN_GAN[offset % 10];
    const zhi = DI_ZHI[offset % 12];
    const xiao = SHENG_XIAO[offset % 12];
    return { ganZhi: `${gan}${zhi}年`, shengXiao: `属${xiao}` };
}

3.2 今日宜忌（程序员专属版）

传统黄历有宜忌，赛博老黄历自然也要有——不过是程序员专属版。从内置词库中随机抽取3条"宜"和3条"忌"：

• 宜：写代码、重构、提交代码、Code Review、修Bug、摸鱼、喝咖啡、学新技术、逛GitHub……
• 忌：删库、rm -rf、直接改生产、不写测试、硬编码密码、通宵加班、裸提交、周五发版……

每次点击"重新算一卦"都会重新生成，趣味十足。

3.3 实时天气查询（Open-Meteo API）

这是本项目最核心的 API 调用部分。Open-Meteo 提供完全免费的天气数据，无需注册和 API Key。查询分两步：

第一步：地理编码（城市名 → 经纬度）

const geoRes = await fetch(
    `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=zh`
);

第二步：查询天气（经纬度 → 天气数据）

const weatherRes = await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}` +
    `&current=temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m` +
    `&daily=temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=1`
);

返回数据包含温度、体感温度、湿度、风速、天气状况等，通过 WMO 天气代码映射为中文描述（如 0 → ☀️ 晴，95 → ⛈️ 雷暴）。

3.4 每日一言（Hitokoto API）

调用 Hitokoto API 获取随机名言金句，并做了容错处理——当 API 不可用时自动回退到内置的编程名言：

try {
    const res = await fetch('https://v1.hitokoto.cn/?c=i&c=k');
    const data = await res.json();
    quoteText.textContent = `"${data.hitokoto}"`;
    quoteFrom.textContent = `—— ${data.from || '佚名'}`;
} catch (err) {
    // 备用金句回退
    const fallback = [
        { text: '代码是写给人看的，只是恰好能被机器执行。', from: '《代码大全》' },
        { text: '过早优化是万恶之源。', from: 'Donald Knuth' }
    ];
    // ...
}

3.5 历史上的今天

内置了20条科技史上的重要事件（从1945年ENIAC诞生到2022年ChatGPT发布），每次随机展示6条，按年份排序。这种方式保证了离线可用性，避免了第三方API不稳定的问题。

3.6 赛博抽签

设计了7个签位（上上签到下下签），每个签位配有运势描述和"幸运语言/幸运饮品"等趣味属性。抽签时先显示"签筒摇晃中…"的动画效果，800ms后展示结果，配合 CSS glow 动画让签位文字发光，增强了仪式感。

四、视觉设计

整体采用国风 × 赛博朋克的美学风格：

• 配色：深色背景（#1a1a2e）+ 金色主调（#d4af37）+ 红/绿点缀
• 字体：标题用 ZCOOL QingKe HuangYou（国风手写体），正文用 Noto Serif SC（思源宋体）
• 动效：星空闪烁背景、卡片悬浮上移、抽签发光动画、按钮缩放反馈
• 响应式：移动端自动切换为单列布局，适配手机浏览

五、使用华为云码道的体验

在整个开发过程中，华为云码道 AI 智能体展现了几个让我印象深刻的能力：

1. 需求理解准确：一句需求描述包含了6个功能模块和风格要求，AI 准确理解并全部实现
2. 代码质量高：生成的代码结构清晰、注释完善、有容错处理，不是简单的模板拼接
3. API选择合理：AI 选择了无需 API Key 的免费接口，降低了使用门槛
4. 样式设计出色：国风×赛博朋克的视觉风格一次生成到位，配色和动效都很专业

最关键的是，从需求对话到完整应用生成，整个过程非常流畅。传统开发可能需要半天到一天的工作量，借助码道大幅缩短了开发周期。

六、运行效果

浏览器直接打开 index.html 即可运行，无需安装任何依赖。页面加载后自动展示当前日期的干支纪年、今日宜忌、北京天气、每日一言和历史事件，点击"赛博抽签"可抽取今日运势。

也可以从 GitCode 克隆源码运行：

git clone https://gitcode.com/cpyaxjq/cyber-almanac.git
cd cyber-almanac
# 浏览器打开 index.html 即可

也可以从 GitCode 克隆源码运行：

git clone https://gitcode.com/cpyaxjq/cyber-almanac.git
cd cyber-almanac
# 浏览器打开 index.html 即可

总结

这个赛博老黄历项目展示了华为云码道在以下场景的价值：

• 快速原型开发：从需求到可运行应用，对话即生成
• 多API整合：天气、一言等外部API的调用与容错处理
• 全栈生成：HTML结构、CSS样式、JS逻辑一次性生成
• 创意落地：将传统黄历文化与现代科技结合的创意快速实现

如果你也想体验"码"上生成应用的快感，欢迎开通华为云码道：

扫码开通华为云码道，免费体验"码"上生成应用：https://developer.huaweicloud.com/codeartsco.html?source=dmzntsq1&sourcead=sq

---

本文基于华为云码道（CodeArts）创作，项目源码已开源至 GitCode：https://gitcode.com/cpyaxjq/cyber-almanac ，欢迎 Star ⭐ 支持！

#华为云码道 #CodeArts #AI编程 #前端开发 #赛博老黄历