早速supabaseに入門します。

アカウントを作成、プロジェクトを作りダミーデータを入れてみる事でコンソールにも少し触れていきます。またFlutterで必要なAPIキー、APIURLの確認方法も学んでいきます。

github連携でアカウント作成

2022年2月時点ではGitHubアカウントでのみアカウント作成が可能なようです。

こちらのページからアカウントを作成します。https://app.supabase.io/

少し待つとプロジェクトが作成され、管理画面が出てきます。

Flutter用クイックスタート

こちらにFlutter用のクイックスタートがあり、今回はこちらを参考に進めていきます。

https://supabase.com/docs/guides/with-flutter

プロジェクト作成

New Projectボタンを押します。

そうすると、新規作成になるので入力します。

今回は下記を入力しました

  • Name…StartOfFlutterAndSupaBaseTest001
  • DataPassword…お好みのパスワード
  • Region…Northeast Asia(Tokyo)
  • Pricing Plan…Free tier

Setting up <データベース名>が出るのでしばらく待ちます。

StartOf <データベース名>と表示されれば作成完了です。

SQLエディターのクイックセットアップ

左のメニューの「SQL Editor」のアイコンを選択すると、SQLエディターが開きます。SQLを1から記述する他に、いくつかのテンプレートの中からSQLを自動生成してくれる便利な仕組みもあるようです。

今回は「User Management Starter」を選ぶとSQLが自動で生成されて表示されるのでRunを押します。

※補足※

ここで自動生成されるテンプレートを一部抜粋すると、下記のフィールドを持った「profiles」というテーブルを生成するようです。

  • [id]…auth.usersに紐づいたuuid(supabaseのauth情報にあるものじゃないとダメみたい)
  • [updated_at]…timestamp型
  • [username]…テキスト型
  • [avatar_url]…テキスト型
  • [website]…テキスト型
create table profiles (
  id uuid references auth.users not null,
  updated_at timestamp with time zone,
  username text unique,
  avatar_url text,
  website text,

  primary key (id),
  unique(username),
  constraint username_length check (char_length(username) >= 3)
);

テーブルエディタから確認

少しするとテーブルが完成します。

左メニューの「table Editor」アイコンをクリックして、「All tables」内にある「profiles」テーブル(今回生成したもの)をクリックすると、先ほど定義された要素の空テーブルが出来ている事を確認できます。

(テスト)ダミーデータを入れてみる

ちょっと寄り道になりますが、ここでコンソールの使い方に慣れてみるためにダミーデータを入れてみます。

ダミーユーザーを登録

左のメニューの「authentication」アイコン(人の形)を選択します。その後「Users」が選択されている事を確認します。

右の方に「Invite」があるのでこちらをクリックします。

存在しない適当なメールアドレスを入れて、inviteuserを押します。

そうするとユーザーが出来上がります。ユーザーの一意のIDを示す文字列のUser UIDをコピーしましょう。

テーブルにダミーデータを登録

左メニューの「table Editor」をクリックして「profiles」テーブルを選択した状態で、「Insart Now」ボタンを押します

そうすると、追加ウィンドウが出現します。

  • id…先ほどauthenticationでコピーしたUser UIDを貼り付けます。
  • updated_at…右側のアイコンタップで解りやすいGUIがあるので日時入力します
  • username…適当な文字列
  • avatar_url…適当な文字列
  • website…適当な文字列

これらを入れてSaveを押します。

Saveを押すと今入れたデータがデータベースに追加されます。

(テスト)ダミーデータの消去

ダミーデータは消しておきましょう。

テーブルのダミーデータ消去

作成されたテーブルデータの左側のチェックボックスにチェックを付けて、「Delete 1 row」をクリックします。

authenticationのダミーユーザー消去

作成されたユーザーの右側の「…」をクリックして、「Delete user」をクリックします。

APIキーとAPIURL

今後使っていくAPIキーとAPIURLはこちらから確認できます。

右メニューの「Setting」アイコン(歯車)をクリック、その隣のメニューから「API」をクリック。ここで表示される情報がAPIキーとAPIURLになります。

  • 「Project API keys」にある文字列がAPIキーです。
  • 「Config」にある「URL」がAPIURLです。

要注意

gitにソースコードを上げる場合、APIのURLとAPIキーが書かれているソースをアップすると悪用される恐れがあるので、絶対に書かれたものをアップしないでください。

gitにアップせずにキーを利用する方法は、探すと色々あります。こちらはその一例です。

https://qiita.com/kokogento/items/70f00301522cf1d942f0

https://zuma-lab.com/posts/flutter-hiding-api-key-with-dart-define

次のページはこちら