跳过正文
  1. 文章/

30 Days of Vibe Coding - Day 14 - WeatherTUI

Nuno Coração
作者
Nuno Coração
Principal Product Manager @ Docker
目录
30 Days of Vibe Coding - 这篇文章属于一个选集。
§ 14: 本文

Day 14。我想看看把所有现代UI框架都扔掉、把一切都塞进终端里,天气应用会是什么样子。

提示词
#

“做一个终端天气仪表盘,要有ASCII艺术天气场景、动画天气效果和多地点支持”

怎么做的
#

我用了Watchfire,它把工作拆成了23个任务。对于一个天气应用来说听起来很多,但一旦ASCII艺术和动画加进来,范围就迅速膨胀了。

任务列表先覆盖了预期中的内容:项目搭建、与Open-Meteo的API集成、基本布局。然后就进入了有趣的部分:12个独特的ASCII艺术天气场景(太阳、月亮、雨、雪、雷暴、雾、风、云),每种天气条件对应的粒子动画效果,温度和降水图表,逐小时和逐日预报视图,多地点仪表盘,颜色主题,鼠标支持,以及可滚动的布局。

23个任务。我没有坐在那里一个个指导。Watchfire把它们排好队,在我做其他事情的时候一个个处理了。

成果
#

这个项目比大多数都让我惊喜。

天气详情的聚焦视图

ASCII艺术真的很棒。 每种天气条件都有自己的场景。有层层叠叠的云的阴天,带着落下雨滴的雨天,飘荡雪花的雪天,散发光芒的太阳。这些艺术细节丰富,让终端充满了真正的个性。不是那种偷懒的"下雨了://“式ASCII艺术。而是有阴影和层次感的真正的多行场景。

动画很流畅。 雨滴落下。雪花飘舞。夜空中星星闪烁。风的粒子在屏幕上吹过。雷暴时闪电闪烁。这一切都发生在终端里。按一个键就能暂停和恢复动画。

多地点仪表盘

仪表盘很清爽。 多个地点以网格形式展示,每个都有一个小的ASCII天气图标、当前温度和天气概况,一目了然。点击任何卡片或按数字键就能跳转到该地点的详细聚焦视图。

纽约的聚焦视图

详细视图应有尽有。 空气质量指数、日出日落时间、带颜色编码的UV指数、湿度条、风速和风向、云量、降水分类(雨vs雪)。底部还有7天预报,每天都有迷你ASCII天气图标。还能切换到12小时的逐时视图。

地点搜索

里斯本的搜索结果

地点管理做得很好。 搜索全球任何城市,添加到仪表盘,重新排序,设置默认地点。地理编码搜索很快返回结果,选择界面也很干净。

四个地点的仪表盘

四种颜色主题。 默认、海洋(蓝色和青色)、日落(暖橙色)、森林(绿色和大地色调)。按t在主题之间切换。你的偏好会保存到配置文件里。

主题选择器

应用海洋主题

不需要API密钥。 使用免费的Open-Meteo API,所以你只需要克隆、安装依赖、运行。不用注册,不用令牌,不用配置。

数据说话
#

  • 12个独特的ASCII艺术天气场景,配有相应的动画效果
  • 4种颜色主题,设置可持久化
  • 23个Watchfire任务,从搭建到最终打磨
  • 用Python和Textual构建(Textualize出品的TUI框架)
  • 实际动手时间: 大概20分钟,试了试不同城市和切换主题

试试看
#

克隆仓库然后运行python -m weather_tui。不需要API密钥。方向键导航,数字键在地点之间跳转,t换主题,?查看完整快捷键列表。

Day 14 总结
#

光是ASCII艺术,如果手工设计的话就得花好几天。再加上动画天气效果?我根本就不会去尝试。

让我印象深刻的是对细节的关注。7天预报的每张卡片都有自己的小ASCII天气图标。湿度以进度条显示。风包含速度和罗盘方向。UV指数根据严重程度变色。这些都不是我明确指定的。它就是理解了天气仪表盘需要这些东西,然后全都做出来了。

终端应用似乎是AI辅助编码的甜蜜点。文本界面的限制不是在束缚输出,反而是在帮助聚焦。


这是30 Days of Vibe Coding的第14天。跟随我用AI辅助编码在30天内交付30个项目的旅程。

30 Days of Vibe Coding - 这篇文章属于一个选集。
§ 14: 本文

相关文章