Your First iOS & SwiftUI App: An App from Scratch

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

At this point you've learned how you can add SwiftUI views to your app, either visually by using the SwiftUI canvas, or by tweaking the Swift code itself. It's time to take a deeper look at the code that you use to create SwiftUI views and view modifiers, but before you do that it's important to understand some programming theory about how this all works. In this episode, you'll learn about three key concepts of programming and Swift, instances, data and methods. Then we'll take a deeper look at the code that the SwiftUI canvas generated for you. If you're already familiar with the concepts of classes, structs, instances, properties, and methods and you feel comfortable with the SwiftUI code you've seen so far feel free to skip this episode. When you're developing an app programmers like to group related data and functionality into small pieces. For example, let's say you wanted to display a list of dogs in your app. To do this, you'd first define a template for what you need to know about each dog, such as its name and its breed. Once you have your template, you can create multiple instances of that template. You can think of instances as a filled-in version of the template. For example, you might create an instance for Dusty, the poodle, and an instance for Scampy, the Maltese. There are two main ways to define these templates in Swift. You can either use the keyword class or you can use the keyword struct. In some programming languages class and struct are radically different in functionality. Usually you can do a lot more with classes than you can with structs. But in Swift, structs are very powerful and full featured, so the differences between the two are more subtle. You'll learn more about that in Programming in Swift Fundamentals, but you don't need to worry about that in this course. For now, classes and structs are fairly interchangeable and we'll mostly be working with structs. You can think of your Swift app as a bunch of instances of class or struct templates that communicate with each other and believe it or not, you have experience with both instantiating templates and creating your own templates already. For instantiating templates, think back to how you created an instance of the button template. You also created multiple instances of a text template that say different things. You also created your own template. Think back to how you created your own struct called content view and you define what its body should look like. As you can see, iOS provides many templates for you, such as the button or text views, and sometimes you have to create your own, like you did with content view. A class or struct, or an instance of a class or struct, can have both data and functionality. For example, consider the hit me button in your app. First, it has some data, like the text that it's displaying inside and it's positioned on screen and it's width and height and so on. Second, it has some functionality, like the ability to recognize when the user taps on it, highlight itself when tapped and trigger an action in response. The part that provides functionality is commonly called a method. You will also see the term function used in Swift. A method is simply a function that belongs to something like a class or struct. A function you can call on an instance. You've already used a few methods in Bullseye so far. Remember when you made the text view bold and said its kerning? Those were examples of calling a method on a text instance,. You can tell it's calling a method because the syntax to call a method is to take the instance then put a dot or period, then put the name of the method afterwards. You put parenthesis and then any parameters to the method, which you can think of as input to the method. The first method here, bold, takes no parameters but the second method, kerning, takes one parameter which is the kerning that you want between the characters. The methods you've used so far, like bold or kerning, have been written for you by the engineers at Apple. Later on in this course you'll learn how you can write your own methods too. The concept of methods may still feel a little bit weird to you, so let's take a look at an example. You, or at least an instance named "You", want to throw a party. You clean the room and put on some music but you forgot to buy some cookies. Fortunately, you've invited the instance named Steve, who happens to live next door to a convenience store, so you call a method on Steve asking Steve to bring you some cookies. The computer now switches to the instance Steve and executes the commands from his buy cookies method., one by one, from top to bottom. When the buy cookies method is done the computer returns to your throw party method and continues with that. So you and your friends can eat the cookies that Steve brought back with him. The Steve instance also has data. Before he goes to the store he has money. At the store, he exchanges his money data, for other much more important data, cookies, and after making that transaction he brings the cookies back to the party and you add them to your drink and snack table. If he eats all of the cookies along the way, well your program has a bug. Finally, let's talk about data and properties. Throughout this video, I've been using the term data to refer to the information and instance needs to do its job. In Swift, the way you store data on an instance is through something called a property and there are two main types of properties provided by Swift. First, there are stored properties. This is when you want the instance to simply store a piece of data for you, like the subtotal for a bill or the tax that you need to pay. Second, there are computed properties. This is when you want the instance to run some code you write in order to calculate a piece of data. For example, you might want to make a computed property to calculate the total bill based on the subtotal and tax stored properties you created earlier. Okay, that was a lot. Let's review the key points. The most important thing to remember from this lecture is that your app is made up of instances of classes or structs and that these contain two things. First, data, like the money to buy ice cream with. And second methods, like the steps involved in buying ice cream. Instances can look at each other's data, well to some extent, at least. After all, Steve may not approve if you peek inside his wallet. You can also ask other instances to perform their methods, like how you asked the text view to set its font weight to bold. Asking instances to perform their methods is how you get your app to do things. Let's take a deeper look at the code that you've written so far. You'll see that it already includes examples of instances, data and methods, and let's start with instances. Here we're defining a template for an instance using the struct keyword called content view. You can say this line in plain English as "We are defining a template for an instance called content view. That is a view." As I mentioned earlier, when we're looking at the code that creates the preview, here's the line that creates an instance of a content view based on that template. Now let's move into properties. Back up at the top, inside of content view struct, we can see that content view defines a computed property called body. Body is a property of type some view. The body acts as the container for all of the instances on screen that content view represents. Var is short for a variable, which means two things. It's a container for data and its contents can change. This line translated from Swift to plain English, means something like, "This is the definition of a variable named body and it's a some view". So basically, this is letting content view know what to display as its main body, which is all of the views that you can see on the screen inside a VStack. Unlike content view whose definition says it's a view, the definition of body says it's a some view. The some in front of you broadens the possibilities for body. Without getting into too much detail for now, it means that body can contain either a view or something that behaves like a view. This means that it could be an instance that isn't exactly a view, but it has the same properties and methods as view. The contents of the body computed property are defined by these lines. And in particular all of the lines here where we're applying view modifiers are examples of calling methods. For example, this first line calls the text object bold method. When you call this method bold, bolds the text and returns a new bolder text instance. Similarly, these are all examples of other methods that we're calling on the text instance to apply other view modifiers. As you can see, some of these pass values to the methods, which as I mentioned earlier are called parameters. For example, here we pass the value two to the Kerning method. As you've seen, you already have some experience working with instances, data and methods in Swift and SwiftUI. First, you have experience with instances. For example, you've created, or as programmers would say, "Instantiated" an instance of the content view struct to display a bunch of views on the screen. Second, you have experience with data. For example, you've created a body property that keeps track of an important piece of data for the content view instance. That is the view to display on the screen which is the VStack with a bunch of other views inside. Finally, you have some experience with methods. You called several methods on the text instance including bold, kerning and more. And wow that was a lot to cover, but don't worry if you didn't get everything right away or if you have trouble understanding some of the syntax or terminology, there's a lot of concepts here that may be brand new to you. We'll review these concepts again and again throughout this course and the rest of the courses in our learning path until the feel like second nature. Again, it's all about learning via repetition.