![- .stream()メソッドを使って簡単にリアル
タイムデータを取得
- 「プレゼンス」機能も標準装備
- Broadcast機能を使って遅延の少ない
クライアント間通信も
リアルタイムデータ
supabase
.from('messages')
.stream(primaryKey: ['id'])
.order('created_at')
.listen();](https://image.slidesharecdn.com/fluttergakkai2023-230128111920-4e4df885/85/Flutter-Supabase-RDB-11-320.jpg)
FlutterとSupabaseでRDBを使った サーバーレスアプリ開発
- 2. ● オーストリア生まれの日米ハーフ ● SupabaseにてDevRelとFlutter SDK のメインテイナーを担当 ● Flutter・Next.js・Node.jsを使った開発 が主 ● 猫が大好き 😻 タイラー @dshukertjrjp
- 3. ● Supabaseとは？ ● ユースケース ● デモンストレーション
- 4. Supabase
- 6. Twitterクローンを通じて機能を見てみる - シンプルな認証 - データの正規化 - アプリ側から柔軟にクエリー - DBのセキュリティルール - リアルタイムにデータの取得 - 【おまけ】Geoデータのクエリーも得意 これら全てがサーバーレスのSQLデータベースでできる感 動 😭
- 7. - supabase.comへ行きプロジェクト作成 - 設定画面にあるプロジェクトURLとプロ ジェクトAnonKeyをmain()にコピペする だけ めっちゃシンプルなセットアップ Future<void> main() async { await Supabase.initialize( url: 'https://ocirvypwbozqgpnzmlei.supabase.co', anonKey: 'my_anon_key', ); runApp(const ProviderScope(child: MyApp())); }
- 8. - メールアドレスのみでのログイン（通称 マジックリンクログイン） - 王道のメアド＋パスワード - OAuthを使ったログイン - 多要素認証 シンプルな認証 await supabase.auth.signInWithOtp( email: email, emailRedirectTo: 'com.supabase://login', );
- 9. - Row Level Security (行レベルセキュリ ティ)を使ってアクセスを制限 - 型（スキーマ）はテーブルを定義したと きに決まっているからルールはスッキリ - クライアント側では全データを読み込も うとしても自動的に閲覧権限のある データのみ返される フィルターにもなるセキュリティルール await supabase .from('notifications') .select() .order('created_at') .limit(20);
- 10. - 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);
- 11. - .stream()メソッドを使って簡単にリアル タイムデータを取得 - 「プレゼンス」機能も標準装備 - Broadcast機能を使って遅延の少ない クライアント間通信も リアルタイムデータ supabase .from('messages') .stream(primaryKey: ['id']) .order('created_at') .listen();
- 12. - ストレージもRow Level Securityでアク セス制限 - 大きいサイズの画像だけ上げておいて 動的にサムネイルを取得 ストレージ await supabase .storage .from('posts') .upload(imagePath, imageFile);
- 13. - ストレージもRow Level Securityでアク セス制限 - 大きいサイズの画像だけ上げておいて 動的にサムネイルを取得 ストレージ await supabase .storage .from('posts') .upload(imagePath, imageFile);
- 14. - 日本語にも対応した全文検索インデッ クスエンジン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, });
- 15. - 特定のテーブルでのイベントに対し て発火 - 他のテーブルのデータを書き換えた り、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; $$;
- 16. - Postgisを使って地理データ管理・クエ リー - 距離が近い順に並べ替え - 特定の長方形の中のデータをクエリー PostgresだからGeoデータにも強い
- 17. その他メリット ● ビルドが速い！ ○ ライブラリーが軽いから起動まであっという間。 ● ビルドエラーになりにくい！ ○ Platform channelsを使っていないので謎のバージョンコンフリクトが発生しに くい
- 18. こんな人に使ってもらいたい SQLをよく知っている人 - 生のPostgreSQLが提供されているので使い方は自在 - 既存のPostgreSQL上で動いているサービスの移行も楽 SQLをまだ知らない人 - GUIから操作ができる - 使っていくうちにSQL・PostgreSQLに詳しくなる 【PostgreSQLだから効率的に開発できる】
- 19. Demo
- 20. Build in a weekend, scale to millions
- 21. Links - Twitter Cloneレポジトリー - Supabase Website - Supabaseレポジトリー - Twitter @dshukertjrjp - Supabaseを使ったGeoデータの取り扱い方ガイド