Entandoアプリケーションを構成するコンポーネント-フロントエンドとバックエンドコンポーネント

おい、私の仲間の開発者.
このバンドルシリーズの中で、私たちはバンドルが何であるか、どのように使用され、それらの中に入るかを学びました.また、バンドルがentandoアプリケーションにコンポーネント(または更新)をパッケージ化するために使用されることも学びました.
このブログ記事は、それらがどのように定義されているか、どのようにエンタンドアプリケーションに展開されるか、どのように設定できるか、そしてどのようにアプリケーションでレンダリングされるかについての詳細について詳しく述べるシリーズの第一です.
フロントエンドとバックエンドのコンポーネントを最初にカバーし、続いてCMSコンポーネント、そして最後にページコンポーネント、ユーザー管理、および国際化をカバーします.

entandoコンポーネントとは？

公式文書によると

An Entando component - simply referred to as component - is a piece of reusable code that can be used in an Entando widget, page or application. Examples of components are widgets, micro frontends, content-types, labels, plugins (microservices), and static resources

entando束は一つ以上の構成要素で構成されます.さまざまな種類のコンポーネントをカバーし、次のセクションのバンドルにそれらを定義する方法を説明します.
これらのコード及び実施例は全てStandard Demo Bundle号から採られる.インストールする場合は、this tutorialに従うことができます.

マイクロサービス

プラグイン

プラグインコンポーネントは、マイクロサービスを展開するために使用されます.各プラグインはKubernetes上に展開され、podとして動作します.

name: standard-demo-banking
image: 'docker.io/entandodemo/banking:0.0.18'
dbms: none
healthCheckPath: /management/health
ingressPath: /banking
roles:
 - task-list
permissions: []

プラグインを作成するために使用するイメージをイメージします.

DBMSデータベース管理システムのプラグインを使用します.

Kerbernetesがプラグイン展開の状態をチェックするために使用するヘルスチェックパス.

Ingresspathプラグイン展開に割り当てるインクルードパス

ロールの役割は、プラグインがkeycloakに公開され、バックエンドコードでセキュリティロジックを追加するために使用されます.

アクセス許可は、KeyCloak Clientids/roleのリストで、MicroService KeyCloakサービスアカウントが他のサービスに到達できるように互いにバインドします.

プラグインはKubernetesにカスタムリソースとして展開されます.これは、以下のコマンドでENT CLIかKubectlと直接チェックできることを意味します.

ent kubectl get EntandoPlugin

フロントエンドコンポーネント

ウィジェット

ウィジェットは、ページに追加できるフロントエンドのロジック(HTML、JavaScript、マイクロフロントエンドなど)の自己完結型の作品です.

code: credit_card_user_apply_form
titles:
 en: Credit card user apply form
 it: Form di applicazione carta di credito
group: free
customUi: '<#assign wp=JspTaglibs[ "/aps-core"]><link rel="stylesheet" type="text/css" href="<@wp.resourceURL />standard-demo/widgets/creditCardApplyForm/css/main.css"><script nonce="<@wp.cspNonce />" async src="<@wp.resourceURL />standard-demo/widgets/creditCardApplyForm/js/runtime.js" ></script><script nonce="<@wp.cspNonce />" async src="<@wp.resourceURL />standard-demo/widgets/creditCardApplyForm/js/vendor.js" ></script><script nonce="<@wp.cspNonce />" async src="<@wp.resourceURL />standard-demo/widgets/creditCardApplyForm/js/main.js" ></script><credit-card-user-form />'

コードはウィジェットの一意の識別子です.

titleはウィジェットのローカライズされたタイトルを定義します.

グループは、ウィジェットの所有者グループを定義します.

CustomUIには、ウィジェットをレンダリングするフリーメーカコードが含まれます.専用のFreemarkerファイルを使用する場合は、代わりにCustomuiPpathを使用することもできます.

ConfigUIは、ウィジェットの設定UIを追加するフィールドです.コンポーネント記述子を使用して構成UIを追加できます.

configUi:
  customElement: my-widget-config
  resources:
    - <bundleid>/static/js/main.js # The resources necessary to the custom element to render the configUI, like the code

CustomElement Configui

のレンダリングに使用するカスタム要素の名前

resourceコンフィグをレンダリングする静的ファイルの配列.

ウィジェットは、メニューの下で利用可能です

例:このウィジェットはページにフォームをレンダリングします.

断片

フラグメントは、Freemarkerディレクティブ(例えば、スクリプトのインポート)を通じてページやウィジェットに挿入できる再利用可能なコードの一部です.

code: insurance_inclusions_footer
guiCode: '
<#assign wp=JspTaglibs["/aps-core"]>
<script type="text/javascript"  src="<@wp.resourceURL />static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<@wp.resourceURL />static/js/mdb.min.js"></script>'

コードはフラグメントの一意の識別子です.これは、ウィジェットやページからフラグメントを参照するために使用されます.

GuicodeはDOMに含まれるフラグメントコードです.

CustomuiPathは、外部freemarkerファイルを使用する場合はGuicodeの代わりに使用することができます.

ページやウィジェットでこのように使用できます.

<@wp.fragment code="insurance_inclusions_footer" escapeXml=false />

ウィジェットは、メニューコンポーネント

静的資源

静的リソースは、開発者がバンドル内の静的ファイルを含めることができるEntandoコンポーネントです.JavaScriptファイル(例えば、ライブラリをインポートする)、画像、ドキュメント、およびCSSファイルである可能性があります.
「リソース」と呼ばれるフォルダーを作成する必要があり、このフォルダ内のすべてのファイルは、Entandoアプリケーションに静的リソースとして使用できるようになります.これは、主なバンドル記述子の各リソースを明示的に宣言する必要がないことを意味します.Entando App Builderでは、“リソース”フォルダーは、あなたのバンドルのIDに一致するように名前を変更すると、ファイル管理ブラウザーメニューメニューにアクセスできます.
このように静的リソースをFreemarkerテンプレートで使用できます.

<link rel="stylesheet" href="<@wp.resourceURL />static/css/all.css">

ファイルは、メニュー管理

次は何

Entandoアプリケーションにバックエンドサービスとマイクロフロントエンドを配置してインストールするEntandoコンポーネントをカバーしているので、次のブログ記事は、バンドルを使用してアプリケーションにCMSコンポーネントを配備およびインストールする方法を説明します.