FlutterとSupabaseでRDBを使った
サーバーレスアプリ開発
2023年2月15日 @Flutter Meetup Tokyo / Osaka

● オーストリア生まれの日米ハーフ
● SupabaseにてDevRelとFlutter SDK
のメインテイナーを担当
● Flutter・Next.jsを使った開発が主
タイラー
@dshukertjrjp

Supabase

Database
全てのプロジェクトに
PostgreSQLを提供。リアルタ
イム機能も対応でスケールす
るアプリ開発を支援。
Auth
メールアドレスやOAuthを使っ
た認証を簡単に実装。データ
ベースにもセキュアにアクセ
ス！
S3のストレージにクライアント
からセキュアにアクセスできる
仕組みを提供。
Storage
Denoを使ってEdge
Functionsを簡単にデプロイ。
Functions
オープンソースのFirebase代替品

Twitterクローンを通じて機能を見てみる
- シンプルな認証
- データの正規化
- アプリ側から柔軟にクエリー
- DBのセキュリティルール
- リアルタイムにデータの取得
- 【おまけ】Geoデータのクエリーも得意
これら全てがサーバーレスのSQLデータベースでできる感
動 😭

- supabase_flutterをpubspec.yamlに追
加
- supabase.comへ行きプロジェクト作成
- 設定画面にあるプロジェクトURLとプロ
ジェクトAnonKeyをmain()にコピペする
だけ
シンプルなセットアップ
Future<void> main() async {
await Supabase.initialize(
url:
'https://ocirvypwbozqgpnzmlei.supabase.co',
anonKey: 'my_anon_key',
);
runApp(child: MyApp());
}

- メールアドレスのみでのログイン（通称
マジックリンクログイン）
- メアド＋パスワード
- OAuthを使ったログイン
- 多要素認証
シンプルな認証
await supabase.auth.signInWithOtp(
email: email,
emailRedirectTo: 'com.supabase://login',
);

- Row Level Security (行レベルセキュリ
ティ)を使ってアクセスを制限
- 型（スキーマ）はテーブルを定義したと
きに決まっているからルールはスッキリ
- クライアント側では全データを読み込も
うとしても自動的に閲覧権限のある
データのみ返される
フィルターにもなるセキュリティルール
await supabase
.from('notifications')
.select()
.order('created_at')
.limit(20);

- RDBで普通にテーブル設計
- select().from().order()のようにSQLラ
イクな記法
- GraphQL的な雰囲気で関連テーブル
の情報にアクセス
- countなどの情報も一発でクエリー
- Postgresにできることはなんでもできる
柔軟性
RDBなのでデータを正規化させスッキリ
final data = await supabase
.from('posts')
.select('''
*,
user:profiles(*),
like_count:likes(count),
my_like:likes(count)
''')
.eq('my_like.user_id', myUserId)
.order('created_at')
.limit(20);

- .stream()メソッドを使って簡単にリアル
タイムデータを取得
- 「プレゼンス」機能も標準装備
- Broadcast機能を使って遅延の少ない
クライアント間通信も
リアルタイムデータ
supabase
.from('messages')
.stream(primaryKey: ['id'])
.order('created_at')
.listen();

- ストレージもRow Level Securityでアク
セス制限
- 大きいサイズの画像だけ上げておいて
動的にサムネイルを取得
ストレージ
await supabase
.storage
.from('posts')
.upload(imagePath, imageFile);

- 日本語にも対応した全文検索インデッ
クスエンジンpgroonga対応
- Database Functionを使って簡単に検
索
全文検索
create index pgroonga_content_index
on posts
using pgroonga (body)
with (tokenizer='TokenMecab');
final List data = await supabase
.rpc('search_posts', params: {
'query': query,
});

- 特定のテーブルでのイベントに対し
て発火
- 他のテーブルのデータを書き換えた
り、Webhookを発火したりできる
データベーストリガー
create or replace function public.handle_likes()
returns trigger
language plpgsql
security definer set search_path = public
as $$
declare
notifier_id uuid;
begin
select user_id
into notifier_id
from public.posts
where id = new.post_id
and user_id != new.user_id;
if found then
insert into public.notifications (type,
notifier_id, actor_id, entity_id)
values ('like', notifier_id, new.user_id,
new.post_id);
end if;
return new;
end;
$$;

- Postgisを使って地理データ管理・クエ
リー
- 距離が近い順に並べ替え
- 特定の長方形の中のデータをクエリー
PostgresだからGeoデータにも強い

その他メリット
● ビルドが速い！
○ ライブラリーが軽いから起動まであっという間。
● ビルドエラーになりにくい！
○ Platform channelsを使っていないので謎のバージョンコンフリクトが発生しに
くい

こんな人に使ってもらいたい
SQLをよく知っている人
- 生のPostgreSQLが提供されているので使い方は自在
- 既存のPostgreSQL上で動いているサービスの移行も楽
SQLをまだ知らない人
- GUIから操作ができる
- 使っていくうちにSQL・PostgreSQLに詳しくなる
【PostgreSQLだから効率的に開発できる】

Demo

Build in a weekend, scale to millions

Links
- Twitter Cloneレポジトリー
- Supabase Website
- Supabaseレポジトリー
- Twitter @dshukertjrjp
- Supabaseを使ったGeoデータの取り扱い方ガイド