1.3 Project Setup
In this lesson, we are going to create the Xcode project for our weather app. We'll also prepare our user interface so that we're ready to dive in to coding in the next lesson.
1.Introduction3 lessons, 12:12
2.Animation3 lessons, 21:28
3.Networking3 lessons, 23:55
4.Custom Controls3 lessons, 32:22
5.Conclusion1 lesson, 01:44
1.3 Project Setup
Hi, and welcome back to Go Further With Swift, where we build a weather app for iOS. In this lesson, we are going to create the Xcode project and design our interface for our needs. The app itself is very simple, so I'm creating a Single View project. Let's call it TutsplusWeather. Of course, we're using Swift and our target device is the iPhone. Let's jump right into the storyboard. On such small resolution, it is always a little bit complicated to use Interface Builder. So let's make some room. Better. First, I'm going to add an Image View that will cover the entire screen. It's going to be the background image. And for now, let's give it a light blue color. Next, comes another Image View right in the center that displays a graphic showing the current condition. Since I also want the label to display it in text form, I'm going to add a Stack View around the Image View through the Editor menu. The Label goes just below the Image View. To make it look good, let's add a spacing of 8 and then add some constraints, namely, horizontal and vertical alignment. The label itself will have white text, a light font with a font size of 24. And to make the text visible when having a lighter background, I'm going to add a shadow as well, that has an offset of 1 and 1. And let's align everything to the center. The Image View needs an aspect ratio constraint. I want it to be square so I give it an aspect ratio of 1 to 1. Right now, the Stack View doesn't know how wide it is because there aren't enough constraints to define it. I'm going to add a 60 point space on either side. One of the main points of this application is displaying the temperature. So I'm going to make it very big, like 121 points, and very thin. For now, I'm setting the temperature to -5 so we can see how it looks like. As for constraints, I'm going to want at least 20 points on either side as space. But I want the label to be center aligned in the view. Finally, I'm going to add the city name on the top. So let's copy the condition label and make the font size a bit larger. Then add the leading top and trailing constraints. Since I can't really control the length of a city name, I want it to scale down if it gets longer, down to 24 points. With all the view components placed and configured, we need to connect them with a view controller. The easiest way of course is to use the Assistant editor of Xcode and drag and drop the connections into the source code. Let's build and run for the first time and see if everything is working as intended. Okay, wow that's big. I need to scale the simulator down quite a bit. Almost everything is working. I just forgot to set some constraints to resize the background image view. But that's a quick fix. I'm also going to switch to the iPhone 7 since its screen size fits better on the screen here. I created some weather icons that I can drag and drop into the project. If you follow along, you can just copy the Assets file from the course project and you have everything you need. Finally, I'm going to prepare CoreLocation for the networking part of this course. Let's import the module and create an extension that holds the delegate method. Then I'm going to add a variable that holds the CLLocationManager. In viewDidLoad method, we have to set the delegate to self. To satisfy the protocol, I need to create one method that is didFailWithError. Let's build to see if I'm correct. And I am, great. Apple has addressed many privacy concerns over the years and made some changes on how developers need to ask for permission to use certain features, like the user's location. In the info.plist file, we have to specify a key that explains why we need the location from the user. This text will be displayed during the permissions request. Of course, we need to know where the users are to show them their local weather. Next, we need to get the authorizationStatus of the LocationManager. If it's not the one we want, we're going to request permission from the user. There is a callback that gets called when the status changes, and we're going to make use it. So I'm adding it right now with a to do comment. Let's build and run again. And now, the app asks us for permission to access our location with the provided text. And, of course, we grant it. We're now completely set up for the course, and you can get to the really interesting parts of it. In the next lesson, we are starting with some basic view animation. See you there.