Practical Core Data in SwiftUI | DevTechie Interactive | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Practical Core Data in SwiftUI

teacher avatar DevTechie Interactive, Learn new everyday

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

17 Lessons (2h 37m)
    • 1. Introduction

    • 2. SwiftUI Project Creation

    • 3. Add New Favorite Place Screen

    • 4. Creating Place View Model

    • 5. Places TableView(List) and Cell

    • 6. Adding Navigation View and Navigation Links

    • 7. Creating MKMapView in SwiftUI Part 1

    • 8. Finishing MapView

    • 9. Adding MapView to Place Details

    • 10. Fixing MapView Crash

    • 11. Creating CircularView

    • 12. Finishing Place Details View

    • 13. Creating Core Data Manager

    • 14. Create Save, Delete, Get All Places helpers in Data Manager

    • 15. Wiring up Save Places Form

    • 16. Places List View Model and Connecting Save New Place to Core Data

    • 17. Deleting Cell, Converting Binary Data Saved in Core Data into Image

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn to create SwiftUI programming by example

SwiftUI: In WWDC 19 Apple announced a new and innovative way to design your user interface and they called it "SwiftUI". SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. With a declarative Swift syntax that's easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync.

Core Data: Core Data is a framework that you use to manage the model layer objects in your application. It provides generalized and automated solutions to common tasks associated with object life cycle and object graph management, including persistence.

In this course we will be looking at combining SwiftUI and Core Data to build a real world app. Throughout this course, we will go through step by step creating an app end to end to show you as how you can combine both of these amazing tech stacks to accomplish something truly amazing.

This is a practical course and you will be learning by building, debugging and testing the app all the way to the end of the project.

So please join us in this journey and create something amazing together.

Meet Your Teacher

Teacher Profile Image

DevTechie Interactive

Learn new everyday


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello, everyone. Welcome to this new course on 50 y and co data and this course we're gonna be talking about how to build your interface with so few I and then use core data to persist your data on the desk now 50 I is basically the new way or the declare TV off defining your user interface. And it actually works up it very seamlessly within your abs and makes your development effort for the U I very, very easy. And it actually makes your development even faster with a lot more new things that are being introduced in exclude 11 now, currently, exclude 11th preview that he can see on the screen is only available with Mac OS Catalina. Now, the build that we're gonna be using for X scored in this case is gonna be golden master seed, which is exactly same as X Code 11. But ah, the Catalina us is not available for general public. Tuz it. So since it's not available for the general public to users, I feel like, you know, there might be some more things that Apple is trying to hash out before they release it to the public. So we're gonna wait for that. So what we will be using in this, of course, is X scored 11. So we would still be able to leverage the power of safety I except that we won't be seeing this our previous screen. But we can actually run our app within simulator, just like we've been doing with all the other view controller based IOS development. And then we're going to see how our app looks like. I mean, our app development is not gonna be affected. Our stiffed you, I learning is not gonna be affected with. This is just he will say that preview is a cherry on the top of the cake. Since the chair is missing the icing still there. Jake is still there, and it sailed. Then it tastes the same. So with that said, let's take a look what we have in the core, Dana. So in case you are new to the coordinator space, um, if you want to save your data permanently within your app eso when your app is closed or when phone shuts down or for some reason the app crashes, then your data are you users. Data is actually safe within your app. So for these cases, what we do is we use something called databases. Now, databases are the stables that are persists on the disk and they're used to store data. Now core data sits on something called a sequel like database sequel Light is a database that actually handles all the complexity off saving data on the disc within tables with relational schema. Now Cordillera sits on the top of that and basically provides a nice and easy to use interface to basically interact with the sequel s so you don't have to write your sickle language quarries within your app. But he can actually leverage your data and let the core data do most of the heavy lifting so you can see the scenario where you have your app and he have called data. So your app interacts with core data and then coordinator takes the responsibility to interact with the 10 Abi's. Now, in this case, even switched calories is you can even stretch this'd Violence is five system services and your core data would still be dealing with your app. And it will know the new changes when you change at the the underlying persistent story spate. So but there said the decoupling actually plays very well with the coordinator space. So that is why Cordelia is one of the most popular way off storing year there permanently. By by no means I'm actually trying to say that you cannot use directly the sequel light, but it actually using core data makes your app development much more seamless and much more easier than dealing directly with the databases. But this cause is not about core data discourse, that about how to use corrida within Swifty I. So let's go ahead and focus on what we're gonna be building into schools. So what we're gonna build is bigger, Bill, this our APP called favorite places, where you can enter your place name like your favorite place name. It's country and some notes about it. And then it's added within this list that you can actually take a look at those entries and it shows you in the map s so you're gonna see there's a map that shows the location. There's a random for Oh, so we get a download using unspool ash website free. FBI. We're gonna download a photo, a random photo off the place and we're gonna show that fought over here. Now, this photo is also gonna be persisted in the core data. So we're gonna see how we can do that. And he talks about, like, which city it is. Which country? This O r. Which place it is a rich country. This and some notes about, like, you know that place. So like that he can add, like, you know, some other places. And as you can see, your map view actually zooms her enemies into that back location. And then once again, you have another photo, a venom photo off that place. Okay, so let's go ahead and add our favorite place. So let's add San Francisco and Left Head Country. So some notes about San Francisco and then we just simply click on Save and our location. It saved the click. OK, and there we go. We have downloaded a random photo for San Francisco. In this case, it's the Golden Gate Bridge, and your city map is loaded on the background. There's a Transamerica permit building. There is very building marker. There's our Oracle arena and all these other things that are showing up within the San Francisco's map. And then we have our place name after you replace me, this country and the notes about it. All right, so there's a lot going on in here. Basically, what we have is like we have this simple entry form where you can save your data and essentially save it. It immediately refreshes it, refreshes this list off offer, replaces and download thes images, and then it actually adds all that information. And then it lost this map to show where this location is and some nurse about it, along with showing a random picture downloaded from one flesh. So you're not ever going to be building how core data actually works within this, But you're gonna be building this map, you this image of you and all this master detail kind of scenario eso with all that, Let's go ahead and jump into the next video where we're going to start designing our app and going into and basically creating this with Swifty. Why? So I'll see you guys in next video and let's go ahead and get started. Thank you 2. SwiftUI Project Creation: Hello and welcome back. And in this video, we're gonna be seeing how to create our new project with safety. Why? Using X code 11. So I have this ah, screen open where you can actually do the template for your new project. So we will do is we are going to select a single view app and we're simply going to click next. Now, here on this green there are a few things that have been changed. So let's talk about it. Language are drop down, it's still there s So that's actually the way for you to select whether you're not code in theft or objective C. We're gonna definitely tooth left. And then for the user interface design this a new option is present it for us. So with Exco 10 or earlier, you never had this user interface election because there was only one way to design your user interfaces that was either using storyboard. So basically view Controller Bates design and then you may choose to design your interface . I completely programmatically but still it's sort of related to storyboard. So hapless decided that they're gonna call that user interface design Ah ah strategy as a storyboard. Now, the new functionality or new way off designing you. I is safety. Why? And that's why this problems there. Because now there are two ways to design you. I So we're gonna actually do 30 I, and we're gonna choose, like this youth core data. Now, you know, it's gonna select use core cloud kit. We just gonna leave that unchecked. Just leave. Just select the youth called data, and then you got a name or project. So let's go ahead and name favorite places and we get a click next. Okay, You can I store it at the selected locations? So just use your location to the location in your Mac, and then just save it, create that project or there. There we go. So we have our APP created. Now, if you go ahead and select. So in this case, exc iPhone 11 pro Max is selected, but if you want to do some other device, you can actually use it from this list. Okay. I think we are fine with iPhone 11 pro, Max. So we gotta leave there. And just just to give you an idea like you know which version off exclude I'm using. I'm using X code 11 wars in 11 X code words in 11. Okay, So reason it does not stay state any beta or anything, because Golden Master seed is exactly the same build that X code releases within the APP store. So that's why it does not have that bait attacks. So it's not a beta software anymore. It's actually a full face off for that can be used to develop production by production level APS. Okay, so I just wanted to show you that that we're not using any beta you're using full fledge. Hurley's from Apple for X scored 11. All right, let's close. If as go ahead and run this app and, um, basically check it out if we have everything set up correctly. Okay, so we have everything set up correctly, and ah, we have this content few that's actually loading this text. Okay, so let's talk a little bit of our safety. I am how it loads this content. So this content view is the new way off designing your user interface. Now, this country view is this file right here. Okay. Now, earlier in in storyboard days, basically, first of all, There is no storyboard except launch screen storyboard, which doesn't really count. And as you can see, there's there are no more you controllers so we don't create you control us anymore. And we don't create storyboards anymore. Everything else pretty red states. Same. Okay, so you're abdel Get is usually the entry point for your app. Okay, so once you get the app delegate already what happens is basically, you do this configuration. Okay, so your application is selected Your you I seen session life cycle starts and then yeah, I seen lifecycle calls the thing called Seen delegate. Now, this is a new thing for certain guy, and this is where you create your window. Okay? You create your context and you create the content view. Now, by no means you're restricted to call this as content. You you can call it a main view or anything that you can think of. Okay. And then you create your windows seen directly. You creator window and the U I hosting controller hosts the content view that you have just created in this line. So this is how you actually provide the initial entry point for your app with this 50 like , All right, so we can actually have literally anything else. How so we don't have to, like, you know, stick to content view. But in our case, content be actually self the purpose. So you're gonna leave it, But you can change it to any other name if you want to. And I would actually recommend you, uh, sort off, like, you know, experimenting it. And, ah, if you, ah, want to know a little bit more about how it is different components off the FBI, there is a course that's available from death. Take interactive. Ah, that he can watch that covers most of the components had ever there for safety. I so I would actually highly recommend if you haven't actually checked out safety. I I would actually recommend to go into that course and then basically just watching it. So you're up upto speed to learn about this course. Okay, so but there's no, it's a prerequisite is the recommendation, But by no means you're gonna be actually, um, stopped from learning new things from the scores. You're definitely gonna be learning a lot from the scores. And ah, were you really use a lot off our new things in safety I, and on the way I'll be actually explaining how those work. It's just that other course provides more info about those components and those widgets that have been introduced. Insert a guy. All right with that said, Let's go ahead and hop on to the next video where we are going to be creating, Are you? I Okay, so let's go ahead and up until next year. 3. Add New Favorite Place Screen: Hello. Welcome back. And in this video, we couldn't start creating our Ah, you. I insert a guy. So let's go ahead and get started. I'm gonna actually make some space and keep are similar on the side. There you go. Okay. So in the last video we saw, how are so few? I actually get initialized and load loads its entry point using the content view. Now, there's one thing that we did not talk about is where is our core data related stuff? So, Cordelia, when every selected option, it creates this new file called XY Data model. And this is where you actually design your entities or your tables percent. Okay. And we're gonna be gonna be designing our table in a few moment, um, are in next a couple of videos, but once he have ah, this data model class created Your ab delegate has some code that Scardina related cold, which actually creates this thing called persistence container. And this perception container is basically responsible for creating in returning container that loads the that backing entities that are there that you have created within your exit data model off. Okay, So as you can see, is a container that's getting created. Its loading the favorite places this exceeds model exceeded a model Ah, file and then it Actually ah, it provides to you our way to access those tables that he gonna create. Next thing is, it has something called save Context. The same contest is basically saving any changes at that particular moment into their database. So that's an easy call. This you're all your changes that you're making in your object get saved into therapies. So we're gonna be seeing all those how actually that works, but then called data. When we get to that point where we're actually ready to start saving stuff, let's go ahead and Firstar Tackle adding some you wise, he can actually see 50. Why in action. So let's go ahead and select content view, and at this point, we only have this thing called text. Now texture is a component that actually creates a label in this on our beer creating Lowell. Now what we're do is we want to create something called we stack. It's a way to basically were tickly. Stack your objects are your new controls that you wanna put in inside your view So Article Stack is gonna put one dude 34 conflict this fashion. So it's gonna lay out all your controls vertically top down. Okay, so let's go ahead and see, Like, you know what? How that looks like. So we're going to create a text, and we're going to simply say maybe name, country and notes. So let's go ahead and run this one. So what should happen is a Within our view, we should see three things name, country, and notes were thickly laid out. Okay, so that would work. Now we can add a divider, something called divider and ah s a Nesby at this divider Control, it's basically going to create this line. There you go, this, uh, sort off dividing line between these so giving you, ah, sort off a feel off form eso that's that. That's where we're headed, actually. So let's go ahead. And now you know what were tickle stack works? Let's go ahead and create a few properties. So, basically, safety I is a declarative are way off creating things now. You can create some of servers, so if you've used are served, you know that where we have did set in will set observers. Now 50 I has actually made it even better by introducing something called ST and you contract the state off any particular variable that you're interested in. So we gonna be interested in three things O r. Three states and those are going to be named country and notes. Okay, so these three states that we're gonna be interested in reason we need that because we only t's text. Actually, we need Xboxes in this case. So we're gonna create that bike creating something called Text Field. And for this text field work, the stakes really takes two things. At minimum, it takes a title. So basically something Ah, that works as a placeholder text. So we're gonna say enter name here and it text binding. As you can see, this is the observer that it's asking for. So he's saying that we need to provide a binding and whenever user actually type something , it's actually populated, or it's actually added included into that binding variable. So we're gonna say here in this case we want name. Okay, So name automate. Lee is gonna bound, and whenever user type something, you actually gonna get that information within name Variable. Now, this has gotten a lot easier from what you control and actually does where you have to put a lot of off their words. And you have to do this up a sort of singing dance before you can actually track what user has imported. If you want to actively try that and safety, I have actually solve that problem very, very easily with these are plagiarists. Okay, so let's go ahead and do the same thing for country. And let's do the same thing for her notes, and we're gonna put a divider into part of metal. Let's go ahead and run this and see how this looks on our three. So there we go, so we have thes three text boxes showing up, and you can actually type in them Excel, and it's all good. But there's one problem here. The problem is we don't have much of a reading room breathing room between the edges off the off this form, so let's go ahead and provide some breathing room by adding padding. So if I add a petting and just run, you're going to see and that we have some padding, the default planning added into the left and right and top of the top in the bottom. But stopping the bottom, we don't see so the side we don't know, like, you know what kind of patting it's been added here. All right, so next thing that we can do is we can provide this save button. So let's add a save button now for in order to say, Ah, put that save button. What we need to do is we need to put that in the center. So just like this whole article stack, we have another thing called horizontal stack. And as you can see and you're probably like looking at how, um certainly I has made this simple where you have a view and you have all the subsequent needs layup needs basically laid out in a single line, and it actually creates those elements for you. And that's what actually has bean we have been doing and it's making just like magic is actually converting them into a control. So this is awesome, like in a way of creating you, I so we're gonna do is we're gonna create a button first, Okay? And this button takes label and some sort of action. So we're gonna say label is save favorite place, and we don't add a train closure to basically add our action. And here is something that's a friend, but in tapped for this for right now. Okay, Now, let's go ahead and run this and see what it looks like. So this is what we have as our button and s and every tap it We get this. OK, so there are several other things that you can do. Basically That, for example, you can add, Ah, some padding around this so and you can have are basically a foreground color insta, so he can simply put that on stack. So because they don't padding dot for ground color And we can give this, um, e maybe a white color. So for grand pillars there, text, color, background color is basically the background color off your control are, in this case, the the stack. And there you go. You have this orange button created. Now I think we really need, um, we need a bit more. So the Texas like, you know, it's not that girl like, you know, I don't I really think like You know, we can do better by making it bold and stuff so less make the font a little bit bigger so we can say fund. And we can give this a title font and see if that actually works for our need. Has to may. Okay, so let's see if we can do sub headline. Maybe I think some headlines. It's gonna be a little bit smaller. Yeah. Every headline headline this perfect. Okay, they've got all right now we can actually ah, do like corner radius. So these edges are Sharpless. Make it. Ah, a corner radius. So we can simply say corner radius and we can provide some radius. So, like, 15 for the corners. And let's go ahead and rebuild it. So there's one thing our safety. I actually you have to make sure you're actually having things at the right place because sometimes thes beneath these modifiers are added one place or the other, they don't take effect. So, for example, your adding corner radius past and then we were adding the background. So what was happening is if he had that corner radius on white background and then background was taking over. So, um is better to to make it visible. Basically, add the corner radius after the background has been added. This way, you actually get the effect that you're intending to. Basically, that you're seeking for. Okay, so this looks of this Looks great. I just don't think like, you know, we can hand you can put, like in awesome number two a padding. That way we can Yeah, that's actually better, because that was a really big button. Um, OK, so this is looking great, and it's still functional, as you can see. So button that There you go. Okay. So now we are getting into the area where, how we are probably gonna start creating some cold, too save and stuff. But before we do, before we do the save and every function all the other from Charlie, let's go ahead and create a, um, a list of you that actually is going to show the list of the places that we have selective . And we're gonna move this view into that list for you. So one of the thing that you might notice before we go and head over there Ah, that if he keep on creating, Are you I within this, it's gonna go real long, and it's gonna get messier. So what we can do is to organize it better. We can actually create a new file, and we can select 55. You, in this case, select Basically called it and place. Have you now in this space here? This has Ah. Ah. Next hello. World return there. Simply gonna copy this are Curtis and based it here. All right, and then going back in the content is simply going to call this ad place you and let's go ahead and run it to make sure everything is looking the way it waas. And it's not gonna work. Okay, what did we forget? We forgot to move, are able focus. That's my bad. Okay, so we should have moved thes along with are other view. Okay? Because these variables are really need off this particular view, not the content view. Do come control a our command A and to control I to formatted text. Now go ahead and rerun. And this time it should actually build and run. They've got So are you guys looking perfect? Now let's go ahead and create one last thing. Let's go ahead and create a group called Views and let's move air places inside there. Alright, awesome. So you've successfully created your first screen. Now we're gonna continue moving forward like this, basically complete our you Why? Designed with some mark data, and then we're gonna come back and fill in all these other important things. So that's got in in the next year, we're going to create our list where we're gonna show our favorite places. Okay, so I'll see you guys an extra deal. Thank you. 4. Creating Place View Model : Hello and welcome back. And in this video, we're gonna be creating our list. So let's go ahead and get started. So what do you do it? How? We are going to create a list of items that actually going to show us how we are, what All favorite locations we have in a table view. So basically in in served, you create a table view than you actually pointed to the delegate and the data source and all those things, strictly. I actually makes it rather easier to create a table of you. My come by adding it or like by basically bringing it down to just create a list. And then you can create something like four each and basically, then you can provide an object and just it read over that object to create a list off our values, OK? And it creates basically a list off items that actually are represented inside a people view. So what am I talking about here? Okay, so let's go ahead and take a look at it in action, and then you're gonna know what? What am I talking about? All right, So for for brief woman, we're gonna simply comet out. This had place for you. And what we do is we are going to create something called list, okay? And, ah, inside that lift, we can actually create for each, for example. And we can save you. Wanna loop zero to 10. Okay. And then we can say item in. And now we can still believe a text. Okay, so this can happen. Basically there. When you're creating a for each loop, it needs to know what for each basically what Ford Each is gonna it right now, so it needs some sort off identifier to distinguish all these different records. So what we're gonna do is we're going to say I d and we simply say backslash dot self and that actually works for most of the native native, uh uh, types, for example, like, you know, interest save string Guerry and stuff like that. Okay, if you create your own object, and then we're gonna see, like, you know, how we can actually provide an i d. That uniquely identifies each single record on itself. But if you have, like your simple array, then you can simply say I d back a backslash start self and that should actually be suffice , As you can see. Ah, it has created this table off 11 items and it is fully interactive. He can actually just it behaves and feel spirits like a table view. So this is how you actually simply create a tape of you? Okay. Now, was he created a table? Um, our list. Let's just keep calling it list. So once you have created a list, then you won't actually, uh, add our actual items and then provide up the selectable states and then take some actions, so basically provided from call to action's onto this list items. So let's go ahead and first create a data model that's going to represent our data so we can actually design or sell around that data, and then we're gonna go on and provide it a selectable state and stuff like that. Okay, so let's go ahead and do that first. So I'm going to create a new folder here, and ah, we gonna call this one view models, and we are going to create something called place view model in a select sift file place. You model, you're gonna be creating this you I or this app basically MVV em based Also, we're gonna follow some MVV in patents. So that's what that's when they're see, like, how we can basically create a MVV m app by adding some view model that's going to be ah, bind. It bounded. Do a model that that is going to be created inside the that's coming represent basically by an entity that we're gonna add within this XY data model. Okay, so this place view model is gonna basically represent one of the object better that is there that represents a place. Okay, so, for example, you gonna create a class, place view model and we simply going to say I d So it's gonna have a unique identifier and we're gonna use the you. You I d reason we're using your i d. Because when we in future, when we're gonna create our entity, we can have all these same objects that are represented are the attributes that we're gonna add. But then that entity are going to represent the exact same names. Civic in convert that model, that data model into the view model so we can take that view model and loaded into our view . Okay, we're gonna add name, country notes, and we also gonna add image. But in this case, our image is going to be a data. But we don't really for a sample data. We don't really want toe handle image related stuff yet. So real do Is that we could simply comment is out. Okay, Now we're gonna creator Inish lighter, and we're gonna basically except thesis thinks like name, country hand notes have gonna assign those. So we're going to say I d is equal to you. I d Are you going to just create it? Um, and the name is going to be are basically South duct, Heidi. Self dot name is equal to name. Self Dart Country is equal to country and similarly for notes. Okay, Now I'm gonna create a dummy data class and, you know, populate. Are we gonna provide some simple values for this place view model? You'll create a function called Mark Places, and it's gonna return an array off places view model. We have a constructor array and gonna return some sample or, like mark places. All right, so we have created three sample or three mark places. Ah, that we're gonna basically use to populate our table to you. Okay, so with that, let's go back into our content view. And this time, basically, what we're gonna do is we're gonna use this object to it right over and list each place out . Okay? So instead of having this array, we're gonna simply say not places and we're gonna we're gonna ask You gonna tell for each loop that he can identify them by i d And then we're going to simply say here what we gonna what we want to basically display. So item it's going to represent that particular 11 off. Those are favorite places that we have added to begin assembly, say name and destroy the name for the place in the table. You. So there we go. So it's not item number. Um, Okay, so let me take this out. And, uh, this guy's on this like that. Hand out. As you can see, we have London San Francisco in San Diego showing up. Okay, so this might be the simplest cell that we have created, but we weren't more data to be showing. Ah, we need data to be shown in certain format. OK, so for that. Let's go ahead and jump on the next video. If you're gonna create our ah, sell our place cell, we're gonna display each place with a specific format, so we're going to create that view. Okay, so I'll see you at the next to deal. Thank you. 5. Places TableView(List) and Cell: Hello, New York, Mac. And in the city if we're gonna be creating our place cell. So let's go ahead and get started. How are we gonna go into our youth folder and going to add a new file? A 50 live You click next, and we're gonna need this place cell that's actually going to represent a cell. Ah, this is the representation off a single six single fell for our favorite place. Okay, so you want to make it look a certain way. So that's what we're gonna achieve here. All right, So we're gonna do is we are going to display a, um, display this inside a horizontal stack first. So we're gonna create a horizontal stack, and then we want an image showing here so faster and image. And this image, um is I mean, in future video in our actual app is going to come from the data that we have saved in the core data. But for now, what I've done is I've included a a sample image somewhere neighbored sample and, ah, this temple images presenting XY assets, and we just going to use this image to show for all of ourselves. So I'm simply going to say here, go here and say Sample. And now let's go ahead and add this into our list. So instead of showing that cell that we were showing, we're gonna display our place fell. Okay, so our place cell is God, display this image. As you can see, these images, these images are huge. I mean, they're taking of the entire space, as you can see. And, um, there are three self start showing up, so that's either three ridges. But they're, like, really, really big. So how can we reduce the size of these? So we can do is we can go back to our place cell and start applying to modifiers into the image. First, we're gonna use re sizable to make this imagery sizable, and we're going to give it a frame with width and height. Gonna leave the alignment as default. So that's going to take a look what we've got. So far as you can see, it's ah squashed image. Showing up so want is we want our image to maintain the aspect ratio to be simply going to say that aspect ratio to be fit. That's guide and re one it And, um, our ethic ratio, because our hide it stupid. There you go. Okay, Now we will, with the second thing with that we weren't do is we're gonna actually clip. I'll make this this image circle so we're clip the shape so we're gonna add it as a modifier and the shape that we're gonna clip this into a circle just like that. And if you go ahead and we run it, what we would see is basically a circle Some color image being created never go. OK, now it's maintaining the aspect ratio are so basically, it's showing the image are basically shrunken down. And there's a fitting of in the fit in the screen if you show if you do fill that is going to basically fill the space and ah, sometimes it actually squashed the to fit the space, like, you know, that's given. And actually, when squashed the image to make it look a little bit weird red like, you know, more stretched out kind of feeling. So that's what we actually put as a fit for the aspect ratio. All right. Next thing we want is we want our place to want Ah place to provide. Ah, this favorite places name to display a favorite places, name, country and notes. And ah, for that you need to actually take in a place view model. Ah, that it's being shown currently within the sale. So how can you do that? Because they really go at the top off our, um, struck and we can say our place. I am shot for remodel, and we simply gonna say, place, view, model like that. Okay, Now, if you go back into So this previews that started planing And now we are gonna bother about liking or doing anything with preview because we don't have preview capability at this point. So there's no point like, you know, fixing those owners once you have X scored 11 on Catalina, ready, then we can actually, we can take a deep, more deeper look into previews, but at this point, I don't see a like a benefit going deeper into it. But just in case you're wondering, what can you do with it? This is simply a same call to the place so you can simply create a place like that and he can provide a sample place. So So what's gonna happen? It's basically when your preview showing up this data that that you have just provided is going to be used to display their self. So, uh, you whatever you're designing, you're gonna see a preview of that. And this state or whatever data you're actually showing in previews are people provider of in the previous Breuder is going to be displayed inside bestsellers. All right, once again, that's actually for previews. But we don't have previous available yet, so we can actually skip that someone actually remove it. So we don't have you focus on the main thing that we're actually trying to learn here. Okay, so let's go back to our content view. And ah, As you can see, we're simply saying place sell here, but we should be supplying that place VM ah, into this So we can supply item inside this, and this is how we're gonna get access to all the remaining things that you want to display within our self. Okay, so we simply going to create a vertical stack now and within this for tickle stack. First of all, we're gonna provide an alignment to basically display off all of our text like, you know, aligned, leading knotted the center by default of center, and then we're gonna create our text. - All right, so what we're showing I just ran is basically are three off our details, so Ah, the name off the place. Ah, the country and notes about it. And as you can see, all that data is showing up nicely in this table. Okay, So this is how our table view cell eyes going to get created. Our place cell is going to get created, basically displaying all off our favorite places. OK, so, um, that that part is ah is all complete. And this is ah, where re actually I think this is right stopping point for us in the next video. We are going to handle the, um adding the form at the top of first of all. So it actually also becomes the part off our table and them adding a knave bar so we can actually display our name. Name of the app inside the navigation bar in large title. Okay, so those two things were gonna handle in the next video, So let's go ahead and ah, happen the next video to continue building our 50 I app 6. Adding Navigation View and Navigation Links: Hello and welcome back. And in this video, we're gonna be, ah, adding our navigation navigation bar and do our hap and then adding the form the ad place form at the top of it. So let's go ahead and get started. So you do is we're gonna go back to our content view and within her content of you, we are currently showing in the list just this repeated table with these cells inside it. Okay, but your list actually represents something more than that. So list represents, um, basically a list off items so it can have various different items in a scroll view that can be added basically on the top of each other in the form of a list. OK, so we can do is with that knowledge in mind, we can simply say at place view and then we if we run this right now or you will be able to see is our and form our and new are saved. New favorite location, state favorite location, place are safe. Everyplace form has been handed at the top of the list. OK, so now this is still scalable and everything, so that's actually great. And we can add quickly Add are our favorite place Ah, and save it and refresh the list to basically display nearly added location at the bottom. Okay, so that's actually great. Not let's go ahead and add a navigation bar. So in in storyboard we have something called navigation controller. But, um, in safety I we have something called navigation view and this navigation view is basically responsible for your all the navigation controller related stuff so we can simply wrap things inside navigation view. Now, one of the thing that that weaken after Viet this we can take advantage off is vegan and a navigation part title. So navigation bar title and we can simply provide a title serve you right up right now, what we should see is basically a nab our title showing up and as and this is the large title Ah, the new theme that actually apple prefers for ira saps where you're never far showing large title. And as you start schooling, you see a smaller, um title basically said at the or in line title set at the top of the navigation controller . So we have We don't have that many items, so That's why I like, you know, it's basically rewarding back as soon as I leave it. But you see the effect already, so Okay, cool. So that's how you actually add a navigation navigation controller, um, into your safety. I now see if your make these cells clickable and want to do something with those clicks, what he can do is he can leverage something called navigation link. So for that, let's go to our place. L and we're gonna wrap our H stack into something all navigation link. Now, the stakes, a destination and knock. If destination, we can simply say text, and we're gonna say place. We m dot name pleasant. And there's a trailing closure. And this is where we're gonna actually provide our You're gonna add our view inside that. There we go. Right. So we run this right now What? We're gonna see us all off. Our entries have this arrow added. That means a disclosure Aero. That means there is something related to this particular cell that can be clicked on to see . And as you can see, just by adding this navigation link, we get all these new things. Hold these like you know thinks that like Segway to the detail and basically displaying new back button and navigation control and everything for free. Okay, just by adding this navigation link, this is the power off surf you I that I was talking about eso. Yeah. So that's how you actually add a navigation, A navigation controller within your view. Now, in the next video, let's go ahead and build out our detailed view because our detailed is gonna have a lot more going on because if you remember ah in our app So this open our app in the detail. We had a map, you and then we had a circular image view. And then you have all the description about the place and then you had, like, you know, your navigation controller with title showing up as a place that you have selected. Okay, so that's what we are going to rebuilding. But as you can see, with the S, one of the y goes our app is starting to take shape already, which is great, like, you know, in this small little bit of time, you have actually gone so far building the you I and that's how how fast the safety. Why Basically makes you develop your you why and render them on the screen. So all right, so with all that, let's go ahead and jump on the next video, and we're gonna start creating our detail view. And are all these different things, like maps and stuff like that? Okay, so I'll see you have the next video. Thank you. 7. Creating MKMapView in SwiftUI Part 1: Lone Oak Mac. And in this we knew we could be creating this detail view. Now, in order to create the detail view, there are few components how that we need Basically, we need this map of you or we need the circle of you. And then we can put together some text divider and another text Ah, for places, name and its country location, along with a text for nose if any notes are given or any notes are created by us for this favorite place. Okay, So before we start to dive into basically laying out this screen, I think it's a good idea to create thes are separate views first. So let's go ahead and start with this, uh, image of this map of you. So let's go ahead and create that first. Okay, so I'm gonna go into view and right click and add new file and select suit file, and then click next. You're gonna call this one map view. Now we're gonna import from safety lie and also gonna import from map kit. Now we're gonna create our struck. No, no, no, no. For us to use any off the U Y. Kit components better present into. Certainly. I mean, they're not present in software, but they're present in you. I can't. Basically, What we need to do is we need to create this. We need to inherit from this. You I've your presentable. You live, you represent able. If you look at it, it's a protocol that needs to be extended estimates. So that needs to be basically implemented. And we provide the view type, basically the view, huh? That this particular, um, the type of the view that this particular view is going to return. So it's gonna be an instance off map in our case, so that so that's how we gonna make our map view available inside safety I. So what we're gonna do is we're gonna first create a variable for holding address, and then this particular protocol requires to ah, functions to be implemented so we can actually go ahead and stubbed those out. So click on that and ah, if you notice it just creates the type alias. Well, we don't want this heart type really is to be present, but let's go ahead and continue fixing and see what happens. So it's not gonna is not helping us much. Basically, what we need to do is it needs thes two functions. So if you go into view you ivy representation, you're gonna notice that we have this make you eye view and this update you I've you now make you have you actually creates an instance off that view that we're trying to create. So in this case, map kit and update you, I've you, actually is where you are going to provide. Are you going to do stuff with that created instance. So, like, for example, in this case, we're gonna create map and make you I view. And then we're gonna set coordinates for that map inside this update, you eye view. Okay, so let's go ahead and created this. Make you I've you bust, Don't I? Have you gonna change it to from generic to em? Que map you So we know that this view is gonna return map you and we simply going to say m k map view frame 0.0 like that? Then we're gonna create our update you live view function 8. Finishing MapView: So, basically, what we need to do is we need to create some way to get ah, the coordinates for address. So basically, why we need coordinates? Because what we want to show here is whenever you have user has entered a location, we won't actually convert that into a coordinates, so we can actually display that on the map. And, ah, in map What you need to do basically need to create a span, and you need to create a coordinate a region for that span so we can basically zoom into that region within that coordinate space. Okay, so for that, we're gonna create a helper function, and that helper function is gonna actually help us determine was to coordinate for for a location that user has entered. Okay, so let's go ahead and create a function for just that, right? We're going to call this get coordinate for address strength, and this is going to return a Ah, completion handler. So it's not going to return anything, but we're gonna put a completion handler because this is this call is a think, and we're gonna use G 1/4 to basically reverse geo code by providing address string and by getting the place mark back and then place Mark is gonna have the location coordinates. So we're gonna create a completion handler gonna make it escaping, and this is going to return a C l location coordinate to D and N S. They're if there is any right, this closure is not going to return anything. So it's gonna return, Boyd. Now, we're going to create a G 1/4 cld 1/4 and we're gonna use this year quarter to G Accord are address String. You're going to use the completion that we're gonna use the picture that has the completion handler. That's unless it takes the string. So you never white address at the string, and the completion handler is going to return a place mark or place marks. And better not if enter is mill. And if we have a place mark at the other next, so there's basically something that's there in the place Mark. Then we gonna assign it to a local, very local location. Hi. We're gonna force unwrap that because we know that place Mark has something so that location is gonna have, and then we're gonna call our completion block and provide the location's coordinate and we're gonna supply and nil as the enter block. So there's no error, so we're gonna supply the little for that now. If there is an error, we're going to simply say completion. Read K C L location coordinate invalid, and we connect. Simply supply the error as unless error. There we go. OK, so now we're gonna use this, uh, gee accord, get coordinate function for the string that user has given to us. Now that string is gonna come from this valuable that we have created. This variable is gonna be required at initialization. Time for the math, for you. So we're going to use this address string, and in the completion, it's going to give us the coordinates and enter beginning once again, do the air check. But we can say we can simply say that there is equal to mill. If there is a political to know, then we're gonna create a span M k coordinate spent four latitude and longitude Your delta Now the span actually dissed. Reminds the zoom How much zoomed you need so you can stay up higher. You can get really close to the city. So we're gonna use 0.2 to start with 0.2 and we can adjust according to our need. And we're gonna create our region m k coordinate region. And inside this region, we can just have center with the coordinate and the span. So we are going to have this coordinate that was supplied to us and the spend that we recently created. Okay? And now we simply going to save you dot Now, if you if you notice it does not say it does not have any completion. The reason is because our update view expects, um, to have, like, you know, basically a plate. Do you expect something that's actually ah, the M give you so this view, we can actually just rename this as view and then Oh, okay. Um, Sex region. And this context is basically something that automatically corresponds to the context that was provided for the map. You so you don't have to actually write this. You can simply say context, and it's gonna understand that. Give me. Okay. So now we gotta set the region to be region animated to be true. So we see that zoom the animation of and we have, like that location found within the map of. Now, with this, our map is actually ready to be utilized. So in the next year, we're going to see how to use this map inside our detail. OK, I'll see you guys in next video. 9. Adding MapView to Place Details: Hello and welcome back in the last video, we created our map view. Um and ah, we actually provided Created a hamper function that can get are basically us thecornerscores for the address string. And we can make this Ah, this function private last fall. And now what we can do is we can simply you start using this, uh, this map you inside are for safety eye view. Okay, so let's go ahead and do that s So what we're gonna do is ah if we run our app to see, like, you know how far along we have been just to remind you So we have this you I in place for entering fee location, and we have these de Medina loading when you select it actually shows the location. So what we gonna do is ah, we will simply designed a new view first. So let's go ahead and create a new file and select 50 I view pamphlet, and we're gonna call this one view selective place. Okay, Now, here. What we're gonna do is we're gonna possible create a navigation view and navigation view is gonna have basically help us show that never title bar so it's gonna have the navigation title bar at the top. So that's what navigation view is. Now we are going to create a vertical stack, and in this vertical stack, we're gonna create our map, you and for address string. We need places. Name. So what we can do is we can create a variable called place VM, and that is gonna be required to be passed our during the creation off the be selected place. And now we can simply se, um, begin a string and double eight place IBM dot name, comma place. We am dark country. Okay, so our map is gonna receive this address, and it's gonna basically then find ah, the address, take orders for the centers and then going to display that by any waiting to that location . Okay, so let's go ahead and basically Ah, give it. Give this map a frame and we just want to provide the height so we can skip the with and we can provide height at 300 alignment. We don't really care. And then, um, we can simply run. So let's go ahead and rule this, okay? And now we can go first before we don't have to go back, do our content view. And ah, Nana. Content view. Um, classy. Very. We have the list. Um, be selected. So this is our list, and, uh, we have placed cell. Okay, They play cell. So this is the rewriting next, and what we need to do is inside this up instead, off displaying the text, we gonna display our new view. So view selected place and ah, you selected place takes a place of you marvel. So we simply gonna supply the place. You want all that we have received from, Ah, the place call from content view right here. Okay, so now with that, just go ahead and run this and Ah, you gonna notice that when we select our location? London. Hi. We get in there, so let's go ahead. See you like you know what the air is. Ah, Invalid region. Okay, so that means we are are there somewhere we're actually making some mistake. Has take a look. What? We have been passed as a location. And, um so we have place, name and place. Country. Okay, so let's see if he for the space here run it. Put a debug point so gently the Matthew put debunker. Maybe here and then we're gonna select London. Okay, What we get as a string is London UK. Okay, so let's go ahead and go inside this and the sea. If the error is nil, so air is now That means you gotten something. It is a place mark. Um, and that place Mark has some value it. So let's go ahead, see the location. So I'm gonna print the location, okay? And we do get some sort off. Okay, so I think we're getting something, But then again, we actually okay, let's go in. And we Well, it you want a debug? It's like, you know what's going on. So let's tell. Except for this. Go run it. Okay. And one more. Now, let's see. So we do have coordinates, but the coordinates that we have supplying invalid argument. Invalid region center, expand 0.2. Band 0.2. Okay, so we have made some mistake inside our map view. So let's take a look. So when we're creating this delta here, Um okay, so are empty coordinate span. And then latitude delta. That's decreases a little bit. So is there a point. It's, you know, too, Mammy. You know what it is you're too. And then region is and coordinate region with coordinate or coordinate that we get right and then span basically the span that we have created and we're set region. Yeah, that actually looks good. So received that Delta made a difference, although shouldn't But, um, I'm still wondering. Hi. Okay, so we do have a span created. We do have region career did, and we're still getting the air. Could not retrieve reason information region center height. Let me Ah, let me work on this and I'll be, ah, back and, uh, let you guys know what? How I debunk this, okay? 10. Fixing MapView Crash: Hello and welcome back. And I basically found ah, the issue that we were actually getting the issue Ah, that I was able to debug was basically this region is being set twice. So let me show you what we have going on. So if I select London and, uh, go inside, then as you can see, our air is being reported as nil. So we go inside and if we print our region, you'll notice that we have correct coordinates of you have correct coordinates and we have correct latitude and longitude data. Now, every press our play, what should happen is basically we should start seeing that map basically being loaded. So we do. We do like you'd expect that that but that does not happen. I mean, this error is being called again, and ah, I was actually wondering why we're getting called again. So I looked at the call stack how it should have. We should have done earlier and found out that we are actually calling this function after we have returned this completion. So basically what happened and this is my mistake. It's not to put a return, SSA, basically, once this plaque off court is executed. If you don't put a return, it's going to continue executing forward. And then it's going to return this invalid coordinates. And when the invented coordinates are gonna be received by this yogurt, it's gonna basically crash that. So that was the reason why it was actually crashing. Now every keep out. Now we just put, like, you know that return statement and keep everything else the same. Um, if I select London how you noticed the hour getting London here, Okay. And, ah, now, uh, like I said, we can actually reset these valleys to be 0.2, just to zoom out a little bit more so we can actually go ahead and look at Central's Let's go. And as you can see this, that really, um ah, good height to visualize or to look at our, um, our area. But I still feel like, you know, zero point there, too does better. Just just because it shows some of the landmarks around that place, which actually helps us, like, you know, relate to that place a little bit more. So let's take a look how London looks from 0.2 and you can see London I booking imbalance and all these other things. And if you go to San Francisco, he gonna notice that we have, Ah, the San Francisco City Hall, the cardinal of ST Mary s Church. And, ah, there are some other places that we have and you can actually move around this. Right? Um, now, if you go back and take a look at Cindy able, you know, work for 10 years Or, like you know, it shows San Diego. Um and I think San Diego City College say the the corners that it has given, basically ah, points us directly in this location. Now, I don't know if I can actually zoom out. I don't think Zuma works yet, so let's see. Pinch pinch too, though. So if I hold control or I think control and like that Oh, yeah, we can zoom and is about Tiberio. Sandy. Oh, so as you can see, like, you know, we are seeing more of 10. Diego. I mean, these this example is ah is not working as great for San Diego as it's working for all the other places. But we're fine, like, you know, we just need a interactive or basically a map looming in for our detailed view so that we have already accomplished. Okay, so the third for the map, you in the next year, we're gonna see how to create a circle circular image. And then once you have created circulate image, we're gonna combine those two together to create our detail view. Okay, So I'll see you guys an extra deal. Thank you. 11. Creating CircularView: Hello and welcome back. And in this video, we're gonna be creating our, um, circular view. Okay, so let's go ahead and get started. I'm gonna create a new view. We recall select safety. I view that kind of you. And now how are we gonna just start creating? So I'm gonna ah, first create a variable called image that's gonna be up type image and inside the body. What we need to show is that image that's gonna be supplied to us by, ah, the center. Whoever initialize it, they supplied steam. Issue us. Now you're gonna make this imagery sizable. We also know make sure that it's for aspect ratio is fit, not Phil. You in a clip shape in a circle, you're gonna add an overly to basically at a border around this image so we can simply say circle. So we're gonna overlay with the circle and we're gonna stroke the circle out with, um, style in line with. That's the one that we need. So style is ah, basically where you can provide the color so color dot white and the line rip its do. That's how we create our border. And now we can also add shadow with color as great radius as to with offense. A one and one You can do negative one as well just to see how it looks. OK, I'm gonna actually just remove this and we can go back to our selected and we're gonna call this circular, do you? I'm gonna supply an image. Oh, sample in this case. Okay, let's go ahead and run this and you're gonna notice that we have created the circular image , okay? And we have created a circular image with this shadow around it. Now, just to show you like you know, you can change the color for the shadow. So if you don't see, like, you know how the red shadows is gonna look like I mean, although it's not natural. Ah, but you can actually play with it and reason rare, because it can show you the offense House offset work So I can have one and one basically. And this is an offset right underneath. As you can see, right underneath fits light. Ah, sightly on the bottom left side. Ok? And ah, you can actually play around with these values. Just Teoh just to know how basically or which Which one is gonna work better for you? So if you do, the zeros can actually overlap directly underneath. Okay, so, uh, let's do one in one, okay? And, ah, and then, Ah, this overlay is basically the circle that you have created. So if you need a different color, saloum exchanges back to great. And if you need a different color, for example, if you need a green color Ah, border for your circular image border, then you can have that too. Like so So it's It's really easy in safety. I basically to have these overlays and basically make view circular at Borders at shadow and stuff around it if you remember and you like it this Onley this stuff, like you know, would take about ah, six or seven lines of code eso your court has shrunken down drastically with safety. Why? So that's that's what I want to show you like you know how easy it waas, how how difficult it was and how easy it is now, basically, with safety, I Okay, so the hours are very ready. Ah, and you already integrated it. So let's go ahead in the next video and finish off are selected places view and basically add some more details and move stuff around to make it look the way our app is looking our final lap, it's gonna look okay, so I'll see you as the next deal. Thank you. 12. Finishing Place Details View: Hello and welcome back. And in this video we're going to be creating are finishing off our view, selected places of you that's rather mouthful. So basically the detail view that we have been working with. Okay, so let's go ahead and and get started. What we're gonna do is, um we will first of all, go back to our you selected ah place. And ah, here. We already have our map. You. Now what we're gonna do is we're gonna move our map you a little bit up. So and you also want to give our page a title, a navigation title, navigation bar and a title for the page. So let's go ahead and add enough. Ah, bar title first. So if I do navigation bar title with, ah, places name So place we m dot name. We're gonna make it in line or display more. Sorry. Display moored in line. If you do that, then what we should expect to Steve is basically having that navigation bar showing up with the name off the selected place. Okay, that's good. Next thing we need to do is ah, we need to move our view a little bit up so we can add a spacer. And a spacer is just a view that actually takes up the rest of the space. So wherever you're actually inserting it, if it's an article stack that is going to take all the space at the bottom like you know as much as it can, which basically means that it's gonna shrink down the image that we gonna fix a little bit later. But let's move our view, our map, you a little bit up so we can add something called a ignore edges ignoring safe area, not top. Okay, that way we can actually move our map view a little bit up like so, and it's actually going behind the ah never bar. But we don't really care about that. I mean, because that is, uh, that is gonna work just fine for us, Okay, In our in ordinary now gonna move our secular view up a swell so we can actually give it to offset and ah, that officer, it can have a y value. So we're gonna give it minus 300 and then you notice that our view has reached at the top here. Now we can actually add some batting as well. So padding off at the bottom or edges off 300. Negative. 300. Okay, so, uh, if you take a look, our view has grown in size, basically, after adding that batting because now a spacer can only take after that negative unit value . Okay, so now if you want to see, like, you know, how much area are this view has taken, you can just simply say, background color dark orange. And this is the padding space that it has taken. And remaining space is basically where your your space on its OK, so we This is just for debugging, So we can actually Well, that now, um, let's go ahead and add a, uh, horizontal stack. Where we gonna display are other information, and we're gonna provide an alignment for this one, and I'm gonna add a text for name. We also going to provide it a fund the next for title type title, and we're gonna add a space in her. Then we can add a divider dividers, basically just a line that showing up to are basically show that distinction between to ah , different views. Then we're gonna add another spacers so basically, we can have the divider right in the middle, and then we're gonna add our next text place, the M dot country. Okay, now, if we add some padding for this with edges inset, you're gonna give it a patting off 10 at the top 25 at the leading 10 at the bottom and 25 the trailing. Okay, so we run this right now, what are you going to see? Is basically are name is showing up with this this divider and ah, the name and the and the country is basically the plate name of the place, and the country is showing up as well. Okay, so that's all good. It's looking great. Now let's add our notes of all okay. And let's give it the line limit off 100. And ah, basically, give it a petting with edges set to be same 10. 25. So I'm gonna use the same value, like so so basically lying limit. What it does is if you have ah, a lot of other large text. Then your text is gonna take ah 100 lines before starting to show the trailing. Um, giving the trailing ellipsis or anything like that. Okay, horsing down the space, depending upon like, how you have, how you would have selected that to be shown. Okay, so as you can see, it's Ah, it's looking good. Um, the only thing is, um, the view is rather large. Um, if you look at our other image, um, the view is a little bit smaller, and the top space is not Ah, the same. So that's quieting and such the app again. And we can actually make our ah, this circular image a little bit, maybe a little bit small. I don't know what can be. What should we do with this? Um I think we can, uh, give it a frame. Maybe. So secular view this. Give it a frame. That's right frame. But 303 100. And, uh, let's go ahead and run this and let's see if actually that contains however you. So Yeah, that's good. That's less Move. Um, that's in Crete to hide for this one a little bit. How he perfect and ah, let's give this negative 400 so we can move our view a little bit up, so 400 is too much. Let's do you do it? 3 50 Okay. And, uh, 3 50 should give us. Ah, good enough. Okay. Have you got so that's looking great. Now that's a like San Francisco that's looking great. Do so it's sitting somewhere right in the middle. We have, ah, good enough space for the map to show. And, ah, basically are good enough place to show the description. Everything all right? So with that, we have actually ah created our entire you I using served you I So starting in the next video, we are going to see how we can configure our Jordana and basically make Corday already to be utilized by safety. I So I'll see you guys the next video, and we're gonna work on core data. Thank you. 13. Creating Core Data Manager: Hello and welcome back. And ah, let's go ahead and start with core data. So what we're gonna do is we're gonna first select are accorded a model Ah, file. And as you can see, we have not really touched upon this are we have not really touched a smile at all. So basically, we don't have any entity or anything created yet, So let's go ahead and fasting create an entity. So I'm gonna add an entity and ah, name this place so you can just double click and name it someone a name, it place. Now, entity is basically just a table name name off the table that actually is going to be represented in the sequel. Light and Attributes is basically the columns that you're gonna have in your database. So you're going to simply select an attribute s so we're going to start with Ah, maybe name and type is going to be string. Now, let's make sure that this is non optional and then we're gonna add notes that is going to be string is all now this can be optional. Then we're gonna have our country string. Let's have, um Are I a I D This is gonna be you. I d. And then we're gonna have an image is gonna be binary data. Okay, so we have our name, notes, image, country, and I D Okay, so I d is basically gonna be something that's gonna be your life. So we can, uh, we can uniquely identify each off thes thes entries. Okay, so let's go ahead and create one more file. I want to create a data manager. So let's create a new group. Help us, Sydney, and we're gonna create a new file called Data Manager. So select, sir file Call it data Manager. The responsibility of this data manager class is going to be basically accessing that shared context and then using that shared context, we are going Teoh interact with our Cordelia's context. So shared context has already created and get you for gotten. Ah, it's an ab delegate. There's according that stack. What it does is basically creates this persistent container variable, and the persistent continue is created from the file. That's favorite places that exceed data model. And then once you're procession containers created, you can actually say of the contacts, so your perception container can give you a view context and you can make changes and simply save it. And that's actually going to save all the changes that you make within that context. So let's say if you added a new entry within the context, we're going to see how to do that in, like, you know, in future videos. But you can add a value and you can put it in the context. And when you simply call save contacts is going to detect that there are some changes in the context, and basically the context has changed from the time it has been fast. So we need to save it. There's gonna basically take care off, creating all the transactions and everything and making sure everything persists. Atomic Lee and all those databases later things is gonna handle it for you. So that's what that's what the state context does. And this is a an easier way, actually, for us to get access to the database and interact with the damn please, our data manager class, what's going to do is gonna it's gonna basically provide some helper functions for us to get places, save places, delete and update and stuff like Okay, So that is what What we will do, basically is we will first of import on the foundation things. So we definitely need foundation. We need you like it, and we need cold data. Now we're going to create our class data manager, and, ah, possible. You want to make sure that the data manager is singleton and ah, Then the singleton object is basically getting our It has access to Ennis manage context and it's managed object context. OK, so in order for us to get access to and it's manage data context, we're going to create an extension on manage context. Um, and then that extension is gonna provide us access to the persistent container that variable that is created inside the Abdullah. So we can do is we can create a new helper and against left file, and this one is gonna be and it's managed object context plus extension. So there's an extension that we're gonna add to this can import core data. I'm gonna say extension and it's managed object context, and we're going to create a steady clickable called current, basically current context. I'll take context and then we gonna return the current Abdullah gates. Absolutist current, persistent containers view context. Okay, How can you do that? If we can simply say you Why application. So we're gonna need Do you have you like it? U y application not shared, not delegate as ap delegate dot persistent container docked view context. So this makes it easy for us to access the current context without repeatedly writing this line of court. Okay, so what we can do is we can go into our into our data manager, and we can create a shared instance. So static let shared Data Manager, and our dairy manager is going to expect a Z initialize earthy ah, reference to the context. So let's go ahead and, uh, give that so I'm gonna actually first create a private in each lighter, and this is going to take a context. And we're simply going to assign this context to a local very now because this is a private stat private in it. That means no one else can create an instance. So that way we can actually create a singleton and be be assured that no one else can basically access Ah, This are create multiple instance of the state of manager that we can centrally managed all of our operations. Ah, that are going on inside this data manager. Okay, so now we have created the shared instance, and we are ready to start writing. I saw the code to save places, get places and stuff like that. So in the next year, we're gonna basically first how right of functionality to, ah, save place so we can start saving some places, and then we're gonna actually also see how to get places from the database. All right, so I'll see you guys in Expedia, and we're going to start working our data manager extinction functions. 14. Create Save, Delete, Get All Places helpers in Data Manager: Hello and welcome back. And in this video, we're gonna be creating ah couple of functions to get places from the database and safe places into database. So let's first go ahead and create get places. So get all places you call this get places, and it's going to return the array off place. Now, this is different from place view, model that we have created place represents and this mannish context. So basically, if you look at it, it's an auto generated file, and it actually inherits from anise manage object. This object basically represents this data model that we have created these at with this entity and these attributes. So if you go into this place and if you say place dot you're going to get all those properties that attributes that you have created wrapped inside this. So first of all, we're gonna create a places array, and within this array, we're gonna create. Um, we're gonna populate our, um, are places that we have retrieved from the database. First, let's create a request off tripe and this fetch request play start factual quest. Okay, Now we're gonna wrap this, uh, next call into do catch. We go. There is a chance that it may throw an error, and we will wanna print that air. Didn't know more about it. Now what we can do here is we can get places from self doubt context dot fetch for the request, and the request is basically the place request. So But what is going to do is basically gonna fetch all these, um, so we can create this has let so we can fetch all the places that are there inside the therapies. Okay, Now, um, we actually came to invest in tow her, and we can return. The place is like so So we don't get anything from the data. Bees were simply gonna ready retrieve, or we simply going to get an empty array off places. And if we do get something that we're going to get all those places from the Cortina. Okay, Now, let's go ahead and write some code for saving the place. So we're gonna write function, save place, and this is not take name, country notes, an image they don't remember. Image is basically saved as binary data, so we're gonna expect the image data. So whenever we select our image on whenever be retriever image from Internet. How, Then we can actually create a data representation off that image and then save that. And then when we display it, we're gonna display it opposite. Basically, you can take the data converted into an image and then display that. Okay, so let's first create a place, and this is how you actually saved. So you provide the context so self start context, and then you simply say play, start i d is equal to you. I d. So this is gonna be the unique i d that's created for us. And system is going to help us create that you're gonna have the name, the country notes and image data. Okay, now, next thing we're gonna create a do try, guys block, do basically save our context like so and catch if there's an error. Okay, so with this gold, we would be able to save our data, save our place into the database. All right. There's one more function I want to write to. Basically finish finish. This data manager up is basically delete a place so you might want to delete a place so delete. Have place punk. The league place, and this is going to take an I d off type you I d. And we're gonna create once again fracture request off my place. Next, we're gonna create a predicated for the stretch request predicated, basically the search, um, search template of that's gonna have. So he's gonna have the search conditioner, everything. So And it's predicated a logical condition that constrained the search, Basically not in it. And we're gonna initialize with the format. And what we can expect is I d to be equal to percent at okay and percent at is going to be i d dot you i d string string representation off you i d So it's gonna basically it's gonna be like if you have written a sequel, it's gonna be select Star from, ah, table of select Star from place where I d is equal to this idea that we have provided. Now, once you've done that, you're simply gonna do a Duke try. So do let bridge places try context dot rich the fetch request and for each place in fetched place, Fletch places or fish to places. Actually, rather you want to delete that, so contacts dot delete that pl Okay, so that place, and then we're gonna try to save that context. That way, we're gonna save our database changes and catch any error. There we go. So with all the centrality, we're gonna be able to delete a place from the database. All right, so our data manager is complete, and and now it's time for us to bind this into our table and start saving some day. Now, start. We're treating some data and start the leaving. Solve these records from the database. Right? So I'll see you guys the next media, and if you can accomplish just that 15. Wiring up Save Places Form: hello and welcome back. And in this video, we're going to be creating a few model to add our places. So let's go ahead and get started and with a cry tick on view models and create a new file . And we're gonna call this one, Select a sir file, and we're gonna call this file add place, view, model. Let's go ahead and save that. Now we're going to create a class and place view model, okay? And this class is gonna have some It's gonna have some Babel's basically from some properties. So, like, name and be also gonna have country gonna have notes. And now we can create a function to save our place of safe place. And, uh, we're gonna provide a closure for two, indicating when the car when the place is saved. All right, reason we're providing disclosure because we want to download an image. A random image from the Internet for that place are to represent that place to display that inside this small, small image and this big image. Okay, so that's the reason why we're actually creating this as a closure. So first thing, we're gonna create a encoded name. So let encoded names weaken Ural and called the name the South are name not adding percentage, including with U R L Bath allowed. Okay, so this is gonna create an encoded names. So let's say San Francisco has a space risk. You are It's gonna you're in court that San Francisco Space 10 space Francisco to basically ah be compatible with with your oral search because beginning we're gonna make a call to end its euro basically the Internet and download an image from unspool ash. Okay, so let's go ahead and create your obsession to download an image based on the name that's been provided. I'm gonna create a shared session data task with the girl and the completion handler you are l is going to be coming from a string. Then string is going to be this and let me paste it before I talked to you about what it is . So basically it's going to this. You're also start on splash dot com is creating is getting the 16 by 900 images with the name that is included here. Okay. And ah, then we gonna basically unwrap this you earl us to basically create the u R l object from this string that has bean provided to us. And now in the complete and handler, we get data, we get responds, and we get there. All right, so we can actually checked the response and everything, all the song and dance we can do. But we can actually skip that and safely assume that we are going to get some sort of data . And then once we get the image data, all we need to do is save that data into the database. So we're simply going to say Data Manager not shared dark save place. So the function that he wrote in the last radio for the safe place, this is very gonna use it, and we're going to simply say, self taught name felt that country self dot notes and data that bean retrieved using this urinal session. All right, before we wrap this up, islets called resume To make sure that our our call arguable session is zemser. Start downloading that image. And basically, that's a function. Okay, So once we have done that, let's go ahead and jump on to our view where we're adding a place. So add place view. We're gonna jump onto that. And here we need to find a place where we are going to save our data. OK, so what we can do is ah, weekend inside this button here where we're printing button tap, we can simply call a safe function. Now, the state functional article, basically ah is going to be something that's going to create the view model, populate all the properties and then it actually can also show error are saved. Ah, state alert, along with basically when the item is saved refreshed the list against all those things we need to do. And, ah, before we start doing it, we need a variable. So a variable that's gonna state that's gonna keep a closure for save success. So we're gonna create a closure on save, and what disclosure is going to do is it's gonna be called whenever the save operation is complete. So we get the indication that hey, save is complete. That means we need to refresh this list at the bottom, okay. And we also gonna need a state available and, ah, the state variable is going to be used for showing alert when the same it's successful. Okay, So with that now, let's go ahead and create this function called Say you safe place. Okay? We're gonna create our VM, so add place View model. So I had a place, few models, and we're gonna save the m dot name a equal to itself dot dollar name, doctor wrapped value. And I have no idea why the ex code is not showing us. Okay, Had places not compatible. Yes, we know that. It's because it's it's actually needing this on save. Okay, so I'm safe, and this own save is going to have Yeah, we gotta do something. Okay, so basically refresh list here. Okay? That's one thing. We also want to make sure that in our at place view, we jumped a definition. You have default values. So let's go ahead and build it again. Okay, so now it's actually working. Now the see if we can get the sometimes, um, Exco just crashes. Ah, and it doesn't show any any off thes help because it has too many things to handle. I have seen that multiple times so we could just keep typing note, start wrapped value, and then we're gonna call the view model, save place and the safe place is going to return a closure. So if you look at place, it returns a closure and that closure is the indicator that our save our places Same. So we're simply gonna toggle our show, alert Mabel to be true when it's safe and we're gonna call unsafe to be true. It's up that closure that we created to indicate that we need to refresh the list and we're going to say self dot So dysfunction this very well we need to empty it. So it's ready for next entry to be added and noticeable. Okay, like that. Rights are safe. Place function is ready. Now, we can simply call this instead off printing, but untapped so because they sell top a safe place. Okay. And we can also add an alert to this button alert and then other takes is presented as a up there were bay variable, so we can simply say itself Dart dollar showing alert. Okay. And it tastes a clothes are trailing closure and this is very showed. The alert and alert is title saved Meth age has text and then the dismiss, but um default pattern with text as Okay. All right. Whenever to save operation complete, it's gonna show this alert. All right, So there's one more thing that we're gonna actually do is ah, we wanna this table. Thea, um, this this button until the time, um when Basically, uh, this. So we're gonna disable this button. Um, till user has entered something, so we can simply say dot disabled And it's really bad. Like, you know, the are complete is not working. So we need to rely on if you're typing everything correctly. Dollar country, it's empty. Note is empty. Okay, So if these three things are empty, that means we are basically we are ready. Um, I mean, if these three things are empty, that means we're not ready to save yet. So once user has failed littering state things out, then we're ready to save our stuff. So let's go ahead and run it, and I'm pretty sure it's gonna run. It's just not, um, it's just not displaying it. Probably the the auto complete. But let's go ahead and add something so quite an ad London, UK and called safe place. All right, So we did get nearer, see every getting in the air says to mean thread check. Hut. I see give you context. But so let's go ahead and call the save. Ah, their manager dot Get all get places to see if we have any place saved. Okay, So I'm gonna create I'm going to go to our context and, uh, our view model basically bizarre. You model place at place we want. All right here. Okay, um, so and place. Right. So we have added the place. Now we go to the ad view of a here. So we can do is along with this, we can simply say data data manager dot Shared. God, this is really bad. Um, okay, let's do this. Let's tackle that in the next video, because I wanna see if there's a way to fix this. This exclude issue off, not displaying any of thes are completes. Um, so I'll actually continue in the next year and weaken. We can continue to build without Okay. So I'll see you guys next to deal. Thank you. 16. Places List View Model and Connecting Save New Place to Core Data: Hello and welcome back. And I had to restart my, uh, ex court to basically bring back the auto complete. Says you can see now we have the are complete working, which is great. I'm relieved. So let's get places and see if there is anything getting saved. Heater. So I'm gonna rerun. Oh, we need to actually print, not count. Okay, so if you were on this are we wanna see if we can get value out of it. So from no tear at place. Okay, so we are actually saving some of the values. Insider data manager. So that's great. All right, so let's go ahead and and bind this data manager true. Retrieve when the save actually happens. So what we gonna do is, um we're already calling this own safe. True. So on safe place. Um, okay. Yeah, I say true, which is basically this completion block this completion block and this is there were actually going to refresh our table. There's display all the records that have been received from the database. Now in the database, we have this thing called place which needs to be converted into place. View, model. So for that what we can do is we can create another view model and that place that that that's funeral is gonna call list view model, which is going to be responsible for basically taking all the places and then converting here, converting them into place view, model. Okay, so let's go ahead and create that. That's where we can actually de couple our logic further. So I'm gonna create a sort file, and we're going to call this place list view model, and this is going to need some imports, so it's gonna import 50. Why? Import core data import combined class now, just creator class place list. Have you model and this is gonna be a author. Irritable type. So up server up the rebel object off cervical object not observed the object. Okay, And it is going to publish, um, whenever there's a new change in the place. So it's just gonna broadcast that changed the water places. It's equal to place, view, model, and during the initialization were simply gonna call which all places this is gonna be a function that we're gonna create. And this fetch all places function is simply going to say south are places. Is equal to data manager. Thought shared thought. Get places, and it's going to map them into please. The model dot in it, which takes are exactly same variables as, ah, the places. So I see cannot convert string string string to which expects the place. Okay, so I see what it does. It expects place you model expects name String, string, string. And that is what we are providing it. So let's see, print self doctor places. It's just gonna print bent. Okay, So our places few model expects string, string and string That is correct. And what we are providing in place get places is, uh, basically Oh, there's one thing that we have for gotten. I think I can bet you that probably is the reason the image cause our place takes an image like so. Okay, so let's take a look. It's built. Okay, so it's not gonna be able to map it. So left map it mentally stop. Have you got a place? Okay. And with that place, a needs to return place, view model, so we can do is we can simply say that place is equal to or yeah, that place B M is equal to place and then are we are simply has a So we are getting the place. Let's take a look at our place. We have country I d. Image, name and notes. Okay. Ah, so it's going to return all those and we need to convert that into place. View model. Okay, so we're getting place, and we're gonna convert it into place few models. So place PM is equal to place, view, model, and name is going to be placed. Stop name that we bean receiving are that we have received They start country at the everything play stop notes stat me everything and place dark image that we have received and we can simply return this All right is expected to be argument place. Okay, so that should actually work. Why are you feeling where are you failing? Oh, yeah. Oh, yeah. We don't care about that. And you're because we're gonna work with the rial data. OK, let's go ahead and build this and see if you're getting any further. Hurst, we are getting some further errors. Yes, dummy data. Yes, we know that. OK, so let's go back and fix these errors first. So we're going to say for each and here we are going to create first of all, an observed object. So at observed object called police list have you model place, list, view, model and this place list? Few model is basically what we're gonna use to say. Self dark police list the model dot places OK, and we have i d So it's gonna be recognized by the idea we gonna get the item. And as you can see, we have everything. All the errors have bean resolved. Now, whenever we get the success, we simply going to say itself dot place list, view, model, Doctor, fetch all places. Now if you go to federal places, what we're doing is we're simply fetching all the places that are there inside the therapies. Now, we also wanna handle the delete function multi year. So we're gonna say funk, delete, place breath I d as you you i d and we're gonna call data manager Thought shared dot delete place with the i d. That's being supplied and we're gonna say self dark places. Start, remove all there Place, view, model and return B b m it dot i d equal equal. There we go. Okay, so we go back to our list, the content view, okay. And within our content view, what we gonna say is for each item we gonna display that and we also gonna add to leave properties on delete, you can perform this so we're gonna have offsets, and we're gonna say off that start for each index, we're simply gonna say let B is equal to sell top place list b m dot police if and we supply the index. So you basically retrieved that particular place out, and we simply say South Dark place B m this. We m dot delete place for p dot I d. Okay, So that way we are going to be able to, um, simply to leave that place. So we have these two a z can see thes air, the one that we actually added. So let's go ahead and create absentia and favorite place. And, uh, that a couple of things that are that is not happening. And those are that are view is not reloading. So as you can see, this item is being added. But we're not seeing that alert and view is not reloading so less debug that? Uh, no. So let's go ahead and go to our and please view model first and in the at place, we want all we're doing. Everything that we need to do. Safe place and everything. Okay, now, let's go back to add place view. So add place view, and, um let's see. So we are calling this safe place, and we're calling the safe place, and, uh okay, first hole, the alert is presented. So remember this all this was all the court that we wrote without the help off, Um, are complete. So Britcher, we have made some mistakes somewhere. So let's see if our displaces getting old. Okay, so this ad save. Okay, so this place is not getting called. Uh, let's do. Okay. So are save places getting called. Okay, we're getting the name country in the notes. So, as you can see, we are getting name. Yes. So everything is good. Now this be endorsed. Safe place is getting called as well, but it's not returning the closure. So let's take a look that we are forgetting to basically call that closure. So we need to call saved here and bash. It actually fixed the air 17. Deleting Cell, Converting Binary Data Saved in Core Data into Image: Hello and welcome back. And in this video, we're gonna try to Ah, check, uh, are functionally s so far what we've got and what we're missing. So if you notice ah, most for awful shanty for this ah app it's complete how if you enter a new location, for example, let's say New York and, uh, something like that. And if we go ahead and save it, as you can see, we get our alert and our place is saved. And uh, now, if you click on it, you actually get your map zoomed in all the notes and everything looks fine. So, uh, what we can't missing is ah, let's check out the delete functionality is also if you still like that and if we delayed it, it be select like some more. So let's delete a whole bunch of them. So let me leave this on and delete. Let's go ahead and kill the up. And were you on it to see if we get okay? So our delete functionality is seems like it's not working the way it's supposed to work. So let's go ahead and debug that first. Okay, so, uh, if we go back into our project and Ah, go to the content view. Ah, this is there were actually writing the delete. Okay, So what happens is basically we call delete place from from the view model. So let's go ahead and jump to a definition for that. So places this remodel, and then we simply say the leaf place. So we jump on, do that, and there we go. OK, so let's go ahead in check one to fetch results are received, Would be actually deletes something. So you have deleted, and, uh, there you go. Now, fetch places has no value whatsoever. And it seems like there is a bug that was introduced. So let's check out what the bug is. Um, So I think the first place I would look at is ah, view model. So let's see our places view moral, and we're creating a u I D. Right here. Uh, So what's gonna happen? Is this You you i d is going to be different from place. Ah, you I d the one that's actually generated, um, for the stable. And where are we doing that? Oh, we are doing it right here. So whenever we called a safe place. We get a we get a different you I d Then the one that we're actually generating insider place have you model. So that's actually where I think oh, are probably like it Now that's where the problem is. So we can do is instead off generating it. We're gonna actually expect the i d to be passed in. So let's say I d u i e We expect that and we simply say I d Let's go ahead and build eso Exco to tell us where we're missing that. So this is there were missing first, um, So begin simply say I d is, uh, basically placed dot i d like So go ahead and build it again And there we go. We have ah, that was the only place where we were to fix that. So let's go ahead and try to lead now. So we're gonna simply press delete and ah, we got We are inside the delightful challenge E and we're gonna step over this step of war once more and now we are getting that value. So that's going to continue and see. Our record has been deleted. So we've deleted London. That's elite San Francisco Oswald. Okay, now we're going to stop the app again. That's removed a D, but point and let's rerun the app. And as you can see, London or San Francisco is not showing up just to prove the point how we're gonna delete some more and only leave three entries here. So that's quite and stop the app and then restarted. There we go. We only have two. So our ah delusional shelter is now working the way it's supposed to work. Okay, so what's remaining now? I think the most important thing that it could be all can see is this image is still the default image that we've been using. So we are saving image, as you can see here, we're getting getting that image from the Internet and saving it, but we're not displaying it anywhere. So let's go ahead and fix that problem now. So, uh, I guess we can go to this area downloading the image and in the places list of you. Um, we get the image as all so place image. So that's good. All right, so places view ad police view is does not have it. OK, there we go. You have a mix here. Ah, this is our place cell. So instead of using this, our sample, we're gonna use the image that's actually present or supply Tow us by the view model. Okay, so let's go ahead and do that. So it's not doing the image we're simply going to do you I image. And we can actually use the overload that you the view I image because you are image have an overload that takes data and converted into an image. Mike. So Okay, so let's go ahead and rerun this and make sure we actually unwrap Ah, the image. So we know the image is going to come back because you have saved it. And now you can see we have different images and it's no longer the image that you are, actually, um, assemble image has been destroyed. So let's fix this. Here is all. So let's go to our view selected place, and we're gonna do the same thing. So it starts off flying this image. I'm gonna copy that image from place self. I'm going to copy this the line here and going to pace that right here. Okay, let's go ahead and we run this and they should actually fix the issue off displaying that image. So we're going to see the actual image, huh? That's Bean downloaded for us. Okay, so let's add San Francisco back. I understand a really good long note this time. Um, And there you go. They have saved, and all of our notes are showing up. That's going to select that. And they would go, This is ah, one of the downtown building in San Francisco. I forgot the name, but how they would go. This is our images showing up in San Francisco and the description country and everything is showing up. All right, so with this, we are actually finished. How? Believe it or not, we have actually gone are really far looking into swift you, I and core data and how they actually work together. Um, well, there's a lot that you can do, so I would actually encourage you to think a little bit more creatively. And if you want to change some things in this app, feel free to do it and post questions and the questions that you post in Q and A is not only for instructors, but it's I would encourage everyone in the community to actually come forward and support because that's the best way to learn when you're supporting somebody else where you're actually exploring something that you have not explored something that they have encountered that you have not encountered. So I would actually highly encourage that are basically helping out in the community. And thanks again for watching this course And please, please, please leave some really good feedback Sound like, you know, I would really appreciate that. So and stay tuned for more from their take interactive. Thank you so much.