アプリケーションをさらにカスタマイズする
このチュートリアルでは、ビジュアルアプリビルダーの高度な機能を使用して、シンプルなアプリケーションのビジュアルな側面をカスタマイズする方法を学びます
目的
このチュートリアルでは、ビジュアルアプリビルダーの高度な機能を使用して、アプリケーションのビジュアルな側面をカスタマイズする方法を学びます。
このチュートリアルは、Getting Startedセクションのフロントエンドアプリケーションを構築してデプロイするというコンテンツの拡張です。
必要なもの
このチュートリアルでは、Getting Startedチュートリアルのすべての5つのセクションを完了していることを前提としています。Data Processing Engine、Lakehouse Manager、Analytics Managerは、それぞれのページに記載されている通りに設定されており、APIおよびAPPをデプロイし、それをカスタマイズする予定です。
より高度なチャートを作成する
まず、1つのチャートタイプをさらに発見しましょう：水平バーチャートを使用して、総交通量の上位7つの駅を表示します。
Analytics Managerで事前に準備されたクエリを選択する代わりに、チャートを作成する際に新しいクエリを即座に作成することもできます。これを行うには、最初のパネルを縮小し、隣に2番目のパネルを作成します。
2番目のパネル内で、➕アイコンをクリックし、HTMLを選択します。スタイルH1でTop 7 Stationsと名前を付けます。
2番目のパネル内で、➕アイコンをクリックし、チャートを選択します。Recharts - Bar Horizontalタイプを選択します。
リクエストタブで、_Request_モードを選択し、データ（合計と降順）としてridesを入力し、スケールとしてstation_nameを入力します。
最後のステップです！クエリは、高度なJSONエディタを使用して完全にカスタマイズできます。より具体的には、駅の数を7に制限するためのカスタムパラメータを追加する必要があります。これを行うには、下記のようにクエリの高度モードに移動し、「data」JSONオブジェクトの2行目の下に"limit":7,を追加します。
これまでに、ダッシュボードは次のように表示されるはずです。保存することを忘れないでください。
さらにカスタマイズする
アプリビルダーでは、アプリを望む通りにデザインするために多くのことができます。
単位
ダッシュボードの上部にある再生ボタンをクリックして、読み取り専用モードに切り替えます。Top 7 stationsチャートのバーにカーソルを合わせます。
これらの単位は、より明確にするために百万単位で書式設定できます。これを行うには、Formatterタブに移動します。Getting Startedテンプレートを選択することで、RIDESという測定値がすでに追加されています。
一般的に、新しい測定値を追加する必要がある場合、書式設定しようとしている属性と同じ名前である必要があります。
書式設定パラメータについては、単位としてMpax、丸めとして0（整数を表示するため）、乗数として0.000001（百万を表示するため）を入力します。
Formatterは自動保存モードで実行されます：タイプする際に変更が保存され、保存ボタンをクリックする必要はありません。
結果は次の通りです。
アプリの新しいバージョンを構築してデプロイする
最後のステップです：最近のダッシュボードの変更を本番環境に公開します。これを行うには、保存することを忘れないでください。その後、Application Managerの概要タブに戻ります。まず、現在デプロイされているアプリケーションを停止します。シャットダウンが完了したら、ビルドをクリックし、その後デプロイをクリックします。
ビルドプロセスは通常数分かかります。ビルド中に何が起こっているかを知りたい場合やビルドに失敗した場合：バージョンパネルを展開してログコンソールを開き、ログを確認します。ログをサポートチームに送信することもできます。自分でトラブルシューティングする方法がわからない場合は、ぜひご連絡ください！
アプリはライブになり、今すぐオンラインでアクセスできます！ リンクは、OverviewタブでOpenをクリックして取得できます。
数値は今やアプリケーションで利用可能です。
Advancedアプリケーションビルダーチュートリアルを完了しました！ これで、プラットフォーム上で複雑なデータアプリケーションを構築する準備が整いました。
もちろん、このチュートリアルにいつでも戻ってくることができます！必要に応じて、製品の特定のコンポーネントについてさらに深く掘り下げるために、ドキュメントの残りの部分を確認することをお勧めします。
また、必要なものがあればお問い合わせください。サポートチームと製品チームは、あなたが考えているAIアプリケーションをより速く提供するのを支援するために専門的に活動しています。
より柔軟性が必要ですか？
ビジュアルアプリビルダーは、迅速に開始するのに最適ですが、アプリケーションコードに完全な制御を求める開発者の場合、現代的なフロントエンドフレームワークで構築された追加のテンプレートを提供しています。
これらのテンプレートは、同じFront APIに接続され、独自の開発ワークフローを使用して完全にカスタマイズされたアプリケーションを構築できます。
React、Vite & Shadcnを使用してカスタムアプリを構築する
さらに深く掘り下げる
トレーニングや技術的な支援を受けて当社のソリューションを実装する場合は、営業担当者にお問い合わせください、またはプロフェッショナルサービスページを訪れて見積もりをリクエストし、専門家チームによってプロジェクトを分析してもらいます。
質問をする、フィードバックを提供し、Data Platformを構築するチームと直接やり取りするには、専用のDiscordチャネルをご利用ください。
OVHcloudサービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。
ユーザーコミュニティに参加します。