Catch Tech
トップ
記事一覧

Material UIのToolpad Studioを使ってみた！

Material UIのToolpad Studioを使ってみた！

2024/09/07 00:51

ダッシュボードを開発することになり、最適なUI Kitを探す旅に出ることになりました🧳
そこで、ローコードでダッシュボードが作れそうな「Toolpad Studio」というものが「Material UI」から出ていたので、早速触ってみました！

TL;DR

  • 環境構築の整備はできていなくて、自分で頑張らないといけなかった😥
  • 「Toolpad Studio」は、まだまだ使うには厳しかった😭
  • 今後の開発に期待！

その前に

今回の内容を実際に動かしてみるには、「Node.js」のインストールが必須になります。
もしまだインストールしていないという人は、こちらの記事を参考にインストールをしておいてください！

Node.jsのバージョンはv20にしておいてください。
（最新バージョンなどにしておくと、無視しても大丈夫ですが警告が出てきます。）

「Toolpad Studio」のプロジェクトを作る！

何はともあれ、とりあえず作ってみましょう！

supabaseのテンプレートがあったので、使ってみることに
（これが原因で大変になった、、、）

公式のsupabaseの例に記載されているコマンドをコピーしてください。

「Toolpad Studio」のプロジェクトを作成1

サイトを開くのが面倒な人向けに、コマンドはこちら！

npx create-toolpad-app@latest --example supabase

ターミナルに戻って、コピーしたコマンドを貼り付けて実行します。

「Toolpad Studio」のプロジェクトを作成2

実行すると、Macが「本当に作ってもいい？」確認してくるので、「y」と入力をしてあげます。

「Toolpad Studio」のプロジェクトを作成3

次に「作るディレクトリの名前どうする？」と聞いてくるので、好きな名前に設定します。
（自分は「toolpad-studio」にしました。）

「Toolpad Studio」のプロジェクトを作成4

ちょっと待つと、一旦プロジェクトの完成です！
ここからがちょっと大変です、、、

「Toolpad Studio」のプロジェクトを作成5

「Supabase」を準備する

次に「Supabase」のプロジェクトを作成します！
（詳しいプロジェクトの作り方は、別の記事で解説をします）

プロジェクトを作った後に、こちらのSQLを読み込みます。
（公式のサンプルで使えるテーブルの作成とデモデータの追加をしています。）
（RLSの設定を忘れがちなのでちゃんと設定してください！設定しないとデータが空になってしまいます。）

CREATE TABLE "public"."product_data" (
    "id" int8 NOT NULL,
    "name" text NOT NULL,
    "description" text NOT NULL DEFAULT ''::text,
    "date_added" date NOT NULL DEFAULT now(),
    "quantity" int2 NOT NULL,
    "price" float4 NOT NULL,
    "rating" float4 NOT NULL,
    "image" text NOT NULL,
    PRIMARY KEY ("id")
);

INSERT INTO "public"."product_data" ("id", "name", "description", "date_added", "quantity", "price", "rating", "image") VALUES
(1, 'LaptopPro', 'Powerful laptop for professional use.', '2023-11-01', 50, 799.95, 4.2, 'https://cdsassets.apple.com/live/SZLF0YNV/images/sp/111883_macbookair.png'),
(2, 'HeadphonesY', 'Immersive audio experience with noise cancellation.', '2023-11-01', 300, 79.99, 4.6, 'https://store.storeimages.cdn-apple.com/8567/as-images.apple.com/is/airpods-max-hero-select-202011?wid=940&hei=1112&fmt=jpeg&qlt=90&.v=1604709293000');

「Toolpad Studio」と「Supabase」を連携する

最後に、「Toolpad Studio」と「Supabase」を連携させます。

「Supabase」の設定で、「API」に載っている URL と API Key をメモします。

「Supabase」のURLとAPI Keyを取得

次に、さっき作った「Toolpad Studio」をエディタで開きます。
「toolpad > resources > supabase.ts」というファイルを開いてください。

supabaseUrl と supabaseKey に、今とってきた URL と API Key をそれぞれ貼り付けます。
（本当は環境変数にしたいですが、一旦触ってみるだけなので...）

「Toolpad Studio」にURLとAPI Keyを設定

これで連携は完了です！
お疲れ様でした！

動かしてみる！

実際に動かして触ってみましょう！
下のコマンドを実行してみると、、、

# 必要なnpmのパッケージをインストール
npm i

# 「Toolpad Studio」を起動する
npm run dev

「Toolpad Studio」を起動するコマンド

無事に表示されました！！
（テストデータの数の関係で、3つ目以降の表示はエラーになっています。）

「Toolpad Studio」を起動した画面

実際に操作してみた感想

公式ドキュメントに基本的な使い方が載っているので、ページを作ってみたりレイアウトを調整してみました！

触ってみて分かったのは、

  • テーブル表示でセルのカスタマイズはできない
  • 行を選択したら詳細ページに行くみたいな挙動を作るのは結構しんどそう
  • queryでAPIをとってくる部分はコードで書かないといけなそう

という感じでした、、、

まとめ

まだ使うには足りない機能が多く、今回は使えないなという感想でした、、
簡単なAPIで、一覧の表示だけ一旦欲しい時とかは使えそうでした！（ものすごく限定的ですが、、）

他にも、UI Kitを触ってみた感想などについてまとめていきます。
よかったら他の記事も読んでください〜

関連記事