iOS 13 Swift Tutorial: SwiftUI and Core Data - Build a To-Do List App

hi and welcome to another very exciting tutorial today we are going to bring together two very amazing technologies first of all Swift UI and core data we're going to build this simple to-do list application so what it does is we can create reduce like so maybe record tutorial this is what I have to do today also create a thumbnail for the tutorial and so on we can of course delete items when they're done and as you can see we get these nice animations I actually also bought Tomatoes already so let's also hit the delete button right here so this is what I have to do today well the technologies that we're working with as I sad is core data which is Apple's data persistence framework which is really cool if you have a lot of data that needs to be structured and you want an easy way to actually work with that data depending on your requirements this is going to be a great fit and also of course you know a swift UID new and declarative approach to build better apps with less code and now in this story we're going to bring together both things I have already some basic tutorials on Swift UI on my channel so if you have networked with Swift UI go check them out and also there are quite a few tutorials on core data so if you have never worked with core data and you have never heard managed object context or persistent container or things like that then maybe you want to check out these videos as well so creating a new Xcode project naming it maybe core data to do we also must make sure with this single view application template to use swift UI and also use core data let's hit next at to my desktop and using more setting these two checkboxes of course gives us the ability to use Swift UI with a basic content view already set up and as for core data get our core data data model when we still have to add some entities or one entity in our case an app delegate we get a basic core data stack that we can work with so this already helps us a lot so maybe let's start with the data model as you've seen what we'd like to store our to-do items they do have a title and they have this created and attribute that we can use to see when we created this specific item so in our data model here on the Left core data to do XC data model we are going to press on the add entity button in the bottom area of the screen and we're going to click on the entity and rename that to-do item also now we have to add some attributes the properties of our entities and here I'm going to add two attributes the first one is going to be created and the second one is going to be tile for the created and we use the type date which makes sense and for the title we will just use string now what you can do to actually work with these entities is just let Xcode do all the work and on the right in the attributes inspector you can see that we actually can set the code generation to class definition to category and extension and also manual and none when we're working now with Swift UI it definitely makes sense to set this to manual so that we are in control about how we use our entities I will also set the module to the current product module just for everything to work nicely and as I said we are going to create our associated classes manually in a more traditional approach with a view controller based application you could also keep the cogeneration and automatic and just get your classes right from Xcode but we're going to create our own class for that so I'm going to select my content view here to place a new file right below it's going to be a swift file and we're going to call that to-do item let's hit create and as you can see to-do item actually matches the class name that is defined here in our for our entity we created in the data model and now that we have our class or our file we're going to import core data so that we can work with this framework and then we will define a public class right here call it to-do item which is going to inherit from ns-managed object because this is what we're going to be working with and now to use it together with Swift UI I'm going to also adopt identifiable so that each manager object is going to be identifiable later when we're using it together with a list now for career day car data to be able to work with our class we have to define our properties as an as managed with this property wrapper going to use public VAR created and we have a date type here and the second object and has managed what we're going to use here is public VAR title which is going to be a string and then for simplicity's sake we're also going to add an extension for to-do item because we need to be able to fetch all of the elements that we have in our data so we want to load all of our of our to-do items I'm going to use a static function here so that we don't have to create an object of this class to actually use they get all to-do items function and what this is going to do is using an NSF request for returning anise fetch request and we were returning a fetch request that works with to-do item as a type now we just have to define the request which is an Anna's fetch request for to-do items and then we can use a to-do item just get the fetch request and cast that to Anna's fetch request that deals with to-do item and then what we can also do this maybe create a sort descriptor to actually sort our elements by be created and property or attribute so Anna sort descriptor we initialize that with the key which is just a name of our attribute or property created and I want this to be ascending and then we just have to use our request and pass along our sort descriptor any sort descriptors property within an array because this is what is expected here for sort descriptors it's also the plural form so we have to use an array here so let's now return this request and with that our data model is done and we've simplified our lives a little bit with this function that we can use very soon and now we actually want to have access to our data in our content view and for that we need to access our managed object context which actually is a part of our persistent container that is defined in our app delegate now fortunately there is a very easy way to actually get that and we have to do that now in our scene delegate in the scene delegate we initialize our content view which is going to be passed as the route view to the hosting controller that is later displayed in the window that's just how us with UI works so what we are going to do now after our windows declared we're going to create a managed object context constant here and to access this we can use UI application shared and access the delegate so this would be app delegate our class app delegate but we still have to cast that to the proper name which is or to the proper class which is app delegate and now as part of our card data stack we can use the persistent container and within the persistent container we have our view context which is the managed object context we are going to use and now since we want our content view to be able to work with this managed object context I'm going to define my content view here initialize that not good with content mode but with content view and then I'm going to set an environment key path here so first of all the key path that we're going to use is managed object context and the value are the object that we want to pass along to the environment of our content view is going to be the managed object context that we just got from our app delegate so just to make this clear again in app delegate we have our persistent container definition and the managed object context is a property of the persistent container so we're getting that right here using your application share delegate and then we pass that managed object context along to the contents view environment so that we can use that in a second and now to initialize our UI hosting controller with a root view we do not initialize the content view right there but we're passing along the content view object we just created and now that we've done this preparation we can switch to our content view where at the moment we're just displaying the text hello world if my can was going to load to see that but it just takes time and you can't imagine how this works so let's just imagine that this would be displayed here and we want to work well now with managed object context so we're going to use in a property rapper called environment here to access the managed object context that we have passed so long to our content views environment and let's use variable managed object context right here to actually access that within our code here and if you want to learn more about property wrappers just check out the video that I've linked in the video description below because we're trying to add yet another very handy property wrapper which I've discovered in the release notes of one of the newer Xcode beta versions which is fetched results and this are not fetch results fetch request and this allows us to initialize a fetch request right here which we get from our to-do item and they get all to do items function that we have defined as a static function and now we can just declare a property here pop to do items with the type fetched results off to-do item so that we can actually access all of our to-do items from our database and we don't have to perform any fetch requests or do anything that's a this is a very handy way of actually accessing our data right here in Swift UI so with these defined what I will also do is use a state private variable new to-do item which I'm initializing with an empty string and using that state property wrapper we can very shortly use a text field to actually get the text or the string that the user enters in a second but now let's really define our user interface as you've seen we're having this nice-looking navigation view that we can use here so within our body we're going to start with a navigation view this navigation view is going to get a navigation bar title which I am going to add at the bottom that but the code completion doesn't work if we don't add anything here so let's just put some text here and then we can add a navigation view title our navigation bar title it's going to be a text and I'm going to just say my list this is going to be the title we'll also have as a navigation a bar item which is going to be on the right side of our view which is going to be a edit button to activate the editing feature so this is what we're going to do with our navigation view let's now add some more things as you've seen we have a table view in this navigation view so we're using the list in swift UI and we also have multiple sections here so now we have a Watson X section and we have the actual - duze section and we're going to start with the section with a header called with a text which is called once next and then we're going to define the content of this section which is going to be a text field and a button as you can see here with this text field we have this plus button and we are going to do that within a horizontal stack so we have the text field and then we have the button so very simple and so let's define age stack here with first of all our text field which is going to get the title new item and now we are going to use a binding or our binding to the new to-do item so that we always have an up-to-date version of what's inside our of our in our text field so we have to use the dollar sign here new to-do item to actually access the binding right here and then the second element that we have in our age stack is going to be our button and our button is going to have some action that we're going to define in a second and we also have this plus icon here so let me just remove this label stuff here and let's add an image here which is from the system library or the SF symbols so I think this is the plus circle fill so this is the S of symbols application that you can get from developers Apple comm and I'm now just going to copy the name here and initialize my image then what I also wand is for this image to have a green color and also I want the image scale to be large so that we can also see it now this is actually all we need to do to define our first section maybe give the whole section a nice headline font um so that it looks a little bit better and now we can give this a go and look at it and in the simulator I know that Swift you wanna actually is about not having to launch a simulator but as soon as you introduce the fetch request property repper and do something with core data at the moment it just crashes or the canvas crashes so we have to rely on the simulator right here and we have our text field we have our button what we don't have is the navigation bar title which is the case because I've added it to the navigation view and not to the list so let's quickly look at that again so here we go and here is our title here is the edit button and everything looks as we wanted it to be now we can actually handle our and what we want to do here is actually quite simple we want to create a to-do item so let's create a - to-do item right here we have to initialize that with a managed object context as you can see here luckily we have one so just using self managed object context and now we have a nice object that we can work with and just as any other a class object that we have and this is the beauty of core data that we can just work with ordinary objects so we have the title property and this is going to be self new to-do item which is bound to our text field so we'll always have the content of our text field or the string in our text field a new to-do item in this property then we also have the to-do item and we created add proper team here we will just initialize that with a date object and then we're already ready to actually save our managed object context something can go wrong here so we use do try-catch so we try to use self the managed object context and we try to save that and also catch possible errors by just printing them for the moment and with that we have actually everything we wanted what we can still do is maybe reset the storage for our new item new to-do item so I'm using self new to-do item just clean that so that we can just create the next item that we want we can actually check that out now see if there occurs any error so let's say report tutorial this is still something tutorial since still something that I need to do and no error occurred so I guess it's stored in our database let's find out actually in the next section of our list so I'm just minimizing that here so that it gets a little cleaner and let's create a new section with a new header which is going to get a text as well and this is going to be - duze right there okay so and for the content of this section we're using for each since we're already within a list and what we can do in for each is very simple we just use our to-do items which is just as a for in loop actually we have all of our items stored in this fetch results object and then we can iterate through these fetched results and get one to do item per iteration and we can now work with that and create a cell for our a table view or for our list therefore I've already prepared a little something we could pace that struct right below or we can also create a new file let's maybe do that again right below the content view is going to be a swift UI view and I'm going to call that to-do item view let's hit create and what I've prepared looks like this so we just have two properties here a title and it created at and if this works we could also take a look at that in a second but it does not because there is an error in the other file so let's maybe just add some counts right here at a text right there I'll quickly build that and then have a look at the to-do item view let's try that again and now build succeed and as you can see you see nothing because I did not initialize that in the preview so let's also initialize that right here my grade to do I just write today right here because it's a string and as you can see this is what by table yourself is going to look like pretty standard nothing nothing fancy suggest a horizontal stack with a vertical stack included for the tax Lord Ford - labels title and created at so very simple so let's head over again to our content view where we surprisingly do have no problems displaying this this whole view which is cool let's see if this is going to keep working in a second but we still need the space for the editor so let's just work full screen with our code for now and now for the for each section right here what we'd like to do now is for each to-do item that we get we can initialize a to-do item view we could also just add the code I put in deed to-do item view right here but I think it's just cleaner and it's the way a swift UI is meant to be used so what I'm going to do is using my to-do item and its title which we have here unwrap this even if it's unsafe but I feel lazy today so please don't use that in your real application and don't force unwrap the to-do item here and for created ad I'm just going to use a string here with string interpolation again using my to-do item access the created add property and also force unwrap this right here now the amazing thing would be if this would work and we can see that in the canvas but we cannot so it says the app crashed and we will have to look at that in this simulator so here we go and indeed look at that we have the to-do item that I saved earlier let's maybe do another one say buy butter let's add that and here we have buy butter what we can do yet is the something so how do we go about that well it's very simple in Swift UI because we just have to amp the capability to each cell in our table view so we generate our list or table view with for each right here so what I can do is append and on delete and what I want to do on the lead is maybe just get rid of that we can have or we can access an index set right here in this on delete function or in this on delete closure and what we can do now is get a delete item using our to-do items our fetch results and just access the proper item with the index set and the first element right here and now we can use the managed object context managed object context and just delete the proper object which we just named delete item now after deleting the item we also have to save so let's again use do try self managed object context and just managed managed why doesn't that work because I misspelled it that's why so let's scroll upwards and I'm just noticing it right now let's rename that and let's rename it managed object context and now I should be able to use try self managed object context and hit safe and if anything goes wrong we're going to catch the error print it right now also not a good idea for your real application that you put in the app store but for this tutorial it'll do so now we should have the delete capabilities let's try that out as well and see if we can actually actually think I'm quite finished now so maybe I want to delete a core tutorial and that's done let's add another cool item and let's maybe hit at it and let's delete the butter and we can delete so this seems to work and as you can see we just wrote about 64 lines of UI code and not really much on the on the data model side as well so I think a swift UI kept its promise here and simplified a great deal for us here if you compare it to using a fetch results controller and all of the table view delegate methods that you would previously have used to achieve something similar I think this is really an advantage I think we've built quite an interesting and cool little to-do list application so I hope you liked this video and you find a way to use core data and Swift UI together in a future project so make sure to hit the like button if you found this useful don't forget to subscribe if you don't want to miss any future tutorials I thank you so much for watching and I'll see you in the next one bye you

Channel: Brian Advent

Views: 81,959

Keywords: Swift, Xcode (Software), OS X (Operating System), Core Data (Software), IOS (Software), Tutorial, programming, iphone, ipad, Macintosh (Computer), Apple Inc. (Organization), IOS 8, ios9, CloudKit, iOS10, Swift 3, firebase, firestore, ios11, swift 4, ios12, swift 5, swiftui

Id: -BZdQmHV4MQ

Length: 27min 35sec (1655 seconds)

Published: Wed Aug 14 2019