micomia株式会社の井上です。今回はsupabaseでのテーブル作成について解説していきます。
初心者にも分かりやすく解説していくのでぜひご一読ください。
1. Supabaseとの接続
今回はFirebaseではなくSupabaseを使用するのでFlutterFlowのApp SettingsにあるsupabaseをONにする必要があります。また、同時にsupabaseでもアカウントを作成し、API URLとAPI keyを入れたら準備は完了です。

2. Supabaseの使い方
supabaseに移動してtableを作成します。Nameはお好きなもので大丈夫です。

DescriptionもOptionalになっているので自由に入力できます。その下にあるColumnが重要な要素になっています。

まず、intは整数型の数字を入れるために使われるものです。その下のfloatは小数点ありの数字を指します。jsonはjavascriptの型で、APIなどでよく使用するものです。textとvarcharは大きな違いはなく、文字数制限をするときにはvarcharを使用することが多いです。

次にuuidは、何とも重なっていないユニークなIDが出てくるものです。dateはカレンダーのことで、year, month, dateを出すことができます。timeは時間、timezは時間がタイムゾーン込みで表示されます。timestampは日付と時間、timestampzは日付と時間がタイムゾーン込みで表示されます。boolはtrueかfalseかを設定できるものになっています。
SupabaseにはFirebaseのようにDocument Referenceが無いですが、そういったデータのやり取りに関してはPrimaryやForeign Keyを使用して行うことができます。Columnの箇所で作りたいものが作り終わったらSaveを押して変更を保存します。
FlutterFlowに戻って、先ほどと同じ画面でGet Schemaを押すとデータが更新されて先ほどの情報が反映されます。

これで完了です。
3. さいごに
今回はsupabaseでのテーブル作成について解説していきました。Firebaseと似ている点は多いものの、少しずつ違う部分があるので本記事を参考にしながら使用してみてください。
本記事の内容を動画で観たい方は以下をご覧ください。



.webp%3Falt%3Dmedia%26token%3Dcce7bd72-f11e-4292-86bf-e6ccf3e7bf32&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D457ff920-e0df-4ff5-95eb-e29f74b73823&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dc21fcc77-7404-458d-9eb5-85b8d84ae1bc&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D92052f12-5280-49df-877a-b514582e95db&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D5f10e078-4d87-4c87-928c-21b719cbf1cb&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D957b18b6-9b01-4c94-9207-7b9fca22a787&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dd952e11d-4461-47ae-892d-622fc3f2a48a&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D532bb657-5670-49b4-9165-5f758062d8dd&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D9cf3f36c-8f8d-476f-bfd8-37ba68b36dd8&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Da24af51c-e8e5-41fc-9f3b-602320816500&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D6a5c9316-446c-44e1-a233-d96072733e9e&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dac0633f1-86ae-4a06-956d-08a9b9c647f9&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dc8a8ec29-e50f-412e-9b19-3dea67f910c0&w=3840&q=75)

.webp%3Falt%3Dmedia%26token%3D132c7143-eee3-4d9d-90b7-002869eae424&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Db447159f-01cb-43d8-97a8-121802d03d89&w=3840&q=75)

.webp%3Falt%3Dmedia%26token%3D0ddf6c29-973e-41f2-886a-606c367f16a9&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D8e869338-c619-4b77-bda6-6a3fff356887&w=3840&q=75)