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

#Objective

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

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

#Requirements

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

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

#What's included

#Tech stack

#Modules

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

#ts-sdk: Data Platform SDK

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

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

#rts-authentication: Authentication

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

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

#rts-charts: Chart components

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

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

#Project structure

├── 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

#Getting started

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

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

ストアから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を使用してデプロイ可能なアーカイブを作成することもできます。

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

#Working with queries

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

#Example: using the Chicago dataset

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

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}
/>

#Customizing the template

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

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

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

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

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

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 ドキュメント：ビジュアルノーコード代替案について学びます。

当社のソリューションを実装するためのトレーニングや技術支援が必要な場合は、営業担当者にお問い合わせください、またはこのリンクをクリックして見積もりを取得し、当社のプロフェッショナルサービスの専門家にプロジェクトのカスタム分析を依頼してください。

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

OVHcloud サービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。

ユーザーコミュニティに参加してください。