Supabase×SwiftUIで、お手軽ToDoアプリ開発

Supabaseとは

Supabaseとは、BaaS(Backend as a Service)と呼ばれるサービスの1つで、データベース・認証・ストレージなどの様々な機能を提供しています。
今回Supabaseを触ってみようと思ったきっかけは、データベースで RDBMS(PostgreSQL)
を利用できることです。FirebaseのNoSQLを利用している際に届かなかった、かゆいところに手が届きます。
また、今回実験した範囲であれば、クレカ登録無しで試せるので気軽に遊べます。

今回作るもの

簡易的なCRUD機能を持つToDoアプリを作ります。フロントはSwiftUI、バックエンドにSupabaseを利用します。

操作	説明
C	新規タスク登録
R	SupabaseのDBよりタスクの読み込み
U	完了/未完了ステータスの更新
D	タスクの消去

Supabaseライブラリの導入

Swift Package Manager(SPM)よりライブラリを追加します。

インポートしたところ、"No such modele 'Supabase'"のエラーが出て、正しく認識されず。

TARGETに追加されていないことが原因のようでした。TARGETSのGeneralタブの Frameworks, Libraries, and Embedded Contentに追加することで解決できました。以下の記事を参考にしました。

Supabaseでプロジェクト作成

以下の要素を持つtodosテーブルを作成する。

• id
• title（タスク名）
• is_completed（完了/未完了フラグ）

サイドバー→Authentication→Policiesより簡易的なポリシーを設定しました。
今回は認証無しで作成しました。

alter policy "todos_policy"
on "public"."todos"
to public
using (
  true
);

クライアントからのAPI呼び出し

SupabaseClientの設定

let supabase = SupabaseClient(
    supabaseURL: URL(string: APIKey.URL)!,
    supabaseKey: APIKey.KEY
)

タスクの追加

func addTodo(title: String) async {
        do {
            let newTodo = Todo(id: nil, title: title, isCompleted: false)
            try await supabase
                .from("todos")
                .insert(newTodo)
                .execute()
            await fetchTodos()
        } catch {
            print("Error adding todo: \(error)")
        }
    }

タスクの取得

func fetchTodos() async {
        do {
            let data = try await supabase
                .from("todos")
                .select()
                .execute()
                .data
            let todos = try JSONDecoder().decode([Todo].self, from: data)
            await MainActor.run {
                self.todos = todos
            }
        } catch {
            print("Error fetching todos: \(error)")
        }
    }

タスク状況の更新

func updateTodo(_ todo: Todo) async {
        do {
            try await supabase
                .from("todos")
                .update(todo)
                .eq("id", value: todo.id!)
                .execute()
            await fetchTodos()
        } catch {
            print("Error updating todo: \(error)")
        }
    }

タスクの削除

func deleteTodo(_ todo: Todo) async {
        do {
            try await supabase
                .from("todos")
                .delete()
                .eq("id", value: todo.id!)
                .execute()
            await fetchTodos()
        } catch {
            print("Error deleting todo: \(error)")
        }
    }

GUI上からDB操作可能です。

サイドバーのSQL Editorよりクエリ実行が可能です。

最後に

SwiftUIで実装したこともあり、ToDoアプリがとても簡単に実装できました。皆様も良ければ遊んで見てください。個人的には1人ハッカソンで、バックエンドをSupabaseに全部任せたいです！

参考

Supabase社のエンジニアのタイラーさんが色々なSupabase活用例を公開しています。
数年前から話題になっているSupabaseですが、今後より一層人気が高まるのではないでしょうか！