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

# Supabaseとは

![IMG_2311.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929259/00c6a5de-0216-e17b-edaa-913e722aeda6.png)

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/22ec107a-d2ce-8012-66cb-7b328e7e53f7.png" width="50%">

# Supabaseライブラリの導入
Swift Package Manager(SPM)よりライブラリを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/67e9646c-f419-80a8-e1db-c68b4c96806e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/ce459a95-9bfb-c9e8-e401-dcc21bf07992.png)

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

https://github.com/orgs/supabase/discussions/19764

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/0ad81438-8a18-64d9-17e3-801e06924063.png)

# Supabaseでプロジェクト作成
以下の要素を持つtodosテーブルを作成する。
- id
- title（タスク名）
- is_completed（完了/未完了フラグ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/751ad45c-5cdb-bc08-c469-4df07eaf46d3.png)

サイドバー→Authentication→Policiesより簡易的なポリシーを設定しました。
今回は認証無しで作成しました。
```
alter policy "todos_policy"
on "public"."todos"
to public
using (
  true
);
```

# クライアントからのAPI呼び出し
SupabaseClientの設定
```swift
let supabase = SupabaseClient(
    supabaseURL: URL(string: APIKey.URL)!,
    supabaseKey: APIKey.KEY
)
```
タスクの追加
```swift
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)")
        }
    }
```

タスクの取得
```swift
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)")
        }
    }
```

タスク状況の更新
```swift
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)")
        }
    }
```

タスクの削除
```swift
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操作可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/f54815d3-090a-80f2-3429-bc1285ed9ff7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1795015/19f77c88-25bf-d1cf-17dd-f7ec926544e0.png)

![20241212_103639.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929259/c743f031-de90-37aa-62ff-3da0fcbe6175.gif)


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

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

https://qiita.com/dshukertjr