你知道我在AI编程中达到了什么深度吗?听听我在火龙果上的分享!

自从Copilot推出后,市面上涌现了不少AI IDE,比如CursorWindsurf等等。后来又出现了一些不需要写代码的工具,比如v0.dev和bolt.new。

你们有没有用过这些AI工具?用得怎么样呢?

A. 完全没用过

B. 偶尔用来修正语法或bug

C. 用AI做一些小功能

D. 完全依赖AI开发了一个项目

如果你是D类,能不能分享一下你是怎么做到的?

前几天,我在一个群里看到一位牛人提到“Snow Day Calculator”这个词。于是我好奇地去谷歌上搜了一下,发现了很多类似的工具。在这个基础上,我决定自己做一个,现在就来和大家分享一下我的经历。其实,做这样的网站并不复杂,群里好多个高手很快就模仿出来了。作为一名SEO新手,我想分享的是如何从零开始做出一个成品网站,以及在这个过程中使用的AI工具。

俗话说,工欲善其事,必先利其器。我首先找到了一个排名很高的同类网站,然后向万能的ChatGPT求助: 

https://www.snowdaycalculator.com/calculator.php,想了解一下这个网站是怎么实现的,背后用到了哪些技术,请用中文告诉我。

ChatGPT的回答是: 


Snow Day Calculator网站是一个通过输入邮政编码和选择学校类型来预测降雪天数的平台。以下是对其实现技术的分析: 

  1. 前端技术
  • HTML/CSS/JavaScript:这个网站有个简单的用户界面,用户可以输入邮政编码并选择学校类型,所有的交互功能通常是通过 HTML 表单和 JavaScript来实现的。
  • 响应式设计:为了支持各种设备,可能使用了CSS和框架(比如Bootstrap)来优化布局和用户体验。
  • 后端逻辑
  • 气象数据整合:这个网站的核心功能是根据气象数据来预测雪天。很可能是通过调用气象API(例如NOAA或其他天气服务)来获取实时天气信息。
  • 算法和模型:预测的准确性依赖于降雪的时间和强度等信息,可能使用了机器学习模型或基于规则的算法来计算雪天的概率。
  • 服务器语言:后端可能使用了常见的编程语言(如Python、PHP或Node.js)来处理用户输入并与气象API进行通信。
  • 数据库
  • 用户信息:如果需要保存用户的偏好或历史数据,可能会使用MySQL、PostgreSQL或其他数据库。
  • 气象历史数据:为了提高预测的准确性,可能会存储过去的气象数据。
  • API集成
  • 气象数据API:用于获取实时天气信息(如降雪强度和时间)。
  • 地理位置API:根据用户输入的邮政编码来确定具体位置。
  • 部署与性能优化
  • 托管平台:可能托管在AWS、Google Cloud或其他云平台上。
  • 性能优化:通过使用缓存、CDN等技术来减少延迟,提升用户体验。
  • 版权与法律
  • 网站的版权属于David Sukhin,并且自2007年起开始运营。这说明其技术栈可能经过了多次迭代和更新。

总的来说,这个网站结合了天气数据API、用户交互表单、后端算法和预测模型,实现了自动预测雪天的功能。


我又问: 

它可能调用了哪些API呢?

ChatGPT的回答是: 


要实现像Snow Day Calculator这样的站点,可能会调用以下几类常见的API来获取数据和实现功能: 

1. 气象数据API

这些API提供实时和历史天气数据,包括降雪量、风速、气温等: 

  • NOAA API(美国国家海洋和大气管理局):提供详细的天气和气候数据。
    • 官网:https://www.noaa.gov
  • OpenWeatherMap API
    • 提供天气预报、降雪量等信息,并支持多种开发语言。
    • 官网:https://openweathermap.org/api
  • WeatherStack API
    • 支持实时和历史气象数据查询。
    • 官网:https://weatherstack.com
  • AccuWeather API
    • 提供专业级的天气数据。
    • 官网:https://developer.accuweather.com
  • Dark Sky API(目前已被Apple收购,部分服务已转移至Apple Weather Kit)。

2. 地理位置API

为了根据用户输入的邮政编码确定地理位置,可能使用以下API: 

  • Google Maps Geocoding API
    • 根据邮政编码返回地理位置信息,如经纬度。
    • 官网:https://developers.google.com/maps/documentation/geocoding/start
  • Mapbox API
    • 类似Google Maps,提供地理编码服务。
    • 官网:https://www.mapbox.com
  • USPS ZIP Code Lookup API
    • 专为美国邮政编码解析设计的工具。
    • 官网:https://www.usps.com/business/web-tools-apis

3. AI和预测模型API

用于实现雪天概率的算法或预测模型: 

  • TensorFlow.jsPyTorch(如果网站使用自建AI模型):
    • 可能结合气象历史数据,训练自定义的机器学习模型。
  • BigMLGoogle AI Platform
    • 可直接使用云端机器学习模型来进行预测分析。

4. 时间与日历API

用来判断雪天是否会影响正常工作或学习: 

  • Google Calendar API
    • 提供校历或常规日历信息。
    • 官网:https://developers.google.com/calendar

5. 通知或提醒服务

如果网站需要发送雪天的通知或提醒,可能会用到: 

  • Twilio API
    • 用于短信通知。
    • 官网:https://www.twilio.com
  • Firebase Cloud Messaging
    • 提供跨平台的推送服务。
    • 官网:https://firebase.google.com/products/cloud-messaging

可能组合的技术流程

如何快速搭建一个雪天预测网站

  1. 用户输入邮政编码 → 使用地理位置 API 获取对应的经纬度。
  2. 调用气象 API → 获取该地区的降雪强度和时间等信息。
  3. 运用 AI/预测模型 → 结合天气数据和历史记录,分析雪天的概率。
  4. 结果反馈给用户 → 展示雪天的可能性,甚至发出通知提醒。

这样的实现方式既灵活又高效,具体用哪个 API 可以根据你的预算(比如免费 API 的限制)和精度要求来选。


大致思路其实就是:模仿一个类似的网站,接入相应的 API,然后把它部署到云端。

我找到一个类似的网站:https://snowdaycalc.net/,这个网站的界面设计得很简洁,首页内容也很丰富。

网站截图

我选择了bolt.new作为开发工具,比较了几个 AI 编程工具,觉得这个在前端界面设计上效果最好。

为了让 AI 达到我预期的效果,良好的提示词是必不可少的。我选择了一个 gpts 模型:

gpts截图

为了达到理想的结果,我多次调整了命令:

命令修改
命令修改

gpts 最终给出的输出结果:

修改后的提示词(中文):
请基于提供的图片使用 Next.js 框架创建一个网站,尽可能实现与图片一比一的视觉还原效果。同时,请确保网站符合 SEO 优化最佳实践,包括但不限于以下内容:
1. 语义化 HTML:在组件中使用正确的标签结构(如