フロントエンドアプリケーションの構築とデプロイ
このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません
目的
このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません。事前構築されたグラフのおかげで、プロセスを加速させるためのテンプレートを用意しました。
Application Services からアプリケーションを開始し、アプリケーションの作成をクリックします。
ストアからテンプレート ReactJS - Getting Started を選択します。このテンプレートのおかげで、BIダッシュボードを短時間で作成できます！
下記のスクリーンショットに示すように、異なるフィールドを入力し、確認を押します。
確認をクリックすると、アプリケーションが自動的に構築されデプロイされます。このプロセスには数分かかります ⏳。その間、下記の前提条件を読んでください。
必要条件
Getting Startedガイドのすべての前のステップが完了している必要があります：
- APIが稼働しています。
- Analytics Managerのクエリがデータウェアハウスを適切にリクエストしています。
- Lakehouse Managerに適切に構築された論理スキーマが表示されます。仮想属性が作成され、テーブルがリンクされています。
- データ処理エンジンのワークフローが正しく実行されました。
最初のダッシュボードを作成する準備ができましたか？ それでは始めましょう！ 🏄🏻
キャンバスの設定
Dashboard メニューをクリックします。アプリケーションでは、ダッシュボードはそのページです。
最初のダッシュボード Rides Analytics は、テンプレートを選択した際にデフォルトで追加されています。スタイルとロゴが付属しています！
家 アイコンをクリックして、アプリケーションのデフォルトのランディングページに設定します。
ヘッダーの設定
Menus メニューに移動します。Menus メニューは、ヘッダーメニューやアプリケーション全体のフィルターなどの項目を定義できるページです。アプリケーションを開始するために使用したテンプレートのおかげで、すでに複数のページと項目が事前入力されています。
ヘッダーページにアクセスできます。つまり、ここで追加する項目はすべて、アプリケーションのヘッダー（上部）に埋め込まれます。右上隅でサイドバーページ（アプリケーションの左サイドバーに項目を埋め込む）に切り替えることができます。
ヘッダーページに戻ります。tabs を展開してコンテナの項目を確認します。Add an item をクリックしてヘッダーにタブを追加します。link を選択します。
下記のようにフィールドを入力します。アプリケーションヘッダーのロゴアイコンも定義できます！
動的パラメータの設定
動的パラメータは、ページのデータをフィルタリングするためのウィジェットです。ここでは、日付でフィルタリングするための動的パラメータを1つ追加します。
右上隅の Sidebar をクリックし、コンテナを作成します。
containers に不慣れな場合は、それらを項目のフォルダと考えてください。
新しいコンテナをフッター（下部にある必要があります）の上にドラッグします。
コンテナを開き、項目を追加します。Parameters を選択します。
Select box を選択し、新しいパラメータの options に移動します。
下記のスクリーンショットに示すように、オプションを入力します。
Infos タブで、次の名前を付けます：select_stations。そして Confirm を押します。
日付ピッカーやセレクトボックスなどの動的パラメータはすべてカスタマイズできます。その方法を学ぶには、アプリケーションコンポーネントの技術ドキュメントにアクセスしてください！
これでキャンバスの設定は完了です。 ✅ メニューとフィルターがあるので、最初のグラフを作成できます。
チャートの設定
Dashboard タブに移動し、Ride Analytics ダッシュボードの Edit アイコンをクリックします。 ここで作成したメニューとフィルターが正しく設定されていることがわかります！
ステップ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 を追加します。
これで、フィルターが正しく動作しているかテストできます。Play アイコンをクリックして読み取り専用モードに入り、日付や休日の種類を変更してデータがどのように変化するか確認します。最初のチャートが完成しました！
この時点で、最初のダッシュボードはほぼ完成です！ しかし、より良く見せたいかもしれません 🧑🏼🎨。私たちの Getting Further guide series では、さらに多くのチュートリアルを公開しています。アプリビルダーの機能についてさらに詳しく学ぶにはこちらをクリックしてください！
アプリの新しいバージョンをビルドしてデプロイする
ほとんど完成です！ 最後に、ダッシュボードを本番環境に配置しましょう。
まず、保存を忘れないでください。すべての編集内容が一貫して保存されていることを確認するためです（上部中央バーの💾アイコン）。
次に、Application Managerの概要タブに戻ります。
アプリケーションを最初に作成してから、アプリケーションに加えた変更は、ビルドする必要があります。これにより、エンドユーザーが変更内容を確認できます。現在デプロイされているバージョンを停止して変更をビルドすることもできますが、プラットフォームではサービスを中断せずに行うこともできます。 まず、現在デプロイされているアプリケーションのバージョンをコピーします。
次に、新しいバージョンに名前を付ける必要があります（下のスクリーンショットではv2）。
次に、ビルドをクリックし、デプロイをクリックします。
ビルドプロセスには通常数分かかります。ビルド中に何が起こっているのか知りたい場合や、ビルドに失敗した場合は、バージョンパネルを展開してログコンソールを開き、ログを確認してください。自分でトラブルシューティングする方法がわからない場合は、ログをサポートチームに送信してください💁💁♂️！
アプリはライブになり、今すぐオンラインでアクセスできます！ リンクは、概要タブで開くをクリックして取得できます。
Identity Access Managerを使用すると、アプリとプロジェクト管理へのアクセス権を構成できます。
これで完了です！ ダッシュボードはライブになり、ユーザーがアクセスできます。そのデータは毎日自動的に更新され、クラウドに保存され、常に信頼性があります。
PlatformsのGetting Startedチュートリアルを完了しました！ これでプラットフォームでライブ配信を開始し、自分で探索し、自分でプロジェクトを進める準備が整いました。
もちろん、このチュートリアルにいつでも戻ってくることができます！ 必要に応じて、製品の特定のコンポーネントについてさらに深く掘り下げるために、ドキュメントの残りの部分を確認することをお勧めします。
次のステップは、アプリビルダーの高度な機能を発見することです。
さらに！
また、必要に応じてお問い合わせください。サポートチームと製品チームは、あなたが考えているAIアプリケーションを迅速に提供するのをお手伝いするために専門的にサポートしています。
さらに深く学ぶ
当社のソリューションを実装するためのトレーニングや技術サポートが必要な場合は、営業担当者にお問い合わせください、またはこのリンクをクリックして見積もりを取得し、プロフェッショナルサービスの専門家にプロジェクトのカスタム分析を依頼してください。
質問をする、フィードバックを送信する、Data Platformを構築するチームと直接交流するには、専用のDiscordチャネルにアクセスしてください。
OVHcloudサービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。
ユーザーコミュニティに参加してください。