Web アプリのワークフロー

AppMaster Web Designer では、バックエンドロジックに加えて、フロントエンド側で Web アプリケーションのビジネス ロジックを構成できます。この強力な機能により、特定のビジネス ニーズに合わせた洗練された動的な Web アプリケーションを作成できます。

Web アプリケーションのコンテキストでは、ビジネス プロセスには、ユーザー認証、データ処理、オンライン トランザクション、コンテンツ管理、顧客サービス操作、および条件に応じた UI 要素のカスタマイズが含まれる場合があります。

AppMaster Web Designer のビジネス ロジックの 3 つのレベル:

• アプリケーション トリガー:これらは、アプリケーション全体のイベントまたは状態に応答し、特定のビジネス プロセスを開始する高レベルのトリガーです。
• 汎用ビジネス プロセス:これらは、アプリケーションのさまざまな部分に適用でき、タスクを自動化し、ワークフローを合理化できる、事前定義された一連の操作です。
• 要素トリガー:アプリケーション トリガーよりも細かく、特定の UI 要素にリンクされ、これらの要素との対話に基づいてビジネス プロセスをアクティブ化します。

AppMaster Web Designer は、これらのレベルのビジネス ロジックを活用することで、見た目が魅力的なだけでなく、ユーザーのニーズや行動にインテリジェントに対応する Web アプリケーションを作成できるようにします。

🔔 新しいビジネス ロジックを追加して BP を起動した後は、実行中のプレビューをリロードすることが重要です。

アプリケーショントリガー

AppMaster Web Designer のアプリケーション トリガーは、アプリケーション全体のイベントまたは状態に応答して特定のビジネス プロセスを実行して、機能とユーザー エクスペリエンスを強化する高レベルのトリガーです。

AppMaster は、特定のシナリオ向けに設計されたさまざまなアプリケーション トリガーを提供します。

• アプリの起動時:アプリケーションの起動時にアクティブ化され、初期セットアップ手順に最適です。
• アプリナビゲート時:アプリケーションの異なる部分間のナビゲーション中に発生します。
• On App Blur:アプリケーションがフォーカスを失ったときにトリガーされ、アクションの一時停止や保存に役立ちます。
• アプリフォーカス時:アプリケーションがフォーカスを取り戻したときに実行され、コンテンツの再開または更新に最適です。
• アプリ非表示時:アプリケーションが最小化されている場合、または画面に表示されていない場合にアクティブになります。
• アプリの表示時:アプリケーションが再び表示されると起動され、コンテンツを更新するのに役立ちます。
• アプリの破棄時:アプリケーションのシャットダウン プロセス中に実行されます。
• アプリのオンライン時:アプリケーションがオンライン ステータスを検出するとトリガーされ、データの同期に最適です。
• アプリのオフライン時:アプリケーションがオフラインになると起動され、オフライン機能が有効になります。
• On App Auth Required: 「401 (Unauthorized)」応答を受信するとアクティブになり、ユーザーの再認証を求めます。
• アプリの禁止: 「403 (禁止)」応答でトリガーされ、通常はアクセス制御と権限に使用されます。

アプリケーション トリガーの正確なリストは、アプリケーションのバックエンド レベルで WebSocket エンドポイントを作成することで拡張できます。

これらのトリガーは、起動時のユーザー認証の管理、アクセス権の確認、認証変更時のリダイレクトの構成、エラーの処理などに使用でき、応答性の高い安全な Web アプリケーションの作成に不可欠なものになります。

一般的なビジネスプロセス

AppMaster Web Designer の汎用ビジネス プロセスは、反復的な操作と冗長ロジックを個別のフローにカプセル化するように特別に設計されています。これらのビジネス プロセスを作成すると、Web アプリケーションのビジネス プロセスのあらゆるレベルに個別のブロックとしてシームレスに統合できます。

主な特徴:

• 効率的なワークフロー管理:一般的なタスクを汎用ビジネス プロセスに移動することで、重複が大幅に削減され、アプリケーションのワークフローが合理化されます。
• フロントエンドの機能:バックエンド ビジネス プロセスの機能をミラーリングしながら、汎用ビジネス プロセスはフロントエンドで独自に実行されます。これにより、ユーザー インターフェイス内でのより迅速な対話と即時のフィードバックが可能になります。

再利用のしやすさ:

ロジックの構築中に汎用ビジネス プロセスを使用するには、目的のブロックを[User-Created BPs]グループからキャンバスにドラッグするだけです。

🔔 パフォーマンスに関する考慮事項: 複雑でリソースを大量に消費するタスクの場合は、これらのプロセスをサーバー側 (バックエンド) で実行することをお勧めします。このアプローチにより、特に計算負荷の高い操作や機密データの安全な処理が必要な操作において、パフォーマンスと効率が向上します。

要素トリガー

AppMaster Web Designer のコンポーネント トリガーは、Web アプリケーションに対話性を追加するために不可欠です。これらのトリガーは特定の UI 要素に関連付けられており、ユーザーの操作に応じて事前定義されたビジネス プロセスをアクティブ化します。アプリケーションの各コンポーネントには、動的で魅力的なユーザー エクスペリエンスを作成するためにカスタマイズできる一連のトリガーがあります。

• 共通トリガー:コンポーネントは、コンポーネントのライフサイクルと可視性の変更に応答する、 onCreate 、 onDestroy 、 onShow 、 onHideなどの標準トリガーのセットを共有します。
• 特定のトリガー:一般的なトリガーに加えて、コンポーネントにはその機能に合わせた固有のトリガーがあります。たとえば、 Button にはonClickトリガーがあり、 Table にはonUpdateDataに応答し、 Tabs にはonTabSelectトリガーがある可能性があります。

多様性にもかかわらず、基本的な原則は一貫しています。つまり、イベントが対応するビジネス プロセスをトリガーします。コンポーネント トリガーを効果的に使用すると、ユーザー入力にリアルタイムで反応するインタラクティブで応答性の高い Web アプリケーションを作成でき、全体的なユーザー エクスペリエンスが向上し、アプリケーションがより直観的でユーザー フレンドリーになります。

トリガーへのアクセス

コンポーネントのトリガーを表示および構成するには、キャンバス上でコンポーネントを選択し、右側のサイドバーの「ワークフロー」タブに移動します。ここには、利用可能なトリガーのリストが表示されます。いずれかをクリックすると、目的のビジネス プロセスをそれに添付できます。ロジックが接続されているトリガーは、識別しやすいように青色で強調表示されます。

ビジネスプロセスの作成

コンポーネント トリガーのビジネス プロセスの設定は、モジュール 4 で説明したように、バックエンド ビジネス プロセスの作成と同様のアプローチに従います。さまざまなアクションを表すブロックが追加される共通のキャンバスを使用します。これらのブロック間の接続によってアクションのシーケンスが定義され、複雑なワークフローを直感的に構築できます。

アプリケーションのワークフローの構築

このような「計算」ボタンのビジネスプロセスを作成してみましょう。 まず、ボタンがクリックされたときに何をする必要があるかを決めます。

• X と Y の値を調べます。対応する入力フィールドからそれらを取得します。
• 計算用のエンドポイントを起動し、X パラメーターと Y パラメーターをそれに渡します。
• 結果コンテナを表示します。
• 計算結果を必須のラベルフィールドに入力します。

キャンバスでCalc Button要素を選択し、 onClickトリガーをクリックします。

ビジネス プロセス エディターが開きます。ここではボタンのビジネスプロセスを構築します。

入力から値を取得する

最初のステップは、ユーザーが入力した値を取得することです。このために、AppMaster は、入力パラメータとして「要素キー」を特徴とし、「値」を出力する入力フロート Get Data ブロックを提供し、基本的に指定されたコンポーネントから現在の値を読み取ります。

2 つの別々のフィールド (X 値と Y 値を表す) があるため、入力フィールドごとに 1 つずつ、2 つの「Input Float Get Data」ブロックを利用する必要があります。

設定するには:

• 各入力フィールドのキャンバスに 2 つの入力フロート取得データ ブロックをドラッグします。
• 各ブロックのエレメント キーを、それぞれの Float 入力に対応するように設定します。これにより、ブロックが正しい UI 要素にリンクされ、正しいデータが確実に読み取られます。

以前にインターフェイスの作成中に UI デザイナーで要素の名前を変更していた場合、各ブロックに必要なコンポーネントを見つけて選択するのが簡単になります。

☝️ 設計段階で要素の名前を変更すると、後のビジネス ロジック構成時に要素を簡単に識別するのに役立ちます。

エンドポイントを起動する

ユーザー入力の取得に続く、Web アプリケーションのワークフローの後続フェーズは、 Endpointを開始することです。この重要なステップでは、Web アプリケーションのフロントエンド(ユーザー インターフェイス) とバックエンド(サーバー側のプロセス) 間の接続が確立され、計算用のコマンドがブラウザーからサーバーに送信されます。

AppMaster のエンドポイントは、アプリケーション内の個別のビジネス プロセス ブロックとして表されます。エンドポイントを使用するには、ビジネス プロセス ブロックのリストから適切なエンドポイントを選択し、キャンバスにドラッグするだけです。

モジュール 5 では、 GETメソッドを使用してエンドポイントを構成し、それにベース URL 「module4-basic」を割り当てました。 「 Server request GET /module4-basic/」としてリストされているのを見つけて、キャンバスにドラッグします。

コンポーネントとは異なり、AppMaster エンドポイントは事前に定義されているため、ID を設定する必要はありません。この機能により、エンドポイントをビジネス ロジックに統合するプロセスが合理化されます。

最後のステップでは、前のステップで取得したX値とY値をエンドポイントに入力します。これにより、バックエンドがこれらの入力を受信して​​処理し、必要な計算を実行できるようになります。

UI要素の状態

Web アプリケーション ワークフローの次の手順では、コンテナーの可視性を管理します。具体的には、結果を表示するコンテナーを表示し、ヒントを含むコンテナーを非表示にします。

これを実現する方法は次のとおりです。

1. まず、2 つのFlex Update Propertiesブロックをキャンバスにドラッグします。
2. 各Flex Update Propertiesブロックに対して、それぞれのコンテナに対応するElement Keyパラメータを割り当てます。1 つは結果コンテナ用、もう 1 つはヒント コンテナ用です。
3. これらのブロック内で可視性パラメータを設定します。結果コンテナのVisibleパラメータをTrueに設定し、計算後に表示されるようにします。逆に、計算完了時にヒント コンテナを非表示にするには、このパラメータをFalseに設定します。

これらの手順を実装すると、アプリケーション インターフェイスに動的な応答が作成されます。ボタンをクリックして計算を実行するなどのユーザーのアクションに続いて、アプリケーションは自動的にヒント コンテナを非表示にし、結果コンテナを表示します。

これにより、ユーザー エクスペリエンスが向上するだけでなく、アプリケーション インターフェイスがクリーンな状態に保たれ、対話の各段階で関連情報に重点が置かれるようになります。

リアルタイムプレビュー

ビジネス プロセスの進行状況を評価するために、中間結果を簡単にプレビューできます。

1. まず、ビジネス プロセス エディター内の[保存して終了]ボタンをクリックします。このアクションにより、現在のワークフローが保存され、ビジネス プロセス エディターが閉じられます。
2. Web アプリケーションのリアルタイム プレビューを実行して、アプリケーションとの対話をライブであるかのように確認します。
3. 「計算」ボタンをクリックして機能をテストします。

ビジネス プロセスが正しく設定されている場合は、動的応答が表示されます。ヒントを含むコンテナーが非表示になり、同時に結果を表示するコンテナーが表示されます。

このテスト方法は、ビジネス プロセスが意図したとおりに機能していることを確認する実用的かつ即時的な方法を提供し、アプリケーションを完成させる前に必要な調整を行うことができます。

データレンダリング

アプリケーションのロジックを正常にテストできたら、ビジネス ロジックをさらに洗練させます。

最後のステップでは、Web アプリケーションのインターフェイス内に計算結果を表示します。バックエンド ビジネス プロセスの出力データを Web アプリケーションの関連する UI 要素にマッピングします。

バックエンドからの結果が所定の順序で返されることを考慮すると、各データ (配列要素) を UI 内の正しいテキスト ブロック要素と位置合わせすることがタスクとなります。

データ処理には、次のブロックを使用します。

• Array Element : これらを使用して、結果の配列内の個々の要素にアクセスします。 0 ～ 4 の範囲のインデックスごとにブロックが必要になります。
• To Text:データは Float 形式であるため、このブロックを使用してこれらの Float 値を表示に適したテキスト形式に変換します。
• テキスト ブロック更新データ:このブロックは、変換されたテキスト データを UI のテキスト ブロックに設定するために不可欠です。

これらのブロックは結果配列からデータを抽出し、そのデータをテキスト形式に変換して、UI 内の対応するテキスト ブロックを更新します。

設定方法は次のとおりです。

1. これらのブロックをキャンバス上に配置します。
2. Array Elementブロックに、エンドポイントから受信した配列 (0 から開始) を入力します。
3. 配列内の適切な要素をターゲットにするようにインデックスを設定します。
4. 配列要素の出力値をTo Textブロックに接続します。
5. データを表示する UI 要素のテキスト ブロック更新データの要素キーを指定します。
6. ブロックを順番に接続していきます。

表示したい配列内の要素ごとに、この一連のブロックを複製します。配列のさまざまな要素に対応するように、各「配列要素」ブロックのインデックスを調整します。

これらのブロックも順番に接続されていることを確認してください。

最終結果

これでビジネスプロセスの作成は完了です。

ビジネス プロセスを保存し、プレビューで最終結果を確認します。 モジュール 5でエンドポイントを公開したデプロイ プランでアプリケーション プレビューを実行します。

🎉 素晴らしい成果をおめでとうございます!

ビジネス ロジックと対話型ユーザー インターフェイスを備えた、完全に機能する Web アプリケーションの開発に成功しました。すべてが意図したとおりに動作する場合は、アプリケーションを公開してユーザーと共有するという次の最終ステップに進む準備が整いました。

しかし、旅はここで終わりません。アプリケーションをさらに改良する機会は十分にあります。 UI 要素の外観をカスタマイズしたり、Web アプリケーション ロジックを拡張したりすることで、視覚的な魅力とユーザー エクスペリエンスを強化できます。たとえば、フィールドを必須にし、各入力を手動でクリアせずにフィールドをリセットするボタンを追加できます。