企业官网建设流程全解析

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

#华为云码道 #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 逻辑代码。

二、技术方案

技术选型

项目结构

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

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

三、核心功能实现

3.1 干支纪年计算

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

constTIAN_GAN=['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];constDI_ZHI=['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'];constSHENG_XIAO=['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'];functiongetGanZhi(year){constoffset=year-4;constgan=TIAN_GAN[offset%10];constzhi=DI_ZHI[offset%12];constxiao=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。查询分两步：

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

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

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

constweatherRes=awaitfetch(`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{constres=awaitfetch('https://v1.hitokoto.cn/?c=i&c=k');constdata=awaitres.json();quoteText.textContent=`"${data.hitokoto}"`;quoteFrom.textContent=`——${data.from||'佚名'}`;}catch(err){// 备用金句回退constfallback=[{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 克隆源码运行：

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

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

gitclone https://gitcode.com/cpyaxjq/cyber-almanac.gitcdcyber-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编程 #前端开发 #赛博老黄历