ビジネス・ツールは、プラガブル・フレームワークを使用して拡張可能であり、Entity Viewsを使用してUIを拡張することができます。ビジネス・ツールには豊富なコントロール・セットが用意されていますが、最高のビジネス・エクスペリエンスを実現するために、独自のカスタム・コントロールを作成することもできます。
そのためには、まずビジネス・ツールの開発環境を整える必要があります。環境が整うと、カスタム・コントロールの開発やビジネス・ツールのカスタマイズが可能になります。
前提条件
- 開発環境にCommerce Engineのインスタンスを配置
- Node.js Javascriptランタイムのインストール
- Angular CLIツールのインストール – npm install -g @angular/cli
SitecoreのパブリックフィードからNPMパッケージを入手するためのNPM設定
Sitecore BizFx SDKは、Sitecore公式のNPMパッケージのパブリックフィードから入手できるNPMパッケージに依存しています。
Poswershellを管理者として開きます。
powershellで以下の2つのコマンドを実行します。
npm config set @speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/
npm config set @sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/これにより、以下の行が追加されます。
C:\Users\[your user]\.npmrc@speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/
@sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/開発ソリューション用のSPEAKとBizFxパッケージのセットアップとインストール
Sitecore.BizFX.SDK.4.0.8をdevelopmentフォルダにコピーし、SDKのzipファイルをフォルダに解凍します。
SDKを解凍したフォルダに以下のファイルをコピーします。これらのファイルは、Sitecore XC リリースパッケージに含まれています。
- speak-icon-fonts-1.1.0.tgz
- speak-ng-bcl-2.0.0-r00116.tgz
- speak-styling-1.0.0-r00110.tgz
- 上記ファイルをコピーした場所で、以下のコマンドを実行します。
npm install speak-icon-fonts-1.1.0.tgz
npm install speak-ng-bcl-2.0.0-r00116.tgz
npm install speak-styling-1.0.0-r00110.tgz
npm install @sitecore/bizfx
npm installを実行します。これにより、必要なnpmモジュールがインストールされ、フォルダnode_modulesが追加されます。
npm installビジネスツールのconfig.jsonをデプロイメント構成に合わせて設定する
npmのインストールが完了したら、src\assetsフォルダにあるconfig.jsonファイルを開きます。
BizFxUriを除き、BizFxサイトインスタンスと同じ設定に更新します。以下の設定では、BizFxUri が http を指していることに注意してください。
{
"EnvironmentName": "HabitatAuthoring",
"EngineUri": "https://localhost:5000",
"IdentityServerUri": "https://xp10.IdentityServer",
"BizFxUri": "http://localhost:4200",
"Language": "en",
"ContentLanguage": "en",
"Currency": "USD",
"ShopName": "CommerceEngineDefaultStorefront",
"LanguageCookieName": "selectedLanguage",
"ContentLanguageCookieName": "selectedContentLanguage",
"EnvironmentCookieName": "selectedEnvironment",
"AutoCompleteTimeout_ms": 300,
"AccessTokenUpdateInterval_ms": 300000
}開発環境の起動
重要!
SitecoreBizFxサイトは4200ポートをリッスンしているため、サイトを停止します。次のステップでは、解凍したSDKフォルダからサイトをリッスンします。
以下のPowershellコマンドを実行します
ng server
http://localhost:4200/ でブラウザを開くと、Sitecoreクライアントの認証情報を入力するように求められます。
このサイトは安全な接続を提供できません
このエラーが発生する理由は、ID サーバーが http で BizFx サイトをサーバーするように構成されていないためです。
Sitecore Identity Server の構成を更新する
インストールされた Identity Server インスタンスから Sitecore.Commerce.Identity ServiceHost.xml を開きます。
AllowedCorsOriginGroup1 に http://localhost:4200 を追加します。
<AllowedCorsOrigins>
<AllowedCorsOriginsGroup1>http://localhost:4200</AllowedCorsOriginsGroup1>
</AllowedCorsOrigins>
コマースエンジンの設定を更新
- CommerceAuthoringサイトのwwwrootフォルダからconfig.jsonを開く。
- AppSettingsのAllowedOriginsを更新して、http://localhost:4200。
- 設定が変更されているので、オーサリングサイトに変更が適用されるようにブートストラップを行う必要があります。
- IISを再起動します。オプションとして、Commerce Authoringサイトを再起動することもできます。
開発環境からビジネスツールを実行する
http://localhost:4200/ でブラウザを開く
