Forem: OLAWOYE OMOTAYO

Create a Note App with Swift and Core Data - II

OLAWOYE OMOTAYO — Thu, 12 May 2022 18:14:08 +0000

In the first part of this article, we were able to design the UI for our Note App and also implemented the Create and Read operations of our app.

Let's take it a step further by implementing the Update and Delete operations.

Let's get started!

Create a new view controller and name it NoteDetailViewController; Again, make sure not to check “Also create XIB file” option.

This will display the note and also allow us edit it.

Now let’s give our view controller’s main view a colour of .systemBackground as follows.

view.backgroundColor = .systemBackground

Now let’s add the UI Views for our note. The NoteDetailViewController will look a lot like the AddNoteViewController but with some additional components.
Let’s add the title text field as an anonymous closure:

    private var titleField: UITextField = {
        let field = UITextField()
        field.textColor = .label
        field.font = UIFont.systemFont(
                      ofSize: 22, weight: .medium)
        return field
     }()

Also add the body text view as an anonymous closure:

    private var bodyTextView: UITextView = {
        let view = UITextView()
        view.font = UIFont.systemFont(ofSize: 18)
        view.textColor = .label
        view.clipsToBounds = true
        return view
    }()

Now let’s add the views as subviews to the controller's main view and define their frames by overriding the viewWillLayoutSubviews.

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        view.addSubViews(views: titleField, bodyTextView)

        titleField.frame = CGRect(
                           x: 12, 
                           y: 120, 
                           width: view.width - 24, 
                           height: 44)
        bodyTextView.frame = CGRect(
                           x: 8, 
                           y: titleField.bottom + 8, 
                           width: view.width - 16, 
                           height: view.bottom - 220)
    }

Note let’s create a public note property in our NoteDetailViewController as follows:

var note: Note?

Remember the NoteDetailViewController displays the detail of a selected note in the NotesViewController, that means it expects that a note object will be passed to it when you tap on a note from the list of notes in the NotesViewController.

Now, in our viewDidLoad, let's set value to our titleTextField and bodyTextView as follows:

    if let note = note {
        titleField.text = note.title
        bodyTextView.text = note.body
    }

Because the note property is nullable, we check if it's not null to use it.

Great job!

Now let's go back to our NotesViewController class to handle selecting a note to view it's detail.

Now we’ll implement the collectionView delegate method didSelectItemAt indexPath as follows:

    func collectionView(_ collectionView: UICollectionView, 
           didSelectItemAt indexPath: IndexPath) {

        guard let note = self.dataSource.itemIdentifier(for: 
               indexPath) else {
            collectionView.deselectItem(
               at: indexPath, animated: true)
            return
        }

        let noteVC = NoteDetailViewController()
        noteVC.note = note

        navigationController?.pushViewController(
               noteVC, animated: true)
    }

Because we’ve implemented our collection view with a diffable datasource, to get the element at indexPath, we call the itemIdentifier of the dataSource and pass it the indexPath.

Now when we build and run, we should see something like the following:

Great Job!

UPDATE MANAGED OBJECT

Not that we’ve been able to create and read from Core data, let’s proceed to update.

Remember that our NoteDetailViewController, like the AddNoteViewController also uses UITextField for Title and UITextView for the body of our notes.

Thus, let’s set the NoteDetailViewController as the delegate for the titleTextField and the bodyTextView. This will allow us to be able to watch for changes.
Add the following snippet to viewDidLoad in the NoteDetailViewController:

    bodyTextView.delegate = self
    titleField.delegate = self

This will immediately tell us to conform to the UITextViewDelegate and the UITextFieldDelegate protocols

Add the following at the bottom outside of the class definition:

extension NoteDetailViewController: UITextViewDelegate, 
     UITextFieldDelegate {
}

Remember we created some convenience properties and method as extensions to the UIView, let do the same for String.
Add the following snippet to your Extensions.swift file:

extension String {
   func trim() -> String {
      self.trimmingCharacters(in: .whitespacesAndNewlines)
   }
}

This is a shorthand version of the standard trimmingCharaters(:) String method.

Thanks to Swift, we can leave out the return keyword for a single line statement.

In a note app, we want the app to trigger and update when the title field detects that the title has changed and the body text view to update the body content when the that changes as well.

To help us achieve this, we’re going to be implementing the textFieldDidEndEditing delegate method of the UITextFieldDelegate protocol and the textViewDidEndEditing method of the UITextViewDelegate.

Add the following inside the NoteDetailViewController extension we just added at the bottom:

extension NoteDetailViewController: UITextViewDelegate, 
    UITextFieldDelegate {

    func textFieldDidEndEditing(_ textField: UITextField) {

    }

    func textViewDidEndEditing(_ textView: UITextView) {

    }       
}

Note let’s add a property name appDelegate to the NoteDetailViewController just below the note declaration as follows:

let appDelegate = UIApplication.shared.delegate as! AppDelegate

Now, inside our textFieldDidEndEditing delegate method, we want core data to update the title when the title text field detect a change and the user has ended editing.
Add the following snippet:

        resignFirstResponder()
        guard let note = self.note else { return }
        if textField == titleField && 
               titleField.text!.trim() != note.title {

            let managedContext = 
                 appDelegate.persistentContainer.viewContext
            note.title = titleField.text!.trim()

            do {
                try managedContext.save()
            } catch let error as NSError {
                fatalError("\(error.userInfo)")
            }
        }

Also inside the textViewDidEndEditing delegate method, to update the body, add the following:

        resignFirstResponder()
        guard let note = self.note else { return }
        if textView == bodyTextView && 
                 bodyTextView.text.trim() != note.body {

            let managedContext = 
                 appDelegate.persistentContainer.viewContext
            note.body = bodyTextView.text

            do {
                try managedContext.save()
            } catch let error as NSError {
                fatalError("\(error.userInfo)")
            }
        }

Notice that we have to first check if the changes is not the same with the content of the note title or the body before persisting changes.

Note let’s build and run.

We’ve now implemented Update.

DELETING MANAGED OBJECT

Now let’s implement the Delete operation. To do so, let’s go back to our NotesViewController.

Remember that we used UICollectionLayoutListConfiguration (i.e List Layout) which gives us a similar view as a UITableView.
In order to be able to swipe to delete as in the case of UITableView, we need to add Swipe action to our List layout configuration. Now go inside the private method named createLayout and add the following snippet just before the return statement:

config.trailingSwipeActionsConfigurationProvider = { 
        indexPath in

    let deleteAction = UIContextualAction(
           style: .destructive, title: "Delete") {              
         [weak self] action, view, completion in

       self?.deleteItem(at: indexPath)
       completion(true)

    }
    return UISwipeActionsConfiguration(
                          actions: [deleteAction])
}

You could also create one for the leadingSwipeActionsConfigurationProvider if there’s need for that.

Now we need to create a method called deleteItem(at:). So add the following snippet:

private func deleteItem(at indexPath: IndexPath) {
   guard let appDelegate = UIApplication.shared.delegate 
                  as? AppDelegate else { return }

   let managedContext = 
             appDelegate.persistentContainer.viewContext

   let note = self.dataSource.itemIdentifier(for: indexPath)        
   guard let note = note else { return }

   managedContext.delete(note)

   do {
       try managedContext.save()
       var snapshot = dataSource.snapshot()

       snapshot.deleteAllItems()
       snapshot.appendSections([.main])
       dataSource.apply(snapshot)

       fetchNotes()
       updateCollectionView()

   } catch let error as NSError {
       fatalError("\(error.userInfo)")
   }    
}

In the method above, first we get a managedContext from the persistent container in the AppDelegate. Then we find the note at the swiped indexPath.
Then we passed the note to the delete method of the managed context. Finally and importantly, we called the save() method on the managedContext to commit the actual deletion.

Now to update our UI (i.e remove the deleted from snapshot), we had to clear the snapshot, reassigned the main section before fetching and updating the CollectionView.

Now let’s build and run again. If everything is fine, we should be able to swipe a cell and see it deleted when the delete action button is tapped.

We've come to end of the project. The complete source code can be found here.

Create a Note App with Swift and Core Data

OLAWOYE OMOTAYO — Wed, 11 May 2022 21:27:30 +0000

In this tutorial, I’m going to walk you through how to create a note iOS app.

What you’ll learn:

Create UIKit layout programmatically
Data Persistence with Core data - Create, Read, Update and Delete notes.
Dismiss presented view controller when UIAlertAction is tapped.

Let’s Get Started!

In your Main.storyboard file, Embed the View Controller inside a Navigation View Controller.

Click on the Navigation bar of the Navigation View Controller and toggle the Inspection Pane Open and under the style option, check prefer large titles.
Importantly, In the inspector pane, make sure the Navigation Controller has “Is Initial View Controller” option checked.

Now, let’s rename our default view controller created for us to NotesViewController To do that, Option click the ViewController class name as follows:

Inside our viewDidLoad method, let give the NotesViewController a title and a RightBarButtonItem to add new notes:

       title = "Notes"
       navigationItem.rightBarButtonItem = UIBarButtonItem(
            barButtonSystemItem: .add, 
            target: self, 
            action: #selector(didTapAddButton)
       )

Note let’s create a private @objc function to handle our bar button item.

    @objc
    private func didTapAddButton() {

    }

Let's run our app to see our progress. It should look something like this:

You should see either of the screens above depending on whether your device is on light or dark mode. Cool

Now let’s go ahead to create the Add Note ViewController. To do that, create a new Cocoa Touch Class. Make sure not to check the “Also create XIB file” option, unless you’re confident about your Interface Builder skills.

Now set the background colour for the AddNoteViewController to .systemBackground in side the viewDidLoad method as follows:

view.backgroundColor = .systemBackground

Without that, the view controller would be transparent and you wouldn't know it's presented.

Great! Now let's go back to the NotesViewController and add the following code snippet to the private method we created, didTapAddButton:

let addNoteVC = AddNoteViewController()
let navVC = UINavigationController(rootViewController: addNoteVC)
navVC.navigationBar.prefersLargeTitles = true
navVC.modalPresentationStyle = .formSheet
present(navVC, animated: true, completion: nil)

Don't worry too much about the NavigationController. I added it because I wanted the view controller to have a Navigation bar.

Next thing is to create views on the add note view controller, but before that, let's create some convenience properties and method as an extension to UIView

Create a new swift file named Extensions and add the following:

    import UIKit

    extension UIView {
        /// Weight of view
        var width: CGFloat {
            frame.size.width
        }

        /// Height of view
        var height: CGFloat {
            frame.size.height
        }

        /// Left edge of view
        var left: CGFloat {
            frame.origin.x
        }

        /// Right edge of view
        var right: CGFloat {
            left + width
        }

        /// Top edge of view
        var top: CGFloat {
            frame.origin.y
        }

        /// Bottom edge of view
        var bottom: CGFloat {
            top + height
        }

        func addSubViews(views: UIView...) {
            for view in views {
                self.addSubview(view)
            }
        }
    }

Now let’s create our views inside Add Note ViewController:

First add the title textField as an anonymous closure.

private var titleField: UITextField = {
    let field = UITextField()
    field.placeholder = "Title"
    field.textColor = .label
    field.font = UIFont.systemFont(ofSize: 20, weight:.medium)
    return field
}()

Then add the body text view.

    private var bodyTextView: UITextView = {
        let view = UITextView()
        view.text = "Type in here..."
        view.font = UIFont.systemFont(ofSize: 18)
        view.textColor = .placeholderText
        view.clipsToBounds = true
        return view
    }()

Now override the viewWillLayoutSubviews by defining frame for our views in the view controller’s view.

First add the views as subviews to the controller's main view as follows:

view.addSubViews(views: titleField, bodyTextView)

Remember we created a convenience method as an extension of UIView called addSubviews() which can take a varying number of views instead of calling addSubview multiple times.

titleField.frame = CGRect(
     x: 20, 
     y: 120, 
     width: view.width - 40, 
     height: 44
)
bodyTextView.frame = CGRect(
     x: 16, 
     y: titleField.bottom + 20, 
     width: view.width - 32, 
     height: view.bottom - 250
)

Now add the following inside viewDidLoad

    title = "Add Note"
    navigationItem.rightBarButtonItem = UIBarButtonItem(
            title: "Save", 
            style: .done, 
            target: self, 
            action: #selector(didTapSaveButton)
    )
    bodyTextView.delegate = self
    titleField.delegate = self

We have now added a rightBarButtonItem to the navigation bar which we’ll tap to save the note.

Now create the didTapSaveButton method:

@objc
private func didTapSaveButton() {

}

Your editor pane would be showing some errors right now, because we need to conform to the UITextFieldDelegate and the UITextViewDelegate

Now create an extension of the AddNoteViewController at the bottom of the screen outside the AddNoteViewController class as follows:

extension AddNoteViewController: UITextFieldDelegate, UITextViewDelegate {

}

Now when you build and run, we should have something that looks as follows:

Now inside the extension, let implement the delegate functions as follows:

    func textFieldDidEndEditing(_ textField: UITextField) {
        titleField.resignFirstResponder()
        if textField == titleField && 
            !titleField.text!.isEmpty {
            bodyTextView.becomeFirstResponder()
        }
    }

    func textFieldShouldReturn(_ textField: UITextField) -> 
        Bool {
        titleField.resignFirstResponder()
        bodyTextView.becomeFirstResponder()
        return true
    }

    func textViewDidBeginEditing(_ textView: UITextView) {
        if textView == bodyTextView && 
           bodyTextView.text == "Type in here..." {
            textView.text = ""
            bodyTextView.textColor = .label
        }
    }

    func textViewDidEndEditing(_ textView: UITextView) {
        if textView == bodyTextView && 
           bodyTextView.text.isEmpty {
            textView.text = "Type in here..."
            bodyTextView.textColor = .placeholderText
        }
    }

So far we've been working on the UI, now to the part we've been waiting for.

PERSISTING DATA TO CORE DATA.

Core data is Apples framework for managing object graph and persisting data to disk. Although core data can persist data to disk, it is mainly for managing object graph in your application.

To use core data in our app, we need to first create a “Data Model file”. This is to define the structure of the necessary objects.
Remember when creating our project, we had the “Use core data” Option checked which creates this Data model file for us by default.

Now click on the Add Entity button and rename that to Note. Afterwards add attributes (with names and types) by clicking the plus button.
Lastly, toggle open your inspector pane AND CHANGE THE “Codegen” Option to “Manual/None” because we’ll like to create our model class ourselves.
You’ll see the reason for this in a sec.

Now let’s create a swift file named “model”. You could name it anything, I’m just naming it that since there’re not too many model in this sample app.
Inside the model file, let’s create an Enum and a class for our entity.

    import CoreData

    enum Section: Hashable {
        case main
    }

    @objc(Note)
    public class Note: NSManagedObject {

        @NSManaged public var title: String
        @NSManaged public var body: String
        @NSManaged public var created: Date

    }

    extension Note {
        @nonobjc public class func fetchRequest() -> 
             NSFetchRequest<Note> {
            NSFetchRequest<Note>(entityName: "Note")
        }
    }

NSManagedObject is like an instance of your Entity (which can be liken to a class).

We’ll be using a Diffable DataSource and UICollectionView later on in our NotesViewController. The enum represents our section for the CollectionView.

Now that we’ve created an entity, let’s go back to our AddNoteViewController to complete adding notes to our app. Inside your didTapSaveButton method, let add the following snippet:

if titleField.text!.isEmpty || bodyTextView.text.isEmpty {
   let alertController = UIAlertController(
       title: "Fields Required",
       message: "Please enter a title and body for your 
                 note!",
       preferredStyle: .alert
   )

   let cancelAction = UIAlertAction(
       title: "Ok", 
       style: .cancel, 
       handler: nil
   )
   alertController.addAction(cancelAction)

   present(alertController, animated: true)
   return
}

guard let appDelegate = UIApplication.shared.delegate 
     as? AppDelegate else { return }

let managedContext = appDelegate
                        .persistentContainer
                        .viewContext

let note = Note(context: managedContext)

note.title = titleField.text!
note.body = bodyTextView.text
note.created = Date.now

do {
    try managedContext.save()

    let alertController = UIAlertController(
         title: "Note Saved", 
         message: "Note has been saved successfully!", 
         preferredStyle: .alert
    )

    let okayAction = UIAlertAction(
          title: "Ok", 
          style: .cancel) { [weak self] _ in
       guard let self = self else { return }
       self.dismiss(animated: true) {
           self.dismiss(animated: true, completion: nil)
       }
    }

    alertController.addAction(okayAction)
    present(alertController, animated: true)

} catch let error as NSError {
    fatalError("Error saving person to core data. 
             \(error.userInfo)")
}

Wooops… Great one!

Now when we run our app and tap on the add button to add a note we’ll be able to add a new note and dismiss on success.

One last thing before we go back to our Home Screen (NotesViewController) which shows a list of all the notes we’ve added.

Create a custom delegate to notify the NotesViewController that we’ve successfully added a new note.

At the very top of the AddNoteViewController, just before the class definition, Add the following snippet:

    protocol AddNoteViewControllerDelegate {
        func didFinishAddingNote()
    }

Now, inside the AddNoteViewController, let’s create delegate property and call the delegate function inside the okayAction of the didTapSaveButton method as follows:

class AddNoteViewController: UIViewController {

    var delegate: AddNoteViewControllerDelegate?

    ...

    @objc
    private func didTapSaveButton() {       
      ...
      let okayAction = UIAlertAction(
        title: "Ok",
        style: .cancel) { [weak self] _ in
            guard let self = self else { return }

            self.delegate?.didFinishAddingNote() 

            self.dismiss(animated: true) {
                self.dismiss(animated: true, completion: nil)
            }
        }
        ...
    }    
}

WORKING WITH UICOLLECTIONVIEW LIST LAYOUT

Inside our NotesViewController, let add the following:

private var dataSource: 
    UICollectionViewDiffableDataSource<Section, Note>! = nil
private var notesCollectionView: UICollectionView! = nil    
private var notes: [Note]?

Remember we create the Section and Note model, in our model.swift file.
Now, let configure the Collection View we’ve created by adding the following:

private func createLayout() -> UICollectionViewLayout {
    let config = UICollectionLayoutListConfiguration(
                    appearance: .plain)
    return UICollectionViewCompositionalLayout.list(
                    using: config)
}

private func configureCollectionView() {
    notesCollectionView = UICollectionView(
              frame: view.bounds, 
              collectionViewLayout: createLayout()
    )
    notesCollectionView.autoresizingMask = 
              [.flexibleWidth, .flexibleHeight]
    view.addSubview(notesCollectionView)
    notesCollectionView.delegate = self
}

Now you need to conform to the UICollectionViewDelegate protocol, add the following outside the class definition of the NotesViewController:

extension NotesViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, 
        didSelectItemAt indexPath: IndexPath) {      
    }
}

We have to conform to the didSelectItemAt indexPath method to go to the note detail screen.

Now, we’ve successfully configured our collection view, let’s also configure the dataSource. To do that, add the following method to NotesViewController:

private func configureDataSource() {
    let cellRegistration = UICollectionView
        .CellRegistration<UICollectionViewListCell, Note> { 
          cell, indexPath, note in
    var content = cell.defaultContentConfiguration()
    content.text = note.title
    content.textToSecondaryTextVerticalPadding = 8
    content.textProperties.font = UIFont.systemFont(
         ofSize: 18, 
         weight: .medium
    )
    content.textProperties.color = .label
    content.secondaryTextProperties.font = 
                  UIFont.systemFont(ofSize: 16)
    content.secondaryTextProperties.color = .secondaryLabel

    let bodyTextArray = note.body.components(separatedBy: " ")

    if (bodyTextArray.count > 8) {
       var bodyText = bodyTextArray[0...8]
                         .joined(separator: " ")
       bodyText.append("...")
       content.secondaryText = bodyText
    } else {
       content.secondaryText = note.body            
    }

    cell.contentConfiguration = content
    cell.accessories = [.disclosureIndicator()]
  }

dataSource = UICollectionViewDiffableDataSource<Section, Note> 
       (collectionView: notesCollectionView) {
       (collectionView: UICollectionView, 
        indexPath: IndexPath, 
        note: Note) -> UICollectionViewCell? in
    return collectionView.dequeueConfiguredReusableCell(
        using: cellRegistration, 
        for: indexPath, 
        item: note
    )
}

    var snapshot = 
      NSDiffableDataSourceSnapshot<Section, Note>()
     snapshot.appendSections([.main])

    if let notes = notes {
        snapshot.appendItems(notes)
    }
    dataSource.apply(snapshot, animatingDifferences: true)
}

First, we registered the cell for the UICollection View and then configure the data source.

Build and run your app to be sure there’s no error.

Now let add the following two methods to our controller. First to fetch the data from Core Data and the other to update our UI

private func fetchNotes() {
    guard let appDelegate = UIApplication.shared.delegate 
        as? AppDelegate else { return }
    let managedContext = 
        appDelegate.persistentContainer.viewContext

    do {
        notes = try managedContext.fetch(Note.fetchRequest())
    } catch let error as NSError {
       fatalError("Unable to fetch. \(error) = 
              \(error.userInfo)")
    }
}

private func updateCollectionView() {
    guard let notes = notes else {
        return
    }
    var snapshot = dataSource.snapshot()
    snapshot.appendItems(notes)
    dataSource.apply(snapshot, animatingDifferences: true)
}

Great work!

Now let’s call the configureCollectionView and configureDataSource methods from inside viewDidLoad as follows:

 override func viewDidLoad() {
     super.viewDidLoad()

     ...

     configureCollectionView()
     configureDataSource()
 }

Now override the viewWillAppear method and call the fetchNotes method from inside it.

override func viewWillAppear(_ animated: Bool) {
    fetchNotes()
}

Also override the viewDidAppear method and call the updateCollectionView method from inside it.

override func viewDidAppear(_ animated: Bool) {
    updateCollectionView()
}

Great!!!

Now we can run our app. If everything is okay, we should see the following.

Finally, before we wrap it up for this part 1, remember we created a delegate in our AddNoteViewController which should notify the NotesViewController after adding a new note to the database.

Remember, we navigate to AddNoteVC by calling the didTapAddButton method. Now set the delegate for the “addNoteVC” instance as follows:

    @objc
    private func didTapAddButton() {
        let addNoteVC = AddNoteViewController()
        addNoteVC.delegate = self        
        ...
    }

This will require us to conform to the AddNoteViewControllerDelegate and implement the didFinishAddingNote method as follows:

extension NotesViewController: AddNoteViewControllerDelegate {
    func didFinishAddingNote() {
        fetchNotes()
        updateCollectionView()
    }
}

We again, call the fetchNotes and updateCollectionView methods from inside there.

Great! Now when we create a new note, it immediately update the NotesViewController.

Here's a link to source code on GitHub.

In the Second Part of this article, we’ll cover how to update and delete notes.