フロントエンドアプリケーションの構築とデプロイ
このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません
目的
このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません。私たちは、事前構築されたグラフによりプロセスを加速させるためのテンプレートを準備しました。
Application Services からアプリケーションを開始し、アプリケーションの作成をクリックします。
ストアからテンプレート ReactJS - Getting Started を選択します。このテンプレートは完全なBIダッシュボードを生成します。
下記のスクリーンショットに示すように、異なるフィールドを入力し、確認を押します。
確認をクリックすると、アプリケーションが自動的に構築されデプロイされます。このプロセスには数分かかります。その間、下記の前提条件を読んでいただいて構いません。
必要条件
Getting Startedガイドのすべての前のステップが完了している必要があります:
- APIが稼働しています。
- Analytics Managerのクエリがデータウェアハウスを適切にリクエストしています。
- Lakehouse Managerに適切に構築された論理スキーマが表示されています。仮想属性が作成され、テーブルがリンクされています。
- データ処理エンジンのワークフローが正しく実行されています。
最初のダッシュボードを作成しましょう。
キャンバスの設定
Dashboard メニューをクリックします。アプリケーションでは、ダッシュボードはそのページです。
最初のダッシュボード Rides Analytics は、テンプレートを選択した際にデフォルトで追加されています。スタイルとロゴが付属しています!
家アイコンをクリックして、アプリケーションのデフォルトのランディングページに設定します。
ヘッダーの設定
Menus メニューに移動します。Menus メニューは、ヘッダーメニューやアプリケーション全体のフィルターなどの項目を定義できるページです。アプリケーションを開始するために使用したテンプレートにより、すでに複数のページと項目が事前入力されています。
ヘッダーページに到着するはずです。これは、ここで追加するすべての項目がアプリケーションのヘッダー(上部)に埋め込まれることを意味します。右上隅でサイドバーページ(アプリケーションの左サイドバーに項目を埋め込む)に切り替えることができます。
ヘッダーページに戻ります。タブを展開してコンテナの項目を確認します。タブを追加をクリックしてヘッダーにタブを追加します。リンクを選択します。
下記のようにフィールドを入力します。アプリケーションヘッダーのロゴアイコンも定義できます!
動的パラメータの設定
動的パラメータは、ページのデータをフィルタリングするためのウィジェットです。ここでは、日付でフィルタリングするための動的パラメータを1つ追加します。
右上隅のSidebarをクリックし、コンテナを作成します。
コンテナについて詳しくない場合は、それらを項目のフォルダと考えることができます。
新しいコンテナをフッター(下部にある必要があります)の上にドラッグします。
コンテナを開き、項目を追加します。Parametersを選択します。
Select box を選択し、新しいパラメータのオプションに移動します。
下記のスクリーンショットに示すようにオプションを入力します。
Infos タブで、次の名前を付けます:select_stations、そして確認を押します。
日付ピッカーやセレクトボックスなどのすべての動的パラメータはカスタマイズできます。その方法を学ぶには、アプリケーションコンポーネントの技術ドキュメントにアクセスしてください!
これでキャンバスの設定は完了です。メニューとフィルターがあれば、最初のグラフを作成できます。
チャートの設定
Dashboard タブに移動し、Ride Analytics ダッシュボードの編集アイコンをクリックします。 ここで作成したメニューとフィルターが正しく設定されていることがわかります!
ステップ1. パネルの作成
➕アイコンをクリックしてパネルを作成します(Containers > Panel)。
作成後、画面全体にわたってリサイズできます。
ステップ2. チャートにタイトルを付ける
新しいパネル内で、➕アイコンをクリックし、Basic UI > HTMLを選択します。
Rides history と名前を付け、HボタンをクリックしてH1スタイルを適用します。
ステップ3. チャートを生成する
パネル内で、➕アイコンをクリックし、Chartを選択します。Recharts - Bar タイプを選択します。
Requestをクリックし、Query selectorを選択して、Analytics Managerで作成したrides_per_monthクエリを選択します。
設定を完了するには、このチャートを既に作成したフィルターに接続する必要があります。Infos タブのLinked dynamic parameters セクションに移動し、select_stationsを追加します。
再生アイコンをクリックして読み取り専用モードに入り、日付や休日タイプを変更してデータがどのように変化するか確認できます。最初のチャートは完了です!
最初のダッシュボードはこれで完了です。外観をさらに改善することもできます。私たちのGetting Furtherガイドシリーズでは、さらに多くのチュートリアルを公開しています。アプリビルダーの機能についてさらに詳しく学ぶにはこちらをクリックしてください!
アプリの新しいバージョンをビルドしてデプロイする
最後に、ダッシュボードを本番環境に配置します。
まず、保存を忘れないでください。ダッシュボードを保存することで、すべての編集内容が一貫して保存されることを確認します(上部中央バーのアイコン)。
次に、Application Manager の 概要 タブに戻ります。
アプリケーションを最初に作成してから、アプリケーションに加えた変更は、エンドユーザーに表示されるようにするためにビルドする必要があります。現在デプロイされているバージョンを停止して、その変更をビルドすることもできますが、プラットフォームではサービスを中断せずに行うこともできます。 まず、コピーして、現在デプロイされているアプリケーションのバージョンをコピーします。
次に、新しいバージョンに名前を付ける必要があります(下のスクリーンショットでは v2)。
次に、ビルドをクリックし、デプロイをクリックします。
ビルドプロセスは通常、数分かかります。ビルド中に何が起こっているのか知りたい場合や、ビルドに失敗した場合は、バージョンパネルを展開してログコンソールを開き、ログを確認してください。問題のトラブルシューティングができない場合は、ログをサポートチームに送信してください!
アプリはライブになり、今すぐオンラインでアクセスできます!リンクは、概要タブで開くをクリックして取得できます。
Identity Access Manager を使用すると、アプリとプロジェクト管理へのアクセス権を構成できます。
これで完了です!ダッシュボードはライブになり、ユーザーがアクセスできます。そのデータは毎日自動的に更新され、クラウドに保存され、常に信頼できる状態になります。
Platforms の Getting Started チュートリアルを完了しました! これでプラットフォームでライブ配信できるようになり、自分で探索し、自分でプロジェクトに取り組む準備が整いました。
もちろん、このチュートリアルにいつでも戻ってくることができます!必要に応じて、製品の特定のコンポーネントについてさらに深く掘り下げるために、ドキュメントの残りの部分を確認することをお勧めします。
次のステップは、アプリビルダーの高度な機能を発見することです。
また、お問い合わせをお気軽にどうぞ。サポートチームと製品チームは、あなたが考えているAIアプリケーションを迅速に提供するために専念しています。
さらに詳しく
トレーニングや技術的なサポートが必要な場合は、営業担当者にお問い合わせください、またはProfessional Services ページを訪れて、見積もりをリクエストし、専門家にプロジェクトを分析してもらってください。
Data Platform を構築するチームと直接質問し、フィードバックを共有し、交流するには、専用のDiscord チャネル をご利用ください。
OVHcloud サービスについてサポートが必要な場合は、ヘルプセンター でリクエストを作成してください。
ユーザーコミュニティ に参加してください。

