App BuilderでAngular CRM アプリを構築する方法
このブログ記事では、WYSIWYG App Builder ™ を使用して、サンプルとローコード開発アプローチでカスタマイズされたAngular CRM アプリを構築します。その方法をご覧ください。
ケイティ・ミコバ
8分で読む
ローコード プラットフォームでは、今ではフル機能でレスポンシブな最新アプリを作成できないというのは誤解です。約 10 年以上前、ローコード プラットフォームでは、開発者がグラフィカル メニューを通じて限定的なインターフェイスとさらに限定的な機能を定義することしかできず、恐ろしいスパゲッティ コードが生成され、コードの保守性が無視されていました。2023 年現在、ローコード/ノーコード テクノロジーの進化と実際の価値は、これまで以上に明らかになっています。そして、エンタープライズ Web 開発に関して最も重要な進歩と利点の 1 つは、サンプル アプリの操作、既製のテンプレートの提供、標準のコーディング ガイドラインに準拠したクリーンで本番環境対応のコード生成により、ローコード/ノーコード ツールが新しいプロジェクトを有利に開始できることです。
このブログ投稿では、WYSIWYG App Builder ™を使用して、サンプルとプロセスを 8 倍高速化するローコード開発アプローチを使用してカスタマイズされたAngular CRM アプリを構築します。
簡単に言うと、CRM アプリとは何ですか? プロジェクトにAngularサンプル アプリを使用する理由は何ですか?
CRM アプリ (顧客関係管理) は、企業が顧客や見込み客とのやり取りや関係を管理できるように設計されたソフトウェア アプリケーションです。このようなソフトウェア ソリューションは通常、組織が顧客とのやり取りを効率的に追跡、分析、最適化できるようにするツールと機能を提供します。
特に初めてのプロジェクトの場合、サンプル アプリから始める必要がある理由は次のとおりです。
- それは有利なスタートを提供します。
- 実際に体験してみることです。
- 一般的な開発タスクが不要になります。
- 変更やカスタマイズも簡単です。
- 俊敏性、拡張性、保守性に優れています。
- リアルタイムのコードプレビューがあります。
詳細はこちら:すぐに使える 3 つのAngularアプリの例
App Builderを使用してAngular CRM サンプル アプリを構築し、独自のものにする方法
当社のローコード プラットフォームでアプリ UI を作成すると、さまざまな定義済みレイアウト、すぐに使用できるコンポーネント、あらゆる REST API の堅牢な処理、効率とスキルを高める豊富な構成機能を活用できます。機能満載のAngularコンポーネントを活用しながら、WYSIWYG 設計サーフェスも利用できます。これにより、レイアウトやコンポーネントを手動でコーディングする必要がなくなり、時間を節約できます。フィードバックをより早く取得し、フィードバックに基づいてより迅速に反復処理できます。このノーコード アプローチは、データ バインディングとナビゲーション ワークフローにも適用されます。コードをダウンロードしてその上に追加する場合は、Angular CRM アプリをロードし、ニーズに応じてApp Builderでデザインを拡張します。定義済みのアプリケーションですが、編集可能です。ビューやコンポーネントを追加し、必要に応じてデザインを拡張できます。
ビデオ: 6180.CRM-Sample-App.mp4
ここに示されているのは、HubSpot にヒントを得た、顧客の詳細を管理するためのマスター詳細スタイルのアプリです。概要ダッシュボードと複数のタブを持つ顧客の詳細のレスポンシブ ビューが含まれています。使用されているコンポーネント:アコーディオン、アバター、ボタン、アイコン ボタン、カテゴリ チャート、チェックボックス、ダイアログ ウィンドウ、ドロップダウン、拡張パネル、データ グリッド、アイコン、入力グループ、リスト、ナビゲーション バー、ナビゲーション ドロワー、選択、タブ レイアウト。
CRM アプリのサンプルをチェックして、コードをプレビューすることもできます。
App Builderでサンプルを使用する手順に進み、プロジェクトの要件とビジネス目標に合わせて微調整してみましょう。
ステップ1: App Builderを開いてサンプルアプリに移動する
App Builderを開き、「新規アプリケーションの作成」を選択します。次に、「サンプル アプリ」セクションに移動し、プロジェクトのベース デザインとして CRM アプリを選択します。このプロジェクトの目的のため、応答性を考慮してアプリケーションを構築し、グリッド、リスト、チャートの各コンポーネントを使用して、できるだけ多くのデータを表示できるようにしました。これらのコントロールは、ビッグ データを堅牢に処理し、必要に応じてアクセスする機能を備えています。ナビゲーション ドロワー コンポーネント (フライアウト/フライイン動作付き) は、クロス ビュー ナビゲーションと SPA のルック アンド フィールを処理します。
一方、Flex レイアウト コンテナーを使用すると、ネストされた UI 要素の位置を変更できます。その他の注目すべきプロパティは、流動的なサイズ変更と折り返しに関連しています。
そこから、特定のニーズに合わせてデザインを拡張およびカスタマイズできます。
ステップ2: APIを接続する
API を手動で接続する必要はありません。パブリック URL またはローカルホスト URL を指定して、App Builderで直接接続できます。そこから、次の 2 つのオプションが提供されます。
- Swagger定義を追加するには
- またはJSON URLを使用する
ここでは、Swagger アプローチを利用して URL を追加します。
その後、データソースの名前を指定して次のステップに進みます。含めるエンドポイントを特定します。承認が設定されたら、「データの選択」に進み、すべてのフィールドが選択されていることを確認して、「完了」をクリックします。
その後、データソースが正常にアップロードされると、ダッシュボード ページでグリッドを接続できます。
これを行うには、グリッドを選択し、データ フィールドからデータ ソースを更新します。そこから、API のエンドポイントにリンクされる更新操作と削除操作を追加して、グリッドとのやり取りを通じてデータをリアルタイムで変更できるようになります。
すべてのページが作成されたら、右上隅にある緑色のボタンを選択してアプリケーションをプレビューできます。さらにカスタマイズするには、Angular CRM アプリをダウンロードしてください。
ステップ3: テーマをカスタマイズして適用する
ブランドに合わせてカスタム アプリ テーマを作成できます。これを行うには、新しいテーマを作成し、ベース テーマの 1 つを開始点として選択します。カラー パレットは、選択したプライマリ カラーとセカンダリ カラーに基づいて自動的に生成されます。タイポグラフィに関しては、現時点ではフォントのセットが組み込まれていますが、将来のバージョンではさらにクリエイティブなコントロールを追加する予定です。編集が完了したら、アプリ テーマを保存して変更を適用します。
ステップ4: コードのプレビュー
これにより、実行中のアプリのようにデザインを操作し、HTML、CSS、TS を個別に表示できます。アプリの動作を確認してコードを調べるには、右上隅にあるコード ビュー アクション ボタンをタップします。
ステップ5: アプリを生成する
ナビゲーション・バーの Platform picker ドロップダウンで、Publish to GitHub と Preview アクション・ボタンを選択します。BlazorまたはAngular用のコードを生成するには、Blazor Server/ Blazor Web Assembly オプションを選択して、生成されたアプリとコードのプレビューを表示します。Web Componentsオプションも利用できます。
App Builderを使用する利点
アプリの設計と開発にローコードを使用する利点については、これまで何度も詳しく説明してきました。それでも、一般的に、WYSIWYG App Builderは、あらゆる Web アプリに必要なツールヒント、直感的な UI、すぐに使用できる UI パーツ (コンポーネント、アウトライン ツリー ビュー、組み込みのアプリ レイアウト、ニーズを満たすさまざまなプロパティ、テーマ設定、外部データ ソースの処理、アプリのプレビュー (まだ構築中)、ワークスペースによるコラボレーション機能、アプリの共有、GitHub の公開、変更の追跡など) を提供します。
App Building を使用する利点のその他のハイライト:
- ローコード プラットフォームは、視覚的なインターフェイスと事前に構築されたコンポーネントを提供し、Angularでの手動コーディングの必要性を減らし、さまざまなレベルの専門知識を持つ開発者がアプリケーションを構築しやすくします。
- さまざまなページのビューを確認し、クリックして使用されている各コンポーネントのプロパティを確認し、自分で開発することなくアプリをさらに探索することで、すぐに作業を開始できます。
- 事前構築されたAngularコンポーネントを使用しながら、完全なドラッグ アンド ドロップ アプリ構築エクスペリエンスにより、迅速なプロトタイピングと反復が可能になり、より高速で直感的な開発が保証されます。UI ツールボックスから何でもドラッグして画面にドロップすると、画面のレイアウト内に配置されます。
- Angularアプリとバックエンド サービスおよび API の統合が高速化され、膨大なコードを記述しなくてもデータの取得と管理が容易になります。
- 提供されているコンポーネントの再利用性は非常に貴重で、さまざまなAngularコントロールをカスタマイズして、この CRM アプリだけでなく他のAngularプロジェクトでも再利用できるため、デザインの一貫性が促進されます。
- App Builder、組み込みおよびカスタムのテーマ設定機能を適用するために必要なすべての機能が備わっています。あらかじめ構築されたテーマ オプションは、Material、Bootstrap、または Fluent UI です。また、書体、色、丸み、高さを変更して、独自の Fluent、Bootstrap、または Material ベースのテーマを作成し、ライト モードまたはダーク モードを選択することもできます。
- Angularフレームワークにとらわれないアプローチによるコード生成は、 プロジェクトで を使用するもう一つの利点です。ベストプラクティスと業界標準に準拠したクリーンな コードをワンクリックで生成するだけでなく、当社のローコードツールはフレームワークにとらわれないアプリを作成します。 からローコードツールがサポートする別のフレームワーク や に簡単に切り替えることができます。すべてワンクリックで。Angular App Builder Angular Angular Blazor Web Components
ローコードApp Builderの使用によって設計からコードまでのプロセスがどのように効率化されるかについては、次の記事で詳しく説明しています。
