Your Second iOS & SwiftUI App

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

We've got some simple, but solid starter UI in place, and we're ready to put some data in there. So let's take a minute to think about the kind of data we want to keep in this app. ReadMe is meant to be a digital catalog of our personal physical libraries, and the basic building block of a library is the book. Here are all the properties we're planning to keep track of in this app. Collectively, those are going to be known as the data model or more simply just the model for a book. A model is a way to structure data so that you can represent a real world concept, like a book in your apps code. To start, we'll tackle just three book properties, a title, author, and image. Let's make a custom book type to hold them. We should put our new book type in its own file. So Command + N to make a new file, select swift file and name it 'Book' and create it. You won't need foundations, so just overwrite that, making a struct named 'Book'. Now we can add the properties I talked about. Title and author, both constants and strings. It's going to be helpful for our SwiftUI previews to be able to give books default values for those properties. In order to do that, you'll need to write an initializer. So start a new one with init and add parameters to match each property, title and author. The defaults can just be the words, title and author, but feel free to use whatever you'd like. These won't be used in your app, just an X code. To finish the initialization process off, forward the parameters along to their matching properties. So now we get to the image. It's not going to be a stored property of book like title and author are. Instead what's eventually going to happen in this app is that you'll be storing images to a separate dictionary in the library type. So to plan for that, we can create a new type of view that creates an image for a book on the fly. By the end of the next episode, you'll have this default book display rendering, where the first letter in a book's title shows up in a rounded square. This is what will show up for every book before it's assigned a proper image. Or if your title doesn't start with a number or a letter, for some reason, you'll fall back to the book image from the last episode. In fact, we'll start the process by extracting that book image now. It's good organizational practice to keep your view separate from other swift files. So right click on ContentView.swift and select new group from selection. Name it 'Views'. Then hit command+N to create a new file, the swiftUI view. It'll be a collection of reusable views for books, so name it, 'Book views'. It's most common to name files the same as the type, but it's not necessary. And it wouldn't make sense after we get multiple views in here. Let's delete everything below import SwiftUI because this naming isn't helping us. What we're about to make is a book image. When you've got something like that, where the first part of a type name is an existing type, it often makes sense to extend that type. So here we'll type extension book and close it off with braces. Now head over to content view and grab what we need. And what we need is this image and all of its modifiers. To make it easier on ourselves, we can extract the whole thing into its own view type. Command click on image there and select extract view, rename it to image. Then cut those lines from the file and paste them in your extension. Now that's not working because compiler thinks you're trying to make a book image in this line. In order to disambiguate, you just need to write SwiftUI. in front. And you'll need to do the reverse in content view specifying that you want a book.image, not a SwiftUI.image. And that is a working book image, which is helpful for clarifying, given that SwiftUI already has that more general purpose type with the same name. This technique is called type nesting. And now we can create a preview back in book views. Book_previews is a good name for what we'll need. Adopt PreviewProvider and start typing previews to get some useful auto complete happening, so you can conform to that protocol. Initialize a book image in there and have a look. There it is, a reasonable book image. But we can make a fancier placeholder image than that.