React、Vite & Shadcnを使用してカスタムフロントエンドアプリを構築する#

#目的

このガイドでは、React Shadcn Viteアプリケーションテンプレートを紹介します。これは、Data PlatformのFront APIの上に完全にカスタマイズされたフロントエンドアプリケーションを構築するための、開発者向けのスタートキットです。

このテンプレートは、アプリケーションコードへの完全な制御を提供し、開発者が最新のフロントエンド技術を使用して、カスタマイズされたデータアプリケーションを構築できるようにします。ドラッグアンドドロップ式の低コード体験を希望する場合は、ビジュアルアプリビルダーを使用してください。

#必要条件

このテンプレートを使用するには、まずプラットフォーム上で次の手順を完了してください：

• Lakehouse Managerスキーマが構築され、データが入力されています。
• Data Processing Engineワークフローが正常に実行されました。
• Analytics Managerでクエリが作成されました。
• Front APIがデプロイされ、実行されています。
• Node.js（v22以上）がマシンにインストールされています。

#含まれるもの

#テクノロジースタック

#モジュール

このテンプレートには、3つの組み込みモジュールが付属しています：

#ts-sdk：Data Platform SDK

プラットフォームとの通信を処理するコアモジュールです。このモジュールは、次の機能を提供します：

• DataPlatformApi：IAM（Identity Access Manager）とFront APIの両方に対してAxiosインスタンスを管理するAPIサービス。
• Axiosインターセプターを使用した自動トークン注入を、すべてのリクエストで実行します。
• POST /qb/queryを使用したクエリ実行で、Analytics Managerクエリからデータを取得します。
• ブランディングと認証設定のためのアプリケーション設定を取得します。
• public/environments-vars.jsonから読み込まれた環境設定。

#rts-authentication：認証

完全な認証システムを提供します：

• 標準的な資格情報とOAuthプロバイダーの両方に対応したログインページ。
• マルチファクター認証（MFA）：メール、SMS、認証アプリ。
• 自動更新（15分ごと）とトークン期限切れ処理を備えたセッション管理。
• 強度検証を備えたパスワード変更フロー。
• localStorageに保持されたZustandベースのセッションストア。

#rts-charts：チャートコンポーネント

Rechartsを使用して構築された、使用準備が整ったデータ可視化コンポーネント：

• <Chart />：QueryRequestを受け入れるラッパーコンポーネントで、Front APIに対してクエリを実行し、結果をレンダリングします。
• サポートされているチャートタイプ：棒グラフ、折れ線グラフ、円グラフ。
• <Table />：表形式のクエリ結果用のデータテーブルコンポーネント。
• ビルトインの読み込み状態とエラーメッセージ。
• フィールド値を読みやすいラベルに変換するための辞書サポート。

#プロジェクト構造

├── public/
│   └── environments-vars.json          # API & IAM endpoints configuration
├── src/
│   ├── main.tsx                        # Application entry point
│   ├── routes.tsx                      # Route definitions
│   ├── components/
│   │   └── ui/                         # Shadcn/UI components
│   ├── config/
│   │   └── i18n/                       # Translation files (EN/FR)
│   ├── contexts/                       # React contexts (Auth, Dictionaries, etc.)
│   ├── forepaas/                       # Data Platform modules
│   │   ├── ts-sdk/                     # SDK module
│   │   ├── rts-authentication/         # Authentication module
│   │   └── rts-charts/                 # Charts module
│   └── pages/
│       ├── Home.tsx                    # Landing page
│       └── dashboard/
│           ├── DashboardOne.tsx        # Example dashboard with PieChart + BarChart
│           └── DashboardTwo.tsx        # Example dashboard with LineChart + BarChart + Table
├── forepaas.json                       # Data Platform deployment configuration
├── vite.config.ts                      # Vite configuration
└── tailwind.config.ts                  # Tailwind CSS theming

#はじめに

#1. プラットフォーム上でアプリケーションを作成する

プロジェクトのホームページから、アプリケーションサービスを開き、アプリケーションを作成をクリックします。

ストアからReact Shadcn Viteテンプレートを選択し、アプリケーション名を入力し、確認します。

#2. 環境を設定する

テンプレートは、public/environments-vars.jsonで定義された2つのエンドポイントを介してプラットフォームに接続します：

{
  "IAM_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/cam?app_id=<APP_ID>",
  "API_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/<API_ID>"
}

#3. ローカルで実行する

npm install
npm run dev

開発サーバーはhttp://localhost:3333で開始します。

#4. ビルドとデプロイ

npm run build

これにより、/productionフォルダーにデプロイ可能なバンドルが生成されます。また、npm run zipを使用してデプロイ可能なアーカイブを作成することもできます。

プラットフォーム上では、アプリデプロイガイドで説明されている方法と同じように、ビルドとデプロイプロセスが動作します。

#クエリの操作

このテンプレートは、Front APIからデータを取得するためにQueryRequestオブジェクトを使用します。クエリリクエストには、次の内容が含まれます：

#例：Chicagoデータセットの使用

はじめにチュートリアルに従った場合、テンプレートにはChicago自転車乗車データセットと互換性のあるサンプルダッシュボードが含まれています。

1週間の平均乗車回数（PieChart）：

const query: QueryRequest = {
  data: {
    fields: { avg_rides_per_day_per_station: ["select"] }
  },
  scale: {
    fields: ["week_day"]
  },
  filter: {},
  dynamic_parameters: []
};

総乗車回数上位5駅（BarChart）：

const query: QueryRequest = {
  data: {
    fields: { rides: ["sum"] },
    limit: 5
  },
  scale: {
    fields: ["station_name"]
  },
  order: { rides: "desc" },
  filter: {},
  dynamic_parameters: []
};

これらのクエリは、<Chart />コンポーネントを使用してレンダリングされます：

<Chart
  title="1日あたりの平均乗車回数"
  type="pie"
  query={query}
  dictionary={weekDayDictionary}
/>

#テンプレートのカスタマイズ

このテンプレートは出発点です。上に独自のページ、コンポーネント、ビジネスロジックを開発することを想定しています。以下に、いくつかの一般的なタスクを示します：

#新しいページを追加する

1. src/pages/でコンポーネントを作成します。
2. src/routes.tsxでルートを追加します。
3. src/components/Menu.tsxでナビゲーションリンクを追加します。

#新しいチャートを追加する

<Chart />コンポーネントを独自のQueryRequestと一緒に使用します：

import Chart from "@forepaas/rts-charts/components/Chart";

<Chart
  title="カスタムチャート"
  type="bar"
  query={myQueryRequest}
/>

サポートされているタイプ：bar、line、pie。表形式のデータの場合は、<Table />コンポーネントを使用してください。

#翻訳を追加する

翻訳ファイルはsrc/config/i18n/にあります。en.jsonとfr.jsonの両方にキーを追加し、i18nextのuseTranslationフックを使用してください：

const { t } = useTranslation();
return <h1>{t("my.translation.key")}</h1>;

#テーマをカスタマイズする

Tailwind CSSのテーマ設定はtailwind.config.tsで行われます。テンプレートは、HSLベースのCSS変数を使用して、ライトモードとダークモードの両方をサポートしています。

Shadcn/UIコンポーネントは、Shadcn CLIを使用してカスタマイズまたは拡張できます。

#さらに詳しく

• Front API ドキュメント：API のカスタマイズと拡張方法を学びます。
• Identity Access Manager：認証プロバイダーとアクセス権を設定します。
• Analytics Manager：クエリを作成して管理します。
• Apps ドキュメント：ビジュアルなノーコード代替手段について学びます。

当社のソリューションのトレーニングや技術的な実装支援が必要な場合は、営業担当者にお問い合わせください。または、当社の専門家がプロジェクトを分析するために見積もりをリクエストするには、Professional Services ページをご覧ください。

Data Platform を構築するチームと直接質問したり、フィードバックを送信したり、交流したりするには、専用の Discord チャネル をご利用ください。

OVHcloud サービスについてサポートが必要な場合は、Help Centre でリクエストを作成してください。

ユーザーコミュニティ に参加します。