"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."
"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."
"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日1,000回)。予想されるトラフィックに応じて選びましょう。
"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."