Create a weather app Part 1

Outline

We'll first start by getting the user's current location coordinates using the CoreLocation framework from Apple. Then, we'll learn how to use these coordinates to get the current weather information with OpenWeather , a free weather API. Finally, we'll present all the data we fetched in the beautiful UI below.

Requirements

As we'll be building a mobile application with SwiftUI, you need to make sure to have Xcode 13 installed on your Mac, as well as an iPhone or iPad running on iOS 15 to test on. As you might have guessed it, we'll use the latest APIs and technologies introduced in iOS 15, so make sure to have Xcode and your phone updated to the latest versions. Also, as we'll require the user's location, we cannot test on the Simulator and will need to test on an actual device. Now, let's not waste any more time and start straight away!

Create an Xcode project

First, let's create a new Xcode project. In the modal that appears when you launch Xcode, click on Create a new Xcode project . Next, under iOS , select App . Click on Next.

Give your project a name. Make sure the Interface is SwiftUI and the Language is set to Swift . Usually, these are the default values so you don't need to change anything.

Then, we need to make sure to target devices on iOS 15 or higher. In other words, only devices running on iOS 15 will be able to download and use this application. Click on your project name, and under Targets , click again on your project name. Under the General tab > Deployment Info , select iOS 15.

If you want, you can also add an icon to your application by going into the Assets folder and, under AppIcon , add an icon for each empty slot. This will be the logo you'll see on your phone for the application you're currently developping. If you're a pro user, you can find the folder containing all these icons in the sources files of this section.

Create a LocationManager

Now that the setup is done, we need to create a LocationManager . This will be the file in which we'll handle everything related to location. Create a new Group called Managers . Inside of it, add a new Swift file called LocationManager.swift.

At the top, let's import Foundation and CoreLocation .CoreLocation is the framework from Apple we'll use to get the user's current location.

// ./Managers/LocationManager.swift

import Foundation
import CoreLocation

Next, let's create the LocationManager class. It should conform to a NSObject , ObservableObject and CLLocationManagerDelegate.

// ./Managers/LocationManager.swift

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {

}

At the top of the class, add a manager. It's be a CLLocationManager instance.

// ./Managers/LocationManager.swift

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    let manager = CLLocationManager()
}

Below that, we'll add two published variables - a location and a loading state.

// ./Managers/LocationManager.swift

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    let manager = CLLocationManager()

    @Published var location: CLLocationCoordinate2D?
    @Published var isLoading = false
}

Finally, add the following functions to the class. They'll let us know the user's current location coordinates, and update the loading state.

// ./Managers/LocationManager.swift

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
		// Variables here...

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestLocation() {
        isLoading = true
        manager.requestLocation()
    }

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        location = locations.first?.coordinate
        isLoading = false
    }

    func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
        print("Error getting location", error)
        isLoading = false
    }
}

For the purposes of this tutorial, we'll request the user to share their location every time they launch the app. Of course, this is not the best user experience, but we want to keep this tutorial simple. You can take it a step further and always get the current location on the background, by reading Apple's documentation on the subject.

Get the coordinates

First, let's go to the ContentView . As we'll have a few views in our project, let's create a new group called Views , and drag and drop ContentView inside that new group. Then, inside of the struct , on the first line, initialize the LocationManager as a StateObject in ContentView.

// ./Views/ContentView.swift

@StateObject var locationManager = LocationManager()

Let's create a new view under the Views folder, in which we'll request the user to get their location. We'll call this the WelcomeView . At the top of the view, inside of the struct , we'll add the LocationManager as an environment object.

// ./Views/WelcomeView.swift

@EnvironmentObject var locationManager: LocationManager

Let's call the WelcomeView in the body of ContentView . Remember to add the environmentObject modifier to the WelcomeView as to not run into a crash later on. We'll also wrap it in a VStack , and set the background to a dark blue and the theme to dark.

// ./Views/ContentView.swift

VStack {
		WelcomeView()
				.environmentObject(locationManager)
}
.background(Color(hue: 0.656, saturation: 0.787, brightness: 0.354))
.preferredColorScheme(.dark)

Now, let's code the WelcomeView . It'll be a simple view with a title, a subtitle, and a button. Add the following code for the title and the subtitle.

// ./Views/WelcomeView.swift

VStack {
    VStack(spacing: 20) {
        Text("Welcome to the Weather App")
            .bold()
            .font(.title)

        Text("Please share your current location to get the weather in your area")
            .padding()
    }
    .multilineTextAlignment(.center)
    .padding()

}
.frame(maxWidth: .infinity, maxHeight: .infinity)

Next, we'll add a LocationButton right below the text. LocationButton is a new button introduced since iOS 15 that lets us request the user's location easily. We'll style the button with some cornerRadius , fill in the symbol, and add a white foregroundColor.

// ./Views/WelcomeView.swift

VStack {
    // Text here...

		LocationButton(.shareCurrentLocation) {
				locationManager.requestLocation()
		}
		.cornerRadius(30)
		.symbolVariant(.fill)
		.foregroundColor(.white)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)

You might run into an error that Xcode can't find LocationButton in scope. Import CoreLocationUI in the WelcomeView , as LocationButton comes with that framework.

// ./Views/WelcomeView.swift

import CoreLocationUI

Back in ContentView , let's display the coordinates of the user, to see if our code works. If we take a look at LocationManager , you'll see that we're saving the location in a published location variable. We can access it with locationManager.location in our View. As it is optional, we need to unwrap it.

// ./Views/ContentView.swift

if let location = locationManager.location {
	Text("Your coordinates are: \(location.longitude), \(location,latitude)")
}

Still in ContentView , add an else statement. While the app is getting the user's location, we'll add a ProgressView.

else {
		if locationManager.isLoading {
				ProgressView()
		} else {
				WelcomeView()
						.environmentObject(locationManager)
		}
}

Now connect your device to your Mac, build and run the app on your device, and see if you get a longitude and latitude displayed in your view. If you do, congratulations! We can now get the weather with these coordinates. Otherwise, scroll back up to see if you missed a step or forgot to add something in the code. Next, let's get the weather information in second section of this series!