【中秋国庆 Vibe Coding】月亮到底在哪边?我做了个「寻月罗盘」

每年到中秋都会说一句:

“今晚记得赏月。”

但真到了晚上下楼,我发现一个很实际的问题:

月亮呢?

它几点升起来?
现在在哪个方向?
为什么我抬头找了半天还是没看见?

天气软件一般会告诉你今天是不是满月,天文软件又往往是一堆方位角、高度角和专业参数。

但我真正想知道的其实只有一句:

我现在站在这里,应该往哪边看?

所以这次用 TraeCode 做了一个很简单的小工具——

:full_moon: 今夜寻月

一个专门为手机设计的寻月网页。

不用安装 App,不用登录。

打开网页,允许定位,然后举起手机转一转,它会告诉你:

今晚几点月升,以及此刻月亮正在你的哪个方向。


:mobile_phone: 在线体验

体验地址:

打开「今夜寻月」

建议直接使用手机打开。

无需注册
无需安装
定位信息只用于本地计算月亮位置


举起手机,找今晚的月亮

进入「今夜寻月」以后,网页会根据:

当前位置 + 当前时间

计算此刻月亮真实的方位和高度。

但我不太想把它做成这种东西:

方位角:113.4°
高度角:27.8°

因为我自己看到这种数据都要先想一下它到底是什么意思。:joy:

所以最后页面尽量把这些参数翻译成人话:

:full_moon: 月亮现在在东南方向
向右转一点
再稍微抬头

就在这个方向

手机转动时,寻月盘也会跟随方向变化。

这也是整个作品里我最想实现的一个体验:

不是告诉你月亮的坐标,而是真的带你去找它。


今晚几点能看到月亮?

除了实时方向,还会显示今晚比较基础的赏月信息:

  • 月升时间
  • 月落时间
  • 当前月亮方向
  • 月亮高度
  • 当前月相
  • 月面照明比例
  • 今晚月亮的大致运行轨迹

例如月亮还没升起时,不会让你拿着手机满天乱找,而是直接告诉你:

今晚 18:12 月升

如果已经升起来了,就进入寻月状态。

月亮高度也尽量不用专业语言表示。

比如高度角比较低时,会显示:

月亮刚刚升起,靠近地平线。

升得比较高以后则会提示:

稍微抬头就能看到。


它其实不需要“实时月亮 API”

刚开始做的时候,我第一反应也是:

是不是得找一个接口,实时获取月亮的位置?

后来真正开始实现才发现,这件事情反而没有想象中复杂。

月亮的位置可以通过:

时间 + 经纬度 + 天文计算

直接得到。

所以整个核心功能并没有使用 AI,也没有依赖地图、天气或者付费数据接口。

目前主要流程是:

手机定位

↓

计算当前月球位置

↓

得到月亮方位与高度

↓

读取手机当前朝向

↓

计算“你应该往左还是往右转”

也就是说,真正需要的数据基本都可以在浏览器本地完成。


从第一版到现在

确定方向之后,我先把需求整理出来交给 TraeCode,搭出了第一个能够运行的版本。

第一版其实很快就有了:

定位能获取,月升月落能计算,月亮方位也能够正常显示。

但真正拿到手机上以后,很快就发现:

“能算出来”和“真的好用”完全是两回事。

最开始的页面更像一个天文查询工具。

信息很多,但是用户真正想知道的:

“月亮在哪?”

反而没有成为最明显的东西。

所以后面的调整基本都围绕这一件事情展开。


① 先把参数变成人话

第一版会直接展示不少天文数据。

后来逐渐把:

113°
28°

这种信息隐藏起来,转换成:

东南方向
稍微抬头

专业参数依然可以计算,但没必要逼用户理解。


② 从“看方向”变成“拿手机找”

只显示“东南方向”其实还是不够直观。

所以后来加入了手机方向传感器。

网页不仅知道:

月亮在哪。

同时也知道:

你现在手机朝哪。

两个方向一对比,就可以实时告诉用户:

向左转
向右一点

就在前方 :full_moon:

这个功能也变成了现在「今夜寻月」最核心的部分。


③ 电脑正常,不代表手机正常

这个项目还有一个很明显的特点:

它必须拿真手机测试。

因为核心功能包含:

  • 手机定位
  • 方向传感器
  • iPhone 权限
  • Android 浏览器兼容
  • HTTPS 安全环境

本地电脑页面能正常打开,并不能证明真正的寻月体验能用。

部署以后也踩到了 HTTPS、证书以及浏览器权限相关的问题。

所以后面的开发基本都是:

改一点 → 部署 → 手机打开 → 转几圈 → 再回来改


为什么只做手机版?

一开始就没准备认真做桌面版。

因为在电脑上告诉你:

“月亮在你右边 30°”

其实没有什么意义。

这个作品最自然的使用方式就是:

晚上走到户外 → 手机打开网页 → 举起手机 → 找月亮。

所以 UI、尺寸、交互、权限流程基本都围绕竖屏手机设计。

如果电脑访问,也只会提示:

请使用手机体验寻月。


最后还做了一张「今夜月卡」

找到月亮以后,可以生成一张属于今晚的月卡。

里面记录:

它不是核心功能,但我还是挺喜欢这个结尾。

找完月亮以后,总得留点什么。


最后

这个项目没有复杂 Agent,也没有大模型,更没有做成一个功能很多的“大而全工具”。

它只是用了手机本身已经有的:

位置、时间和方向。

然后尝试回答一个非常小的问题:

今晚的月亮,在哪边?

中秋晚上如果你正好也准备出去走走,可以拿手机试试看。

说不定转过身以后,

月亮刚好就在那边。:full_moon:


体验地址:
打开「今夜寻月」

创作工具:TraeCode

源码:
今夜寻月-源码参考包.zip (3.4 MB)

3 个赞