【案例共创】基于华为云码道从需求对话到生成「赛博老黄历」趣味应用#华为云码道 #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轻量级无需构建浏览器直接打开天气APIOpen-Meteo免费且无需 API Key支持全球城市一言APIHitokoto免费开源名言金句库丰富字体ZCOOL QingKe HuangYou Noto Serif SC国风手写体 衬线体契合主题项目结构cyber-almanac/ ├── index.html # 主页面语义化结构 ├── style.css # 样式国风×赛博朋克美学 ├── app.js # 业务逻辑 API调用 ├── README.md # 项目说明 └── 文章-赛博老黄历.md # 本案例文章完整源码已托管至 GitCodehttps://gitcode.com/cpyaxjq/cyber-almanac三、核心功能实现3.1 干支纪年计算干支纪年是中国传统的纪年方式由十天干和十二地支组合而成。以公元4年甲子年为基准通过取模运算即可计算任意年份的干支constTIAN_GAN[甲,乙,丙,丁,戊,己,庚,辛,壬,癸];constDI_ZHI[子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥];constSHENG_XIAO[鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪];functiongetGanZhi(year){constoffsetyear-4;constganTIAN_GAN[offset%10];constzhiDI_ZHI[offset%12];constxiaoSHENG_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。查询分两步第一步地理编码城市名 → 经纬度constgeoResawaitfetch(https://geocoding-api.open-meteo.com/v1/search?name${encodeURIComponent(city)}count1languagezh);第二步查询天气经纬度 → 天气数据constweatherResawaitfetch(https://api.open-meteo.com/v1/forecast?latitude${latitude}longitude${longitude}currenttemperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10mdailytemperature_2m_max,temperature_2m_mintimezoneautoforecast_days1);返回数据包含温度、体感温度、湿度、风速、天气状况等通过 WMO 天气代码映射为中文描述如0 → ☀️ 晴95 → ⛈️ 雷暴。3.4 每日一言Hitokoto API调用 Hitokoto API 获取随机名言金句并做了容错处理——当 API 不可用时自动回退到内置的编程名言try{constresawaitfetch(https://v1.hitokoto.cn/?cick);constdataawaitres.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 智能体展现了几个让我印象深刻的能力需求理解准确一句需求描述包含了6个功能模块和风格要求AI 准确理解并全部实现代码质量高生成的代码结构清晰、注释完善、有容错处理不是简单的模板拼接API选择合理AI 选择了无需 API Key 的免费接口降低了使用门槛样式设计出色国风×赛博朋克的视觉风格一次生成到位配色和动效都很专业最关键的是从需求对话到完整应用生成整个过程非常流畅。传统开发可能需要半天到一天的工作量借助码道大幅缩短了开发周期。六、运行效果浏览器直接打开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?sourcedmzntsq1sourceadsq本文基于华为云码道CodeArts创作项目源码已开源至 GitCodehttps://gitcode.com/cpyaxjq/cyber-almanac 欢迎 Star ⭐ 支持#华为云码道 #CodeArts #AI编程 #前端开发 #赛博老黄历
【案例共创】基于华为云码道从需求对话到生成「赛博老黄历」趣味应用
【案例共创】基于华为云码道从需求对话到生成「赛博老黄历」趣味应用#华为云码道 #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轻量级无需构建浏览器直接打开天气APIOpen-Meteo免费且无需 API Key支持全球城市一言APIHitokoto免费开源名言金句库丰富字体ZCOOL QingKe HuangYou Noto Serif SC国风手写体 衬线体契合主题项目结构cyber-almanac/ ├── index.html # 主页面语义化结构 ├── style.css # 样式国风×赛博朋克美学 ├── app.js # 业务逻辑 API调用 ├── README.md # 项目说明 └── 文章-赛博老黄历.md # 本案例文章完整源码已托管至 GitCodehttps://gitcode.com/cpyaxjq/cyber-almanac三、核心功能实现3.1 干支纪年计算干支纪年是中国传统的纪年方式由十天干和十二地支组合而成。以公元4年甲子年为基准通过取模运算即可计算任意年份的干支constTIAN_GAN[甲,乙,丙,丁,戊,己,庚,辛,壬,癸];constDI_ZHI[子,丑,寅,卯,辰,巳,午,未,申,酉,戌,亥];constSHENG_XIAO[鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪];functiongetGanZhi(year){constoffsetyear-4;constganTIAN_GAN[offset%10];constzhiDI_ZHI[offset%12];constxiaoSHENG_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。查询分两步第一步地理编码城市名 → 经纬度constgeoResawaitfetch(https://geocoding-api.open-meteo.com/v1/search?name${encodeURIComponent(city)}count1languagezh);第二步查询天气经纬度 → 天气数据constweatherResawaitfetch(https://api.open-meteo.com/v1/forecast?latitude${latitude}longitude${longitude}currenttemperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10mdailytemperature_2m_max,temperature_2m_mintimezoneautoforecast_days1);返回数据包含温度、体感温度、湿度、风速、天气状况等通过 WMO 天气代码映射为中文描述如0 → ☀️ 晴95 → ⛈️ 雷暴。3.4 每日一言Hitokoto API调用 Hitokoto API 获取随机名言金句并做了容错处理——当 API 不可用时自动回退到内置的编程名言try{constresawaitfetch(https://v1.hitokoto.cn/?cick);constdataawaitres.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 智能体展现了几个让我印象深刻的能力需求理解准确一句需求描述包含了6个功能模块和风格要求AI 准确理解并全部实现代码质量高生成的代码结构清晰、注释完善、有容错处理不是简单的模板拼接API选择合理AI 选择了无需 API Key 的免费接口降低了使用门槛样式设计出色国风×赛博朋克的视觉风格一次生成到位配色和动效都很专业最关键的是从需求对话到完整应用生成整个过程非常流畅。传统开发可能需要半天到一天的工作量借助码道大幅缩短了开发周期。六、运行效果浏览器直接打开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?sourcedmzntsq1sourceadsq本文基于华为云码道CodeArts创作项目源码已开源至 GitCodehttps://gitcode.com/cpyaxjq/cyber-almanac 欢迎 Star ⭐ 支持#华为云码道 #CodeArts #AI编程 #前端开发 #赛博老黄历
