不会编程,20分钟手搓一个旅游AI工具
本文最后更新于 2025-06-21,文章内容可能已经过时。
背景
前阵子,老婆大人突然说,要不咱们十一带着娃一起去新西兰,她的快乐老家探索一下,以前挺热衷于做攻略,现在还没时间做攻略,接着gemini2.5的deep-research我免费白嫖了一年,要不干脆就让他给我做了个攻略。
让GEMINI2.5帮忙做攻略
我10月准备去新西兰旅游,2个大人和一个3岁的小朋友,计划10天的行程,包含从中国大湾区机场,
不限于广州、深圳、珠海、香港、澳门往返新西兰,请帮我设计一个详细的旅行规划和线路,包含去之前准备的材料,
天气气候,景点线路,线路合理且对小朋友大人都友好,并且我有带大疆mini4pro的无人机,着重在南岛旅游。
如果有景点规划,请帮我一起搜集景点的照片。
gemini首先确认你的需求,然后点击开始研究,大概2分钟,完成所有文档的搜集编写。

再输入一个提示词,让他给我生成一个网页。
请把他做成一个网页,这个网页会变成日后的出行助手,
他可以查询当地天气,然后网页上有详细的地图路径,点击到达点,
可以查看到当地当天的行程,以及具体的信息,当用户点开地图上的某个点,
可以下钻到这个城市并标明你推荐的景点的地方,大概车程耗时,门票以及景点图片信息及其他注意事项,
根据天气可以使用ai规划穿着建议等等。
其他交互需要包含你上述的信息,采用左右分栏,易于交互。
这时候可以切换成canvas就能生成网页了,我获得了一个初始网页,但内容已经很丰富了。

但是还是有一些问题,比如没有景点照片,没有天气预报,没有路线规划,没有交通建议。既然做了,那就让他变成出行助理吧,如果真去,我们到了新西兰,也能够使用他来帮助规划一天的计划。
让cursor帮忙实现更多功能
接下来,为了让这个出行助手,更好用,我需要先接入当地真实的天气数据,以及路线规划,交通建议等功能。
第一步,cursor需要先申请一个天气api,然后把数据导入到网页中,这样用户就可以看到当地的天气情况。这里选了openweathermap的api,注册一个账号,然后申请一个api key。
第二步,让cursor接入dify的接口(这里就不细聊dify是啥了),接入dify后,通过工作流,让他读取页面的信息和实时信息,这里因为已经有实时天气了,就不用在工作流里用mcp去读取了,相应会快一些。
然后dify会根据用户的输入,生成路线规划,交通建议等信息,并把这些信息插入到网页中。
dify的工作流如下:

以下为嵌入网页的效果:

dify使用的提示词如下:
<instruction>
你是一个专业的总结和规划大师,根据用户提供的天气、地理位置等信息,为用户制定详细的出行规划。请按照以下步骤执行任务:
1. **信息收集与分析**:首先,仔细阅读用户提供的天气、地理位置、出行时间等信息。分析这些数据的含义,例如温度、降水概率、紫外线强度等对出行的影响。
2. **行李建议**:根据天气和出行时长,列出必备的行李物品。例如,雨天需要雨具,寒冷天气需要保暖衣物,夏季需要防晒用品等。
3. **穿着建议**:结合天气和活动类型,给出具体的穿着建议。例如,户外活动建议舒适的运动鞋,正式场合建议正装等。
4. **游玩推荐**:根据地理位置,推荐适合的景点或活动。考虑天气对景点的影响,例如雨天推荐室内活动,晴天推荐户外景点。
5. **系统输出**:将以上内容整理成清晰、有条理的输出,避免使用任何XML标签。输出应分为“行李建议”、“穿着建议”和“游玩推荐”三个部分,每部分用标题标注。
请确保输出语言简洁明了,易于理解,并避免使用专业术语。
</instruction>
<examples>
<example>
<输入>
地理位置:北京
天气:晴朗,温度25°C,紫外线强
出行时间:周末两天
活动类型:观光旅游
</输入>
<输出>
**行李建议**
- 防晒霜、遮阳帽、太阳镜
- 轻便的背包
- 水壶
- 相机
**穿着建议**
- 短袖T恤和短裤
- 舒适的运动鞋
- 防晒外套
**游玩推荐**
- 故宫:适合晴天游览,注意防晒
- 颐和园:可乘船游览,建议上午前往
- 南锣鼓巷:傍晚散步,感受老北京风情
</输出>
</example>
</examples>
xml
加入评论功能
说不定回来之后还会把这个分享给别人,有人会想看评论,于是我加上了twikoo评论,在每个项目上加了个图标,可以进行评论。

优化移动端适配
最后优化了一下移动端适配,让手机网页更加美观一些。

总结
graph TD
A[开始] --> B[使用Gemini深度搜索生成攻略文本]
B --> C[使用Canvas创建网页布局]
C --> D[接入Cursor获取天气API数据]
C --> E[接入Dify实现其他功能]
C --> F[接入评论系统]
F --> G[测试网页功能]
G --> H[发布网页]
H --> I[结束]
这是一个完整的旅游攻略和出行工具的制作过程,从需求分析到网页制作,再到数据接入,最后测试发布。
最后附上网址,20分钟的有需要的可以自取!
- 感谢你赐予我前进的力量


.gif)