Todo List using Core Data SwiftUI Xcode Example Tutorial | Part 1

hello and welcome to this Swift UI tutorial I'm Cal and today we're going to be building a to-do list app using core data the benefits of using chordato are that when you close the app and you reopen it all of your information is remembered and we're going to be using lists we're going to have an ability to create a new task item we're going to be able to delete it we're going to be able to edit one that we've already created we're actually going to use the same component for our create and our edit if you are looking for a video to really get the fundamentals of core data and Swift UI down pat then stick around before we get started on today's tutorial I just wanted to let you guys know that I've been approached by editor's keys they asked me to test out their new xcode keyboard cover which is just a silicon cover that goes on top of your laptop and it has all of the different xcode shortcuts all the important Keys like command and option and control are clearly colored and on each key there is the shortcut with the combination of colors that you need to hold down to activate the shortcut just having those shortcuts really quickly available has been a really nice way to learn some new things about xcode I mean there's a few things I didn't even know that you could do as well there are a few shortcuts that I knew existed but I could never really quite take the time to learn all the different key accommodations and with the skin I just quickly have a look and then before you know it that shortcut is integrated into your workflow and it becomes second nature the skin is nice and hygienic too you can just whip it off and hand wash it so if you're interested in checking out one of these xcode covers there is an affiliate Link in the description below or you can use the code word code with Cal on check out to receive 10 off your order as well as supporting the channel and yeah with all that said let's get back into the tutorial of course so we're going to create a new xcode project IOS app product name we're going to call it to do list app tutorial we can see at the bottom I've already got used core data ticked but if you don't you just want to make sure that that's selected and host in iCloud kit I wouldn't worry too much about it but I'm just going to select OK and hit next and finish I'm going to make the window just a little bigger straight out of the box if we build and run this when you check core data you actually have a working app with the ability to add a timestamp you can go into an edit mode and delete or you can swipe right to delete which is pretty cool really we're just going to start by building on what they've got here already as we are building a to-do list app probably the first thing to do is to model our data from the left pane here we're just going to go into the file which is ending in XC data model ID we're going to change our entity from item to task item so this is going to be like a to-do list item we're going to change the original date to be completed date which is of type date we're going to add another field created which is a date type and I'm just going to create also name which is a type string you can see I'm just hitting this little plus icon to add a new attribute to our object description string we want to due date as well that's going to be a type date and we're going to add a Boolean which is whether or not we schedule a specific time so this is say you had to water the garden at say 7 PM or if you just wanted to say I want to water the garden at some stage today we're going to allow for both kinds of to-do items cool so that's it for our modeling we don't have to do any Getters or Setters we just leave that object as it is and we're actually going to head into our persistence file and I'm just going to remove this for Loop because that is going to be a bit annoying for our preview then we're going to head into our content View and I'm going to refactor it to be our task list view just because that's a bit more of an informative name we can see our this is the fetch request where it's getting all of the items that it needs to display and because we've changed our entity name we need to change it from item to task item our entity no longer has a attribute called timestamp so I'm just replacing that with due date for now this is more of a placeholder we'll probably come back and fix this later we're just going to remove this if iOS we're going to remove the add item function because we're going to create our own version of this shortly we're going to change the item text to be our due date instead of just the timestamp and we're going to remove this toolbar item and this final text here and if we build and run this we should be able to see that we haven't completely broken everything and it's now working with our updated entity name cool so the first thing we're going to need to be able to do is add a new to-do list item so I'm going to create a new Swift UI view I'm going to call it floating button and this is going to be our new item button I'm going to add in a spacer and then a hdac inside the hatch deck we're going to add a navigation link and a navigation link has a destination as well as what we want it to look like the destination we're going to create a new group and a new Swift UI view which we're going to call task edit View and I'm just going to rename this group to be views and just get everything a little bit organized so putting all our views in our views cool so our destination for our navigation link is going to be our task edit View and we're going to put our text inside the navigation view the text we're going to say new task and then we're going to give it a font of headline our navigation link we're going to give some padding and let's open up the preview so we can see what's going on you can see that's just a little bit of padding there for our navigation link then we're going to give a foreground color of white background color is going to be our accent color we're going to give it a quarter radius of 15. maybe you make that 30 and then we're also going to give it padding of 30 Shadow we're going to give it black opacity of 0.3 so really great and then our radius we're going to give it three as well as our X and I Y and you can see that's just giving it a little bit of a 3d effect cool so now back in our task list view I'm going to do just a little bit of tidying up and we've already got a navigation link here but we're going to give a destination of our task edit View and and we're going to remove the label from the bottom and just use a pretty simple text with our due date for the content of that navigation link we're going to put our list inside of v-stack and then inside our v-stack we're going to add a z stack so Z stack is layering and then we're going to do the floating button after our list so it's going to sit on top of our list and we're also just going to give our navigation View Title so to-do list cool so let's build and run and see what we've got so we've got our new task button and if we click on it it takes us to a new view which at the moment just says hello world but that's where we're going to be creating our new task cool so we can head into our task edit view now it's going to bring up the preview and then we're going to remove the text and type form inside our form we're going to have a section and the header we're going to give the text of task and so in this part of the section we're going to say text field which is our task name and the text we want to give it a state variable of string so I'm just going to go to the top and type State Bar selected task item and so this is we're also going to be passing through a task item because we're going to be using this for edit so that's going to be optional and then we're going to create that name that we're going to use for our task name as well as a description and now in our text field we can give it the binding reference of our name we can copy down the text field because we also want to have a description text field and we're just going to use the text as our description binding we're going to give the task edit view preview a new task item because it's complaining about that and then we're also going to override the init function so we're going to have a pass task item which is going to be optional as well as an initial date in the future we're going to be passing it through you know if you're making a to-do list item for the future you don't want to be scrolling through the date pick us that's why we've got an initial date and then we're going to say if let task item is equal to our past task item meaning that there is a task item passed through meaning we're in edit mode then we're going to set name equal to the task item name so the original name otherwise we're going to assume that you're creating a new task and therefore set our name equal to empty so we're going to need to do the same thing for all of our other fields so we're going to need one for description as well so either we're in edit mode and therefore we need to set the initial value of our description or we're in new mode where we just set it all to empty we're also going to set our selected task item to initial value of our task item so that's again if we're in our edit mode and not create new mode and then we're going to create two more variables one called due date and the second one called schedule time schedule time was a Boolean and due date was a date and so we're going to need to create both of that logic we're going to need a description as well as due date and task item due date and if it's not that we're going to use the initial date and then for our schedule time we're just going to say task item dot schedule time and if it's a new we're just going to set our due date to the initial date and schedule time to be defaults by default we're going to pass our preview just today's date and so we already have a section which takes our task name and the description but we're going to create one for our due date just renaming the section header we're going to actually call this first text field schedule time and we're going to change it from a text field to a toggle button and the is on is going to be our schedule time below the toggle we're going to add in a date picker date picker is going to have the name of due date and the selection is going to be our due date below that we need to add in one more section which is going to be our save button and so we're just going to have a button in here which is called save and we're going to give it an action save action let's create that save action below we're going to give it a font of headline as well as a frame of Max width infinity and alignment center so just put the save button in the middle of the section and we also need to for our date picker we're going to give it displayed components so we're going to create a function called display comps this is going to return date picker components so if we have the schedule time on we want to have our date picker be able to select date and time and if our schedule time is off then we just want to select a date and not worry about the time cool and the final thing left to do is flesh out our save action we're going to say with animation if our selected task item is nil meaning that we're in new task guider mode then we're going to create a new task item and just assign that to our selected task item and this requires a context so we're just going to copy that out of our task list view our view context and then we can pass that in for our task item because we're creating a new core data item and now below that we can say set our selected task item create a date to today's date or the exact time stamp if we want to set our selected task item name equal to the state variable name and we need to do the same thing for our due date as well as our schedule time setting the entity attribute value to the state variable value and we actually if we head into to our task list view all we need to do now is call this view context save but we're going to do a bit of hard work to make this a bit more reusable because we don't want to just copy paste that in it'd probably be easier but what we're going to do is right click refactor and extract to Method we're going to call this method save context and our save context takes a variable of context which is of type NS managed object context and just changing the save from view context to the context that gets passed through and removing the file private and then we're going to right click on our shared folder and create a new Swift file calling it dateholder and our date holder class is an observable object and we're going to pass this through to all of our different views and that way we can put our save context function inside here and have it easily accessed so we just need to import core data as well because that needs NS managed object context and so now if we head into our to-do list app.swift we are going to say let dateholder and we're actually going to create our date holder here so that only happens once and our context is equal to persistence controller container view context and we can pass our date holder in that context and we're just going to override the init function in here to make it take NS manage context that will come in handy a little bit later on and then we're also going to pass our task list view the environment object of our date holder now in our task list view we can declare that environment object just calling it dateholder and we can also put that in our floating Button as well as our task edit view so we're going to pass this stateholder through each of our views and we just do that by saying Full Stop environment object and passing it through the date holder and same thing for our navigation links we need to put in both there as well as for our floating button and the final thing left to do is our delete items because we've just moved that out we can now reference it off our date holder and then we can copy that and head back into our task edit View and because we've got our date holder we are using the one piece of code which will come in handy later in the tutorial but it's also just good practice you don't want to be copy and pasting things unnecessarily cool so in our task edit view the last thing we want to do is pop our view so we're going to say environment presentation mode VAR presentation mode which is a binding of presentation mode basically if we go presentation mode and then wrap value dismiss it will essentially go back in the navigation view cool so I think we are ready to test out our new to-do list item so I'm just going to say new task I'm going to give the task a name and then in our save button which is put us back to our to-do list page I'm going to create another one just calling this test item and if we toggle our schedule time you can see that we've now got a Time picker as well as our date up and so if we are scheduled time toggle is on we can choose a time and hit save and you can see we haven't actually updated ourselves or anything yet but we do have two items so we're pretty confident that the data is getting saved correctly cool so if we head into our task list view now we don't want this text here we actually want to create a swift UI view calling it task cell and we're going to remove that text and just type in task cell and our tassel is going to take our task item as well as our date holder so we're just going to copy paste our date holder in as well we're going to call our observable object I'm going to call this past task item and it's a type task item and our preview is now requiring a task item so we're just going to create a new one and I'm just getting a couple of errors here so just fixing up that typo and then if we head back into our task cell when you want to have a text with our task name and if the task name is empty we're just going to do an empty string we're going to it's some padding which is horizontal and if we go and run this quickly you can see that the two task item names that we created before are populated in our list so next we're going to add the ability to actually complete a to-do list item we're going to create a check mark style view so we're going to create a new Swift UI view I'm going to call this checkbox View and it's going to need a date holder as well as a pass task item and we're just going to pass that through to our preview in our task cell we're going to call our checkbox view and it's going to require our past task item as well as our environment object which is our date holder and then so inside here we're going to create an image our image system name is going to be if our past task item is completed date is not equal to nil meaning that it doesn't have a completed date then we're going to use the check mark Circleville otherwise we're going to use just a circle so an empty circle and as we're going to be referencing whether or not our task item has a completed date or not it's probably worthwhile creating a convenience method for this because we are letting chordata handle all of the Getters and Setters we still have the ability to create our own custom functionality using the extension so I'm going to create a new group I'm just calling this model and I'm going to put our persistence in there and then I'm going to create a new Swift file which I'm going to call task item extension and so our task item extension we're going to import Swift UI we're going to type extension and then task item so this task item now has access to all of our attributes and we're going to create a function in here which is called is completed which returns a Boolean and it's basically what we've done here with our system and name and we're just going to call instead of that we're going to call completed and we're going to return our completed date is not equal to nil meaning that it is completed our task item is completed because it has a completed date and then we're going to say if our foreground color if our task item is completed we're going to give it green if it is and secondary if it's not and then we're going to give it an ontap gesture so on click with an animation and we're going to say if our task item is not completed we're going to give complete a date a new date so today's date and a time stamp and then we're going to call our date holder save context and we just need to grab view context from another view and pass that through to our saved context cool so let's try out our check mark we can see I'm going to click on our test item and it's changed our image from just the circle to the circle with a tick in it and we can't actually see the completed date so it might be nice to head into our task edit View and we're just going to create an if statement saying if selected task item is completed we're going to create a new section just calling completed you don't have a completed date then don't run this piece of code our section is just going to have some text it's going to display our completed date formatted and the date we're going to use the abbreviated style and time we're going to do shortened and if you don't have those things we're just going to return an empty string and the foreground color is green so the text is green and you can see if we go and run this we've got a timestamp there for when dishes were done and if we create a new task item we can see that there isn't any section with completed date which is what we wanted so that's good cool so I hope you enjoyed the tutorial just a quick summary of what we've learned today we learned how to use core data with swift UI we created a to-do list app we can add a task item we could delete it we can edit one that's already created we can sit Market as completed yeah that's a very basic functioning to-do list there will be a part two to this video so check out the link in the description if source code in the comments as always if you found any value in this tutorial consider giving the video a like as well as subscribing and I'll catch you guys in the next one cheers foreign [Music]

Channel: Code With Cal

Views: 18,006

Keywords: tutorial, programming, coding, example, swift, xcode, program, code, app, development, developer, software, iOS, how, to, build, apps, application, dev, cal, with, tute, swiftxcode, learn, create, simple, basic, first, easy, class, collection, label, beginner, firendly, friendly, component, helper, use, project, main, center, make, swiftui, 2022, edutainment, todo, todo list, to-do, do, list, floating action button, completed, core, data, core data, core data swiftui, swiftui core data, swiftui tutorial, swiftui 2022, swiftui todo list

Id: OgYluh5sYBA

Length: 18min 14sec (1094 seconds)

Published: Sat Aug 13 2022