For AI agents: the complete documentation index is available at https://docs.dataplatform.ovh.net/ja/llms.txt, the full documentation bundle is available at https://docs.dataplatform.ovh.net/ja/llms-full.txt, and this page is available as Markdown at https://docs.dataplatform.ovh.net/ja/getting-started-visualize-data.md.
  • 🇯🇵 日本語
  • フロントエンドアプリケーションの構築とデプロイ

    このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません

    目的

    このチュートリアルでは、最初のアプリケーションを構築してデプロイする方法を学びます。あなたの作業を容易にするために、最初からゼロから始める必要はありません。私たちは、事前構築されたグラフによりプロセスを加速させるためのテンプレートを準備しました。

    Application Services からアプリケーションを開始し、アプリケーションの作成をクリックします。

    Application Services

    ストアからテンプレート ReactJS - Getting Started を選択します。このテンプレートは完全なBIダッシュボードを生成します。

    Application Services

    下記のスクリーンショットに示すように、異なるフィールドを入力し、確認を押します。

    Application Services

    確認をクリックすると、アプリケーションが自動的に構築されデプロイされます。このプロセスには数分かかります。その間、下記の前提条件を読んでいただいて構いません。

    必要条件

    Getting Startedガイドのすべての前のステップが完了している必要があります:

    • APIが稼働しています。
    • Analytics Managerのクエリがデータウェアハウスを適切にリクエストしています。
    • Lakehouse Managerに適切に構築された論理スキーマが表示されています。仮想属性が作成され、テーブルがリンクされています。
    • データ処理エンジンのワークフローが正しく実行されています。

    最初のダッシュボードを作成しましょう。

    キャンバスの設定

    Dashboard メニューをクリックします。アプリケーションでは、ダッシュボードはそのページです。

    最初のダッシュボード Rides Analytics は、テンプレートを選択した際にデフォルトで追加されています。スタイルとロゴが付属しています!

    Application Services

    家アイコンをクリックして、アプリケーションのデフォルトのランディングページに設定します。

    Application Services

    ヘッダーの設定

    Menus メニューに移動します。Menus メニューは、ヘッダーメニューやアプリケーション全体のフィルターなどの項目を定義できるページです。アプリケーションを開始するために使用したテンプレートにより、すでに複数のページと項目が事前入力されています。

    ヘッダーページに到着するはずです。これは、ここで追加するすべての項目がアプリケーションのヘッダー(上部)に埋め込まれることを意味します。右上隅でサイドバーページ(アプリケーションの左サイドバーに項目を埋め込む)に切り替えることができます。

    Application Services

    ヘッダーページに戻ります。タブを展開してコンテナの項目を確認します。タブを追加をクリックしてヘッダーにタブを追加します。リンクを選択します。

    Application Services

    下記のようにフィールドを入力します。アプリケーションヘッダーのロゴアイコンも定義できます!

    Application Services

    動的パラメータの設定

    動的パラメータは、ページのデータをフィルタリングするためのウィジェットです。ここでは、日付でフィルタリングするための動的パラメータを1つ追加します。

    右上隅のSidebarをクリックし、コンテナを作成します。

    Info

    コンテナについて詳しくない場合は、それらを項目のフォルダと考えることができます。

    Application Services

    新しいコンテナをフッター(下部にある必要があります)の上にドラッグします。

    Application Services

    コンテナを開き、項目を追加します。Parametersを選択します。

    Application Services

    Select box を選択し、新しいパラメータのオプションに移動します。

    Application Services

    下記のスクリーンショットに示すようにオプションを入力します。

    Application Services

    Infos タブで、次の名前を付けます:select_stations、そして確認を押します。

    Info

    日付ピッカーやセレクトボックスなどのすべての動的パラメータはカスタマイズできます。その方法を学ぶには、アプリケーションコンポーネントの技術ドキュメントにアクセスしてください!

    動的パラメータについてさらに詳しく。

    これでキャンバスの設定は完了です。メニューとフィルターがあれば、最初のグラフを作成できます。

    チャートの設定

    Dashboard タブに移動し、Ride Analytics ダッシュボードの編集アイコンをクリックします。 ここで作成したメニューとフィルターが正しく設定されていることがわかります!

    Application Services

    ステップ1. パネルの作成

    ➕アイコンをクリックしてパネルを作成します(Containers > Panel)。

    Application Services

    作成後、画面全体にわたってリサイズできます。

    Application Services

    ステップ2. チャートにタイトルを付ける

    新しいパネル内で、➕アイコンをクリックし、Basic UI > HTMLを選択します。

    Application Services

    Rides history と名前を付け、HボタンをクリックしてH1スタイルを適用します。

    Application Services

    ステップ3. チャートを生成する

    パネル内で、➕アイコンをクリックし、Chartを選択します。Recharts - Bar タイプを選択します。

    Application Services

    Requestをクリックし、Query selectorを選択して、Analytics Managerで作成したrides_per_monthクエリを選択します。

    Application Services

    設定を完了するには、このチャートを既に作成したフィルターに接続する必要があります。Infos タブのLinked dynamic parameters セクションに移動し、select_stationsを追加します。

    Application Services

    再生アイコンをクリックして読み取り専用モードに入り、日付や休日タイプを変更してデータがどのように変化するか確認できます。最初のチャートは完了です!

    Application Services
    Info

    最初のダッシュボードはこれで完了です。外観をさらに改善することもできます。私たちのGetting Furtherガイドシリーズでは、さらに多くのチュートリアルを公開しています。アプリビルダーの機能についてさらに詳しく学ぶにはこちらをクリックしてください!

    アプリの新しいバージョンをビルドしてデプロイする

    最後に、ダッシュボードを本番環境に配置します。

    まず、保存を忘れないでください。ダッシュボードを保存することで、すべての編集内容が一貫して保存されることを確認します(上部中央バーのアイコン)。

    Application Services

    次に、Application Manager の 概要 タブに戻ります。

    アプリケーションを最初に作成してから、アプリケーションに加えた変更は、エンドユーザーに表示されるようにするためにビルドする必要があります。現在デプロイされているバージョンを停止して、その変更をビルドすることもできますが、プラットフォームではサービスを中断せずに行うこともできます。 まず、コピーして、現在デプロイされているアプリケーションのバージョンをコピーします。

    Application Services

    次に、新しいバージョンに名前を付ける必要があります(下のスクリーンショットでは v2)。

    Application Services

    次に、ビルドをクリックし、デプロイをクリックします。

    Application Services
    Info

    ビルドプロセスは通常、数分かかります。ビルド中に何が起こっているのか知りたい場合や、ビルドに失敗した場合は、バージョンパネルを展開してログコンソールを開き、ログを確認してください。問題のトラブルシューティングができない場合は、ログをサポートチームに送信してください!

    アプリはライブになり、今すぐオンラインでアクセスできます!リンクは、概要タブで開くをクリックして取得できます。

    Info

    Identity Access Manager を使用すると、アプリとプロジェクト管理へのアクセス権を構成できます。

    Application Services Application Services

    これで完了です!ダッシュボードはライブになり、ユーザーがアクセスできます。そのデータは毎日自動的に更新され、クラウドに保存され、常に信頼できる状態になります。

    Platforms の Getting Started チュートリアルを完了しました! これでプラットフォームでライブ配信できるようになり、自分で探索し、自分でプロジェクトに取り組む準備が整いました。

    もちろん、このチュートリアルにいつでも戻ってくることができます!必要に応じて、製品の特定のコンポーネントについてさらに深く掘り下げるために、ドキュメントの残りの部分を確認することをお勧めします。

    次のステップは、アプリビルダーの高度な機能を発見することです。

    最初のアプリをさらにカスタマイズする

    また、お問い合わせをお気軽にどうぞ。サポートチームと製品チームは、あなたが考えているAIアプリケーションを迅速に提供するために専念しています。

    さらに詳しく

    トレーニングや技術的なサポートが必要な場合は、営業担当者にお問い合わせください、またはProfessional Services ページを訪れて、見積もりをリクエストし、専門家にプロジェクトを分析してもらってください。

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

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

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