DEV Community

loading...

Simple Todo - Part 1 of 6

Related Code
Mobile Application Development. Scalable Architecture Design. Custom Backend Development. Application Security. Performance Engineering. Analytics. Maintenance.
・2 min read

To demonstrate the basic functionalities of GraphQLite, we will implement a simple Todo application. There will be 4 separate codebases, where more and more features will be added to the basic app.

The first implementation is a local database-only Todo app. No server-side implementation yet.

Screenshot

The database structure (in all four versions) shall be the following:

Name Type
objectId String
title String
completed Bool
deleted Bool
createdAt Date
updatedAt Date

Which would look something like this (by using GraphQLite):

class Todo: NSObject, GQLObject {

  @objc var objectId = UUID().uuidString
  @objc var title = ""
  @objc var completed = false
  @objc var deleted = false
  @objc var createdAt = Date()
  @objc var updatedAt = Date()

  class func primaryKey() -> String {
    return "objectId"
  }
}
Enter fullscreen mode Exit fullscreen mode

The String UUID primary key might seem a little bit overkill in a basic, local database-only version. But since we are planning to use the same database structure for all implementations, let's just stick with that.

Also, because of the multiple devices (server-side synced) versions, we use soft-delete over hard-delete. So whenever we need to delete a record from the database we just mark it as deleted, instead of actually deleting it.

Before doing anything else, we need to set up the GQLDatabase by using the following (we will use one common database instance for all database actions).

let gqldb = GQLDatabase()
Enter fullscreen mode Exit fullscreen mode

In the TodoView.swift file we set up a simple UITableView and list all the (non-deleted) todos from the local database.

class TodoView: UIViewController {

  @IBOutlet var tableView: UITableView!

  private var todos: [Todo] = []

  private var observerId: String?
}
Enter fullscreen mode Exit fullscreen mode
func loadTodos() {

  todos.removeAll()

  todos = Todo.fetchAll(gqldb, "deleted = ?", [false], order: "createdAt DESC")

  tableView.reloadData()
}
Enter fullscreen mode Exit fullscreen mode

For refreshing the tableView (whenever a todo is created or updated), we are setting up a database observer.

func observeTodos() {

  let types: [GQLObserverType] = [.insert, .update]

  observerId = Todo.createObserver(gqldb, types) { method, objectId in
    DispatchQueue.main.async {
      self.loadTodos()
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

As a result of the steps above, creating a new todo is pretty simple.

func createTodo(_ title: String) {

  let todo = Todo()
  todo.title = title
  todo.insert(gqldb)
}
Enter fullscreen mode Exit fullscreen mode

Also if a todo is completed (or deleted) by the user, we just need to use the following methods.

func completeTodo(_ todo: Todo) {

  todo.completed = true
  todo.updatedAt = Date()
  todo.update(gqldb)
}
Enter fullscreen mode Exit fullscreen mode
func deleteTodo(_ todo: Todo) {

  todo.deleted = true
  todo.updatedAt = Date()
  todo.update(gqldb)
}
Enter fullscreen mode Exit fullscreen mode

Screenshot

And pretty much that's all we need for the first working demo app. You can check the full source code here.

Discussion (0)