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