"Create a weather dashboard that lets users search for any city and displays the current temperature, weather condition, humidity, and wind speed. Use a clean, modern design with weather icons."
仪表盘看起来不错了,但还需要接入真实数据。以下是在不暴露密钥的情况下连接 OpenWeatherMap API 的方法:
在 YouWare 中,点击左侧边栏的「YouBase」标签
进入「Secrets」模块并启用它
点击「Add Secret」并输入:
Key name:OPENWEATHERMAP_API_KEY
Value:你在第 1 步获取的 32 位 API 密钥
保存密钥
然后告诉 YouWare 使用这个密钥:
"Connect the weather search to OpenWeatherMap API. Use the OPENWEATHERMAP_API_KEY secret I stored in YouBase. When users search for a city, fetch the current weather and display temperature in Celsius, weather description, humidity percentage, and wind speed."
为什么这很重要:根据 Weather API 错误处理指南,将 API 密钥暴露在前端代码中是新手常犯的错误。YouWare 的 Secrets 模块将密钥存储在服务端,采用企业级加密,对用户完全不可见。
你应该看到的:当你搜索「London」或「Tokyo」等城市时,仪表盘现在会拉取实时天气数据。
第 4 步:添加错误处理和加载状态
正式的应用需要优雅地处理各种异常情况。让 YouWare 添加这些保护功能:
"Add a loading spinner while fetching weather data. If the city isn't found, show a friendly error message like 'City not found. Please check the spelling.' If there's a network error, show 'Unable to fetch weather. Please try again.'"
"Create a rain alert app where users can enter their city and email address. The app checks the weather forecast and displays whether rain is expected in the next 12 hours. Show a visual indicator: green checkmark for clear weather, blue umbrella icon for rain expected. Include the expected precipitation amount and time."
启用 YouBase 模块:
Database:存储用户偏好和保存的城市
Users & Authentication:让用户可以保存设置
按照第 3 步的方式连接天气 API。
功能扩展:当基础降雨提醒运行正常后,你可以让 YouWare 添加更多功能:
"Add a daily summary that shows the weather for morning, afternoon, and evening. Let users set their notification preferences—they can choose to be alerted only if rain probability exceeds 50%."
"Build a weather outfit recommender. Users enter their city and the app shows current weather plus clothing suggestions. For cold weather under 10°C, suggest layers and a coat. For 10-20°C, suggest a light jacket. For over 20°C, suggest light clothing. If rain is expected, always recommend an umbrella. Show the reasoning: 'It's 8°C and windy, so we recommend a warm coat and scarf.'"
用以下提示让它更智能:
"Add activity-based recommendations. Let users select if they're going to work, exercising outdoors, or attending a formal event, and adjust clothing suggestions accordingly."
"Include a 'feels like' temperature explanation. If it's 15°C but feels like 10°C due to wind, explain this and adjust recommendations."
"Build a multi-city weather comparison tool. Users can add up to 5 cities and see their weather side-by-side in a table format. Show temperature, conditions, humidity, and wind for each city. Include a 'best weather' indicator that highlights which city currently has the most pleasant conditions. Let users save their city list for future visits."
启用 YouBase 的 Database 模块来存储用户偏好:
"Save each user's city list in YouBase so they don't have to re-enter cities when they return. Add a 'remove city' button next to each city in the comparison."
添加身份认证功能:
"Enable Google login so users can access their saved cities from any device."
"Build a travel weather planner. Users enter their destination city and travel dates (up to 14 days out). The app shows a day-by-day weather forecast with temperature highs and lows, expected conditions, and precipitation chance. Generate a packing checklist based on the forecast: if any day shows rain, add umbrella; if temperatures vary widely, suggest layers."
添加这些智能功能:
"Include a 'best days to visit' section that highlights which days in the forecast have the most favorable weather—low precipitation, moderate temperatures, and calm winds."
"Add sunrise and sunset times for each day so travelers can plan outdoor activities."
技巧与窍门
做过几个天气应用后,你会发现一些能加速开发、提升效果的规律。
API 的选择很重要:OpenWeatherMap 服务超过 800 万开发者,文档齐全;但 WeatherAPI 提供更大方的免费额度(每月 100 万次 vs 每天 1,000 次)。根据预期流量选择即可。
积极使用缓存:天气不会每秒都变。让 YouWare 将响应缓存 10-15 分钟:
"Cache weather API responses for 15 minutes to reduce API calls. Show a 'last updated' timestamp so users know how fresh the data is."
始终使用 HTTPS:根据 API 最佳实践,HTTP 请求可能失败或泄露数据。YouWare 会自动处理这一点,但在未来的项目中请牢记。
提供公制和英制切换:不是所有人都习惯摄氏度。添加一个切换开关:
"Add a temperature unit toggle that lets users switch between Celsius and Fahrenheit. Remember their preference for future visits."
处理边界情况:有些城市同名(如法国巴黎 vs 美国得克萨斯州巴黎)。让用户明确选择:
"When a city search returns multiple results, show a dropdown letting users select the correct city with country name."
进阶用法
掌握基础之后,你可以用以下高级功能扩展天气应用:
渐进式 Web 应用(PWA)能力:根据 GitHub PWA 天气项目,天气应用可以通过缓存历史数据实现离线使用。让 YouWare 实现:
"Make this a Progressive Web App that caches the last viewed weather and shows it even when offline, with a clear indicator that data may be outdated."