Weather App Tutorial

⏱️ 45 minutes Build a weather app that shows current conditions and forecasts. You’ll learn about API integration, location services, and displaying real-time data.

What You’ll Build

A weather app that:

Shows current weather for your location
Displays temperature, conditions, and other details
Shows a multi-day forecast
Lets you search for other cities

Before You Start

This tutorial uses a weather API to get real data. You have two options:

Option A: Use WeatherKit (Recommended)

Apple’s built-in weather service. No API key needed, but requires iOS 16+ and works automatically.

Option B: Use OpenWeather API

Free tier available at openweathermap.org. Requires creating an account and getting an API key. For this tutorial, we’ll use WeatherKit since it’s simpler.

Part 1: Create the App

On the Nativeline home page, enter:

A weather app that shows the current weather for my location. Display temperature, weather condition (sunny, cloudy, etc.), and a 5-day forecast. Use Apple's WeatherKit.

Complete the Wizard

Who is this for? — Just me
Feel — Modern & polished
Priority — Core functionality first
Colors — Ocean Blues (or your choice)
Name — Weather

Wait for the build to complete.

Part 2: Set Up Location Permission

Your app needs permission to access location. Nativeline should have set this up, but let’s verify:

Make sure the app requests location permission when it first opens. Show a loading state while getting weather data.

When you run the app in the Simulator:

You’ll see a permission popup for location
Tap “Allow While Using App”
The app should fetch weather for the Simulator’s default location

To change the Simulator’s location: Features → Location → Custom Location (or choose a city)

Part 3: Improve the Current Weather Display

Let’s make the current weather look better:

Redesign the current weather section:
- Large temperature display (72°F format)
- Weather condition icon (sun, cloud, rain, etc.)
- Condition text (Partly Cloudy)
- High/low temperatures for today
- "Feels like" temperature
- Location name at the top

Your main weather display should now be informative and visually clear.

Part 4: Add Weather Details

Add more weather information:

Below the main temperature, add a horizontal row of weather details:
- Humidity percentage
- Wind speed and direction
- UV index
- Visibility

Use icons for each and show the value below.

Part 5: Improve the Forecast

Let’s enhance the 5-day forecast:

Show the 5-day forecast as horizontal scrolling cards:
- Each card shows the day name, weather icon, and high/low temps
- Use a slightly different background for each card
- Make today's card highlighted

Or for a different layout:

Show the 5-day forecast as a vertical list:
- Day of week on the left
- Weather icon in the middle
- High temp / low temp on the right
- Alternating row backgrounds

Part 6: Add City Search

Let users check weather for other cities:

Add a search bar at the top that lets me search for cities. When I tap a city from the search results, show the weather for that location instead of my current location.

Test searching for cities like “New York,” “London,” or “Tokyo.”

Part 7: Add Pull to Refresh

Let users manually refresh the weather:

Add pull-to-refresh to update the weather data. Show a loading indicator while refreshing.

Pull down in the Simulator to test it.

Part 8: Add Background Based on Weather

Make it visually dynamic:

Change the background gradient based on the current weather:
- Sunny: Yellow to blue gradient
- Cloudy: Gray gradient
- Rainy: Dark blue to gray
- Night: Dark purple to black

Also adjust text colors for readability.

Part 9: Add Hourly Forecast (Optional)

Show hour-by-hour weather:

Add an hourly forecast section between current weather and daily forecast. Show the next 12 hours as a horizontal scrolling row with:
- Hour (3 PM)
- Small weather icon
- Temperature

Part 10: Add Weather Alerts (Optional)

Display severe weather warnings:

If there are any weather alerts for the current location, show a warning banner at the top with the alert type and a button to read more details.

Final Result

You now have a complete weather app with:

✅ Current location weather
✅ Temperature and conditions
✅ 5-day forecast
✅ Weather details (humidity, wind, etc.)
✅ City search
✅ Pull to refresh
✅ Dynamic backgrounds
✅ (Optional) Hourly forecast
✅ (Optional) Weather alerts

What You Learned

Concept	How It Was Used
APIs	Fetching weather data from WeatherKit
Location	Getting device coordinates
Permissions	Requesting location access
Async data	Loading states and refreshing
Search	City lookup and selection
Dynamic UI	Backgrounds based on conditions

Using OpenWeather API Instead

If you prefer OpenWeather (or WeatherKit isn’t working):

Sign up at openweathermap.org
Get your free API key
Tell Nativeline:

Use the OpenWeather API instead of WeatherKit. My API key is YOUR_KEY_HERE. Use the One Call API 3.0 endpoint for current weather and forecasts.

Never share your API key publicly. For a real app, you’d store this securely.

Troubleshooting

Weather data not loading

Make sure location permission is granted
Check that you’re connected to the internet
Try the Simulator’s Features → Location menu
Try asking: “Show a mock weather display with sample data to test the UI”

Location permission not appearing

The permission popup only shows once. To reset:

Simulator → Device → Erase All Content and Settings
Or ask: “Make sure we request location permission with a usage description”

Search not finding cities

“Use Apple’s MapKit geocoding to search for cities by name”

WeatherKit not working

WeatherKit requires iOS 16+. Make sure your Simulator is running iOS 16 or later, or switch to OpenWeather API.

Challenge: Extend Your App

Try these on your own:

Widgets — Create a home screen widget (advanced)
Favorites — Save favorite cities
Notifications — Alert when rain is expected
Units toggle — Switch between °F and °C
Radar map — Show weather radar for your area

Quick Start

Weather App Tutorial

Weather App Tutorial

What You’ll Build

Before You Start

Option A: Use WeatherKit (Recommended)

Option B: Use OpenWeather API

Part 1: Create the App

Complete the Wizard

Part 2: Set Up Location Permission

Part 3: Improve the Current Weather Display

Part 4: Add Weather Details

Part 5: Improve the Forecast

Part 6: Add City Search

Part 7: Add Pull to Refresh

Part 8: Add Background Based on Weather

Part 9: Add Hourly Forecast (Optional)

Part 10: Add Weather Alerts (Optional)

Final Result

What You Learned

Using OpenWeather API Instead

Troubleshooting

Challenge: Extend Your App

Next Tutorial

Photo Gallery

Notes App

​Weather App Tutorial

​What You’ll Build

​Before You Start

​Option A: Use WeatherKit (Recommended)

​Option B: Use OpenWeather API

​Part 1: Create the App

​Complete the Wizard

​Part 2: Set Up Location Permission

​Part 3: Improve the Current Weather Display

​Part 4: Add Weather Details

​Part 5: Improve the Forecast

​Part 6: Add City Search

​Part 7: Add Pull to Refresh

​Part 8: Add Background Based on Weather

​Part 9: Add Hourly Forecast (Optional)

​Part 10: Add Weather Alerts (Optional)

​Final Result

​What You Learned

​Using OpenWeather API Instead

​Troubleshooting

​Challenge: Extend Your App

​Next Tutorial

Photo Gallery

Notes App

Weather App Tutorial

What You’ll Build

Before You Start

Option A: Use WeatherKit (Recommended)

Option B: Use OpenWeather API

Part 1: Create the App

Complete the Wizard

Part 2: Set Up Location Permission

Part 3: Improve the Current Weather Display

Part 4: Add Weather Details

Part 5: Improve the Forecast

Part 6: Add City Search

Part 7: Add Pull to Refresh

Part 8: Add Background Based on Weather

Part 9: Add Hourly Forecast (Optional)

Part 10: Add Weather Alerts (Optional)

Final Result

What You Learned

Using OpenWeather API Instead

Troubleshooting

Challenge: Extend Your App

Next Tutorial