SwiftUI

In this last episode about SwiftData, we’ll learn:

• How to modify saved data
• How to execute a simple query
• How to execute a dynamic query

Before we start, I advise you to review the previous episodes (https://nicoladefilippo.com/swiftdata-tutorial-episode-i/ https://nicoladefilippo.com/swiftdata-tutorial-episode-ii/).

Edit data

First of all, we will create the view to edit a ProjectItem:

import SwiftUI
import SwiftData

struct EditProjectView: View {
    @Environment(\.modelContext) private var modelContext
    @Environment(\.dismiss) private var dismiss
    @Binding var project: ProjectItem?
    var edit = false
    
    var body: some View {
        VStack {
            Text(edit ? "Edit": "Create")
            TextField("Project name", text: Binding(
                get: { project?.name ?? "" },
                set: { newValue in project?.name = newValue }
            ))
            Button("Save") {
                if !edit {
                    modelContext.insert(project!)
                }
                try? modelContext.save()
                dismiss()
            }
        }
    }
}

#Preview {
    @State var dum: ProjectItem?
    return EditProjectView(project: $dum)
}

A part from the variable used to dismiss the sheet (considering that this view is displayed in a sheet), this view receives a project variable and an edit variable. If the edit variable is true, it means we are editing an existing item; otherwise, we are creating a new one. Considering this, change the save action to only save if it’s an edit; otherwise, also perform an insert.

The projectsView is now changed in this way:

struct ProjectsView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var projects: [ProjectItem]
    @State var isPresented = false
    @State var projectSelected: ProjectItem?
    @State var edit = false
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(projects) { project in
                    HStack() {
                        Text(project.name)
                        Spacer()
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        projectSelected = project
                        edit = true
                        isPresented = true
                    }
                        
                }.onDelete(perform: deleteProject)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
                ToolbarItem {
                    Button(action: {
                        projectSelected = ProjectItem(name: "")
                        edit = false
                        isPresented = true
                    }) {
                        Label("Add Project", systemImage: "plus")
                    }
                }
            }
            .sheet(isPresented: $isPresented) {
                EditProjectView(project: $projectSelected, edit: edit)
            }
        }
    }
    private func deleteProject(offsets: IndexSet) {
        withAnimation {
            for index in offsets {
                modelContext.delete(projects[index])
            }
        }
    }
}

So, if we tap on an existing project name, we’ll edit the selected project. Instead, if we tap on “Add,” a new project will be created and the edit view will be displayed in creation mode.

Simple query

Now, suppose that we want to display only the Pomodoros associated with the project named “test project”:

import SwiftUI
import SwiftData

struct PomodoriView: View {
    @Environment(\.modelContext) private var modelContext
    @Query(filter: #Predicate<PomodoroItem> { pomodoro in
        pomodoro.project.name == "test project"
    }) var pomodori: [PomodoroItem]
    @State var isPresented = false
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(pomodori) { pomodoro in
                    Text(pomodoro.name)
                }.onDelete(perform: deletePomodoro)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
                ToolbarItem {
                    Button(action: {isPresented = true}) {
                        Label("Add Pomodoro", systemImage: "plus")
                    }
                }
            }.sheet(isPresented: $isPresented, content: {
                PomodoroView()
            })
        }
    }
    private func deletePomodoro(offsets: IndexSet) {
        withAnimation {
            for index in offsets {
                modelContext.delete(pomodori[index])
            }
        }
    }
}

The query is:

@Query(filter: #Predicate<PomodoroItem> { pomodoro in
        pomodoro.project.name == "test project"
    }) var pomodori: [PomodoroItem]

Simple, and we can also add more conditions, but statically. While this might be straightforward, it’s not always helpful. It’s better to have a dynamic query.

Dynamic Query

We have to create a view for the list, with the initializer where we execute the query:

struct ListFilteredView: View {
    @Environment(\.modelContext) private var modelContext
    @Query var pomodori: [PomodoroItem]
    var searchString = ""
    
    init(sort: SortDescriptor<PomodoroItem>, searchString: String) {
        _pomodori = Query(filter: #Predicate {
            if searchString.isEmpty {
                return true
            } else {
                return $0.project.name.contains(searchString)
            }
        }, sort: [sort])
    }
    var body: some View {
        List {
            ForEach(pomodori) { pomodoro in
                Text(pomodoro.name)
            }
        }
    }
}

So i nthe init the quesry is filtered. Note that we call pomodori with _pomodori, the backup property of the @Query.

The PomodoriView changes in this way:

struct PomodoriView: View {
    @Environment(\.modelContext) private var modelContext
    @Query var pomodori: [PomodoroItem]
    @State var searchString = ""

    var body: some View {
        NavigationStack {
            ListFilteredView(sort: SortDescriptor(\PomodoroItem.project.name), searchString: searchString)
            .searchable(text: $searchString)
        }
    }
    private func deletePomodoro(offsets: IndexSet) {
        withAnimation {
            for index in offsets {
                modelContext.delete(pomodori[index])
            }
        }
    }
}

Note that apart from passing the search string, we also pass the sort option, in this case sorting by the project name associated with the Pomodoro.

Note: English is not my native language, so I apologize for any errors. I use AI solely to generate the banner of the post; the content is human-generated.

In the previous episode, we learned how to create a project with SwiftData, how to create relationships between entities, and how to insert data. In this episode, we’ll learn: How to delete data.

Let’s start with deletion in the projects (I advise you to take a look at the previous episode because I will start from that code). The first step is to ensure that when we delete a project, we also delete all the pomodoros for that project in cascade. To do that, we need to make some small changes to the ProjectItem definition.

import Foundation
import SwiftData

@Model
final class ProjectItem: Identifiable {
    var name: String
    var id = UUID().uuidString

    @Relationship(deleteRule: .cascade, inverse: \PomodoroItem.project)
    var pomodori = [PomodoroItem]()
    
    init(name: String) {
        self.name = name
    }
}

We add a @Relationship attribute for the deletion on the list of pomodoros associated with the project. The deletion will be in cascade, considering the inverse relationship that we have in the PomodoroItem (where we have project: ProjectItem) as you can see in the code:

import Foundation
import SwiftData

@Model
final class PomodoroItem {
    var start: Date
    var end: Date
    var project: ProjectItem
    var name: String
    
    init(start: Date, end: Date, project: ProjectItem, name: String) {
        self.start = start
        self.end = end
        self.project = project
        self.name = name
    }
}

Now take a look at the ProjectsView:

import SwiftUI
import SwiftData

struct ProjectsView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var projects: [ProjectItem]

    var body: some View {
        NavigationStack {
            List {
                ForEach(projects) { project in
                    Text(project.name)
                }.onDelete(perform: deleteProject)
            }
            .toolbar {
                ToolbarItem {
                    Button(action: {isPresented = true}) {
                        Label("Add Project", systemImage: "plus")
                    }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                } 
            }.sheet(isPresented: $isPresented, content: {
                ProjectView()
            })
        }
    }
    private func deleteProject(offsets: IndexSet) {
        withAnimation {
            for index in offsets {
                modelContext.delete(projects[index])
            }
        }
    }
}

We added an EditButton to the toolbar (one of the special buttons in SwiftUI). Tapping on this button will display the buttons to delete the rows. When you tap on one of these buttons, the deleteProjectFunction is called to delete the project.

The view for the pomodoros is similar:

struct PomodoriView: View {
    @Environment(\.modelContext) private var modelContext
    @Query private var pomodori: [PomodoroItem]
    @State var isPresented = false
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(pomodori) { pomodoro in
                    Text(pomodoro.name)
                }.onDelete(perform: deletePomodoro)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
                ToolbarItem {
                    Button(action: {isPresented = true}) {
                        Label("Add Pomodoro", systemImage: "plus")
                    }
                }
            }.sheet(isPresented: $isPresented, content: {
                PomodoroView()
            })
        }
    }
    private func deletePomodoro(offsets: IndexSet) {
        withAnimation {
            for index in offsets {
                modelContext.delete(pomodori[index])
            }
        }
    }
}

This tutorial may seem short, but I encourage you to experiment with deletion and relationships. In the next episode, we will see how to update items and create queries.

With this post, a short series about SwiftData begins. The goal of this tutorial is to learn SwiftData by building a Pomodoro app (we’ll be using code from another one of my tutorials). SwiftData replaces CoreData, and I can say that CoreData is a pain for any iOS developer. With SwiftData, things are much simpler. Enough with the introduction, let’s start.

In this post, we’ll cover:

• How to create a project with SwiftData
• How to create entities
• How to create relations between entities
• How to display data
• How to insert data

How do you create a project that needs SwiftData? Simply take a look at the screenshot:

So, in the storage section, choose SwiftData. This will automatically add the necessary code to your …App file. You should have something like this:

import SwiftUI
import SwiftData

@main
struct SavePomodoroAppApp: App {
    var sharedModelContainer: ModelContainer = {
        let schema = Schema([
            Item.self,
        ])
        let modelConfiguration = ModelConfiguration(schema: schema, isStoredInMemoryOnly: false)

        do {
            return try ModelContainer(for: schema, configurations: [modelConfiguration])
        } catch {
            fatalError("Could not create ModelContainer: \(error)")
        }
    }()

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .modelContainer(sharedModelContainer)
    }
}

The sharedModelContainer is the ModelContainer that is created considering the schema and the configuration. Note that in the configuration, it is possible to define whether we want to store the data only in memory or not.

How do you create an entity? Use the keyword model:

import Foundation
import SwiftData

@Model
final class ProjectItem: Identifiable {
    var name: String
    var id = UUID().uuidString
    init(name: String) {
        self.name = name
    }
}

In this case, we want to create an entity Project that has a name and a UUID identifier (for this reason, we specify the protocol Identifiable).

Now, how do we create relations between entities? Suppose we want an entity Pomodoro where every pomodoro has a project:

import Foundation
import SwiftData

@Model
final class PomodoroItem {
    var start: Date
    var end: Date
    var project: ProjectItem
    var name: String
    
    init(start: Date, end: Date, project: ProjectItem, name: String) {
        self.start = start
        self.end = end
        self.project = project
        self.name = name
    }
}

Simply, we add a variable project of type ProjectItem.

Now we can change the schema in the …App file:

@main
struct SavePomodoroAppApp: App {
    var sharedModelContainer: ModelContainer = {
        let schema = Schema([
            PomodoroItem.self,
            ProjectItem.self,
        ])
        . . . 
}

How to display data?

First, create the main view for our application:

struct ContentView: View {
    var body: some View {
        TabView {
            PomodoriView()
            .tabItem {
                Label("Pomodori", systemImage: "calendar.day.timeline.left")
            }
            ProjectsView()
            .tabItem {
                Label("Projects", systemImage: "list.bullet")
            }
        }
    }
}

So, two tabs: one for Pomodoro and another for Projects.

Take a look at the PomodoriView to see how to display data:

import SwiftUI
import SwiftData

struct PomodoriView: View {
    @Query private var pomodori: [PomodoroItem]
    @State var isPresented = false
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(pomodori) { pomodoro in
                    Text(pomodoro.name)
                }
            }
            .toolbar {
                ToolbarItem {
                    Button(action: {isPresented = true}) {
                        Label("Add Pomodoro", systemImage: "plus")
                    }
                }
            }.sheet(isPresented: $isPresented, content: {
                PomodoroView()
            })
        }
    }
}

So, with the Query, we load all the PomodoroItem and display them in a list.

The view for the projects is similar:

struct ProjectsView: View {
    @Query private var projects: [ProjectItem]
    @State var isPresented = false
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(projects) { project in
                    Text(project.name)
                    
                }
            }
            .toolbar {
                ToolbarItem {
                    Button(action: {isPresented = true}) {
                        Label("Add Project", systemImage: "plus")
                    }
                }
            }.sheet(isPresented: $isPresented, content: {
                ProjectView()
            })
        }
    }
}

Both of these views have an add button. By tapping on it, we can insert a project or a pomodoro. Take a look at the project:

import SwiftUI
import SwiftData

struct ProjectView: View {
    @Environment(\.modelContext) private var modelContext
    @Environment(\.dismiss) private var dismiss
    @State var projectName = ""
    
    var body: some View {
        VStack {
            TextField("Project name", text: $projectName)
            Button("Save") {
                let newProject = ProjectItem(name: projectName);
                modelContext.insert(newProject)
                dismiss()
            }

        }.padding()
    }
}

In this view, we declare an environment to call the modelContext to operate on the data and the dismiss to close the sheet.

In the action of the save button, we create a ProjectItem with a name and save it.

The process to create a pomodoro is a bit different:

import SwiftUI
import SwiftData

struct PomodoroView: View {
    @Environment(\.modelContext) private var modelContext
    @Environment(\.dismiss) private var dismiss
    @Query private var projects: [ProjectItem]
    @State var selectedProject: ProjectItem?
    @State var pomodoroName: String = ""
    
    var body: some View {
        VStack {
            Picker("Please choose a project", selection: $selectedProject) {
                            ForEach(projects) { project in
                                Text(project.name)
                                    .tag(Optional(project))
                            }
                        }
            TextField("Pomodoro name", text: $pomodoroName)
            Button("Start") {
                let pomodoro = PomodoroItem(start: Date(), end: Date(), project: selectedProject!, name: pomodoroName)
                modelContext.insert(pomodoro)
                dismiss()
            }
        }
    }
}

In this case, considering that every pomodoro has a project, we load all the projects and display the project names using a picker. Please note that in the picker, we use the tag with Optional (because we can select nothing). If we omit this, we get an error: “Picker: the selection ‘nil’ is invalid and does not have an associated tag, this will give undefined results.” If you tap on the picker, nothing happens.

For now, the start button doesn’t start anything, but we simply save the pomodoro by assigning a project name and the current date.

The code https://github.com/niqt/SavePomodoroApp

Note: English is not my native language, so I apologize for any errors. I use AI solely to generate the banner of the post; the content is human-generated.

In Swiftui we have three special purpose buttons:

• EditButton
• RenameButton
• PasteButton

EditButton

Clicking on the EditButton, the items of the list are displayed with the delete (if onDelete is defined) and move (if onMove is defined) actions. Take a look at the code:

struct ContentView: View {
    var names = ["nicola", "tom"]
    @State private var pastedText: String = ""
    
    var body: some View {
        NavigationStack {
            List {
                ForEach (names, id:\.self) { name in
                    Text(name)
                    
                }
                .onDelete(perform: {_ in
                    
                })
                .onMove(perform: { indices, newOffset in
                    
                }) 
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
            }
        }
    }
}

Very simple and powerful button.

RenameButton

The RenameButton is displayed as a pencil icon and triggers the rename action.

The code:

struct ContentView: View {
    var names = ["nicola", "tom"]
    @State private var pastedText: String = ""
    
    var body: some View {
        NavigationStack {
            List {
                ForEach (names, id:\.self) { name in
                    Text(name)
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    RenameButton()
                }
            }.renameAction {
                // Your code
            }
        }
    }
}

PasteButton

Clicking on the PasteButton pastes the code that we copied earlier from another place (in this case, it was copied by X).

Take a look at the code:

struct ContentView: View {
    @State private var pastedText: String = "

    var body: some View {
        VStack {
            PasteButton(payloadType: String.self) { strings in
                pastedText = strings[0]
            }
            Divider()
            Text(pastedText)
            Spacer()
        }
    }
}

Thus, tapping the button pastes the item (in this case, a string, which is copied into a string variable).

If you want to copy and paste an image, the code is this:

import SwiftUI
import UniformTypeIdentifiers

struct ContentView: View {
    @State private var image: UIImage?

    var body: some View {
        VStack {
            PasteButton(supportedContentTypes: [UTType.image]) { info in
                for item in info {
                    item.loadObject(ofClass: UIImage.self) { item, error in
                        if let img = item as? UIImage {
                            image = img
                        }
                    }
                }
            }
            Divider()
            Image(uiImage: image ?? .init())
        }
        .padding()
    }
}

Happy buttons.

Note: English is not my native language, so I apologize for any errors. I use AI solely to generate the banner of the post; the content is human-generated.

In this post, we will learn how to create a simple Pomodoro timer using user notifications. The goal is to start a 25-minute timer, and when it expires, we will see a notification on the home screen.

We follow these steps:

• Define the user permission for local notifications.
• Take a look at the user notification properties.
• Implement the app.

Privacy and Permissions

First of all, we have to add the “Privacy – User Notifications Usage Description” to the Info.plist to define the reason for the user notification.

UserNotification

Second, how to declare a UserNotification:

UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { success, error in
        if success {
            let content = UNMutableNotificationContent()
            content.title = "Pomodoro elapsed"
            content.subtitle = "Take a break"
            content.sound = UNNotificationSound.default
            
            let trigger = UNTimeIntervalNotificationTrigger(timeInterval: Double(25 * 60), repeats: false)
            
            let request = UNNotificationRequest(identifier: UUID().uuidString, content: content, trigger: trigger)
            
            UNUserNotificationCenter.current().add(request)
        } else if let error {
            print(error.localizedDescription)
        }
    }

The first step is to request authorization. This will display a message asking for the user’s approval (only the first time, if the user accepts). If we get authorization, we create the content of the notification with a title, subtitle, and default sound. Next, we create a timer for the notification, create the request for the notification, and add it to the notification center. Note that we create a unique identifier for the notification using UUID().uuidString.

The pomodoro App

The last step is to add a timer to count the elapsed time (for the Pomodoro) and put everything together.

import SwiftUI
import UserNotifications

struct ContentView: View {
    @State var timer: Timer.TimerPublisher = Timer.publish(every: 1, on: .main, in: .common)
    let pomodoroLength = 25 * 60
    @State var counter = 0
    @State var timeString = "25:00"
    @State var hasPermission = false
    
    var body: some View {
        VStack(spacing: 10) {
            Button("Start pomodoro") {
                if hasPermission {
                    counter = 0
                    timeString = "25:00"
                    setTimer()
                    timer.connect()
                    
                    let content = UNMutableNotificationContent()
                    content.title = "Pomodoro elapsed"
                    content.subtitle = "Take a break"
                    content.sound = UNNotificationSound.default
                    
                    let trigger = UNTimeIntervalNotificationTrigger(timeInterval: Double(pomodoroLength), repeats: false)
                    
                    let request = UNNotificationRequest(identifier: UUID().uuidString, content: content, trigger: trigger)
                    
                    UNUserNotificationCenter.current().add(request)
                }
            }
            Text("\(timeString)").onReceive(timer, perform: { _ in
                counter += 1
                
                let remaining = pomodoroLength - counter
                let minutes = remaining / 60
                let secs = remaining % 60
                timeString = "\(minutes):\(secs)"
                if counter == pomodoroLength {
                    timer.connect().cancel()
                }
            })
        }.onAppear {
            UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { success, error in
                if success {
                    hasPermission = true
                } else if let error {
                    print(error.localizedDescription)
                }
            }
        }
    }
    func setTimer() {
        self.timer = Timer.publish(every: 1, on: .main, in: .common)
    }
}

We need to import UserNotifications, then define a timer, the Pomodoro length in seconds, the initial string minutes:seconds value, and a counter to count the elapsed time. We also introduce a hasPermission variable that is set when the application starts, so we don’t need to check the authorization every time.

When we tap on “Start Pomodoro”, the notification is created with its timer, and the counter is initialized. Every second, we calculate the remaining time and display it until it equals zero, then the timer is stopped. If everything is set up correctly, we should see a notification.

For testing, I suggest setting the Pomodoro time to a few seconds, but at least enough to lock the screen or switch applications (otherwise you won’t see the notification).

The code https://github.com/niqt/PomodoroApp

Note: English is not my native language, so I apologize for any errors. I use AI solely to generate the banner of the post; the content is human-generated.